I'm working through a Lynda.com tutorial on responsive web experience. My Javascript is mostly working. From the instructor the goal of the JS is "we are determining the windowWidth based on the window outerWidth." Then we output that info and whether the screen is small, medium or large (the #media breakpoints).
As in, "945 (931+14) is large". My work so far is live with it.
The problem is that 'large' isn't changing to 'medium' and then 'small' as the window width changes.
Thanks!
If it's helpful, here's a codepen with all the HTML/CSS code. And here's the JS.
/* JavaScript Document */
var windowSize = '';
var windowWidth = 0;
var actualSize = 0;
$(document).ready(function () {
checkBrowserSize();
loadHero();
});
function checkBrowserSize() {
windowWidth = window.outerWidth;
var contentWidth = $('body').width();
var sizeDiff = windowWidth - contentWidth;
actualSize = windowWidth - sizeDiff;
if (actualSize > 800) { newWindowSize = 'large'; }
if (actualSize <= 800 && actualSize > 500) {newWindowSize = 'medium'; }
if (actualSize <= 500){ newWindowSize = 'small'; }
$('h1').html(windowWidth +' ('+contentWidth+'+'+sizeDiff+')'+' is '+newWindowSize);
}
function loadHero() {
$('#hero').load('content/hero_content_large.html');
}
Your problem is that the function only runs once on document ready. You have to bind your function to an onresize event so the function runs every time the resize event gets triggered (read about event handlers)
Here is a JavaScript example: http://www.w3schools.com/jsref/event_onresize.asp
And here is a jQuery example:
http://www.w3schools.com/jquery/event_resize.asp
Related
I want to change the menu text automatically when resizing the window to 768px or lower.
Any solution for that?
The code below doesn't work.
function menu() {
let w = window.outerWidth;
let y = document.getElementById("home");
if (w <= 768) {
y.innerText = "Menu";
} else {
y.innerText = "Home";
}
}
menu();
The above code works, you probably just need to call it whenever the resize event fires. Ex, if the above code is in a a function called "menu":
function menu(){
let w = window.outerWidth;
let y = document.getElementById("home");
if (w <= 768) {
y.innerText = "Menu";
} else {
y.innerText = "Home";
}
}
window.onresize = menu;
That said, though, it makes much more sense to do this with CSS media queries.
I have some javascript being fired when the screen reaches certain widths... I am trying to make it mobile responsive and need it to fire at different points on different devices...
var screenWidth = window.innerWidth;
if (screenWidth <= 812 && screenWidth > 414) {
$(window).scroll(function() {
var fromTopPxFirstBgChange = 2300;
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > fromTopPxFirstBgChange) {
$('body').addClass('secondBg');
}
else {
$('body').removeClass('secondBg');
}
});
}
if (screenWidth <= 414 && screenWidth > 375) {
$(window).scroll(function() {
var changeBg = 2190;
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > changeBg) {
$('body').addClass('secondBg');
}
else {
$('body').removeClass('secondBg');
}
});
}
if (screenWidth <= 375 && screenWidth > 320) {
$(window).scroll(function() {
var changeBgImage = 2380;
var scrolledFromtop = $(window).scrollTop();
if (scrolledFromtop > changeBgImage) {
$('body').addClass('secondBg');
}
else {
$('body').removeClass('secondBg');
}
});
}
So for the first one for example, I would like the screen to apply those changes at 414-812px.
Basically the background image is supposed to change when I am scrolled to the position on the page that I specified in each if statement (the class "secondBg" is a class I specified in the CSS with the new background image... I don't know if this is a JS error or a problem with other code. It seems to work uniform when I just have one if statement but when I add the three they sort of work and overwrite one another. I think the if statements are pretty clear and cannot see the problem.
You shouldn't be binding your listeners inside the if statements. You should instead have 1 listener and do checks inside like so:
$(window).scroll(function() {
if($(window).scrollTop() < 500) {
// Your code here
}
// add more checks here
});
Also, I'd throttle that as it's a really heavy operation. Take a look at this.
I have a sidebar that becomes position:fixed when the bottom of the div is visible (followed this tutorial). My problem is I only need the JS to work if the screen size is more than or equal to 1025px.
I know I need something along the lines of if($(window).width() > 1025), but I can't figure out where that needs to be. I'm not great with JS so any help would be appreciated.
Demo
JS
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 100;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, add the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px');
}
else
{
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top','315px');
}
});
}
}
This should work:
var flag = false;
// This will keep on checking for window size while you are scrolling.
$(window).on("scroll", function() {
if (flag){
// Do whatever you want here
alert("hey");
}
});
$(window).on("resize", function() {
if ($(window).width() >= 1025){
flag = true;
} else {
flag = false;
}
})
From my comment: Just put that if($(window).width() > 1025) inside the function provided to the scroll event.
e.g.
$(window).scroll(function (event) {
if ($(window).width() > 1024) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
} else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/3w5dt/31/
Notes:
not that 1 PX matters, but you did say > 1024px, hence changing 1025 to 1024 :)
First of all you should have a look at the jQuery documentation. The $.browser function was removed in jQuery 1.9. This can end up in serious problems in your code.
Just add something like the follwing code in the first if condition:
if (!msie6 && $('.leftsidebar').offset()!=null && $(window).width() > 1025 ) {
...
}
That should be all. If you want, that javascript should react on window resize just add something like the following
$(window).on('resize', function( event ) { /* code here */ }).trigger('resize');
if(screen.width >= 1024)
{
$(window).scroll(function (event) {
//Write your function code here
});
}
I hope it will help you.
Im trying to fire a function once on resizing. The problem is the conditional statements are not being executed everytime for some reason. the code is
var old_width= $(window).width();
$(window).on('resize.3col',function(e){
clearTimeout(timer);
timer=setTimeout(function(){
var nw= $(window).width();
if((nw <= old_width) && (nw <= '940') && (nw >= '915') ){
appendList('resize.3col');
}
old_width= nw;
} , 500);
});
the reason im using settimeout is because I want to get the new width, if I dont use it the new width is the same as old width which I don't want. If I dont use settimeout, the conditions work.
EDIT:
the conditional statements fire sometimes at other times they do not. How do I make it more smooth?
Try this code and see if there is any difference:
var $win = $(window),
oldWidth= $win.width(),
winResized = function(){
var newWidth= $win.width();
if (
newWidth <= oldWidth &&
newWidth <= 940 &&
newWidth >= 915
){
appendList('resize.3col');
}
oldWidth = newWidth;
},
timer;
$win.on('resize.3col',function(e){
clearTimeout(timer);
timer = setTimeout(winResized, 500);
});
I was using the same timer variable for calling the resize event with different namespaces '3col', '4col' and '5col'. Also I added if(timer) clearTimeout(timer); which improved the functionality. Thanks :)
I really need some help with this, I dont know javascript well at all to be honest, a friend of mine put some of this together a few months ago ive just added $contentContainer and added these variables but I just need one more thing added to if for it to suite my needs...
<script type="text/javascript">
// DOM Container Resize Handler
var adjustStyle = function() {
var winWidth = $(window).width(),
width = parseInt(winWidth),
container = $('body .fixed');
contentContainer = $('body .content');
if (width >= 1454) {
container.css('width','1454px');
contentContainer.css('width','1210px');
} else if ((width < 1454) & (width >= 1212)) {
container.css('width','1212px');
contentContainer.css('width','968px');
} else {
container.css('width','970px');
contentContainer.css('width','726px');
}
};
$(function() {
var filterWrap = $("#filterWrap"),
offset = filterWrap.offset(),
topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
filterWrap.stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
filterWrap.stop().animate({
marginTop: 0
});
};
});
// DOM Container Resize Handler - Initialization
$(window).resize(function() {
adjustStyle();
});
adjustStyle();
});
</script>
I need to modify this script to search through the document and IF document DOES NOT contain ('body .asideContent') to add 252px to the object contentContainer.css method
Don't worry about the fileerWrap function this works fine :)
I really appreciate the help
Should be something like this :)
if($("body.asideContent").length === 0){
var width = contentContainer.css('width');
contentContainer.css('width',width + 252 + "px");
}