I'm trying to make this page working that has a vertical line of pictures (thumbnail-sized) which you can then click on to make them scroll to full width and show lots of text and happy stuff.
I've already managed to do all that. However, if I click on one thumbnail, any open thumbnails are supposed to close. I've implemented an IF statement and class-checking for that:
$("a#shins-rec1").clickToggle(
function(){
if ($(".shins-rec").hasClass('done')) {
$(".shins-rec").filter($(".done").not($(this))).animate({
left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done');
});
} else {
$(this).parent().animate({left: 0, width:'100%'}, 250, function(){
$(this).addClass('done')
});
};
},
function(){
$(this).parent().animate({
left: $(this).parent().width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done')
}); // even clicks
});
which works all fine, but after you clicked two or three times on different thumbnails to open them and close the other ones, the already open thumbnail gets stuck and the clicked thumbnail opens as it should open. You have to click on the clicked thumbnail to close the other one, and then you have to wait some time till you can click the clicked thumbnail to properly close it again. After that it just stays like this.
I've already tried doing it with a plugin called Summer of GOTO, because I think it has something to do with checking whether there are any "done" classes or not, so I wanted to make it re-check stuff using goto in JQuery. Using a WHILE statement didn't work either, but that could be because I don't understand that function.
Anyone knows how to solve this?
Thanks in advance.
EDIT: : JSfiddle of what I'm working on
It looks like the click even which you fire on each thumbnail has same ID, ID of the element suppose to be unique, you can use class instead like this
$("a.shins-rec1").clickToggle(
function(){
if ($(".shins-rec").hasClass('done')) {
$(".shins-rec").filter($(".done").not($(this))).animate({
left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done');
});
} else {
$(this).parent().animate({left: 0, width:'100%'}, 250, function(){
$(this).addClass('done')
});
};
},
function(){
$(this).parent().animate({
left: $(this).parent().width() / 2 - 60,
width: '120px'}, 250, function(){
$(this).removeClass('done')
}); // even clicks
});
I've finally gotten the answer to my problem, someone on another forum kind of rewrote my code because it was messy and things were repetitive and they solved the stuckness.
Here is the JSfiddle in case anyone wants to look into it.
For some reason the orientation of the thumbnails changed which made a 0 value for "left" position the thumbnail in the center and a 240 or similar made it shift to the right. But I simply changed that by switching the left-values and changing the 240 or similar into a negative number, as seen below.
var rightPos = -1 * ($('div.content-ins-used').width() / 2 - 60);
Thanks anyway for your help!
Related
I have following code to do transitionx
var w = $(window).width()*0.02;
$('#mChangePassword').velocity({translateX: w},
{
duration: 300,
'complete': function(){
$('.mSettingsMain').fadeOut(300);
}
});
Attached GIF how it works in mobile app
http://g.recordit.co/WDCGVFPXsE.gif
NOTE: Clicking on the above link is not working somehow, copy pasting image links works.
Here the animation is coming from right to left when I click on button.
I want same animation from bottom to top, I tried using translateY but it is not working,
I tried with the following code
var h = $(window).height()*0.02;
$('#mChangePassword').velocity({translateY: h},
{
duration: 300,
'complete': function(){
$('.mSettingsMain').fadeOut(300);
}
});
but it is not working, I want the same animation from that gif "bottom to up" or "slide up".
Any help appreciated. Thanks.
When transitioning transforms in Velocity it's best to use forcefeeding and provide units to the property values:
$('#mChangePassword').velocity({translateY: [h + 'px', '100%']});
I have and radio button selection and given each radio button a progress bar, progress bar are display:none but when selected a radio progress bar will show(), same to the button.
Now my problem is sometime when I selected a radio button, the button show like this:
But sometime when I selected a radio button, the button has been push to the bottom and cant even seen:
I not sure where this problem come from, but I guest maybe the progress bar blocked it?
Maybe I have miss something in my code that I don't know. Anyone able to help me check for this problem ?
Click here for jsfiddle
Updated part
I found out how to make the button push to bottom , hover in and hover out the div 4 to 5 times then select one option, then the button will push to bottom. So far haven't found any solution, anyone know how to fixed please help. Thanks a lot.
Remove the margin-top: -22px from .popup_survey_whitebox_percent and replace with
position: relative;
top: -22px;
Fiddle
Finally I found a way to fixed this problem .
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(orig); // Here put the original text.
}).css('position', 'relative');
}, function () {
$('#popup_survey_whitebox_content').finish().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
}).css('position', 'relative');
});
change $('#popup_survey_whitebox_content').stop() to $('#popup_survey_whitebox_content').finish() for both animate
As you mentioned in your answer, finish works, but introduces some quirkiness for the experience if you hover in/out quickly (it jumps to the end of the animtation immediately, and can "flicker").
This issue can be addressed by reseting the height attribute on the hover 'out' logic. When you hover in/out quickly, the height value is set, which is then used after.
Here's a fiddle with the fix: http://jsfiddle.net/v07vt9gz/5/
And the logic:
$(this).css('height', ''); // reset value
The problem is that I have a certain link that I want to pull the div upward over the screen if clicked but to be able to be clicked and pulled back down. Problem is, it only does it once and then no more. I check in Chrome's style checker and the class toggles on and off as expected, but it refuses to run the animation I'm lost
Here's a short code example:
$('#gallL a').unbind('click');
$('#gallL').click(function(){
var $this = $(this);
$this.toggleClass('hlinks hlinksClicked');
if($this.hasClass('hlinksClicked')) {
$(foot).animate({
'bottom': $(window).height()-60}, 900, 'easeOutBounce');
} else {
$(foot).css({'top': '0px'});
$(foot).animate({
'top': $(window).height()-60}, 900, 'easeOutBounce');
}
});
seems simple enough but no go :-(
You're animating one time using the bottom value and other time using the top value.
After having troubles with a jquery fisheye plugin I've decided to develop a similiar script by myself. (It's also a good practice).
Anyway , I wrote 2 jquery functions based on the Animate() function.
minimizeBubble
return the bubble to its default size
maximizeBubble
make the bubble bigger , higher and display another picture as well (a
title for that bubble)
jQuery.fn.maximizeBubble = function(){
$(this).animate({
marginTop: '-300px',
width: '300px',
}, {
duration: 200,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "inline");
}
});
}
jQuery.fn.minimizeBubble = function(){
$(this).animate({
//top: '+=5',
marginTop: '0',
width: '80px',
}, {
duration: 100,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "none");
}
});
}
I also wrote the next code:
I know that the .each() function in this case is not neccessery because
there's only one big bubble at a time.
$(document).ready(function() {
//First , the middle one will be big as default.
$('#auto_big').maximizeBubble();
//mouseOver - make it big , onMouseout - Stay Big (do nothing)
$('.dock-item2').mouseover(function() {
//mouseOver on another bubble- minimize the other one and maximize the current
$('.dock-item2').each(function(){
$(this).minimizeBubble();
});
$(this).maximizeBubble();
});
});
(A jsFiffle for my code: http://jsfiddle.net/T7gCL/1/)
The problem , as you can see at: http://jsfiddle.net/T7gCL/1/embedded/result/ that
when you move your mouse to the next bubble , all the bubbles are starting to "get crazy".
1.Do you know what's the reason for this behaviour?
2.How can I solve it?
3.do you have any suggestions of how to improve my code (for instance: instead of each())?
Part of the reason there is so much hopping around is that you're positioning the images absolutely and then resizing them. I'm not sure what the application calls for but I would try floating them for now. The animation behavior is like a chain reaction which makes me draw the hypothesis that when the image resizes it is propagating the onMouseover event to the images it is overlapping. The floating layout may fix this.
Update
This works better but might not be exactly what you're trying to do
$('.dock-item2').mouseenter(function(event) {
event.stopPropagation()
$(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
event.stopPropagation()
$(this).minimizeBubble();
});
You still need to rework the way you're organizing the images in their containing div
I am running jQuery Cycle for an image gallery. View the link: Here
My problem is that the images are getting squished when viewed in firefox. The problem disappears when I re-load the page. This leads me to believe that the Javascript is triggering before all the images are loaded (usually the first image works fine and the rest are squished.)
A hard re-fresh reproduces the problem.
I've wrapped everything in a $(document).ready(function(){ }); but it still happens.
Additional Info: If I specify the width and height of the image, everything works fine. However there are hundreds of images all at different sizes..
I'm pretty frustrated with this problem. Any ideas/help is greatly appreciated!
Here is my code:
$(document).ready(function(){
//function onBefore(curr,next,opts) {
// var $slide = jQuery(next);
// var w = $slide.outerWidth();
// var h = $slide.outerHeight();
// $slide.css({
// marginTop: (482 - h) / 2,
// marginLeft: (560 - w) / 2
// });
//};
// Decare the function that center the images...
function onBefore(curr,next,opts) {
var $slide = jQuery(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (480 - h) / 2,
marginLeft: (560 - w) / 2
});
};
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
next: '#next',
pause: 0,
speed: 500,
before: onBefore,
prev: '#prev',
pause: '#pause',
pager: '.thumbs',
pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
pagerAnchorBuilder: function(idx, slide) {
var src = $('img',slide).attr('src');
//Change height of thumbnail here
return '<li><img src="' + slide.src + '" height="90" /></li>';
}
});});});
There is a much simpler and cleaner solution that I used to solve this problem than what has already been proposed:
Using jQuery, you need to use $(window).load instead of $(document).ready for your particular situation. To fix the issue, change this:
$(document).ready(function() {
$('#slideshow').cycle({
/* ... */
});
});
To this:
$(window).load(function() {
$('#slideshow').cycle({
/* ... */
});
});
Why does this work? Because window.onload fires after all referenced images on the page are loaded (See https://developer.mozilla.org/en/DOM/window.onload, and .load() - jQuery API), which is the desired behavior in your situation. $(document).ready, better known as "DOM Ready", will fire before images have loaded. This is typically the desired behavior, but in your situation it's too early.
I had the same problem when working on a site several months ago (linked below). If you're starting cycle in $(document).ready(), here's what happens when a client browses to your page:
1) The client's browser sends a request for each img element. Those requests take variable amounts of time to fulfill.
2) Before the image requests are completed, cycle starts. Cycle works by hiding all but the first image in the slide show: it sets visibility:hidden and display:none on each of its images.
The problem is that Firefox fixes the img element's size once and for all at the point the display style is set to none. So if the image hasn't finished loading, its height and width style attributes are small (I'm not sure exactly what they correspond to - perhaps the size of Firefox's image placeholder). When cycle shows the image by setting its style attribute to display:block, it uses whatever dimensions it had at the time it was hidden.
I solved this by changing my code so that it doesn't start the cycle plugin until all the images are finished loading. To do that, I initialize a counter variable to the number of images I'm cycling, then bind a load event to each image like this:
var imagesRemaining = 12; // 12 is just the number of images in the slideshow div
$(document).ready(function() {
$('#slideshow > img').bind('load', function(e) {
imagesRemaining = imagesRemaining - 1;
if (imagesRemaining == 0) {
// I'm doing some other stuff when initializing cycle
startCycle();
// My images all start with visibility:hidden so they don't show
// before cycle hides them in a 'stack', so ...
$('#slideshow > img').css('visibility', 'visible');
}
});
});
function onBefore(curr, next, opts) { // Your code here ... }
function startCycle() {
$('#slideshow').cycle({ ... // your initialization here });
}
You can see it in action by viewing the galleries on this site in Firefox. I'm building the gallery pages dynamically, so it's structured a bit differently than your page, but you can see more details if you poke around with Firebug.
I'd also like to add that it seems adding a width and height attribute solves this problem.
Ok i know its probably an awfull way of calling load but i just coulnd bind my cycle code to .load for some reason it just don't work so i called the whole Cycle initializer inside the ...
i couldn't force the sizes since i'm cycling through li containing dynamic images and data
its probably flawed at some extend but for those as desperated as me...
Josh, your solution has just saved me a headache, thank you very much!
I think i've amended it slightly in order to handle pages where you don't know the total number of images. It seems to be working fine for me, if anyone can see any flaws, please point them out - i'm still learning.
$(document).ready(function () {
$('#slideshow > img').each(
function go() {
$(this).bind('load', function (e) {
projects();
$('#slideshow > img').css('visibility', 'visible');
});
});
});
function projects() {
$('#slideshow').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0,
next: '#next ',
prev: '#prev ',
after: onAfter,
nowrap: 1,
autostop: 1
});
}
If you're using a database to populate the slideshow you could try accessing the image dimensions from the image itself.
For example, using django you can use
width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px"
in your img tag.
You can use a solution similar to making youtube videos responsive. You need to know the ratio of your width to height, and add that as padding-bottom to the cycling div. For my 1024X680 photos, I used 680/1024 = 66.4%
In your case, I believe
#slideshow{
padding-bottom:66.4%;
}
will show the image unshrunk. I have no idea what the actual height and width values you are working with, so substitute your own. I had to use this solution when the $(window).load solution proved maddeningly ineffective -- so now I use both.
This is better than setting the dimensions of the image, because it's slides into a fluid, responsive enviroment.