2012-08-08 29 views
5

Este código me fue pasado. Hace que mi iframe ajustado a la altura del 100% de la pantalla:jQuery que ajusta la altura del iframe

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

Soy nuevo en javascript. ¿Cómo puedo editar este código para que se ajuste al 90% de altura en lugar de al 100%? Además, este código se dirige a todos los iframes, ¿hay alguna manera de hacerlo objetivo a un iframe específico (por su ID o valor de NAME)? Puede jugar con este código aquí si lo desea: http://jsfiddle.net/VurLy/

Respuesta

9

¿Multiplicarlo en un 90%?

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

En cuanto a la orientación por ID o nombre, sólo tiene que pasar el selector apropiado $ en lugar de 'iframe'.

+0

¿puede usted explicar lo que quiere decir con el selector apropiado $ en vez de 'iframe'? ¿Puedes escribir un ejemplo de trabajo? Tenga en cuenta que soy nuevo en la codificación ... –

+2

@HenrikPetterson: Pase el selector de CSS que se aplicaría a su elemento. Por ejemplo, '$ ('# some-element')' seleccionaría el elemento con el 'id' de' some-element'. – Ryan

+3

@HenrikPetterson Aquí está la documentación de Jquery. (tenga en cuenta el enlace completo de las reglas del selector CSS también) http://api.jquery.com/category/selectors/ –

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

Esto no funcionó, agregué el ID del iframe pero no le hizo nada al iframe. –

+1

Probé su ejemplo y no funcionó, siéntase libre de verlo usted mismo: jsfiddle.net/VurLy/1 –

+0

Cuando ejecuté http://jsfiddle.net/VurLy/1/, y hice clic en el enlace, se cargó el iFrame al 90% de la altura. ¿Qué no funciona? – mittmemo

0

en jQuery se puede identificar qué elemtents desea mucho manera diferente, más popular es por el id como esto $ ('# primicia') o por clase, como esto $ ('cuchara'.) - si la clase fue primicia

de manera que es la forma de identificar el marco flotante específico que desea, a continuación, cambiar la altura como esto

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

Probé su ejemplo y no funcionó, no dude en verlo usted mismo: http://jsfiddle.net/VurLy/1/ –

+0

tiene la altura establecida en el HTML "style = ... height =" 100% "> esto anulará cualquier css –

+0

, realmente puede establecerlo allí al 90% y evitar jQuery es más para cambiar dinámicamente la altura, no solo para configurarla en document.ready –

Cuestiones relacionadas