I'm trying to make a tab menu that sits on the bottom of a div and when a tab link is clicked it slideup with it's content.
Here is what I've got so far. I really can't see why it's behaving they way it is
http://jsfiddle.net/5mVt8/11/
The key bits:
#content {
position: relative;
width:500px;
height:400px;
overflow:hidden;
}
.page {
position: absolute;
left:0;
top:380px;
width:500px;
height:400px;
}
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Full code here: http://jsfiddle.net/5mVt8/11/
Is these a bug with having a absolute positioned div inside a relative div with overflow? Can anyone tell me why this doesn't work or how I should approval this?
Remove the #one #two #three from your html.
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Now simply write your animate correctly.
$('.page a').click(function(){
$(this).parent('.page').animate({top:0}).addClass('open');
});
http://jsfiddle.net/5mVt8/18/
EDIT: I am sure you could find a cleaner way to write your CSS. All those absolutes and positioning and z-indexes. I would find a better way to accomplish what you want, but that's me.
You have #content fixed height with overflow:hidden and pages on the bottom partially hidden with this overflow. Now on link click anchor works and #content scrolls down to the hidden block top. You should add return false at the end of click event function to prevent default behavior.
Also you have missed the animate method syntax. It should be like this
$(this).parent().animate({'top': '0px'}, 300, "swing");
http://jsfiddle.net/5mVt8/27/
Related
I try to use the spin.js
I want it to pop up in the middle of the div element. So I did set:
position: 'relative'
top:'50%'
left:'50%'
but the top option doesn't work. After analyzing the problem I could break it down to a html/css problem:
<div style="background-color: red">
<div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
1st div line<br>br line<br>br line 2
<div>div line 1</div>
<div>div line 2</div>
</div>
In this example the blue element should be in the middle of the red, but it isn't. and here is the fillde for it:
http://jsfiddle.net/exu77/obcg3cxv/
This is the plunker to the original version with spin.js
http://plnkr.co/edit/qwjArDtnqGZQgbkQiRYt?p=preview
The position:relative must be applied to the parent element, i.e. the div that contains the spinner. The spinner itself needs position:absolute (which is the default). Here is is an updated version of your plunker where the spinner is centered inside the red box: http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview
I was able to get it to work by adding a height to the jsSpinner div.
<div id="jsSpinner" style="background-color:red; height: 100px;">spin in the red part
<br>br line
<br>br line 2
<div>div line</div>
<div>div line 2 </div>
As for why this works? That part I don't know.
Here is my HTML structure:
<div id="outer" style="overflow: hidden;">
<div id="otherStuff">
some other stuff goes in here
</div>
<div id="wrapper" style="position: relative;">
<div id="popup" style="position: absolute;">
</div>
</div>
</div>
I just want my #popup element to be overflow the #outer element, but now, it is just cut out by the #outer element. By the way, #popup element should be positioned based on #wrapper element rather than #outer element.
<div id="wrapper" style="position: relative;">
make it impossible to be shown.
if it's popup, why it should be in the "overflow:hidden" div? or why wrapper should be relative?
you can do something like this : http://jsfiddle.net/nn007/9FehL/
Sorry, but overflow: hidden is just that. There is no chance ever that you have an element that is located inside of it (considering the dom-structure) that will visually be displayed outside the borders of this element. Popups are usually best placed in the root level, at first or last element inside the body element
i am trying to animate a div, what i need is when click a button i want to hide a div and show another div that is next child.
here is my fiddle.
I am trying to do like this this site here you can see when you click the learmore link which is in the top-right hand side then another div content open like sliding.
DEMO jsBin
var c=0;
$('.slide:gt(0)').hide();
$('#learn').click(function(){
c++;
$('.slide').eq(c).css({zIndex:c}).show('slow');
});
HTML:
<div id="slider">
<div id="learn">Learn more</div>
<div class="slide s1">I'm slide 1</div>
<div class="slide s2">I'm slide 2</div>
<div class="slide s3">I'm slide 3</div>
</div>
CSS:
#slider{
position:relative;
width:340px;
height:340px;
}
#learn{
position:absolute;
right:0px;
z-index:2; /*set a higher Z-index if you have more slides*/
cursor:pointer;
}
.slide{
position:absolute;
right:0px; /*important!! To 'slide' from right to left*/
top:0px;
width:300px;
height:300px;
}
If you have a defined number of slides you can keep the code intact, in the other hand I'd suggest you to - when the last slide is reached - hide the #learn programatically with jQuery. Let me know if you need help with that one.
Happy coding
Will something like this suffice:
$('#divtohide').fadeOut('slow', function() {
$('#divtoshow').fadeIn('slow');
});
You can change the ids as needed.
EDIT
Check this fiddle: http://jsfiddle.net/MR5yv/1/
EDIT #2
Check this fiddle: http://jsfiddle.net/MR5yv/2/
I've got a a div acting as a container which is positioned as relative.
Within this div I have 3 other divs positioned as absolute.
<head>
<style>
#container{ position:relative; }
#block1, #block2, #block3 { position:absolute; }
#block2 { top:100px; }
#block3 { top:600px; }
</style>
</head>
<div id="container">
<div id="block1"> some text </div>
<div id="block2"> some text </div>
<div id="block3"> some text </div>
</div>
How can I get correct height of a relative div with js.
I tried .clientHeight and jquery .height() but won't work.
Thanks!
I think you got something wrong. When you position divs inside other divs like that, the container-div will have nearly no (or no) height at all. That's cause of the absolute positioned divs. They can be placed "outside" the container-div, and only use it as a reference for x and y offsets.
I have a page that static data in it will push a div down to make it longer. But when I use ajax loaded content then the div will stay as big it originally was and it looks like my new content will just overlap it...
I have a setup like this
<div id="wrap">
<div id="main-content">
<div id="content-fill">
<div id="files_left_pane">static content</div>
<div id="files_right_pane">ajax content</div>
</div>
</div>
</div>
#content-fill {border:1px solid #BDBDBD; width:919px;}
#files_left_pane {float:left; border-right:1px solid #BDBDBD; width:100px;}
#files_right_pane {float:right; widht:819px}
the height of the right pane is controlled by the height of the left pane since there is static content in there, mainly my navigation menu.
any advice?
as far as I test it when you add content then the div start from the left side. This happens because you didn't set width. for example add width:200px for #files_right_pane and check the results.
live example: http://jsbin.com/udori5
Set Your div position as relative
<div id="files_right_pane" style="position: relative;">ajax content</div>
Easiest fix is add float:left to content-fill