I have 2 buttons in my div, left side and right side. When I click on right button it need to move to right and for left button it need to move to left. I used:
$('.left').click(function(e) {
$('#votersDetailsTable').animate({
'marginLeft': '30px'
});
});
can i use like
$('.left').click(function(e) {
$('#votersDetailsTable').live("animate",{
'marginLeft': '30px'
});
});
Here maindiv is also creating dynamically .I am unable to move the div.Please help me.Thanks in advance..
try to put the div's position to relative in your css file
#mainDiv{
position:relative;
}
We'll need to see more of your css and html that contain these buttons. However your issue is that you are animating the attribute left which will only do something if #mainDiv is positioned absolute (or fixed).
The attributes you can change inside jQuery.animate() are css attributes. So you'll probably want marginLeft.
Generally when I have to create elements dynamically and then animate them, I write out the html / css for the before and after and find differences in order to figure out what attributes to animate.
Put alert just before animate to check if control is coming into click function. If not
try using .on() instead of .live()
Working Demo
Refer to MDN Docs for left css property
left applies to only positioned element's
#mainDiv{
position:relative;
}
Related
I'm trying to get a div to change its width through hovering over it. I've got that sussed but I would also like its width to change through hovering an h5 tag which is separate. Does anyone have any ideas how to do this? Here's what I have at the moment.
$(function(){
$("#hoverbox").hover(
function(){
$(this).animate({width: '150px'});
},
function(){
$(this).animate({width: '38px'});
}
);
}};
https://jsfiddle.net/m0u8braj/5/ ... alternatively it's at http://www.cosmosdesign.co.nz/ . Also you may notice the box can act a little spastic and expand and retract numerous times, does this relate to my current code? Thanks.
I've edited your Fiddle. It now does what you desire with CSS only. No need for jQuery's .animate()
It's working like this, because CSS's :hover can affect sibling elements with the + or ~ selectors, like so:
#hoverbox:hover, h5:hover + #hoverbox{
width: 150px;
}
Hope this helps
I'm trying to create a div that has two buttons: one to prepend a div of the same size to the right of the original without shifting the position of the original div and another button to append a div to the right of the original.
Appending to the left works fine, but prepending left shifts the whole container over shown here
code I'm using to add elements:
$(document).ready(function() {
$("#back").on("click", function(e) {
e.preventDefault();
$("#center").before("<div id='back' class='inside'></div>");
});
$("#next").on("click", function(e) {
e.preventDefault();
$("#center").after("<div id='next' class='inside'></div>");
});
});
How do I prepend the div left of the original so that it is "off screen" without shifting the position of the original div? Thanks in advance!
The solution to your problem is best solved using CSS.
Simply set display:none to the left DIV upon initial insertion.
Change this:
$("#center").before("<div id='back' class='inside'></div>");
To this:
$("#center").before("<div id='back' class='inside' style='display:none;'></div>");
And remove that CSS attribute when you want it visible:
$('#back').css('display', '');
However, the use of inline styling is, in most cases, bad practice. You should consider setting the display:none via a stylesheet assigned to the element ID #back. For maintainable code, you want to keep clear separation of style (CSS), structure (HTML) and UI functionality (JS).
try to set the following CSS for the containing div
div.whatever {
position:absolute;
overflow:hidden;
}
I'm trying to toggle a div from relative to fixed when I scroll down 200px using javascript. When I reach 200px from the top of the window, my div should toggle to fixed. And when I'm above that 200px from the top it should go back to relative. Does anyone have an idea on how to do this?
Something like:
$(window).on('scroll', function() {
$("#myDivID").css({
position: $(this).scrollTop()<200?'relative':'fixed',
top: $(this).scrollTop()<200?'200px':'0px'
});
});
You'll probably also have to reset the top position of the element.
I know there's at least a couple of plugins that do this. Can't remember the name of the one I saw last, but here's one I've written myself: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js
You use it like so:
$('#my-element').fixedIfNeeded();
There's one optional argument that specifies if the element should stop being fixed before it reaches another element (like a footer for example):
$('#my-element').fixedIfNeeded('#footer');
In my code I use jQuery's toggle('slow') animation to make a hidden div appear/disappear. It expands from the upper left to the bottom right.
How can I make it expand from the top towards the bottom, instead (no left-to-right growth)?
You could use .slideToggle('slow').
The working demo.
Try .slideDown('slow'). Note that this will only work for sliding down (to reveal) and sliding up (to hide). For anything more complex, you're looking for .animate(...) or something from jQuery UI.
You could use jQuery's .animate (http://api.jquery.com/animate/) instead. That way you can set the CSS properties before and after the expand and only alter the height.
Try to put an with onclick $('#DIV-ID').toggle('slow'); return false;
Just like this: <a onclick="$('#DIV-ID').toggle('slow'); return false;">DROP DOWN</a>
I want to animate between "default" states/positions for a div. For example:
Div absolutely positioned with a class, to be on the left of the screen. Class is removed via JS (or replaced) and position is now relative. The default relative position is actually on the opposite side of the screen. I want to animate this.
Something like a dock, various divs as icons in display-inline, centered horizontally on the dock. If I "delete" one of the icons, the rest will shift a bit to recenter. I want to animate them shifting to fill the gap.
Transition: all does not work (I assume because there was no predefined values for the position) so is this even possible? Are there JS solutions to this?
It's possible exactly the way you described it. Here's a live example of how it's done.
http://jsfiddle.net/nDr4y/3/
You can also remove the transition from css and use jquery to animate the element with pure JS. The syntax looks like this:
// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);
You just need to figure out the destination coordinates and set it using jQuery, or whatever framework you use. Other than that, it's totally possible.
http://jsfiddle.net/Kd72u/