I have problem with the slide effect with jquery-ui. I have a sidebar with a few buttons, which when clicked will spawn another sidebar to slide out from its left edge. One of these "secondary sidebars" contains a google JS map, and sliding that one out works fine.
Another one contains discussion with comments regarding the resource the right sidebar is showing. These discussions are filled using the template plugin and the code for filling the container is called before .toggle() is called.
While the container is sliding out the container (which has background color #eee) is not "spanning over its children in height." I'm seeing a box of perhaps 500x40 pixels with the correct background color, and the children of this container are shown as if their markup was outside the container.
Upon animation completion the container is stretched vertically to span over all its children and all is good. Unfortunately I cannot give anyone a link to a living example of this code, so what I am asking for is suggestions as to how I can start looking for the problem. This could be anything, but my guess is that it's jquery ui's fault.
important:
JQuery-UI's .slideToggle() does not reproduce this error, not does .fadeIn() or .toggle(). Unfortunately .slideToggle() does not take a direction parameter.
Thanks
check for floats, make suring your clearning them inside the sliding div, just before it, and just after it.
Add the following after a floated element(s) (divs with float:left or float:right)
Most people have a css class called "clear" or "clr"
.clr {clear:both;}
So then you can do
<div class="clr"></div>
It reads slightly better as you may use them alot in future :)
Related
I have been searching for a way to make a menu rise up from a menu bar underneath an image
I want it so when you click on an arrow the menu will open up and partly cover the image without affecting the position of other elements in the page.
I'm struggling to find a way to do this. The reason for posting in here is not for a complete solution but thought that maybe someone could point me in the right direction. For example does this have a name? Any jQuery plugins that might help?
I have tried to recreate this affect using slideUp() and slideDown() but i am unable to get it to do the desired affect. I also tried using accordion but was unable to get that to produce the desired affect.
Any help would be much appreciated.
If initially the menu with submit button need to be present at the bottom of the page:
try setting position: absolute; and bottom:0px; with defined height.
Then for the arrow mark, bind a click event.
In the click event callback function:
Use jQuery.animate function and change the height and top properties of css.
Even better if you don't want any animation, just toggle CSS class for the bottom bar.
I have a few <div> elements and a menu which is supposed to "call" these different <div>s on click with a custom animation.
These are the menus:
Normal
Remote
Tools
Register
Log in
Donate
Contact
Terms of use
Now I need to control and show different divs based on which menu entry I click.
I need help in two occasions:
Creating the animation (see the jsfiddle below)
Handling the transitions between the divs efficiently without lots of code rewriting.
Occasion 1:
When I click on a menu (Remote for example) I want the other visible menu to move itself to its complete right side and disappear (I've used overflow: hidden on the main div for that) and then from the left side the proper div to come in (remote-page div).
So basically, I'm wanting to make the slideDown and slideUp horizontal.
This is what I've got so far: http://jsfiddle.net/Dugi/UtH4m/8/
This is a good example to show what I've got already for my website locally. I failed to make the proper div come in from the LEFT side when a menu button was clicked, I just could make it so I can HIDE the divs that are standing on the way.
Final question: So how do I use .animate() to make the proper div come in from the left side AFTER the other visible div went to the right?
Occasion 2:
As you can see from the jsfiddle above, I had to go through each existing <div> and hide them:
$('#remote').click(function()
{
$('#normal-page').animate({marginLeft: '100%'}, 'fast'); // here
$('#tools-page').animate({marginLeft: '100%'}, 'fast'); // here
});
Final question: Is there a way to automatize this process and hide all visible divs and show the proper one when a menu button is clicked?
This is all I want to know.
Thanks
You can use complete parameter of the animate function to achieve that. I took the liberty of changing HTML and CSS a bit if you do not mind.
http://jsfiddle.net/UtH4m/9/
Final version: http://jsfiddle.net/UtH4m/13/
I hope this is what you want. I changed you markup a little bit. I added a #container for all the pages that is moved around. This is how it would look like: jsFiddle
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I was looking for some kind of code similar to Gmail's Chat on Gmail's Page: a drop-down menu that pushes everything else that is down to the chat, but for some reason I couldn't see the page's source and I haven't found the same code in any other page. Does anybody know some page with similar code?
Regards!
You can use jQuery's native slideDown function to show hidden elements that will push content down below them, depending on your slideDown element's CSS positioning and float.
http://api.jquery.com/slideDown/
You can have a which height is set to 0px or auto to make it expand/collapse.
You can also give a sliding effect by gradually increasing/decreasing the height of the div.
As long as it's not positioned absolute, it will push the content below.