HI, first of all, I've read a lot of posts about this but no one seems to work. I have a content "slider" made by me in jQuery. I'm such a noob on this but after 1 hour it worked. The problem comes when you try to push the button which brings the next "slide" out several times rapidly.
Here's how my "code" works:
First I set a variable named "count" to be at 1000.
I have 4 content divs. I hide 3 of them. When the user clicks the "next" button, the variable checks if the value is 1000. If this is true, then I set the opacity to the first div to 0, hide the div and fadeIn the other one (the div two). Then I set the variable "count" two 1001 and reset the opacity of div 1 (it does not appear since it's hidden).
If at the first moment, the variable is not 1000 checks if it's value is 1001 and so on. You get the point?
It's a little bit tricky but it works.
All working right but when you hit the "next" button several times rapidly, all the animations mess up.
Please if someone could told me how I fix this I'll be completely grateful.
If you want to see the "slider" go here: http://www.sinvenderse.com/hg/index.htm
and scroll to the end of the page.
You can see that if you click the slider buttons slowly it works perfect, but, when you try to hit them rapidly all messes up.
Okay, sorry for my bad English (I'm Argentinian) and I want to tell you that I've tried with everything:
finish();
stop();
clearQueue();
You can see the source code with Ctrl+U or right click, inspection element on Chrome.
And if you know the solution I'll give you a virtual hug (:
Try hiding all slides except current on each step. There are two slides with display: block at some moment
if (count == 1000){
$('.th-1').animate({opacity: 0},600,function(){
$('.think-content:not(.th-2)').hide();
$('.th-2').fadeIn(600);
});
...
Related
im using this DropDownList for searching item and i have a problem my problem is how can i scrolling in this DropDownList with up and down in Keyboard?
JSfiddle
EDIT: Since my first solution wasn't working properly when more items were added i adjusted it a little. Here's the fiddle
What i did:
First of all, i checked the position of the storeTarget and #search_results and logged it into the console to figure out what was causing the problem.
(This is something you could've done by yourself btw...)
What i found out then was, that, after a couple of items, the top position of the storeTargetitem was higher than the visible area of the #search_results.
so i changed the parameter of
$("#search_results").scrollTop(storeTarget.offset().top);
to scroll a little further than the current position and to make it smoother changed the check in the if-clause:
if(storeTarget.offset().top>220){
$("#search_results").scrollTop($("#search_results").scrollTop()+40);
console.log(storeTarget.offset().top);
console.log($("#search_results").scrollTop());
}
I didn't check for the case when the user goes up, that's left up to you to figure out.
here's a working fiddle based on your code
END EDIT
What i did:
when moving up or down with the keys i check if the offset().top value of the storeTarget is greater or lesser than 200 (you may change that depending on the size of your list) and if so, we scroll the top of #search-results to the
top of your storeTarget :
if(storeTarget.offset().top>200){
$("#search_results").scrollTop(storeTarget.offset().top);
}
Here is my fiddle. I would like to achieve 'one page full screen' type of webpage. I have two sections; display one at a time by display:block/none;each section contains content; .content1, .content2 respectively; content div works as a button to fire another section. You can also see a fixed header.
Section .intro contains .content1, section .archive contains .content2.
Now, I would like to build following chain of events on click: (i) .content1 fades out, (ii) .intro gets display:none, .archive gains display:block, (iii) .content2fades in.
The other way around, respectively, on click on .content2: (i) .content2 fades out, (ii) .archive gets display:none, .intro gains display:block, (iii) .content1fades in.
I have some experience with CSS, so I made and checked css transitions for fade in, fade out effects. Up to this point, everything is clear for me.
My problem is, however, I do not know how to build the chains of events. I have googled a lot of similar questions and tried some solutions, but had no luck. I have very little experience with JavaScript, so there might be some obvious mistakes in how I tried to implement the solutions.
I do not attach script in my fiddle; I would like to ask if you could point me in the right direction rather than fix my code, because, you see, I am not sure which solution I should show--so far they all look equally hopeless for me.
Should I go with JavaScript? JQuery? Pure CSS? Could you sketch / write some code how you would handle the problem?
Could you review the idea of displayed/hidden sections for the effect I am trying to achieve?
Using jQuery's fadeIn and fadeOut should be fine:
$(".toarchive").click(function(){
$('.intro').fadeOut();
$(".intro").removeClass("active");
$(".intro").css("display", "none");
$(".archive").fadeIn();
$(".archive").css("display", "block");
$(".archive").addClass("active");
});
However, if you're worried about the wait time between fades, you can use setTimeout:
$(".toarchive").click(function(){
$('.intro').fadeOut();
$(".intro").removeClass("active");
$(".intro").css("display", "none");
setTimeout(testThis, 1000);
});
function testThis(){
$(".archive").fadeIn();
$(".archive").css("display", "block");
$(".archive").addClass("active");
}
Try here
Try this, it automaticallys does what you want and it's cleaner.
Just put class show at page container you want to show first then clicking next will loop through pages.
Or you could set page number yourself and it will show that page.
http://jsfiddle.net/ot2gyxme/
var pages = $('.full'),
len = pages.length,
showing = pages.index($('.full.show'));
$('.next').click(function(){
pages.stop().eq(showing).fadeOut(function(){
setTimeout(function(){
showing = ++showing % len; //set this number to show x page
pages.eq(showing).fadeIn();
},1000); //time logo remains visible in ms.
});
});
I am trying to write a simple vertical JavaScript carousel that'll rotate a couple of elements. It works quite well but I am having a hard time figuring out how to keep the amount of elements. As you can see in this JSFiddle, http://jsfiddle.net/xznfQ/2/, the first one is "queued" away and reappears after a round. Can anyone tell me what I am doing wrong?
I guess something is wrong with these two lines:
$(e).eq(1).slideUp('slow'); // Slide next element up over the previous
$(e).eq(0).appendTo(a).show('slow'); // Place the current element at the bottom
Kind regards,
Mathias.
You want to hide the first element, e(0) and only after that move it to the end! You want:
$(e).eq(0).slideUp('slow', function () {
$(e).eq(0).appendTo(a).show('slow');
});
Your code:
$(e).eq(1).slideUp('slow');
Slowly hides the element and returns immediately. Then:
$(e).eq(0).appendTo(a).show('slow');
Moves the first element to the end immediately and slowly shows it. This meant you had the second element disappearing and the first element appearing at the end. So the list had one hidden at all times.
http://jsfiddle.net/HfdXY/368/
That is my Jfiddle, I have a few questions.
Why do my buttons only slide out on the first click, then stay stationary from there on after?
How can I put the code in a single function instead of having two instances with the only difference being the CSS for button B is moved 40 pixels to the left.
Change the 'right' animation to 'left'. http://jsfiddle.net/73qaC/2/
You only want to change the left pixel positions from 0 to xx and back again.
Updated the jFiddle above to use 1 method. This should give you an idea of how to achive this using one method.
For your second one this is my solution
$("#openMenu,#openMenu2").click(function() {})
put like this and give the following code of your at once.and then you can seperatly create its css inside it like
$("#openMenu").css();
$("#openMenu2").css();
I have modified a code that displays a marquee scrolling a simple HTML list. You can see it here:
I have 3 problems that I can't solve:
JS: I would like the marquee to show the text entering again through the right just after it disappears through the left, something like a continuous marquee, how could I do it ?
CSS: I am noticing (a) some artifacts in the marquee, I think this is due to the marquee text and the margins/paddings of divs not being properly set; and (b) the shadow of the lighter blue div cut over the marquee.. (I think it may be a z-indez problem?). (b) appears with any browser, (a) only with chrome, firefox looks ok. How could I fix it ?
Here's a screenshot:
I can successfully load data from my db and append it to the marquee. Now, I want to "refresh" the contents of the marquee every X seconds, would it be ok to remove the top element of the list when appending one in the bottom, or would it be better to fade-out, update everything, and fade-in again? Any other ways to do it ?
Here is a simple example to deal with scrolling them in from the opposite side. Also, if you adapt this method you can simply add or delete new items in the array as you need too. Watch this and about 2 or 3 times through it will add new items. One important thing to note is make sure the width of the div with id text is wider then the length of all visible items plus the length of the next in line.