I have my jsp page like this :
EDIT : http://jsfiddle.net/F4nA9/
<div id="fonctiondetails">
[...]
<img onclick="showoption()" ... />
[...]
</div>
<div id="addqualite" style="display: none;">
[...]
</div>
And my jQuery function to hide and show my DIVs
function showoption() {
$( "#fonctiondetails" ).hide('slide',1000);
$( "#addqualite" ).show('slide',1000);
}
The problem is that when my first div disappear the second div come from the bottom and go up and replace the first div, but me I want her to display in the same level as the first div and come from the left or the right of the first div.
Your divs must be in same place/level in design;
Think that:
<style>
#fonctiondetails{
position: absolute;
top:0;
left:0;
}
#addqualite{
position: absolute;
top:0;
left:0;
display:none;
}
</style>
In that case, 2 divs are in same place and so while the firs div being disappear, second div will be shown. And they will be no movement effect because they are in the same place.
Example style was to show you the place of div. But you have to design your divs according to your template/page.
Try using position style (absolute, relative, static or fixed)
I think this will be helpfull
You can see this http://jsfiddle.net/modaloda/F4nA9/1/
div {
position: absolute;
top: 0;
}
#fonctiondetails {
z-index: 1;
}
You can use setTimeout:
setTimeout(function(){
$( "#addqualite" ).show('slide',1000);
},200);
I made my own solution, I create a container div like this:
<div id="animateslide">
<div id="fonctiondetails"> ... </div>
<div id="addqualite" > ... </div>
</div>
and css file like this:
#animateslide {
position: relative;
[...] /* it's good to specify a height of your choice */
}
#fonctiondetails {
position: absolute;
z-index: 1;
[...]
}
#addqualite{
position: absolute; /* even if we did'nt specify position it's work */
[...]
}
Related
My code is:
HTML:
<section>
<div id="banner">
<div class="container">
<p class="para">hello world</p>
</div>
<div class="container banner-bottom">
<div class="card card-primary text-center z-depth-2 contact-main-text">
<div class="card-block">
<p class="white-text">Please fill out the form below and ESC
staff will be in contact with you shortly.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.para{
color:white;
background: red;
padding:70px;
text-align:center;}
.white-text{
background:green;
padding:20px;}
Output is: Bootply
And i want:
Could anyone help me with that?
You can set negative top margin to overlay the second div, see the live example:
<div class="container banner-bottom" style="margin-top:-5%;padding:2%">
http://www.bootply.com/MorC45NB4V
PS: I have used inline css just to show, avoid inline css.
My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.
jQuery
//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});
CSS
p.white-text{
margin-left:5%;
margin-right:5%;
}
Output
bootply
1) In case you want your lower banner to have a full width:
You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.
.banner-bottom {
position: relative;
bottom: 45px;
margin: 0 40px;
}
2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:
#banner { position:relative;}
.banner-bottom {
position: absolute;
top:75%;
right:0;
bottom:auto;
left:0;
}
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
Here's my solution for this.
Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.
.card-block {
position: relative;
top: -50px;
margin: auto;
width: 80%;
}
A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:
#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }
Heres a forked bootply: http://www.bootply.com/Imuh4wUj50
I have a div which becomes fixed when it is scrolled to. I would like this div to go full width when it is in it's fixed state. I have done this by setting width: 100% to the div in question. The problem is I would like the content of the div to still line up with the content of the page, instead of going to the left. I would like to be able to do this without changing the current html markup.
Example: Full width when scrolled to and in fixed state.
Fiddle: https://jsfiddle.net/DTcHh/19335/
Example: If I add padding left to bring the content inwards this works. The problem is the padding left could be any number -is there a way of reliably working this out?
Fiddle: https://jsfiddle.net/DTcHh/19337/
CSS:
#myDiv.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Jquery:
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet) {
$("#myDiv").addClass('fixed');
}
});
Add an extra .container div inside the #myDiv and adjust the padding as and when the fixing takes place.
<div id="myDivWrapper">
<div id="myDiv">
<div class="container">
<p>
This should be fixed once it comes into view and then goes out of view.
</p>
</div>
</div>
</div>
#myDiv .container {
padding: 0;
}
#myDiv.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#myDiv.fixed .container {
padding: 0 15px;
}
This can probably be tidied up a little but I think you get the idea.
JSfiddle
Don't write left:0
enter link description here
#myDiv.fixed {
position: fixed;
bottom: 0;
width: 100%;
}
You simply need to calculate the measurement between the content and the window edge and then apply this as left padding when required.
var measure = ($(window).width() - ($('#myDiv').offset().left + $('#myDiv').width()));
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed').css('padding-left', 0);
} else if (initSet) {
$("#myDiv").addClass('fixed').css('padding-left', measure+'px');
}
});
DEmo Fiddle https://jsfiddle.net/DTcHh/19338/
EDIT: If editing the markup is an option i'd recommend #Paulie_D 's approach. You don't need to add another container though - simply add a class to your existing markup.
Demo Fiddle https://jsfiddle.net/DTcHh/19340/
<div id="myDivWrapper">
<div id="myDiv">
<p class="container">
This should be fixed once it comes into view and then goes out of view.
</p>
</div>
</div>
Since all your paragraphs are inside a container class, you can also add this class to your fixed paragraph as well.
$("#myDiv").removeClass('fixed');
$("#myDiv p").removeClass('container');
...
$("#myDiv").addClass('fixed');
$("#myDiv p").addClass('container');
Further more, you will need to tell #myDivto go full width:
#myDiv.fixed {
position: fixed;
bottom: 0;
left:0;
right:0;
}
See working example here.
I am trying to get the div with id="markdown-editor" to slide over when a button is clicked using JQuery's Animate function. markdown-editor contains two divs that have position: fixed. The div with id=header doesn't have any other positioning css (top, bottom, left, etc.), but the other div, where id=footer, has bottom: 0px. When I animate the #markdown-editor div, everything inside #markdown-editor animates correctly except #footer. I know it has something to do with using positioning css, but I'm not sure what to do about it. Below is the pertinent code:
HTML:
<div id="markdown-editor" class="col-xs-12">
<div id="header" class="row">
...
</div>
<div class="row">
...
</div>
<div id="footer" class="row">
...
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
CSS:
#header {
position: fixed;
padding-top: 15px;
z-index: 9001;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
margin: auto;
z-index: 9001;
padding: 10px;
}
Javascript:
$("#menu-button").on("click", function(e) {
$("#markdown-editor").animate({left: "20%"}, 500, "swing");
});
You need quotes around the first #menu-button in the Javascript portion.
You forgot quotes around #menu-button
$("#menu-button").on("click", function(e) {
$("#markdown-editor").animate({left: "20%"}, 500, "swing");
});
EDIT
Make sure you're linking to the jQuery library in your head.
Also, try giving #markdown-editor a left value in your css. Also, you need to give it a position. It doesn't matter if the elements inside it have position, the actual element needs a position in order to animate. Has to be fixed, relative, or absolute.
#markdown-editor {
position: relative; // or fixed or absolute
left: 2px;
}
I know how to stack divs on top of divs by doing position:absolute for the parent and position:relative for the children, but how can I make a div "rise up" from another div? An example of what I want to achieve is here. Scroll to the bottom and hover your mouse over the artwork.
What you can do is absolute position that pop-up in a relative positioned box, for example:
<div class="featured-image">
<div class="caption">
<p>This is where your text goes</p>
</div>
</div>
Now that you have that, you'll want to make the caption invisible unless scrolled over. So, a simple way to do this with just CSS is:
.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }
The last line makes it seen when you mouse-over the image.
Then you could animate it with jQuery easily. That appears to be what they're using.
$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
$(".caption", this).stop(true, true).show(500)
};
var hide = function() {
$(".caption", this).stop(true, true).hide(500);
};
$(".featured-image").hover(show, hide);
HTMl
<div id="pic">
<div>
</div>
</div>
CSS
#pic {
position: relative;
background: yellow;
width: 100px;
height: 100px;
overflow: hidden;
}
#pic div {
position: absolute;
bottom: -50px;
background: black;
height: 50px;
width: 100px;
}
JQuery
$('#pic').hover(
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '+=50'
}, 100);
},
function(){
$(this).find('div').stop(true, true).animate({
'bottom': '-=50'
}, 100);
}
);
jsfiddle: http://jsfiddle.net/Z6eLa/2/
Introduce yourself to jQuery and z-index.
http://api.jquery.com/slideDown/
The trick here is slidedown will make your top div slide down. The only thing that comes to my mind, is instead of expanding that bottom div up, do the opposite. Get the top div, and have it slide-up, while the other div is displayed behind it. It should give the appearance of the bottom div 'sliding-up'.
Note, sorry if this doesn't work. I'm actually not sure if you can get it to slide only halfway up instead of all the way...good luck though!
You don't need JS for that, just use css3 transitions.
I have structure of three nested div
<div id="div1">
<div id="div2"> // has come content
<div id="div3">
// has some content with a form
</div>
</div>
</div>
All three div are absolute.Now I want the #div3 to be positioned according to #div1
if I #div3 is right:0px; then it should go to the right most of #div1
Note Please Don't ask to Correct the structure as it not developed by me and #div1 and #div2 are not in my control.
only Idea I have is to move the #div3 and append it to #div1 by jQuery.but I will like to have a pure CSS solution if possible. else i will go with the jQuery append
I thought I have explained well css will not be required. but hear it is
CSS
#div1 {
position: absolute;
display: none;
}
#div2
{
position: absolute;
top: 85px;
left: 56px;
width: 300px;
z-index: 2;
}
#div3 {//what ever you want to write to make it relative to #div1 }
If the position of div3 is absolute, it'll look in his ancestors until it finds a parent that's relatively positioned. To achieve what you want you'd need:
#div1 { position: relative; }
#div2 { position: static; } // default positioning for DIVs
#div3 { position: absolute; right: 0; }
Use position() method to get DIV2 position relative to it's parent DIV1 and use those values as negative in order to make DIV 3 appear to be in div1.
Following should place DIV3 in top left corner of DIV1
var div2Pos= $('#div2').position();
$('#div3').css({top: 0-div2Pos.top, left: 0-div2Pos.left})
DEMO: http://jsfiddle.net/q5RgZ/1
Another simple solution would be to move div3 out of div2 and place in div1
$('#div3').appendTo('#div1')
Setting #div1 position to relative should do the trick. But if using position:absolute in #div1 is required, then the element containing these three div tags should use position:relative . Like this:
HTML:
<div id="container">
<div id="div1">
<div id="div2"> // has come content
<div id="div3">
// has some content with a form
</div>
</div>
</div>
</div>
CSS:
#container {
position: relative;
}