2012-08-08 17 views
5

Questo codice è stato passato a me. Rende il mio iframe impostato al 100% dell'altezza dello schermo:jQuery regolazione altezza iframe

jQuery(document).ready(function(){var height = $(window).height(); 
      $('iframe').css('height', height) 
     }); 

Sono nuovo di javascript. Come posso modificare questo codice per impostarlo al 90% in altezza anziché al 100%? Inoltre, questo codice ha come obiettivo tutti gli iframe, esiste un modo per renderlo indirizzato a un iframe specifico (dal suo ID o dal suo valore NAME)? Puoi giocare con questo codice qui se lo desideri: http://jsfiddle.net/VurLy/

risposta

9

Moltiplica del 90%?

jQuery(document).ready(function() { 
    var height = $(window).height(); 
    $('iframe').css('height', height * 0.9 | 0); 
}); 

Come per il targeting per ID o il nome, semplicemente passare il selettore appropriato $ anziché 'iframe'.

+0

si può spiegare cosa si intende con adeguate selettore a $ invece di 'iframe'? Puoi scrivere un esempio funzionante? Nota che sono nuovo per la codifica ... –

+2

@HenrikPetterson: passa il selettore CSS che si applica al tuo elemento. Ad esempio, '$ ('# some-element')' selezionerebbe l'elemento con 'id' di' some-element'. – Ryan

+3

@HenrikPetterson Ecco la documentazione di Jquery. (si noti anche il link completo delle regole del selettore CSS) http://api.jquery.com/category/selectors/ –

2
jQuery(document).ready(function(){ 
    $('#YOUR_FRAME_ID_HERE').css('height', '90%') 
});​ 
+1

Questo non ha funzionato, ho aggiunto l'ID dell'iframe ma non ha fatto nulla per l'iframe. –

+1

Ho provato il tuo esempio e non ha funzionato, sentiti libero di vederlo da solo: jsfiddle.net/VurLy/1 –

+0

Quando ho eseguito http://jsfiddle.net/VurLy/1/, e cliccato sul link, ha caricato il iFrame al 90% dell'altezza. Cosa non funziona? – mittmemo

0

in jQuery è possibile identificare quali elemtents si desidera molti modo diverso, più popolare è dal id come questo $ ('# paletta') o per classe, come questo $ ('scoop.') - se la classe è stata paletta

in modo che sia il modo di identificare l'iFrame specifico che si desidera, quindi modificare l'altezza come questo

jQuery(document).ready(function() { 
    var height = $(window).height(); 
    $('#scoop').css('height', '90%'); 
}); 
+0

Ho provato il tuo esempio e non ha funzionato, sentiti libero di vederlo da solo: http://jsfiddle.net/VurLy/1/ –

+0

hai l'altezza impostata in HTML "style = ... height =" 100% "> questo sovrascriverà qualsiasi css –

+0

puoi davvero impostarlo al 90% ed evitare jQuery è davvero di più per cambiare dinamicamente l'altezza, non solo impostandolo su document.ready –