I have created a div with an image inside. When clicked it resizes the div and places a larger image in. The side effect of this seems to be that the wrapper div moves a little to the left.
I have tried a few things but here is the code. Hope you can help.
http://jsfiddle.net/iamjasonlucchesi/3FuJ6/2/
Please make sure you can see the margin between the body and the Wrapper before testing the code.
Also note images dont work as I have not put them in.
The problem is a Horizontal Jump, caused by no scroll bar being displayed in some browsers.
The link below is how to solve it.
http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
Related
I am trying to keep an element horizontally and vertically centered while it grows inside a container, but while also allowing you to scroll and see the rest of the growing element. I made a codepen that demonstrates my problem.
I am using transformX and transformY while also using position:absolute with left and right set to 50% as well. The goal is that when you click the grow button, you should be able to scroll up, down left and right and see the whole image. Currently something with the transform seems to be preventing you from getting back to the top and the far left of the image. Any ideas?
CodePen
EDIT
I am using flexbox instead now, but still have the same problem. Its visible in the updated CodePen.
I have a div that is sized by placing left:260px to make it stay to the right of the menu bar, as seen in Before. but once the user try to highlight something, it went to the right with 260px extra. It is sized for responsiveness so I use 100% but can't get a right percentage to prevent that from happened. Any idea how can I fix that? Preferably CSS directly, not calc or jquery. thanks
While zooming the Web Page the DIV element will not Zoom, but the component placed inside the DIV is zooming and go out side of the DIV. Here I created a test fiddle test fiddle. Please help me to resolve this issue.
Your Div is taking up 50% of available space, irrespective of whats inside. The rest of the space is being left as margin.
For example if you zoom out from 100% (zoom out, not in). You can see that the contents will keep on getting small, but the width of the div will increase.
If you care about zoom-out/zoom-in looks, then use pixels instead of percentage.
Try it out over here: http://jsfiddle.net/fam46/1/
I had posted a similar question previously, when I was looking for help in doing the javascript portion.
I now have figured out how to get the javascript working to reproduce this affect in the images below, I need help getting my "MIDDLE" clickable div into place though.... scroll down to see the question portion
Ok here is a page with the code I have this far on jsfiddle.
Mu updated attempt, got it mostly working but it seems kind of hacky the way I had to do it
http://jsfiddle.net/jasondavis/HRq6G/5/embedded/result/
I have a container div with header, content, sidebar, footer areas. Right now when you click on the header div it will toggle the sidebar and content areas.
I would really like to figure out how I can get a middle DIV in between the article content and the sidebar, I will then make that div be the trigger to toggle it all.
In the image you can see that the new center div should always stay attached to the right side of the article div
If you are good with this kind of stuff I would greatly appreciate any help I can get with it, I have spent hours trying to get a div to position like I am describing with no luck. The div should also be the height of the article div
-----UPDATE-----
http://jsfiddle.net/jasondavis/HRq6G/6/embedded/result/
I have it working now. It can most likely be improved, I had to do some hacks like setting some negative margins, I would imagine someone with better knowledge could do it without that
Your explanation was a little hard to understand, but I think this is what you want. Basically there is a thin div between the sidebar and the main content area. Clicking on it causes the sidebar to relocate. Clicking it again restores the sidebar.
http://jsfiddle.net/HRq6G/4/
To accomplish this I chose to absolutely position the middle div along the right edge of the article div. I called the middle div 'trigger.'
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.