Inserting DIVs from right with slick effects - javascript

I was wondering how to make a script that pushes in Divs from the right of my screen.
These Divs are floating right, so when there are too many on one row they one that is longest on the row (one on the left) hops to the next row.
But I want a function that adds a div (just outside of the screen) and pushes it into the screen.
Any idea's ?

Mocked up a demo for you http://jsfiddle.net/rW5rC/3/
Allows you to add a new element on button click which starts invisible offscreen and slides in.

I suggest you to use jQuery, then you can prepend or append certain container
so if you want to insert div in one container at the start use
$('#id_of_container').prepend('<div class="left">my div</div>');
if you want to add it at the end
$('#id_of_container').append('<div class="left">my div</div>');
its much easier to manipulate html with the jQuery, and you don't have to change your code for different browsers.

Use jQuery animate method, it's very simple to do:
$("div").animate({
left: 200
});
I made you a demo here:
http://jsbin.com/ububer

Related

Move element from one parent to another with animation

I'm trying to create a custom carousel. The way it works is that the items are contained in two "piles", both piles contain the same items.
When you click the "next" button, the topmost item from the second pile moves to the top of the first pile. The last item in the first pile will then move to the bottom of the second pile, meaning both piles always contain the same number of items.
When clicking the "prev" button it needs to perform the reverse animation.
When moving items from the second pile to the first, this needs to happen with an animation.
I created a fiddle here https://jsfiddle.net/n109rpp0/3/ with the HTML I have produced so far, but I am struggling to work out a way to do the animation.
I'm not sure if I've taken the right approach, e.g. by having the items duplicated in two ul elements. Also how do I ensure the items are cycled in the correct order?
Does anyone have any ideas on how I should go about this?
Here is a quick idea how to achieve what you want. Add this:
$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
$(prevItem).css('zIndex', '1');
to your next button functionality.
You need to play with the code to make perfect transition.
Here is an updated fiddle
Google animate function for jQuery and you will find more examples

jQuery .detach() not working when trying to change element position along the DOM with scrolling

I'm trying to make a div element with certain content move (Jump) between an specific area that has some duplicates inside an article while scrolling.
The div #hotswapdiv should be inserted inside each <div id="div_identifier">
</div> while scrolling the page, by moving from the previous #div_identifier to the next #div_identifier.
It's like teleporting the #hotswapdiv between the elements with the same ID while scrolling.
JSFIDDLE:
https://jsfiddle.net/2n8k8g4L/7/
But for some reason it's not working.
Reference: https://api.jquery.com/detach/
Any ideas?
you can only use one #div_identifier because it is an id ,
i think class="div_identifier" and .div_identifier will fix your issue

Why does jQuery slideToggle() function acts strangely for me in my table?

I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..

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