jQuery height change not working in Safari - javascript

I have a JS feature on the following site that is working just fine in Firefox but not in Safari: http://rossbolger.com/kids/light-stories/
The feature slides out a grid of thumbnails called #image-thumbs when the mouse hovers over the container called #hit-area. It works (at least in Firefox) by first changing #image_thumbs height from '48px' to 'auto', the height is then measured using jQuery's height(). This height is stored in a variable and then using jQuery's css() it is given back to the #image-thumbs when the mouse is over.
The code on the site looks a little something like this:
// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');
// Slide Up Thumbs
(function revealThumbs() {
// On hover let the thumbs become their full height
$('#image-thumbs #hit-area').hover(function(){ // Mouse over
// Get the unrestricted height of the thumbs
thumbs.css('height', 'auto');
thumbs_height = thumbs.height();
// then put it back to what it was so we can animate it using CSS3 transition
thumbs.css('height', 'inherit');
// delay 0.1s before triggering the change in height (time for the calculations to complete)
setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );
}, function(){ // Mouse out
hideThumbs();
});
})();
// Hide thumbs
function hideThumbs(){
thumbs.css('height', thumbs_original_height );
};
The reason for measuring the unrestricted height and passing it back as a pixel value, rather than simply setting the height to 'auto', is to create a sliding effect via CSS3 (i.e. transition: height 0.5s). The transition only takes place if the affected attribute goes from one numeric value to another.
Thanks for any help bug testing this. I haven't even looked at other browsers yet.
All the best,
Laurence

Okay, so I've worked it out...
In the javascript document (scripts.js on the site) there was a function higher up the page calling the hideThumbs() function. So it wasn't working because the variables in hideThumbs() hadn't been declared at that point. Funny that it should still work in Firefox and IE9!
I've moved all this code to a point before that other function and the problem is now resolved. So far I've only done this locally. I'll update the site in the link above later.

Related

On scroll animation issue on small screens using Vanilla JS

I’ve created an animation for my website to change a certain element (for example its background colour) while scrolling using Vanilla JS. For this I have used the window.onscroll property and I trigger the animation when window.scrollY reaches a specific position, my code is:
window.addEventListener('scroll', () => {
if (window.scrollX >= 1000) {
box.style = "background:red"
}
})
It looks great when I am editing on my big screen resolution, but if I look at the page on my laptop, the animation gets messed up because the innerWidth and innerHeight of the screen are different. I want to trigger the animation dynamically if it reaches a certain section of the page without having to worry about the scroll position.
Does anyone have any ideas about how I can fix this?
I think using getBoundingClientRect() solves your problem.
You basically do something like this:
var my_box = document.getElementById('my-box');
var rect = my_box.getBoundingClientRect();
The rect variable now contains an Object which includes a top and a left property with values that are relative to the viewport.
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

orientation change VS jquery events

The website: http://negativgraffiti.hu/uj/
If you jumps from one page to another, every page has a different height, but they are all in one div, just they are not visible all the time.
I'm resizing the parent div everytime to the current page's height (not the full code, just a sample):
var magassag = jQuery("#post-5");
var egymagas = jQuery(".elsofo").height();
if (i == 1) {
magassag.animate({
height: egymagas
}, 100 );
}
it's working fine, but when i test it on tablet/mobile the height is ruins when i change the orientation, and i don't know why.
Use $(window).on('resize', fn) to detect window resizing.
$(window).on('resize', function() {
// re-animate the height for the current page
});
Although this works fine for tablet resizing, it will be very inefficient for desktop users who are resizing the window with their mouse. It is good to throttle the resize callback for that reason.
// Use `throttle` from any of the various throttle libraries available.
$(window).on('resize', throttle(function() {
// re-animate the height for the current page
}));

How to give navigation 100% width in pixels upon resize?

