Why is this difference in calculations? JQuery - javascript

i have this site:
link
There is a difference when you call function in document.ready calculation or resize function
There is a white border when the page loads calculation is not correct ...
$( document ).ready(function() {
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
$(window).on('resize',function(){
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga-resize:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta-resize:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total-resize:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
});
Basically I used the same code and document.ready but also according to resize and unfortunately goes.
I did manual calculation on a 1366 px and ought to get a 669px width (good value) and I am 657px sites.
Does anyone know why this difference appears to 12px?
Thanks in advance!

You must be using Windows as OS aren't you?
The problem is that on load, you have a scrollbar.So when you are making you calculs, some element have a smaller width. Later, the scrollbar dispear and the white gap appear.
Quick fix would be to add overflow:hidden on the body then make your calculs. Afterward, you can remove the overflow hidden.
Note that the problem also appear when you resize the window below a certain height.

-edit
The issue lies with the .right node max-width property disabling this causes the page to load the dimensions correctly however the algorithm with the node resizing is not being run correctly on document ready.
The page loads correctly after re-sizing the page.
My best guess for this next issue is that the OP did not provide enough code to fully diagnose his issue; but, i am positive that the code on ready is not executing correctly.
Run each variable in console and edit your question to provide the answers please.
Onload values:
window: 1903
custom2.js:89
stanga: 260
custom2.js:91
dreapta: 609
custom2.js:93
total: 1034
After resize:
window: 1918
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1044
custom2.js:154
window: 1920
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1046
Your resize event is being triggered twice, thats a problem of its own, but eventually it resolves the correct values.

You might need to load the background image asynchronus, catch an event when loading is done, and then make calculations. Like so:
$(document).ready(function() {
asyncLoad('.yourElement');
});
$(window).resize(function() {
doCalculations('.yourElement');
});
var asyncLoad = function(elem) {
var imgCSS = elem.css('background-image');
var imgSrc = imgCSS.replace('url(', '').replace(')', '');
$('<img/>').attr('src', imgSrc).load(function() {
$(this).remove();
elem.css('background-image', imgCSS);
doCalculations(elem);
});
});
var doCalculations = function(elem) {
var windowsize = $(window).outerWidth();
var stanga = jQuery('#secondary').outerWidth();
var dreapta = jQuery('.right').outerWidth();
var contentwh = windowsize-stanga-dreapta;
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
You might need to change the function to catch an array of images and do something when the last is done loading, but I hope the idea of 'Async loading' is well explained.
As explained HERE the function loads an image, and then it uses the same image as background-image for your element, and the browser is smart enough to not load that image twice.

Related

Why getComputedStyle returns 'auto' for slider's width after page-reload?

Here a link: wbrapist.github.io/slider/index.html
First time when you loading page, it's fine (getComputedStyle returns valid value). But just try to reload page by Ctrl+F5, wait for a few seconds then just reload by F5 and you'll see that navigation of slider not at center position. In this moment you can open the browser's console and see that getComputedStyle after reload (F5) returns just 'auto' value. Why is this happening? Why after force reload (ctrl+f5) it's okay and in otherwise case is not?
Can notice: in that case my slider's switch slides animation is not working too. (there getting values via getComputedStyle() too)
Here a bit of code:
var sliderWidth = getComputedStyle(document.getElementsByClassName('slider')[0]).width;
function setSliderNavPosition() {
var nav = document.querySelector('.slider .navigation');
var navWidth = parseFloat(getComputedStyle(nav).width);
var slidersWidth = parseFloat(sliderWidth);
nav.style.left = ( (slidersWidth / 2) - (navWidth / 2) ) + 'px';
}
This trouble exist in Chrome and Mozilla at least.
It's a bad idea to use the document when it's not fully loaded. Depending on the time it takes to load it, your values are going to be different. That's why you get different behaviors.
To solve this, just wait for the document to be loaded by wrapping your code like this:
window.addEventListener('load', function(){
/* ...YOUR CODE GOES HERE... */
});

window width only showing when resizing viewport, not on load - jquery

Trying to get viewport width on page load and when resizing browser window. For some reason the width isn't being outputted on page load. Any idea what the issue is and/or how to resolve?
function mobileViewUpdate() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth > 776) {
$("area[data-toggle]").click(function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$(".detail-box").hide();
$(".detail-box"+selector).show().addClass('animated fadeIn');
});
}
}
$(window).on('load, resize', mobileViewUpdate);
There is no need of , as separator. Separation by space will work . Please refer this link for more informaton
$(window).on('load resize', mobileViewUpdate);
I guess you are calling this function within a ready function, in that case window has already loaded and so the window load event has already been called.
Attaching the load event handler at that point will never be called.

Trouble with Javascript in Wordpress

