I was hoping to use jQuery to change two CSS values.
I need to resize a Youtube videos iframe width and height on the fly
then a user resizes the browser window.
Here is my code:
function resizeWP( width, height ) {
$( "#1" ).text( "RESIZING webpage" );
var layer_width = $( "#red" ).width();
var layer_height = $( "#red" ).height();
var string_width = layer_width.toString();
var string_height = layer_height.toString();
$("#2").text(string_width);
$("#3").text(string_height);
$("iframe").css({"width":"1250px","height":"800px"});
}
$( window ).resize(function() {
resizeWP();
});
I am almost there.
Just need some help getting over the top.
Thanks in advance.
Change $("iframe").css({"width":"1250px","height":"800px"}); to $("iframe").css({"width": layer_width + "px","height": layer_height + "px"});.
However, it would be better to do this with CSS.
I hope I understood you correctly.
Related
I have two divs "#sidebar-wrapper" and ".j1". I am finding the height of ".j1" on window load, j1 changes size according to its content, now I have to apply this height to "#sidebar-wrapper".
I have tried this
var currentHeight = 0;
$(window).load(function() {
//get the natural page height -set it in variable above.
currentHeight = $('.j1').outerHeight();
console.log("set current height on load = " + currentHeight);
$("#sidebar-wrapper").resize(currentHeight);
});
I don't know what to use to set height of "#sidebar-wrapper".
Try to use next code example in order to get and set attributes cause may be your $("#sidebar-wrapper") is not exists yet(length 0 in jquery object):
document.addEventListener('DOMContentLoaded', function() {
currentHeight = $('.j1').outerHeight();
console.log("set current height on load = " + currentHeight);
$("#sidebar-wrapper").css('height',currentHeight );
console.log($("#sidebar-wrapper").height());
}, false);
Have you tried to change the CSS attribute height of #sidebar-wrapper?
JsFiddle
$("#sidebar-wrapper").css("height", currentHeight);
.resize method seems to be an event triggered when changing the size of your window. You can find more information about the resize event here: Resize Event.
$( window ).resize(function() {
$( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});
I need to set the CSS property of width as the same size as the browser's current width. To do this, I did var setWidth = $(window).width(), but I don't know how to apply this to my current code, which is something like this:
$(document).ready(function(){
$("#backgroundImg").css("width", "");
});
Is there any way to do this? I'm new to JQuery so I might just be really amateur.
Try this
$(document).ready(function() {
var setWidth = $(window).width();
$("#backgroundImg").css("width", setWidth + 'px');
});
or you can use $.width
$(document).ready(function() {
$('#backgroundImg').width( $(window).width() )
});
update code to following
$("#backgroundImg").css("width", setWidth + "px");
One option: $("#backgroundImg").css("width","100%");
with your variable option do: var setWidth = $(window).width() +'px';
so your code would be
$(document).ready(function(){
$("#backgroundImg").css("width", setWidth);
});
This should make the background match the browser's current width:
$( "#backgroundImg" ).width( setWidth )
Source
I have a page www.redpeppermedia.in/tc24_beta/ it works fine over 980px resolution but as you bring it down to 768px, the CSS and media queries change the layout of it, but once you are in the 768px and you refresh the page, everything becomes as I want, the layouts fix itself. And now if you try to resize it to more than 768px you need to refresh again so as the layout fixes..
I mean is there a better way to do it... or can anyone help me with this refreshing and reloading thing..
Thank You so much though :)
$( window ).width()take a tour of window.resize in jquery :
var old_size = $( window ).width();
$( window ).resize(function() {
if(old_size > 768 && $( window ).width() < 768){
window.location.reload();
}
old_size = $( window ).width();
});
I found out this amazing script that did my work:
$(document).ready(function(){
var ww = $(window).width();
var limit = 768;
function refresh() {
ww = $(window).width();
var w = ww<limit ? (location.reload(true)) : ( ww>limit ? (location.reload(true)) : ww=limit );
}
var tOut;
$(window).resize(function() {
var resW = $(window).width();
clearTimeout(tOut);
if ((ww>limit && resW<limit) || (ww<limit && resW>limit) ) {
tOut = setTimeout(refresh, 100);
}
});
});
I am trying to set the margin of my wrapper dynamically. Here is my JavaScript code:
var w = window.innerWidth;
if (w > 800) {
var margin = (w - 800) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert(output);
}
But when I open the page, the alert says undefined !?
In addition to my previous answer, which shows it working, there is this fail-safe.. this is a different approach that must always work. I suspect your page is not loaded when the code is run:
http://jsfiddle.net/digitalextremist/xfVdL/1/
$( document ).ready( function() {
var w = window.innerWidth;
var maxWidth = 300
if ( w > maxWidth ) {
var margin = (w - maxWidth) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert( output );
}
});
Or, if you use jQuery Mobile:
$( document ).on( 'pagebeforeshow', function( event ) {
var w = window.innerWidth;
var maxWidth = 300
if ( w > maxWidth ) {
var margin = (w - maxWidth) / 2;
$('.ui-page').css('margin-left', margin);
var output = $('.ui-page').css('margin-left');
$('.ui-footer').css('margin-left', margin);
$('.ui-header').css('margin-left', margin);
alert( output );
}
});
It is critical that you let the page load first before testing sizes as you are doing.
What you are doing is correct, but jQuery and jQuery Mobile render the page in stages. To make sure you take your measurement of .ui-page at the right time, once everything is properly loaded by jQuery or jQuery Mobile, you need to make sure it all rendered first, which means you need to use $( document ).on( 'pagebeforeshow' ) for jQuery Mobile, or $( document ).ready() for jQuery itself. These make sure your code runs after the page is fully rendered. Before that, your measurements will be wrong! And before that, .ui-page might not even exist yet, if it is added by jQuery Mobile.
Here is more information for you:
When should I use jQuery's document.ready function?
jQuery: Why use document.ready if external JS at bottom of page?
http://learn.jquery.com/about-jquery/how-jquery-works/
http://www.w3schools.com/jquerymobile/event_pagebeforeshow.asp
http://jquerymobile.com/demos/1.1.0/docs/api/events.html
Try setting the margin with a unit; something like:
$('.ui-page').css('margin-left', margin + 'px');
Also, you can use margin: 0 auto; to have your div's center themselves within the page. See MDN for some details.
It looks like your query for .ui-page is returning no elements.
Therefore, when trying to retrieve the margin-left property, it returns undefined.
Try checking whether whether .ui-page actually exists on the page.
A quick way to do this:
if ( $('.ui-page').length > 0 ) alert('.ui-page exists!');
What version of jQuery are you using? And what browser?
Without changing your code really at all, it works fine under version 1.10.1
( It also works under every other version... on Chrome and Firefox )
See what I mean? http://jsfiddle.net/digitalextremist/xfVdL/
So, it does work... No "px" required.
I am using the functionality from the "Thumbnail Grid with Expanding Preview" tutorial (like everyone else it would seem O_o) I have it all working pretty much the way I want, except that instead of div.og-expanded expanding to the full height of the page, I'd like div.og-expanded to expand only to the size of the content within the container instead.
I'm using the latest code from Github.
The height of div.og-expanded seems to be controlled by calcHeight : function in grid.js
calcHeight : function() {
var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
itemHeight = winsize.height;
if( heightPreview < settings.minHeight ) {
heightPreview = settings.minHeight;
itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
}
this.height = heightPreview;
this.itemHeight = itemHeight;
},
setHeights : function() {
var self = this,
onEndFn = function() {
if( support ) {
self.$item.off( transEndEventName );
}
self.$item.addClass( 'og-expanded' );
};
this.calcHeight();
this.$previewEl.css( 'height', this.height );
this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
if( !support ) {
onEndFn.call();
}
},
As I said, instead of using the window size to get the height, I'd like to base it off of the content height of div.og-expander-inner. I saw a similar question "Expanding preview (calcHeight : function)" The solution calculated the height based on the content of (what is essentially) div.og-fullimg or div.og-details whichever is taller. This is a decent solution as it took the responsiveness of the content into consideration, which is important to me. Unfortunately, I couldn't sort out how to apply this solution to the original source code.
Any help here would be greatly appreciated.