dynamic margin based on jQuery window.width() - javascript

I have a little problem with a jQuery function. I need to add a margin to some element when the window.width is < 580px and i need to remove it when the window.width is larger. Here is the problem, the first part of the function work well, not the second.
var Wwidth= $(window).width();
if ( Wwidth < 582) {
$( window ).resize(function() {
var nWwidth=$( document ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
});
}
else {
$( window ).resize(function() {
$('.hub-item').css('margin-left','0px');
});
}
I have no mystakes in the console but the margin are not to 0.
Thanks u all!
EDIT :
Correct code :
$(window).resize(function() {
var Wwidth= $(this).width();
if (Wwidth < 582) {
var nWwidth=$( window ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
}
else {
$('.hub-item').css('margin-left','0px');
}
});
Thanks all!

You need to put your if statement within the $(window).resize() function, and recalculate Wwidth every time:
$(window).resize(function() {
var Wwidth = $(this).width();
if (Wwidth < 582) {
...
}
else {
...
}
});

Related

How to Disable / Re-enable Javascript on window resize?

I need to be able to disable / re-enable Javascript on window resize?
Currently when the window is resized on the desktop, the nav bar sticks and is the only thing visible instead of the content.
<script>
if ( $(window).width() <= 1200 ) {
}else{
$('nav').addClass('original').clone().insertAfter('nav').addClass('cloned').css('position','fixed').css('top','0').css('margin- top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
th',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}
</script>
You can bind an event handler to the "resize" JavaScript event:
$(window).resize(function() {
if($(window).width() <= 1200) {
//You code here
}else {
//You code here
}
});
Your code will be executed whenever the browser window's size is changed.
$(window).resize(function() {
if($(window).width() <= 1200) {
//small screen code
}else {
//large screen code }
});
//trigger window resize event on load
$(window).trigger('resize');
you can do it by checking the window width
var winWidth = $(window).width(); // you can get the window width from this
//Then check with the condtion(compare with your need ex :)
if(winWidth <= 600)
{
//your work here
alert("window resize less than or equal to 600");
}
else
{
//your work here
alert("window resize greater than to 600");
}

same height of multiple li in javascript

i am new in javascript. its working fine if we refresh the page but its not working when we resize the window.
$(window).load(function(){
equl_height();
});
$(window).resize(function(){
equl_height();
});
function equl_height () {
var highestBox = 0;
$('ul li').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('ul li').height(highestBox);
}
window.addEventListener("resize", equl_heigh);
cheers!
Problem is in how you measure height of an li. use scrollHeight instead of height(). Check this fiddle.
Update your equl_height method with
function equl_height () {
console.log( "resizing" );
var highestBox = 0;
$('ul li').each(function(){
//var height = $(this).outerHeight();
var height = $(this)[0].scrollHeight;
if(height > highestBox){
highestBox = height;
}
});
$('ul li').outerHeight(highestBox);
}
Also, since resize event can be fired at a higher rate so try this throttling trick as well.

JQuery: Change width on window resize always becomes 0

I am trying to change the width of a div element on window resize but due to the resize function the width of the element is always 0 in the end
function resizeUploadField() {
var uploadInputField = $('.input-append');
var uploadSelectButton = $('.btn-file');
var uploadRemoveButton = $('.fileupload-exists');
if (uploadRemoveButton.length) {
}
console.log(uploadInputField.width());
uploadInputField.width(uploadInputField.width() - uploadSelectButton.outerWidth() - 2);
console.log(uploadInputField.width());
}
$(document).ready(function() {
var windowWidth = $(window).width();
resizeUploadField();
$(window).resize(function(event) {
console.log($(event.target).width());
if ($(event.target).width() != windowWidth) {
resizeUploadField();
windowWidth = $(event.target).width();
}
});
The resizeUploadField function seems to work properly since the field is properly resized when called in onDocumentReady
Maybe someone can give me a hint what is going wrong
Try to redeclare the windowWidth = $(window).width(); inside the resize() function.
E.g.
$(document).ready(function() {
var windowWidth = $(window).width();
resizeUploadField();
$(window).resize(function(event) {
windowWidth = $(window).width();
console.log($(event.target).width());
if ($(event.target).width() != windowWidth) {
resizeUploadField();
windowWidth = $(event.target).width();
}
});
});
Hope it helps.

How to toggle class after 100vh scroll

How to make this function add the class after scrolling 100vh?
Currently it adds the class after 850px.
$("document").ready(function($){
var nav = $('#verschwinden');
$(window).scroll(function () {
if ($(this).scrollTop() > 850) {
nav.addClass("doch");
} else {
nav.removeClass("doch");
}
});
});
100vh in jQuery is simple as $(window).height() while in pure JavaScript is window.innerHeight or a bit more longer.
jsFiddle demo
jQuery(function($) {
var $nav = $('#verschwinden');
var $win = $(window);
var winH = $win.height(); // Get the window height.
$win.on("scroll", function () {
if ($(this).scrollTop() > winH ) {
$nav.addClass("doch");
} else {
$nav.removeClass("doch");
}
}).on("resize", function(){ // If the user resizes the window
winH = $(this).height(); // you'll need the new height value
});
});
you can also make the if part a bit shorter by simply using:
$nav.toggleClass("doch", $(this).scrollTop() > winH );
demo

how to access a global variable in javascript?

consider this example:
/**/
var sizes;
$(window).resize(function() {
var viewportWidth = $(window).width();
//var viewportHeight = $(window).height();
if (viewportWidth > 1024) {
sizes = '320';
} else if (viewportWidth < 1024) {
sizes = '300';
}
}); /**/
jQuery(document).ready(function($) {
console.log(sizes);
$('#full_width_anything_slider').anythingSlider({
delay: sizes
});
});​
how can i have access to the sizes var inside the other method?
right now it doesn't work
thanks
sizes has no value associated with it when your document onReady function executes. In fact it will not have a value until your onResize function executes.
as long as the posted code is not wrapped in a function your declaration is global.
However if your viewportWidth is exactly 1024 sizes is never set. so do something like this:
sizes won't have a value until resize is called so set the value when you declare it and reset it when the window is resized
var sizes = $(window).width() <= 1024 ? '300' : '320';
$(window).resize(function() {
var viewportWidth = $(window).width();
sizes = $(window).width() <= 1024 ? '300' : '320';
});
be aware that global variables in general is a bad idea. In your case you might as well do
$(function() {
$('#full_width_anything_slider').anythingSlider({
delay: $(window).width() <= 1024 ? '300' : '320';
});
});​
note the first part of the code will not really work with the way you are using it since, the value is passed to anythingSlider when the document is loaded and will not change when the window is resized (it's a value not a reference). The second part won't solve this problem either but repeating the code in window.resize like below will
var setupSlider = function()
$('#full_width_anything_slider').anythingSlider({
delay: $(window).width() <= 1024 ? '300' : '320';
});
});​
$(function(){
setupSlider();
});
$(window).resize(setupSlider);
You are correctly declaring a global variable, however what you are passing into anythingSlider is a snapshot of what the value is, not a reference to a variable that contains that value. Changing the global variable will not change the delay of anythingSlider unless you re-initialize anythingSlider with the new value every time you change it (on resize)
It doesn't need to be global anyway.
$(window).resize(function() {
var sizes = '0';
var viewportWidth = $(window).width();
//var viewportHeight = $(window).height();
if (viewportWidth >= 1024) {
sizes = '320';
} else if (viewportWidth < 1024) {
sizes = '300';
}
$('#full_width_anything_slider').anythingSlider({
delay: sizes
});
});
$(document).ready(function(){
$(window).trigger("resize");
});
Note however i can't find any documentation on re-initializing this plugin or changing it's options, I'm not sure if this is the correct way to re-initialize it.
This isn't very good practice... but:
/**/
$(window).resize(function() {
updateSize();
}); /**/
function updateSize() {
var viewportWidth = $(window).width();
//var viewportHeight = $(window).height();
if (viewportWidth > 1024) {
sizes = '320';
} else if (viewportWidth <= 1024) {
sizes = '300';
}
}
jQuery(document).ready(function($) {
updateSize();
console.log(sizes);
$('#full_width_anything_slider').anythingSlider({
delay: sizes
});
});​
I assume (and hope) you'll be using sizes at a later time as well?

Categories