Expand one div to cover another div - javascript

I'm using jQuery to expand a div while hovering it so it covers the entire width of the page. It contains a large table and I'm required to build for a low resolution but in reality everyone has a higher so this is an accepted workaround. My problem is that the div "jumps" down below the other divs instead of covering them as I would like it to. Anyone know how this can be achieved?
I've created a jsfiddle of it so you get the main idea: http://jsfiddle.net/MRNxt/1/
Hover the grey box and make it expand to the right covering the #asd2 in the sidebar instead of below it.

Check this fiddle: http://jsfiddle.net/MRNxt/4/
The solution involves adding absolute positioning to the log div when expanding and taking it out when collapsing. Also included is a small fix to avoid flickering while animating.

Add this css:
#asd2{
position:absolute;
z-index:-1;
}
#log{
background:white;
}
Example: http://jsfiddle.net/MRNxt/2/

Is there a reason that using something like lightbox/thickbox isn't suitable?
Alternatively, you will need to play around with absolute positioning and z-index. I'd advise figuring out your ideal layout before working on the animation. Put it together in CSSEdit/Firebug/whatever so that your boxes are exactly where you want them to be and then it will be simple to add to the animation script.
Or just use an off-the-shelf lightbox.

This won't be the perfect answer:
http://jsfiddle.net/MRNxt/7/
but here I used a subContainer to allow you to have a 100% width and some border.

Related

How to scroll through whole images in CSS

I'm looking for some code which allows to scroll just through whole images on my landing page.
I don't really know how to explan but it's exactly the style on tesla.com. Every scroll on the mousewheel scrolls down one whole image.
How can you make something like this in Css & Javascript?
Best regards,
andy
Surely you can find bunch of working code around, but if you want to create your own you can follow these steps to begin.
Create divs with 100% width and height and position:absolute;
top:0; left:0; transform:translateY(100%).
Your divs will need some status flags like active, hidden, next, prev. Create animations with css or javascript which visually animate the divs but also change and handle these flags.
i.e. transform:translateY(0); to show a div and transform:translateY(100%); to hide a div back again. (This animations are completely up to you)
Finally bind these animation to window scroll event with javascript. If you want you can't bind these to other events like keypress, touch etc.
Now, I got it, what you want you use in your app.
You want to scroll through the whole page with an multiple image in the background should be changed on-scroll.
It can be done nicely using background-image property in CSS some Javascript.
See this demo - Change background image on-scroll.
Use this, it will work like charm.

Issue with container holding marquee animation - jquery

I’m having an issue with a container holding the marquee and i’m not sure what’s causing it.
Essentially, the container is stretching way too far, causing the animation to flash across extremely fast (because the animation accounts for the width).
I don’t want to state a width for the marquee because I want the container to stretch to whatever its siblings width is.
I’ve created a fiddle to display what’s happening. In the fiddle, i’ve included the exact html included on my own webpage.
I assume there’s an issue with the css of one of the other elements, but what? What's causing the container to stretch to extreme lengths?
FIDDLE: http://jsfiddle.net/uz9pG/
This is the jquery plugin marquee that i'm using http://jquery.aamirafridi.com/jquerymarquee/
Tables, fluid widths and overflow hidden tricks don't really get along well. You'll either need to change your code to use a different markup structure or put a fixed width on one the containing divs within your <td>.
Also, you have conflicting settings in your JS vs data-attributes in your markup. <div data-duration="2000" data-direction="right" class="marquee">
Here's a working version. http://jsfiddle.net/uz9pG/2/ Takes a second for the marquee to start. You'll need to adjust your margin code to sort that out. This one removes the tables altogether but you can just as easily add a fixed width to something like your .module_content div if that works for your design.
.module_content {
width: 400px;
overflow: hidden;
}

Wordpress template div not expanding

I have a wordpress theme that i'm building but i've hit a snag with some code and can't seem to get my div to expand correctly. I've tried clearing the floats at different positions, i've tried overflow: hidden, but nothing seems to work.
What i'm trying to do is have the content slide in from either side based on what header you click. The content is based on a wordpress post for each link. So the client can easilly edit it to any size.
Because of this it isn't viable to use pixels in the sizing of it. And i know that absolute positioning means that pixels are very nearly the only option.
I've messed with everything i can think of in firebug and just cannot get it to expand.
You'll find the site here: http://tinyurl.com/okd5wnf
However i couldn't get this to work either. Maybe that'll give you a clue as to what might be wrong.
I know it's a long winded post, and i apologise. If i have time later, i should be able to make a jsfiddle. However time is short at the moment.
Any help would be appreciated. Thank you very much.
Your problems stems from setting the <div class="box"></div>'s position property to absolute. Give the parent element(<div id="body-wrapper"></div>) overflow-x:hidden; to hide children that are not being displayed, and then use negative margins to position child elements within the viewport (the parent element). This is basically how most sliders work.
Remove position absolute from box class. please also mention what desired layout you need for content. we will suggest you classes for that.
Romove position:absolute from div.box
I guess that's all.

Z-index greater than Fancybox?

I have a div inside of Fancybox that I want to overflow over the edge of the fancybox window.
The structure of the page looks like this:
<div class="fanybox">
<div class="overflow">
Test
</div>
</div>
I want .overflow to flow over the edge of the window. Trying to change the z-index of .overflow to something higher than 8030 (the default Fancybox value) does not work, and yes, the div is positioned absolutely.
Is there anyway to fix this? I can provide an image of what I'm trying to accomplish.
I haven't used fancybox, myself, but playing around with the chrome console on their demo page I think I got the effect you are looking for.
-Drop out the overflow:hidden; on #fancybox-content.
#fancybox-image (or whatever your container is){
.
.
.
position:relative;
right:50px;
z-index:9000;
}
That's all it took for what's on their demo page. Should absolutely be doable as long as your content's parent isn't positioned statically, and the overflow isn't hidden. I'd probably position it relatively (not absolutely) if I understand what you are trying for. Hope that helps.
EDIT
Alright, I downloaded and got a bare bones page up using fancybox2 from the link provided (because apparently I have too much time on my hands :-). Using all their default values, all I had to change was the jquery.fancybox.css
.fancybox-inner {
position:relative;
right:50px;
}
and the image floated outside the container div. If you are trying to move a separate div or something you added, principles are the same. But it DOES work... Goodluck.
If the overflow element is inside the fancybox, you won't need any z-index at all. Every non-static-positioned element generates its own stack, and relative-positioned content inside a fancybox will easily overflow its outer elements [Demo].

HTML layout design - need better approach

I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/

Categories