I'm trying to create an element in a Wordpress site where a piece of content begins partway down the screen, and sticks to the top of the screen when the user scrolls down.
I've tried various things, and none of them have worked. The most recent attempt uses Javascript to give and take away a class to the content I'm trying to move/fix.
The code is
jQuery( document ).ready(function($) {
alert( "test1!" );
var wrap = $("#wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
alert("test2");
} else {
wrap.removeClass("fix-search");
}
});
});
The file is enqueuing properly since the first test alert ("test1" fires, but "test2" doesn't fire as I scroll down the screen. I've had that same piece of code working in a modified version of the original code on codepen (http://codepen.io/anon/pen/NqKKVN) so I can only assume this is something weird with Wordpress interacting with Javascript.
So yeah, anyone know a way to either do that I'm wanting to do in a way that will work with wordpress, or to get the above piece of code working properly?
EDIT: This has been solved. For the reference of anyone else with the same problem the piece of code that eventually worked was
jQuery( document ).ready(function($) {
var scrollTop = $(window).scrollTop();
function scrollUpdate() {
var scrollTop = $(window).scrollTop();
var wrap = $("#menu-all-pages");
if (scrollTop > 147) {
wrap.addClass("fix-search");
console.log("Menu at top");
} else {
wrap.removeClass("fix-search");
console.log("Menu at set point");
}
console.log(scrollTop);
}
window.onscroll = scrollUpdate;
});
I have implemented a similar solution in my blog a few years ago. I got it working by scripting this way:
Add a variable scrollTop which would contain the value in pixels
scrolled from the window top.
var scrollTop = $(window).scrollTop();
See, I use jquery function scrollTop applied to the selected object "window". It would return the value scrolled from the very top of the browser. It does work on Wordpress, I have tried it on my blog.
Put this code in a function scrollUpdate. We'll call it later to update
the scroll value from top
function scrollUpdate() {
var scrollTop = $(window).scrollTop();
}
The function should also contain all the logic checking the scrollTop value and thus applying styles and etc.
Let's make this function be called on every scroll.
window.onscroll = scrollUpdate;
Try it yourself!
P.S. I got a weird feeling, but you should better use hide / show instead of adding a whole css class to the page.

Checking if window size has changes and performance/optimalization

today I'm implementing slider plugin and I have one question about it:
I want to make it responsive, but to achive that (depending on my current implementation) I should add another function which will detect if browser window size has changed - and here's my question - is it good for overall performance? Or maybe I should re-think about my solution and try to build it with pure css?
The browser resize is only temporary and personally I don't see the big hassle for a slight hiccup in that phase.
Since you refer to jquery, you can just add
$(window).resize(function() { ... });
Add it withing the document ready, and you will do good to call it one on load. Just do
$(window).resize();
As far as performance, you are correct that every little addon will have effect on the performance, but only when it is active. When the window is not resized, teh event does not get fired.
<div id="resized"></div>
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
$(window).on("resize", display);
or using javascript
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
window.addEventListener("resize", display, false);
on jsfiddle

Disable Browser Window Resize

For starters... I have no sinister intention of subjecting users to popups or anything like that. I simply want to prevent a user from resizing the browser window of a webpage to which they've already navigated (meaning I don't have access to / don't want to use window.open();). I've been researching this for quite a while and can't seem to find a straightforward answer.
I felt like I was on track with something along the lines of:
$(window).resize(function() {
var wWidth = window.width,
wHeight = window.height;
window.resizeBy(wWidth, wHeight);
});
...to no avail. I have to imagine this is possible. Is it? If so, I would definitely appreciate the help.
Thanks
You can first determine a definite size.
var size = [window.width,window.height]; //public variable
Then do this:
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});
Demo: http://jsfiddle.net/DerekL/xeway917/
Q: Won't this cause an infinite loop of resizing? - user1147171
Nice question. This will not cause an infinite loop of resizing. The W3C specification states that resize event must be dispatched only when a document view has been resized. When the resizeTo function try to execute the second time, the window will have the exact same dimension as it just set, and thus the browser will not fire the resize event because the dimensions have not been changed.
I needed to do this today (for a panel opened by a chrome extension) but I needed to allow the user to change the window height, but prevent them changing the window width
#Derek's solution got me almost there but I had to tweak it to allow height changes and because of that, an endless resizing loop was possible so I needed to prevent that as well. This is my version of Dereck's answer that is working quite well for me:
var couponWindow = {
width: $(window).width(),
height: $(window).height(),
resizing: false
};
var $w=$(window);
$w.resize(function() {
if ($w.width() != couponWindow.width && !couponWindow.resizing) {
couponWindow.resizing = true;
window.resizeTo(couponWindow.width, $w.height());
}
couponWindow.resizing = false;
});
If need some particular element to handle resize in some particular mode, and prevent whole window from resizing use preventDefault
document.getElementById("my_element").addEventListener("wheel", (event) =>
{
if (event.ctrlKey)
event.preventDefault();
});

Categories