I have two sliders on my homepage, one is using a plugin (AnythingSlider), and the other is just using jQuery UI (jquery-ui-1.8.9.custom.min.js). After I added the AnythingSlider to the page, the hover function on the second slider stopped working in IE7 and IE8. This is the code for the hover function:
st = null;
$('.homepage-leftscroller').hover(function() {
slideleft();
st = setInterval(slideleft, 200);
}, function() {
clearInterval(st);
});
And here is the code for the slideleft function:
function slideleft() {
v = s.slider('option', 'value');
if (v > 0)
v -= 50;
ui.value = v;
s.slider('option', 'value', v);
f = s.slider('option', 'slide');
f(null,ui);
}
I didn't create the second slider, I did add the first slider. The page in question is here:
http://rareculture.net/index.php
I appreciate any help that can be offered with this. Thank you.
P.S.
The code block containing the hover function begins like this:
$(function() {
slider = $('.artist-homepage-slider .artist-wrapper');
while the AnythingSlider code block begins like this:
$(function(){
$('#slider')
Could that be the issue? Why would it only break in IE7 and IE8?
I can't tell if this is related to your problem, but the following statements are assigning values to global (or at least, from a wider scope), rather than local, variables. If you add var in front of these they'll become declarations and they'll be declared locally.
st = null;
v = s.slider('option', 'value');
f = s.slider('option', 'slide');
jslint can detect issues like these.
Related
Im a really huge noob on jquery, I need to figure out how to change this code:
$('.social li').appear();
$(document.body).on('appear', '.social li', function(e, $affected) {
var fadeDelayAttr;
var fadeDelay;
$(this).each(function(){
if ($(this).data("delay")) {
fadeDelayAttr = $(this).data("delay")
fadeDelay = fadeDelayAttr;
} else {
fadeDelay = 0;
}
$(this).delay(fadeDelay).queue(function(){
$(this).addClass('animated').clearQueue();
});
})
});
to work in the way that it would start animation as soon as someone enters the landing page, right now it works good on everything besides IE10 and IE11, was told to change it to load by default not on "appear" but I tried document ready/load and I can't get it to work...
You could try fading all list items into view, each with a progessing 250ms delay:
$(window).load(function() {
$('.social li').hide().each(function(i) {
$(this).delay((i + 1) * 250).fadeIn(2000);
});
});
EDIT:
Using the same logic as your previous code to refactor, use the window.load method since the load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames etc have finished loading. So use this event to do the fading in animation of the list items into view, where their initial state will be hidden.
You have two variables declared fadeDelayAttr and fadeDelay but I noticed that only fadeDelay is being used, so fadeDelayAttr can be discarded. Also, this part of the code:
if ($(this).data("delay")) {
fadeDelayAttr = $(this).data("delay")
fadeDelay = fadeDelayAttr;
} else {
fadeDelay = 0;
}
can be simplified as the null-coalescing operator using a logical OR (||):
var fadeDelay = $(this).data("delay") || 0;
Since the fadeDelay variable gets its value from the data-delay attribute, this can then be passed in as an argument for the delay method and finally the refactored code will look like this:
$(window).load(function() {
$('.social li').hide().each(function() {
var fadeDelay = $(this).data("delay") || 0;
$(this).delay(fadeDelay).fadeIn(2000);
});
});
Working Demo
I want the <nav> to become fixed after the user passes the first "block" (height: 100%;). I decided to use Skrollr because it is the only way I know to make the "change" immediately, without bugs on mobile and in IE. So I did this:
$("nav").attr("data-" + $("header").height(), "position: fixed;");
This is works great (the <nav> is right after the <header>), until you resizes the page. So I did this:
$(window).resize(function () {
var style = $("nav").attr("style");
$('nav').each(function() {
var attributes = this.attributes;
var i = attributes.length;
while( i-- ){
this.removeAttributeNode(attributes[i]);
}
})
$("nav").attr("data-" + $("header").height(), "position: fixed;");
$("nav").attr({"data-0": "position: absolute;", "style": style});
});
It takes the new height, and add it as a attr and deletes all others attr (because if not it will add you a lot: data-500, data-501, data-502, data-503...) and by looking at the code - it works great. The problem is that the Skrollr doesn't "sees" the change. what should I do?
Well, Thats was easy. One line instead of 20 lines.
var s = skrollr.init({
constants: {
menuresize: function() {
return $("header").height();
},
vh: '100p'
}
});
and to the nav I add data-_menuresize="position: fixed;" (and it explaines what menuresize
means in the code above).
Enjoy :D!
So I've created the following function to fade elements in and passed in a div that I want to fade in which in this case is an image gallery popup that I want to show when a user clicks an image thumbnail on my site. I'm also passing in a speed value (iSpeed) which the timeout uses for it's time value. In this case I'm using 25 (25ms).
I've stepped through this function whilst doing so it appears to be functioning as expected. If the current opacity is less than 1, then it is incremented and it will recall itself after the timeout until the opacity reaches 1. When it reaches one it stops fading and returns.
So after stepping through it, I take off my breakpoints and try to see it in action but for some reason my gallery instantly appears without any sense of fading.
var Effects = new function () {
this.Fading = false;
this.FadeIn = function (oElement, iSpeed) {
//set opacity to zero if we haven't started fading yet.
if (this.Fading == false) {
oElement.style.opacity = 0;
}
//if we've reached or passed max opacity, stop fading
if (oElement.style.opacity >= 1) {
oElement.style.opacity = 1;
this.Fading = false;
return;
}
//otherwise, fade
else {
this.Fading = true;
var iCurrentOpacity = parseFloat(oElement.style.opacity);
oElement.style.opacity = iCurrentOpacity + 0.1;
setTimeout(Effects.FadeIn(oElement, iSpeed), iSpeed);
}
}
}
Here's where I'm setting up the gallery.
this.Show = function (sPage, iImagesToDisplay, oSelectedImage) {
//create and show overlay
var oOverlay = document.createElement('div');
oOverlay.id = 'divOverlay';
document.body.appendChild(oOverlay);
//create and show gallery box
var oGallery = document.createElement('div');
oGallery.id = 'divGallery';
oGallery.style.opacity = 0;
document.body.appendChild(oGallery);
//set position of gallery box
oGallery.style.top = (window.innerHeight / 2) - (oGallery.clientHeight / 2) + 'px';
oGallery.style.left = (window.innerWidth / 2) - (oGallery.clientWidth / 2) + 'px';
//call content function
ImageGallery.CreateContent(oGallery, sPage, iImagesToDisplay, oSelectedImage);
//fade in gallery
Effects.FadeIn(oGallery, 25);
}
Could anyone help me out?
Also, I'm using IE10 and I've also tried Chrome, same result.
Thanks,
Andy
This line:
setTimeout(Effects.FadeIn(oElement, iSpeed), iSpeed);
calls Effects.FadeIn with the given arguments, and feeds its return value into setTimeout. This is exactly like foo(bar()), which calls bar immediately, and then feeds its return value into foo.
Since your FadeIn function doesn't return a function, that would be the problem.
Perhaps you meant:
setTimeout(function() {
Effects.FadeIn(oElement, iSpeed);
}, iSpeed);
...although you'd be better off creating that function once and reusing it.
For instance, I think this does what you're looking for, but without recreating functions on each loop:
var Effects = new function () {
this.FadeIn = function (oElement, iSpeed) {
var fading = false;
var timer = setInterval(function() {
//set opacity to zero if we haven't started fading yet.
if (fading == false) { // Consider `if (!this.Fading)`
oElement.style.opacity = 0;
}
//if we've reached or passed max opacity, stop fading
if (oElement.style.opacity >= 1) {
oElement.style.opacity = 1;
clearInterval(timer);
}
//otherwise, fade
else {
fading = true;
var iCurrentOpacity = parseFloat(oElement.style.opacity);
oElement.style.opacity = iCurrentOpacity + 0.1;
}
}, iSpeed);
};
};
Your code has a lot of problems. The one culpable for the element appearing immediately is that you call setTimeout not with a function but with the result of a function, because Effects.FadeIn will be executed immediately.
setTimeout(function(){Effects.FadeIn(oElement, iSpeed)}, iSpeed);
will probably act as you intend.
But seriously, you probably should not re-invent this wheel. jQuery will allow you to fade elements in and out easily and CSS transitions allow you to achieve element fading with as much as adding or removing a CSS class.
T.J. and MoMolog are both right about the bug: you're invoking the Effects.FadeIn function immediately before passing the result to setTimeout—which means that Effects.FadeIn calls itself synchronously again and again until the condition oElement.style.opacity >= 1 is reached.
As you may or may not know, many UI updates that all take place within one turn of the event loop will be batched together on the next repaint (or something like that) so you won't see any sort of transition.
This jsFiddle includes the suggested JS solution, as well as an alternate approach that I think you may find to be better: simply adding a CSS class with the transition property. This will result in a smoother animation. Note that if you go this route, though, you may need to also include some vendor prefixes.
I know there are bunch of questions already about CSS3 transitions not working in firefox. I think this one might be quite unique. As the transitions DO work when added into the relevant click functions within $(document).ready() . But once I've put the same code out into a basic js class and instantiated within $(document).ready it refuses to work in firefox 24. Works in all other major browsers.
Can anyone shed some light.
I've put up a test site here: http://test.gladekettle.com.au/modal/
var ModalApp = function (options) {
//default options
var defaultOptions = {
modalElem : "#modalresponsive",
z : 99,
overflowvisible : true,
scrollbardelay : 1000
}
for (i=0; i < options.length;i++){
if(typeof options[i] === "undefined"){ options[i] = defaultOptions[i];
}
} //for - set default options if not defined.
var $modalObj = $(options.modalElem);
var zindex = options.z;
$modalObj.css('z-index', zindex);
$modalObj.addClass('modalhidden');
this.close = function() {
$modalObj.removeClass('scrollvisible');
$modalObj.removeClass('modalvisible').addClass('modalhidden');
$('.modalactive').removeClass('modalactive');
};
this.open = function() {
$('html').addClass('modalactive');
$modalObj.removeClass('modalhidden').addClass('modalvisible');
setTimeout(function() {
$modalObj.addClass('scrollvisible');
}, options.scrollbardelay);
};
};
This has nothing to do with "external js files". The culprit is .modalactive { overflow: hidden; }, which gets set/unset to html on click and seems to be canceling out the transitions for whatever reason.
You may verify this by disabling the rule, either live on your site with the developer tools or see this fiddle.
You should file a bug and stop using that rule.
I am implementing an image slider in javascript/jquery.
The demo should work like this.
http://londatiga.net/tutorials/scrollable/
Anyway I don't won't to rely on jquery.tools.min.js because this lib is out of date (the last update is about 8 months ago ).
I decide to make the js code by me.
When clicking on next or prev button I would like to shift the images on the list of one item/image.
The script shifts the items but the display is quite crappy, because the next items is not displayed.
The list is made of 4 images. At the beginning only the first two images are displayed, then when clicking on the next button I would like to display the second and the third image.
Actually the script shows just the first and the second image even if I click on the next button.
Here is the demo: http://jsfiddle.net/xRQBS/5/
Here is the code (1)
Any hints how should I fix it?
thanks
(1)
/*global jQuery */
(function ($) {
var imgs = [
'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSsarNmO4Vdo5QwHfznbyxPmOyiYQ-KmBKUFsgEirvjW6Kbm7tj8w',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfIAfLXj3oK1lso1_0iQploSKsogfJFey3NnR0nSD9AfpWjU7egA',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1dO4FVDDitdS85aLOCsOpQyHHTysDhD4kHQ749bMtNxaj5GMKnA',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRAPO77sVu-Xk80S_txagySoTq8gKHgeiS63a9TYtKbPpGYVI5X'
];
var $list = $('.list-images');
var $slider = $('.slider');
var slideImage = function (direction) {
var unit = 150;
var left = parseInt($slider.attr('left'), 10) || 0;
left = (direction === 'prev') ? left - 150 : left + 150;
$slider.css('left', left + 'px');
};
$(function () {
$.each(imgs, function (i, img) {
$list.append($('<li>').append($('<img>').attr('src', img)));
});
$('body').on('click', '.direction', function () {
slideImage($(this).attr('data-tid'));
});
});
}(jQuery));
With the animate function:
$slider.animate({'left': left + 'px'}, 1000);
http://jsfiddle.net/xRQBS/6/
I'm assuming that you want the shift to be more of an animation. If so, take a look at jQuery's animate. Something like this:
$slider.animate({left: left + 'px'});
That will give it a sliding effect, which what I'm assuming you want :)