How do I display the OLX site's phone number?

Navigation
6

In OLX, the advertiser number is partially visible and only after you click "View number", the full number is displayed.

How do I do this in JavaScript?

    
asked by anonymous 14.02.2017 / 16:44

4 answers

20

One of several ways to do this is to keep the whole number in a data- attribute and put this value in place of the "cut" number when the user clicks a button.

Example:

Pure Javascript 

document.getElementById('ver-numero').addEventListener('click', function(){
  var telefone = document.getElementById('telefone');
  var numeroCompleto = telefone.getAttribute('data-numero-completo');
  telefone.innerHTML = numeroCompleto;
});
<div id="telefone" data-numero-completo="(51)88991-9889">(51)88991...</div>

<button id="ver-numero">Ver número</button>

With jQuery

Note: I left a version with jQuery because, on impulse, I wrote first using jQuery. 

$('#ver-numero').on('click', function(){
  var telefone = $('#telefone');
  var numeroCompleto = telefone.data('numero-completo');
  telefone.html(numeroCompleto);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="telefone" data-numero-completo="(51)88991-9889">(51)88991...</div>

<button id="ver-numero">Ver número</button>
    
14.02.2017 / 17:05
2

I know it's in javascript , but I decided to do it in css :) 

.telefone {
  width :90px;
}

.overflow {
  white-space: nowrap;
  width: 100%;                   
  overflow: hidden; 
  text-overflow:    ellipsis;
}

.overflow:active {
   overflow: visible;  
}
<div class="telefone">
  <p class="overflow">(44) 9 9945-1558</p>
</div>

Source: css-text-overflow

    
14.02.2017 / 17:52
0

I made an option using only CSS with <label> and input[type="checkbox"]

Just click the number to show it complete. The cool thing about this technique is that you can easily style the number before and after the click if you wish. 

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 24px;
}

label {
    width: 120px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background-color: lightcoral;
    text-overflow: ellipsis;
    cursor: pointer;
}
input:checked + label{
    display: inline;
    background-color: lightblue;
}
input[type="checkbox"]{
    display: none;
}
<input type="checkbox" id="teste">
<label for="teste">(31) 9998-9990</label>
    
16.02.2018 / 13:23
-1

This is done by displaying or hiding a div via javascript. In case of this site that you passed just take a look at the code you find the following code: 

$("#show_phone").click(function(){
$("#hidden_phone").hide();
$("#visible_phone").show();
...

Take a look at in this tutorial >

    
14.02.2017 / 17:01
TransactionScopeOption what's the difference between the options? Function equivalent to trim (function to remove extra spaces at the beginning and end) in python?