overflow-y: scroll causing issues with JQuery - javascript

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/

Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

Related

Forcing a layer repaint

I have a kiosk application running on Ubuntu server 14.04.3 and chrome. Currently I have some code which hides the mouse if there was no movement for 2 seconds and once the user attempts to move the mouse again it shows up again. The trick is by using a cursor:none and adding an overlay:
js:
var body = $('body');
function hideMouse() {
body.addClass("hideMouse");
body.on('mousemove', function(){
if(window.hiding) return true;
window.hiding = true;
body.removeClass("hideMouse");
$('div.mouseHider').remove();
clearTimeout(window.hideMouse);
window.hideMouse = setTimeout(function(){
body.addClass("hideMouse");
$('<div class="mouseHider"></div>').css({
position: 'fixed',
top: 0,
left: 0,
height: '100%',
width: '100%',
zIndex: 99999
}).appendTo(body);
redraw(document.body);
setTimeout(function(){
window.hiding = false;
}, 100);
}, 4000);
});
}
function redraw(e) {
e.style.display = 'none';
e.offsetHeight;
e.style.display = 'block';
}
css:
body.hideMouse *, body.hideMouse{
cursor: none;
}
body.hideMouse *{
pointer-events: none !important;
}
This code works perfectly fine but there is only 1 caveat. When the page first loading it attempts to hide the mouse with the same trick but the mouse is still sticking there since it just didn't repainted the layer I guess. If I want it to work, I have to move the mouse a little bit and from then on it will work as expected and hide the mouse. The thing is that the kiosk application is restarting every day which means I boot the X display again and the mouse is being reset to the middle of the screen and it just sticks there until I move it a little bit. I hope you understand what I mean.
Do you guys have any idea how I can fix this?
You don't need all that code to do what you want. You could do:
Create a setTimeout to hide the cursor after 2s as soon as the page is loaded
When someone moves the mouse, you:
2.1. Show the cursor again
2.2. Clear the current setTimeout
2.3. And create the setTimeout to hide the cursor after 2s again.
The code below should work for you:
document.addEventListener('DOMContentLoaded', function() {
var cursorNone = document.getElementById('cursor-none');
var t = setTimeout(hideMouse, 2000);
document.addEventListener('mousemove', function(e) {
showMouse();
clearTimeout(t);
t = setTimeout(hideMouse, 2000);
});
function hideMouse() {
cursorNone.classList.remove('hidden');
}
function showMouse() {
cursorNone.classList.add('hidden');
}
});
#cursor-none {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
cursor: none;
background-color: transparent;
}
.hidden {
display: none;
}
<body>
<div id="cursor-none" class="hidden"></div>
</body>

Retain css float when using jQuery animate to slide left

I am having css issues when using jQuery's animate. I have tried a few methods to get this working but to no avail. Basically all I'm trying to do is have a side bar slide left and right via a click event but it seems the css (float) is causing issues. I know exactly the problem but not sure how to exactly fix it. Rather than me trying to explain the problem i have reproduced it with jsfiddle: http://jsfiddle.net/70hq1ky2/
The main content(article) seems to dip for milliseconds because it has the float style.
<a href='#' class='slide-side'>Slide</a>
<div style='clear:both;'></div>
<aside data-side-bar="open"></aside>
<article></article>
$('.slide-side').click(function (e)
{
var asideWidth = $("aside").width();
var isOpen = $('aside').attr("data-side-bar");
if (isOpen == "open") {
$('aside').animate({ marginLeft: '-=' + asideWidth });
$('article').animate({ width: '100%',});
$('aside').attr("data-side-bar", "close");
}
else if (isOpen == "close")
{
$('aside').animate({ width: '20%', marginLeft: '0' });
$('article').animate({ width: '80%' });
$('aside').attr("data-side-bar", "open");
}
});
Any help greatly appreciated! On pointers on writing this better is certainly most welcome.
Regards,
Instead of having your object have CSS of float: left or right or whatever, using absolute positioning. For example:
HTML
<div id="sidebar">
Woo sidebar content.
</div>
CSS
#sidebar{
position: absolute;
width: 100px;
left: 0px;
top: 100px; /* top offset */
}
Javascript/jQuery
hideSidebar = function(){
$("#sidebar").animate(
{
left: "-100px"
},
500
}
}
Therefore all I need to do is set the left attribute in jQuery to the negative width of the div, and it disappears, then setting it back to 0 will make it appear again. This is, of course, assuming you want the sidebar on the left side, otherwise use right instead of left.
Also note that if you want the sidebar to follow the user as they navigate through your application, you can also set position: fixed instead, so it follows the user as they scroll.
Make slight change in your script make +5 for aside
$('.slide-side').click(function (e)
{
e.preventDefault();
var asideWidth = $("aside").width();
var isOpen = $('aside').attr("data-side-bar");
if (isOpen == "open") {
$('aside').animate({ marginLeft: '-=' + asideWidth+5});
$('article').animate({ width: '100%',});
$('aside').attr("data-side-bar", "close");
}
else if (isOpen == "close")
{
$('aside').animate({ width: '20%', marginLeft: '0' });
$('article').animate({ width: '80%' });
$('aside').attr("data-side-bar", "open");
}
});

jQuery animation timing