So basically, I am attempting to use jQuery to give my navigation bar (Bootstrap navbar) a 100% width, but in pixels.
Of course, this has to be determined every time the browser/window is resized.
I came up with this, although it is extremely buggy. It uses the starting width of 'nav' as 'navsize', and upon resize of the window, navsize still stays the same.
$(document).on('ready', function () {
$(window).on('resize', function () {
var navsize = $('nav').width();
$('nav').css('width', navsize);
}).trigger('resize');
});
I have also tried var navsize = $('nav').innerWidth(); which was also no good.
The function is definitely being called upon resize since I have tested with console.log()
For all those who are wondering why I am doing this, I am using StickyJS to make my navigation scroll with the page. Although, since it is using 100% width, upon scrolling it becomes much smaller since the nav leaves its container.
This should work
$(document).on('ready', function () {
$(window).on('resize', function () {
$('nav').css('width', 'calc(100% + 1px - 1px)' );
console.log( $('nav').width() );
/// Use following ONLY if you specifically want to set the width in pixel
$('nav').width($('nav').width());
}).trigger('resize');
});
the console.log will have your width in pixel. Means whenever in future you will read the width , it will be in pixel.
calc(100% + 1px - 1px) converts the width and sets in px units, which we can read later on.
Are you sure that $('nav') exists?
I've done some testing using a basic bootstrap page and a slightly change of your code works.
Navigate to this page and open the console inspector.
http://getbootstrap.com/examples/starter-template/
paste the following code and you will see that the .navbar width will be logged on window resize.
$(window).on('resize', function () {
var navsize = $('.navbar').width();
console.log(navsize)
});
Cheers.
It'd be easier with the supporting HTML and CSS, but I will venture a guess based on the behavior alone.
Best Guess
It sounds like one of these options is likely.
you meant to use #nav, .nav, div.nav, etc and don't actually mean to select a "nav" element
your "nav" element is not display inline-block|block, which occurs in some browsers
you are using the "nav" tag in a browser that doesn't support it (IE 8)
your JS library doesn't support the "nav" tag
Alternative
Use JS to relocate your nav into the body (at the appropriate scroll depth) and give your html , body, and nav tags width 100%
Hope that helps.

How to solve element flicker while scrolling with parallax effect in JavaScript?

I am trying to re-create website with parallax effect using JavaScript. That means that I have two or more layers, that are moving different speeds while scrolling.
In my case I'm moving only one layer, the other one remains static:
layer 1 = website text;
layer 2 = element background;
for this I'm using simple source code (with jQuery 1.6.4):
var docwindow = $(window);
function newpos(pos, adjust, ratio){
return ((pos - adjust) * ratio) + "px";
}
function move(){
var pos = docwindow.scrollTop();
element.css({'top' : newpos(pos, 0, 0.5)});
}
$(window).scroll(function(){
move();
});
The Problem:
- All calculations are done right and the effect "works" as expected. But there is some performance glitch under some browsers (Chrome MAC/Windows, Opera MAC, IE, paradoxically not Safari).
What do I see during scrolling?
- While scrolling the background moves in one direction together with scroll, but it seems to occasionally jump few pixels back and then forth, which creates very disturbing effect (not fluid).
Solutions that I tried:
- adding a timer to limit scroll events
- using .animate() method with short duration instead of .css() method.
I've also observed, that the animation is smooth when using .scrollTo method (scrollTo jQuery plugin). So I suspect that there is something wrong with firing scroll events (too fast).
Have you observed the same behavior?
Do you know, how to fix it?
Can you post a better solution?
Thanks for all responses
EDIT #1:
Here you can find jsfiddle demonstration (with timer): http://jsfiddle.net/4h9Ye/1/
I think you should be using scrollTop() instead and change the background position to fixed. The problem is that setting it to absolute will make it move by default when you scroll up or down.
The flicker occurs because the position is updated as part of the default browser scroll and updated again as part of your script. This will render both positions instead of just the one you want. With fixed, the background will never move unless you tell it so.
I've created a demo for you at http://jsfiddle.net/4h9Ye/2/ .

A bit of problem with implementing a modal dialog

I am developing a modal dialog as a part of a web application. There is one thing that's been of a puzzle to me. Please watch a movie clip that I just uploded at http://inter.freetzi.com/example/. I feel strongly that I have to accompany my question with a video because this is the case when it's better to see once, than to hear 100 times.
(It could be vertical scrolling, or both vertical and horizontal at the same time. But I am using horizontal scrolling in my example, so watch for it.)
Here's about my question:
Width of the transparent mask affects the width of the page itself. But in Opera, for exemple, every time the window gets resized, the page gets width that is at most close to 'true'. While in IE, once the transparent mask has affected the width, afterwards the page remembers it and stays with it. What is the problem and how to settle it? How to make IE behave the way Opera does?
In my project, I do the following:
//curViewpointW and curViewpointH are current width and height of the viewpoint (current is meant to be the moment of the resize event)
oMask.style.width = curViewpointW + 'px';
oMask.style.height = curViewpointH + 'px';
var pageWH = getPageWH(); //getPageWH() is a function that gets current width and height of the page (with scrolling if there is any)
var curPageW = pageWH[0];
var curPageH = pageWH[1];
if (curPageW > curViewpointW) {
oMask.style.width = curPageW + 'px';
}
if (curPageH > curViewpointH) {
oMask.style.height = curPageH + 'px';
}
But IE ignores that somehow...
P.S. It's jQuery in my example, so many of you may have used its dialog before.
Have you looked into setting an onresize event handler that will adjust your mask dimensions when the window is resized? If you are using Prototype, you can set up such a handler unobtrusively like this:
Event.observe(document.onresize ? document : window, "resize", function() {//dostuff});
courtesy of the Roberto Cosenza blog

Categories

Resources