[HTML] div flessibile con span

Andrea Crocco

Utente Attivo
27 Apr 2016
77
0
6
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Puoi provare dando alla classe up fontawesome-thumbs-up una larghezza auto
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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

Utente Attivo
27 Apr 2016
77
0
6
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>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Ora ho visto come ti viene per capire il problema bisogna che tu mi faccia vedere come deve venire
 

Andrea Crocco

Utente Attivo
27 Apr 2016
77
0
6
Come il pulsante non mi piace in parte al pulsante mi piace....un pulsante normale con in mezzo uno span
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
A me sembra che il contenuto dello span sia all'interno del div
 

Andrea Crocco

Utente Attivo
27 Apr 2016
77
0
6
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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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

Utente Attivo
27 Apr 2016
77
0
6
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

Utente Attivo
27 Apr 2016
77
0
6
i1109250_Immagine.png
 
Discussioni simili
Autore Titolo Forum Risposte Data
A inserire variabile php colore in div html PHP 2
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 3
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1
F [HTML] pagina non scorre e div sotto l'altezza del browser non si vedono HTML e CSS 3
M [HTML] Inserire un div tra altri div già esistenti HTML e CSS 7
giannit [HTML] Mettere div al posto di iframe e possibile? HTML e CSS 9
M [HTML] DIV all'interno di un altro DIV HTML e CSS 3
F [HTML] Div in scroll insieme alla pagina HTML e CSS 0
S [HTML] Effetto hover in un div HTML e CSS 6
zorro [HTML] 'bucare ' un div HTML e CSS 10
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
S [HTML] spostare div se quello adiacente è vuoto HTML e CSS 6
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
A [WordPress] [HTML] Link in div con z-index inferiore WordPress 1
F [HTML] Centratura Div HTML e CSS 3
F [HTML] Scalare un div ma non il suo contenuto HTML e CSS 1
F [HTML] Inserire testo all'interno di una div con border radius HTML e CSS 2
felino Shortcode e HTML Div WordPress 3
felino [HTML] DIV menu fisso durante lo scroll HTML e CSS 5
P caricare dati all'interno di un tag div html HTML e CSS 15
C in un file html/javascript caricare i div presenti nel body in un file di testo e richiamarli Javascript 7
N [PHP+HTML+CSS] Problema con un div HTML e CSS 4
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0

Discussioni simili