Come attivare un'operazione di show o hide in base alla dimensione div quando il browser viene ridimensionato

Question

Sto progettando un contenitore di riepilogo per la pagina autore in un sito Web di pubblicazione di libri. Alcuni autori hanno più contenuti di riepilogo, mentre altri hanno meno contenuti. Voglio abilitare/disabilitare il pulsante Mostra più/meno dinamicamente quando l'altezza del contenitore div attraversa un'altezza di taglio (180px). Quindi, risulta controllare l'altezza del contenitore div in modo dinamico (180px e altezza originale). Ho bisogno di un pezzo di codice che funzioni perfettamente su tutti i browser.

Ho un codice implementato qui:

http://jsfiddle.net/rraagghhu/9dgs6432/3/

HTML:

<div class = "container"> 
<div class="info-wrapper"> 
<div class="info"> 
Chetan Bhagat is the author of six blockbuster books.These include five novels—Five Point Someone (2004), One Night @ the Call Center (2005), The 3 Mistakes of My Life (2008), 2 States (2009), 
Revolution 2020 (2011), the non-fiction title What Young India Wants (2012) and Half Girlfriend (2014). Chetan’s books have remained bestsellers since their release. 
Four out his five novels have been already adapted into successful Bollywood films and the others are in process of being adapted as well. The New York Times called him the ‘the biggest selling English language novelist in India’s history’. Time magazine named him amongst the ‘100 most influential people in the world’ and Fast Company, USA, listed him as one of the world’s ‘100 most creative people in business’. Chetan writes columns for leading English and Hindi newspapers, focusing on youth and national development issues. He is also a motivational speaker and screenplay writer. Chetan quit his international investment banking career in 2009 to devote his entire time to writing and make change happen in the country. He lives in Mumbai with his wife, Anusha, an ex-classmate from IIM-A, and his twin boys, Shyam and Ishaan. You can email him at info@chetanbhagat.com or fill in the Guestbook with your feedback. You can also follow him on twitter (@chetan_bhagat) or like his Facebook fanpage (https://www.facebook.com/chetanbhagat.fanpage). 
</div> 
<a href="#" class="more">(more)</a> 
<a href="#" class="less">(less)</a> 
</div> 

<div class = "footer"> THIS IS FOOTER </div> 
</div> 

CSS:

.container{ 
    background-color: yellow; 
} 
.footer{ 
    background-color: yellow; 
} 
.info-wrapper { 
    height: auto; 
    position: relative; 
    width: auto; 
    padding: 0 0 2.5em 0; 
    background-color: red; 
} 
.info { 

    max-height: 180px; 
    height: auto; 
    width: auto; 
    overflow: hidden; 
    position: relative; 
    text-align: justify; 
} 
.info:after, .aftershadow { 
    bottom: 0; 
    width: auto; 
    height: auto; 
} 

.info-wrapper a { 
    left: 50%; 
    position: relative; 
    font: 700 .67em/1.25em Arial; 
    text-align: center; 
    text-decoration: underline; 
    cursor: pointer; 
} 
.less { height: auto; display: none; } 
.more { display: none; } 

Jquery:

if($(".info")[0].scrollHeight > $(".info").height()) { 
     $("a.more").show(); 
    } 

    $("a.more").click(function(e){ 
     e.preventDefault(); 
     $(".info").css({"overflow": "visible"}); 
     $("a.less").show(); 
     $("a.more").hide(); 
     return false; 
    }); 

    $("a.less").click(function(e){ 
     e.preventDefault(); 
     $(".info").css({"overflow": "hidden"}); 
     $("a.more").show(); 
     $("a.less").hide(); 
     return false; 
    }); 

Come si può vedere, il piè di pagina rimane nella posizione assoluta. Se viene premuto il pulsante più, il (meno) dovrebbe scendere, al di sotto dovrebbe essere il piè di pagina. È possibile abilitare/disabilitare il pulsante mostra più/meno dinamicamente quando il browser viene ridotto/espanso?

Answer 1

Impostare la max-height-100% per l'esposizione di più e impostare il cui spettacolo max-height a 180px meno.

Updated JSFiddle

Answer 2

Non è necessario il overflow per sempre essere indicato, invece basta aumentare la max-height-100%.

$("a.more").click(function(e){ 
    e.preventDefault(); 
    $(".info").css({"max-height": "100%"}); 
    $("a.less").show(); 
    $("a.more").hide(); 
    return false; 
}); 

Ho aggiunto anche qualche pad in modo da poter vedere il testo un po 'più facilmente.

Updated fiddle

Questo è davvero un'altra domanda, ma utilizzando innerHeight invece di height è possibile rilevare se il testo è pieno di l'imbottitura sulla finestra di ridimensionamento:

$(window).resize(function(){ 
    if($(".info")[0].scrollHeight > $(".info").innerHeight()) { 
     $("a.more").show(); 
    } 
}); 

Ho anche posizionato il meno/di più pulsante assolutamente nella parte inferiore della finestra di informazioni per sovrapporre qualsiasi testo che potrebbe estendersi nel padding:

.info-wrapper a { 
     left: 0; bottom: 0; 
     width: 100%; 
     background: red; 
     position: absolute; 
     font: 700 .67em/1.25em Arial; 
     text-align: center; 
     text-decoration: underline; 
     cursor: pointer; 
     line-height: 20px; 
} 

Il codice completo è this fiddle

Answer 3

Non si sta rimuovendo l'altezza massima dal CSS e questo è ciò che sta causando il problema.Si possono fare due cose qui:

1. entrambi i casi è possibile impostare la max-height a 100%

2. o, è possibile impostare il max-height in un'altra classe CSS e aggiungere e rimuovere quella classe alle informazioni div dinamicamente

Creare uno stile css:

.restrict{ 
    max-height: 180px; 
} 

Al clic di più:

$(".info").removeClass('restrict'); 

Al clic di meno:

$(".info").addClass('restrict'); 

Vedi il mio violino a forcella con le modifiche:

https://jsfiddle.net/jdnf5vka/4/

Answer 4

Sì, è possibile attivare e disattivare il pulsanti mentre il browser viene ridimensionato.

Avrai bisogno di costruire il tuo javascript come questo:

// make your function re-usable 
var buttonChecker = function() { 
    // show/hide buttons logic here 
} 

// bind the function to the resize event (note, no parenthesis for calling the function here, it's just a reference passed in that is then called when the resize event is triggered) 
$(window).on('resize', buttonChecker); 

// call your function on page load so the buttons are correctly shown then (note, parenthesis are used, function is called 
buttonChecker(); 

In questo modo quando il browser viene ridimensionata la la funzionalità del pulsante/nascondi mostra verrà nuovamente chiamato.

PS - questo è l'esempio degli OP corretto: http://jsfiddle.net/9dgs6432/20/ - prendere nota del contenuto della funzione buttonChecker() e della logica da nascondere oltre che mostrare.