I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
Add position:absolute; to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
Related
I'm having trouble with setting 2 div's position without one of them moving to the right/left the width of the other div. They push any elements either side over by they're own width.
What I mean by this, a visual:
How can I stop this from happening, whilst keeping both of the divs relative?
EDIT:
I realize, absolute is right for what I need as found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/. However... I need them to be draggable, but if the #wrapper is set to relative, then they can't be dragged. Is there a way to make the elements so that they can be draggable with the #wrapper being relative?
Link to example http://jsfiddle.net/QddTt/13/
Found out the problem. My wrapper had z-index:-99; in there for some reason. Removing that allowed me to drag my elements when the wrapper was static.
So the main solution: setting the position to absolute for both elements.
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.
On one of my pages I use Isotope plugin. I hadn't known this before but Chrome flattens the z-order when using css3 transforms. So initially my nested menu was looking quite better with opacity changes and proper z-index. Problem is that nested ul goes under the content div.
Then I thought that it would be cool to apply resizing (by the nested ul) and change parent ul background on hover. So finally I've got this:
http://jsfiddle.net/challenger/xARgS/101/
How do I improve scripting here? Is it possible to optimize it?
Looking it in IE8 is like a natural disaster! Why?
Thanks!
A hover event for changing the css class to change the backgroundcolor is a bit clumsy: just use css :hover
You could also improve it by adding animation: http://jsfiddle.net/xARgS/102/
Part of the problem might be that every time that you hover over a nav item you have to visually resize the main navigation bar. Try removing the visual styling from that bar and adding a wrapper div with relative or absolute positioning and use its z-index to place it behind the navigation elements.
I have multiple images within a div, I change thier positions using JQuery
$("#"+carElem).css({"left": pos.left+50 +"px"});
Im using absolute positioning (relative positioning gives the same result), is it possible to cut off anything that is displayed outside of the parent div .i.e make sure its not shown?
Give the parent div the style overflow: hidden and go back to relative positioning (it won't work with absolute positioning).
There's probably a better way to solve the actual underlying issue, though, if we had a bit more context. But overflow: hidden will probably be part of it regardless.
Add overflow:hidden to the parent div.
best way to do that
<div style="overflow:hidden">
// place images here...
</div>
I have a simple Javascript drag function. You can see it here:
http://jsfiddle.net/XpAyA/12/
The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute.
Is there a way yo fix this? Make the scroll happen when it exceeds the limits?
Thank you
First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.
I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.
Here's a version that scrolls http://jsfiddle.net/vcJuF/1/
I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.