I am aware of how stupid this sounds...
I'm trying to re-size an iframe. Here's what I have:
function doTwitterHeight(screenwidth)
{
if(!screenwidth){
var screenwidth = window.innerWidth;
console.log('screenwidth is now defined as: ' + screenwidth);
}
if(screenwidth >= 981){
$('#twitter-widget-0').css('height',466);
}
else if(screenwidth <= 980 && screenwidth >= 952){
$('#twitter-widget-0').css('height',614);
}
else if(screenwidth <= 951 && screenwidth >= 877){
$('#twitter-widget-0').css('height',632);
}
//etc.
else{
$('#twitter-widget-0').css('height',468);
}
}
The function works when called with resize, like so:
$(window).on('resize', function(){
doTwitterHeight();
});
But I also need the function to be called and re-size the height of that div when the page is first loaded. I've tried:
$(window).on('load', function() {
doTwitterHeight();
});
And:
$(document).ready(function(){
doTwitterHeight();
});
And:
$(doTwitterHeight());
And I've had no luck with any of them.
Thanks in advance :)
So the resolution was to modify the code that twitter provide for the iframe embed. By using the advice found at: Twitter Embedded Timeline Callback
I've now fixed the problem by replacing:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
with:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
i.e. by adding:
js.setAttribute('onload', "twttr.events.bind('rendered',function(e) {doTwitterHeight()});");
You can try this:
$(window).on('load resize', doTwitterHeight).resize(); // <---trigger it on load
or as per your code piece:
$(window).on('resize', function(){
doTwitterHeight();
}).resize(); // <-----this triggers the resize on page load.
Related
I need a query to check the viewport width each time the document is ready or whenever the viewport gets resized. The reason is that I want the main navigation to look and behave differently for different viewport widths.
//EventListener to get viewport width on load
window.addEventListener("load", function () {
window.loaded = true;
});
//get Window Size on Resize
var width = $(window).width();
$(window).on('resize', function reportWindowSize() {
if ($(this).width() != width) {
width = $(this).width();
console.log(width);
}
});
Then I think I need a query like this:
If (page loaded OR viewport width changes) {
if (viewport width > x) {
do things
} else if (viewport width < x) {
do other things
}
};
What would be a good way to form If (page loaded OR viewport width changes) into a JavaScript or jQuery expression?
As Terry pointed out in his comment, you can create a function and reuse it in each of the scenarios that you need it.
I.E.
function checkWidth() {
let windowWidth = $(window).width();
let maxWidth = 1000;
if(windowWidth < maxWidth) {
// do your stuff
}
}
$(document).ready(function() {
checkWidth();
});
$(window).on('resize', function() {
checkWidth();
});
Another solution would be to use Media Queries inside JS.
You can watch for a media query as you would in CSS with the following code:
if (matchMedia) {
let mq = window.matchMedia("(min-width: 500px)");
mq.addListener(checkWidth);
checkWidth(mq);
}
// media query change
function checkWidth(mq) {
if (mq.matches) {
// do your stuff
}
}
You need to call checkWidth after adding the event listener in order to ensure that it executes when the page is loaded.
I got this example from: https://www.sitepoint.com/javascript-media-queries/
im trying to switch a background image out based upon the window size...
https://codepen.io/anon/pen/qYdZox
function resize(){
var dbg = $('.full-screen-banner').data('dbg');
var mbg = $('.full-screen-banner').data('mbg');
if ($(window).width() < 768) { console.log('less than');
$(".full-screen-banner").css('background-image', mbg);
} else {
$(".full-screen-banner").css('background-image', dbg);
}
}
resize();
$(window).on('resize', resize);
Im using the above, the console log works fine but the inline style wont change?
You need to do something like this, where you use url(...) with the image source path
$(".full-screen-banner").css('background-image', 'url('+dbg+')');
i want to stop a jquery script when window size is smaller than 500px
can you help me.
i have tried to write a var from 0 to 1 when window size is smaller than 500px
and then add this with a if() function. it doesn't work.
the script that i want to stop running:
[jsfiddle][1]
thx for your help!
ehm yeah stackoverflow i want to text here 10000 words to describe my problem - so sorry i can describe
[1]: http://jsfiddle.net/fg5dcuzm/1/
You can use resize() function:
$(window).resize(function() {
var w = $(window).width();
if (w < 500) {
// stop script
}
});
Or you can run your script only if window is bidder that 500px:
$(window).resize(function() {
var w = $(window).width();
if (w > 500) {
yourFunction();
}
});
$(window).resize(function() {
if($('body').width()<500){
alert('dont do it');
}else{
alert('do it');
}
});
Maybe this helps.
Sorry I haven't reviewed your code well to know why Javascript is not working, but I sometimes hack such things with Css.
Using "!important" will make javascript styles not work when the window width is smaller than 500px:
#media (max-width: 500px) {
.two, .one {
left: 0 !important;
}
}
<html>
<head>
</head>
function () {
var viewportWidth = $(window).width();
if (viewportWidth < 700) {
$('#wrapper').load('A.html');
};
<body>
<div id="wrapper">
<h1>original</h1>
</div>
</body>
</html>
I thought that something like this function might do it with A.html being only
<h1>small</h1>
But I can't figure it out.
Thanks for any help offered
Try to use the resize event:
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth < 700) {
$('#wrapper').load('A.html');
};
});
Yes you can do that.Have a look at the following code snippet :
$(document).ready(function() {
$(window).resize(function() {
var widthCurr=$( window ).width();
if(widthCurr<=360 && widthCurr>276)
{
$('#sample-div').html( "<p>All new content. <em>You bet!</em></p>" );
}
else if(widthCurr<=276)
{
$('#sample-div').html( "<p>I am smaller. <em>You bet!</em></p>" );
}
else if(widthCurr>360)
{
$('#sample-div').html( "<p>Back to original</p>" );
}
});
});
In the above example as the width of the window changes,you change the content of the div. Similarly you can have a condition for height.To get the height you need to use :
var viewportHeight = $(window).height();
Finally
$(window).resize
This is triggered when the size of the window/viewport changes.
Also if the content to be changed is very small,you should use .html and not .load
Hope this helps
I'm not sure how to use the order of the window events load and resize on jQuery to make it work when resizing. The first function is used to get the total width except the scrollbar width, because the CSS is using the device width, but the JS is using the document width.
The second function adds a style when the total screen width is between 768px and 1024px, and it should work when I load the page at any screen, after resizing, etc. I'm doing a lot of tests and I think the problem is about the window events order.
For being more specific about the problems, it doesn't remove the style when I load the page at 900px and I expand it to > 1024px! Or by the contrary, it doesn't add the style when I load the page at 1300px and I shorten the width to 900px.
I think it's 'cause of the load and resize events order, but I'm not totally sure. Or maybe I'm not doing the correct declaration of the variable into the resize.
The code:
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
$(document).ready(function(){
var vpwidth=$(window).width();
$(window).on('resize', function(){
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});
I believe the issue is that you're not re-calculating the vpwidth on resize, So the value you got when the page was loaded will be used every time window is resized.
try
$(document).ready(function(){
$(window).on('resize', function(){
var vpwidth=$(window).width(); // get the new value after resize
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});
The issue is because you are not recalculating the width (vpwidth) on resize function.
It is initialized and set on page load itself and hence doesn't change when the window is resized causing the style to not be added or removed.
You need to re-assign the value to the variable from within the resize function.
$(window).on('resize', function(){
var vpwidth=$(window).width();
}
Demo Fiddle