Shifting elements in a div with overflow auto - javascript

I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.
Here is an example of the html
<div id="container" style="overflow:auto;">
<div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
<div id="control1" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.
Any idea's?

You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..

Related

How to pop out nested child component outside of ancestor that has overflow hidden?

I have a sliding carousel with its overflow-x property set to hidden that contains a number of items shown 4 at a time. Within the items, there is a button that triggers an absolutely positioned pop-out menu that is longer than the carousel container and that is relative to its parent item. When the menu is visible, its full height is cut off and becomes scrollable.
What I would like is to have the pop-out menu fully visible without being cut off by the carousels overflow. Is this possible?
Ideally, I would like to find a CSS solution first before resorting to JS. The only information I can find in regards to this on the web are examples only related to parent and direct child elements and do not take into account nested child elements, so any help would be appreciated.
<div class='carousel'> //has overflow-x hidden
<div class='item'> //multiple item elements
<div class='wrapper'> //relative positioned wrapper
<div class='pop-out'> //absolutely positioned pop out
<div class='pop-out-list'> //list that contains multiple items which are cut off
<div class='pop-out-item'>
...
</div>
</div>
</div>
</div>
...
</div>
Here is a fiddle better demonstrating this problem
https://jsfiddle.net/84p9gkru/
just use a z-index property higher than carousel in pop-out-list like
.pop-out-list{
z-index:99999;
}

Display div side by side float left is not working

I want to display div side by side. The inner div is dynamic means I am using knockout binding . so the number of inner div is unknown. I want as the number of div increases a horizontal scroll bar comes. I am using float left property. But instead it display vertically as soon as i give width to the middle div it works but the problem is i dont know the width beforehand
<div style="width:400px;overflow-x:hidden;overflow-y:auto;">
<div data-bind="foreach:Members">
<div style="width:100px;float:left;">test</div>
</div>
</div>
<div style="width:400px;overflow-x:hidden;overflow-y:auto;">
<div data-bind="foreach:Members" style="white-space:nowrap; overflow:auto">
<div style="width:100px;display:inline-block;">test</div>
</div>
</div>
display:inline-block makes sure more than one div can display on the same line
white-space:nowrap forces all the divs to be on one line
overflow:auto enables the scrollbar(s) if needed

Div scolling with scrollview plugin

I am using jquerymobile, and i want to scroll my each div individually, something like :
<div data-role="content">
<div id="1"></div>
<div id="2"></div>
</div>
Now i want that, div#1 scroll left - right & div#2 scroll top - bottom . I am using scrollview plugin but i am not able to do this. Can anybody help me out with a little example code?
I assume you are using this with the experimental jQuery Mobile scrollview.
You can set a value for the data-scroll attribute as data-scroll="y" or data-scroll="x" to set the scrolling direction as vertical or horizontal.

CSS placing elements without affecting one another dynamically using javascript

I was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/
Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/
I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?
I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image...
So is there any way to make the divs does not affect each other but also place them inside the container div?
Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot
Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.
<div style="position:relative" id="parentDiv">
<div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
<div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>
hope that helps

Create overlay for DIV inside overflow:hidden DIV without clipping

Hi all. I'd like to be able to highlight a div inside a container DIV that has overflow:hidden set (changing this is not an option). I'm using the CSS 'outline' and 'box-shadow' properties to do this. The issue is that when the DIV is the full size of the outer div, you can't see that it's selected as the outline is (unsurprisingly) clipped to the outer div. Also, if the inner div is against one of the edges the issue occurs.
The attached images shows the layout of the divs, red is the outer div, purple the 'outline' and black the DIV I want to highlight - in that example the purple highlight to the left is clipped.
So the question is, is there a way (JavaScript & jQuery are fine) of overlaying the black div with another div such that (a) the overlay div isn't clipped to the outer div, and (b) when the black div moves or is resized, the overlay moves/resizes with it?
EDIT: It looks like this simply isn't possible in HTML/CSS in the way I described.
Set theblack div to "positon:relative". Then put the outline into that div, and set it with "position:absolute". With top,left,with and height you can put it "around" the black div.
Edit:
Sry, the black div has to be position absolute, too. Working example see here:
http://jsfiddle.net/t94FV/
Maybe you can use margins with percentages.
The trick is in only parent cover div with relative position. No position:relative children of overflow:hidden div. Only parent!
<div class="trick-container" style="position:relative">
<div class="overflow-hidden" style="overflow:hidden">
<div class="no-relative-position-1">
<div class="no-relative-position-2">
<div class="no-relative-position-N">
<div class="position-absolute" style="position:absolute"></div>
</div>
</div>
</div>
</div>
</div>

Categories

Resources