I have here a function and what I want to happen is to display the div first before it smoothly changes it's width.. Unfortunately what happen is that the width already changes once it appears
CSS:
#frame12{
opacity:0;
filter:alpha(opacity=0);
width:100;
}
jQuery:
function animatestamp(){
jQuery("div#frame12").css({'opacity':'1','filter':'alpha(opacity=100)'}).animate({
width:'451px'
},animatestamp);
}
Use animate on div's opacity first and then on its complete callback animate the width.
function animatestamp() {
jQuery("#frame12").animate({ //animate the opacity first
'opacity': 1,
'filter': 'alpha(opacity=100)'
}, 2000, function () { //Once it is completely visible start animating the width
$(this).animate({
'width': '451px',
}, 1000);
});
}
animatestamp();
Fiddle
For recursive you can try this:
var $frame = jQuery("#frame12");
function getWidthConfig(elem) { //get the width animate object based on current elem width
return {
'width': elem.width() > 450 ? '100px': '451px'
}
}
function getOpacityConfig(elem) {//get the opacity animate object based on current elem opacity
var opac = +elem.css('opacity');
return {
'opacity': !opac ? 1 : 0,
'filter': !opac ? 'alpha(opacity=100)' : 'alpha(opacity=0)'
}
}
function animatestamp() {
$frame.animate(getOpacityConfig($frame), 2000, function () {
$frame.animate(getWidthConfig($frame), 1000, animatestampReverse);
});
}
function animatestampReverse() {
$frame.delay(2000).animate(getWidthConfig($frame), 1000, function () {
$frame.animate(getOpacityConfig($frame), 2000, animatestamp)
});
}
animatestamp();
Fiddle
Animate opacity & filter first, then animate the width as PSL well said but also in your CSS, change "width:100;" to "width:100px;" (Add measurement unit "px") or otherwise the div's initial width would be screen width (add a border to your css to see the difference visually) and to make your js simpler and more readable, use chaining in your Javascript:
CSS:
#frame12{
opacity:0;
filter:alpha(opacity=0);
width:100px; /*Add px to avoid max screen witdth and CSS Flash */
border: solid 1px; /* to see the real div width */
}
Javascript:
function animatestamp() {
$("div#frame12")
.animate({ 'opacity': 1, 'filter': 'alpha(opacity=100)' }, 2000)
.animate({ width: '451px'}, 1000);
}
Need more code to be sure, but I'm guessing its because you have not set an explicit width on that container before applying an animation to the width property. Could try this:
function animatestamp(){
$("#frame12").css({
'opacity':'1',
'filter':'alpha(opacity=100)',
'width': $(this).width()
}).animate({
width:'451px'
}, animatestamp);
}
Or just set it in the css...
#frame12 { width: 100px; }
... and remove the 'width' from the css() above.

jQuery: Mouse Interaction + Simple Animation [img]

I'm new to jQuery so please work with me here. :)
[Site Image] http://imgur.com/zx803Ct
So I'm trying to have the bottles here to animate with cursor interaction.
Goal: I want the hovered image to come to the foreground and the rest to shrink into the background.
Undesired Results: The code seems to shrink all the bottles without condition. I seem to be running into trouble with the "if, then, else" section.
Process:
Store 'mouseEntered' element, do for each bottle, check if match, apply effects.
Code:
$(".sauce_bottle").mouseenter( function(){
var $active = $(this); //The "entered" image
//For each (div) bottle, check if "entered", apply effects
$('.sauce_bottle').each( function(){
if ( $active == $(this) ) {
//Shrink
alert($active.attr("alt"));
$(this).animate({
height: "230px",
width: "70px",
opacity: ".70"},
150);
} else {
//or Enlarge
$(this).animate({
height: "279px",
width: "85px",
opacity: "1"},
150, function(){});
}
});
});
If I'm missing a concept (scope) or if you guys have an alternative way of doing this that would be fantastic!
Thanks guys! :)
I would do it like this:
$(".sauce_bottle").mouseenter( function() {
$(this).animate({
height: "279px",
width: "85px",
opacity: "1",
}, 150);
$(".sauce_bottle").not(this).animate({
height: "230px",
width: "70px",
opacity: ".70",
}, 150);
});

jQuery UI bounce effect aligns elements left in Firefox and IE8

There is an issue with JQuery UI's bounce effect in both Firefox and IE8 or lower. IE9, Chrome, and Safari render the bounce effect properly. Any ideas what is causing this?
The problem is exhibited in Firefox and Chrome. The popup asks if you received an invitation. In Firefox/IE8 the box jumps to the left-hand side when it bounces.
Here is the jQuery that is running the bounce:
if ($.readCookie('noticehidden') == null)
{
$('#notice').show('drop', { direction: 'left' }, 2000)
.data('bounceinterval', setInterval(function ()
{
$('#notice').effect("bounce", { times: 3, distance: 10 }, 300);
}, 5000));
$('#dismissnotice').click(function (e)
{
clearInterval($('#notice').data('bounceinterval'));
$('#notice').hide('drop', { direction: 'right' }, 2000);
$.setCookie('noticehidden', 'true', { duration: 365 });
e.preventDefault();
return false;
});
}
I am using jQuery 1.4.4 and jQuery UI 1.8.6
Bounce effect applies this style to the element:
element.style {
bottom: auto;
left: 0;
position: relative;
right: auto;
top: 0;
}
Firefox disregards margin:auto in favor of left:0.
This fixed the problem:
#notice {
margin-left: 300px;
}
And for variable-width box:
#notice-container {
text-align: center;
}
#notice {
display: inline-block;
}
EDIT: For anyone that uses this answer I wanted to add a couple minor tweaks that made it work.
First
#notice-container
{
text-align: center;
display: none; /*Add this to make the parent invisible until the show effect is used.*/
}
Next, the above JQuery in the question should be modified to use the parent container, not the centered child.
$('#notice-container').show('drop', { direction: 'right' }, 2000);
$('#notice-container').effect('bounce', { times: 3, distance: 10 }, 300);
// etc...

Categories