[HTML] div flessibile con span

Andrea Crocco · 9 Mar 2017

salve a tutti... volevo chiedervi se esiste un modo per rendere flessibile un div con al suo interno uno span...
lo span contiene un id che richiama una funzione js che incrementa un valore... mi piacerebbe che quando supera la lunghezza del div, che esso si allunghi per far stare l'intero span dentro di esso.
Ecco il codice:

HTML:

<div class="up fontawesome-thumbs-up" id="update_value"> <div> <span id="value"></span> </div> </div>

Grazie in anticipo

Max 1 · 9 Mar 2017

Puoi provare dando alla classe up fontawesome-thumbs-up una larghezza auto

Andrea Crocco · 10 Mar 2017

okay funziona...però mi compare così il div:
www.mondo-tech.it/prova2/liketel.php
non so il motivo

Max 1 · 10 Mar 2017

Mah! Potrebbe essere un effetto degli script visto così non si capisce molto fai qualche prova spostando anche il richiamo a jquery nell'head

Andrea Crocco · 10 Mar 2017

Non va comunque...
Ecco l'intero codice:

HTML:

<html>
<head>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Montserrat);
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body{
  background:#304653;
}

.container{
  border-radius:10px;
  height:90px;
  margin:50px auto;
  overflow: hidden;
  position: relative;
  width:390px;
}

.valore1{
       font-family: "Roboto", Times, serif;
        color: #34a534;
        left: 60px;
        top: 11px;
}


.up,.down{
  border-radius:10px;
  background:rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.5);
  float:left;
  font-size:20px;
  line-height:45px;
  text-align:left;
  padding-left: 20px;
  transition:all .2s linear;
  width:auto;
}

.down{margin-left:60px;}

.spann{
    width: 5px;
    height: 0px;
    padding-left: 34px;
}

.check{
  background:#f65330;
  border-radius:10px;
  color:#fff;
  cursor:pointer;
  font-size:50px;
  height:100%;
  line-height:90px;
  position: absolute;
  padding-left:20px;
  right:-320px;
  transition:all .2s linear;
  width:100%;
}

.check:after{
  content:'Mark Complete';
  font:35px/90px 'Montserrat';
  font-style:italic;
  height:100%;
  padding-left:20px;
}
.down:after{
font-family: FontAwesome;
 content: "\f088";
 }

.up:after{
font-family: FontAwesome;
 content: "\f087";
 }

.up:hover{
  background:#2ecc71;
  color:#fff;
  cursor:pointer;
}

.down:hover{
  background:#e74c3c;
  color:#fff;
  cursor:pointer;
}

.ok{
  background: #30c3bb;
  right: -20px;  
}
.scaleDown{
  transform:scale(0);
}

</style>
</head>
<body>
<div class="container">
<div class="up fontawesome-thumbs-up" id="update_value"> <div class="valore1"> <span id="value"></span> </div> </div> 
<div class="down fontawesome-thumbs-down" id="update_value2"><div class="spann"> <span id="value2"></span></div> </div>  <div class="valore2" style="position: absolute"> <span id="value2"></span></div>
</div>
<?php if (isset($_COOKIE['like'])) {
    echo "ceeeeeeeeee";
}
?>

<script>
   
// Mostra il valore indicato
    function show_value(data) {
        if (data.error == false) {
            var container = $('#value'); // decido dove visalizzare
            container.html(JSON.parse(data.value));
        }
        else {
            alert(data.error);
        }
    }
   



        // Mostra il valore al caricamento dall pagina
        $('#value').ready(function () {
            $.get("controller.php", show_value);
        });


        // Associa il click alla lettura e stampa della variabile
        $('#read_value').click(function () {
            $.get("controller.php", show_value);
        });


        // Associa il click all'incremento e stampa della variabile
        $('#update_value').click(function () {
            $.post("controller.php", { incrementa: "true" }, show_value);
        });
       
        // Mostra il valore al caricamento dall pagina
        $('#value').ready(function () {
            $.get("controller.php", show_value);
        });
        </script>
        <script>

// Mostra il valore indicato
    function show_value2(data) {
        if (data.error == false) {
            var container = $('#value2'); // decido dove visalizzare
            container.html(JSON.parse(data.value));
        }
        else {
            alert(data.error);
        }
    }
   
        /**********************************************
                        NON MI PIACE
        **********************************************/
       
        // Associa il click alla lettura e stampa della variabile
        $('#read_value2').click(function () {
            $.get("controller2.php", show_value2);
        });


        // Associa il click all'incremento e stampa della variabile
        $('#update_value2').click(function () {
            $.post("controller2.php", { incrementa: "true" }, show_value2);
        });
        // Mostra il valore al caricamento dall pagina
        $('#value2').ready(function () {
            $.get("controller2.php", show_value2);
        });
    </script>
</body>
</html>

Andrea Crocco · 11 Mar 2017

cos'ho sbagliato?

Max 1 · 11 Mar 2017

Ora ho visto come ti viene per capire il problema bisogna che tu mi faccia vedere come deve venire

Andrea Crocco · 11 Mar 2017

Come il pulsante non mi piace in parte al pulsante mi piace....un pulsante normale con in mezzo uno span

Max 1 · 11 Mar 2017

A me sembra che il contenuto dello span sia all'interno del div

Andrea Crocco · 12 Mar 2017

Si...vorrei che lo span sia dentro il div cosi l utente non clicca lo span al posto del pulsante...non so se mi spiego

Andrea Crocco · 14 Mar 2017

Ce qualcuno?

Andrea Crocco · 16 Mar 2017

Mi piacerebbe avere una risposta prima della prox sett grazie

Max 1 · 16 Mar 2017

Il problema è che noi vediamo il contenuto dello span dentro il div e non capiamo come dovrebbe essere (perdona almeno io non capisco forse sono rincitrullito), tu continui a scrivere che lo span deve essere dentro al div ma non ti spieghi molto bene e non si capisce.

Andrea Crocco · 16 Mar 2017

io vorrei fare in modo che lo span all'interno del div pulsante sia contenuto dentro esso..cosi se ci sono milioni di mi piace il div si allarga

Andrea Crocco · 16 Mar 2017

[HTML] div flessibile con span

Andrea Crocco

Utente Attivo

Max 1

Super Moderatore

Andrea Crocco

Utente Attivo

Max 1

Super Moderatore

Andrea Crocco

Utente Attivo

Andrea Crocco

Utente Attivo

Max 1

Super Moderatore

Andrea Crocco

Utente Attivo

Max 1

Super Moderatore

Andrea Crocco

Utente Attivo

Andrea Crocco

Utente Attivo

Andrea Crocco

Utente Attivo

Max 1

Super Moderatore

Andrea Crocco

Utente Attivo

Andrea Crocco

Utente Attivo

Discussioni simili

[HTML] div flessibile con span

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency