jquery addclass to next div and remove it from actual div - javascript

I would need to implement some sort of news slider. this is how it should work:
a container div
3 absolute positioned divs with different z-index to have them stacked one on top of the other (the visibility should be one at a time)
a button which will add a class to the NEXT div in line (i will manage the visibility with css3)
here's my fiddle: http://jsfiddle.net/omegaiori/xqLXt/ and my actual js
var parentheight = $("#wrapper").parent().height();
$(".wrap").height(parentheight);
$('button.mybutton').click(function() {
$(this).next('div').addClass('next');
})
the actual js give the class .next to the first div .. what i want it do is to give the class "next" to the second div on the click of the button removing it from the first div. on the next click the class shall be removed from the second div and switched to the third.
if there's no more divs, it should go back adding it to the first one.
is it possible?
thank you so much guys! :)

Related

Scroll element in to view horizontally

I have a list of divs which are floated left. They are inside another div, which can be hovered over to move that inner block of divs left and right. These inner divs or 'events' have class names which include a year.
I also have a range slider at the bottom. The values of this slider are years. When the range slider is changed I would like the first div which includes that year number to slide into view.
See example here... http://thetally.efinancialnews.com/tallyassets/20years/index.html
Currently when you change the slider value the number changes accordingly, but I don't know how to slide everything so the related numbered div comes into view. They are in a row of floated left divs so can't be absolutely positioned.
In the example above the last event div has a class of 'year1998' so would be a good one to test the code on
var slider = $('#range-slider'),
textbox = $('#range-no');
slider.change(function() {
var newValue = parseInt($(this).val());
textbox.empty();
textbox.append(newValue);
( I need something here which would say...
$('.year'+newValue).comeintoviewplease();
... or something to that effect)
});
Thanks in advance for any help
check this out, the same effect can be achieved using css transitions
http://css3.bradshawenterprises.com/transitions/

Animate divs when others disappear

I have a layout of divs that all 'clear', like in a list. I use jQuery's built in fadeOut function to make them disappear after a certain amount of time. That all works great. The divs disappear one at a time starting from the top. jQuery uses to fading opacity and finally display:none to 'fadeOut' the div. When the top div finally fades out (to display:none) the divs underneath it all move up, but they jump up. I was wondering if there is a way to make this a smooth (slide) transition? TIA
Maybe you can do your animation before setting the display:none to you your previous div. Set first div opacity to 0, move your second div to the fist div position with a setInterval or setTimeout, then hide your first div with display:none ... then rinse and repeat.

Hide part view text in overflow hidden

I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.
IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/

Jquery Flipcard Animation to flip on toggle event

I have a simple jquery flipcard animation - http://jsfiddle.net/gGAW5/36/
Now the way this flip card works is it shows the top div, and hide all divs below it. IF you click on a link in the first div, it flips to the second div andsoforth.When it gets to the last div, it flips back the the first one again on clicking an anchor tag. Now I want 3 anchor tags on the front flip card(first div) and each link(a tag) should have its own back flip card/backsideDiv. currently, in my example, when you click on the first link, it loops through the other 2 links' backsideDivs/flipcards as well. I want it to go back to the main front div again(not flipping to the other links' backflip divs).
So each set of anchor tag/back div pair should operate independently. Hoped I explained it well enough.
I would really appreciate any help
Thank You
There isn't much of easy use of functions for quickFlip... This isn't pretty, but I think I got what you're looking for or at-least close. http://jsfiddle.net/2WbYG/10/

error offset().left in null or not an object [duplicate]

I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/

Categories