I have this snippet.
The welcome div is for a welcome animation on the page that lasts 3.5 seconds and then disappears.
The problem is that the overflow is visible, being able to see the elements that I would like to be visible only after the welcome animation is finished.
As a solution to this problem, I thought of javascript, inserting another function for setTimeOut for body with hidden overflow
setTimeout (function () {
document.querySelector ('. body'). style.overflow = 'hidden';
}, 3500);
But it does not work.
I want the animation to last x seconds and then all the elements of the page to be visible, not during the animation.
Do you have solutions?
Is this method as effective for a beginning animation as other modern sites have?
setTimeout(function() {
document.querySelector('.welcome').style.display ='none' ;
},3500) ;
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.welcome{
background:black;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
<div class = "welcome">
</div>
<div class = "header">
<div class = "developedbar">
<h2 class ="developed1">Developed</h2>
<h2 class ="developed2">Developed</h2>
</div>
Just wrap the content you want to appear after, inside a div or section (say, with an id #mainContent) and initially set its's display to none. When you change the display of .welcome to none, you can also change the display of #mainContent to block like this:
setTimeout(function() {
document.querySelector('.welcome').style.display ='none';
document.querySelector('#mainContent').style.display ='block' ;
},3500) ;
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.welcome{
background:black;
height:50vh;
display:flex;
align-items:center;
justify-content:center;
color: #FFF;
}
#mainContent {display: none;}
<div class="welcome">
<h1>Welcome</h1>
</div>
<div id="mainContent">
<div class="header">
<div class= "developedbar">
<h2 class="developed1">Header</h2>
</div>
</div>
<div class="body">
<p>Body content and other text here</p>
<p>Body content and other text here</p>
<p>Body content and other text here</p>
<p>Body content and other text here</p>
</div>
<div class="footer">
<h2 class="developed1">Footer</h2>
</div>
</div>
Related
<div>
<div>Top Text</div>
<div><span>A</span><span>B</span><span>C</span></div>
</div>
The idea is to have something like:
Top Text
A B C
Where Top Text is always lined up with the starting and ending text on the bottom.
In this particular case, flexbox can do the job:
.box {
display:inline-block; /* fit content */
}
.box > div:last-child {
display:flex;
justify-content:space-between;
}
<div class="box">
<div>Top Text</div>
<div><span>A</span><span>B</span><span>C</span></div>
</div>
I'm trying to combine the .toggle() method with an animation. I've followed the methods laid out in this fiddle as well as in this SO post, but the second click isn't returning my div to the original position.
The behavior should be:
Click the title
Content expands
Slide up over the headline
Click again
Content contracts
Slide back down to the original position <-- This isn't happening
HTML
<div id="headline">
<h1>This is the headline</h1>
</div>
<div id="page-wrap"> <!-- contains more than one article, need the whole thing to slide -->
<article class="post">
<div class="title"><h1>Feedback</h1></div>
<div class="content">
<p>Videos can be more than direct instruction. Currently, how do you give feedback on assignments?</p>
<p>It takes a lot of time, right?</p>
<p>Video can be used to give direct feedback to the student because it communicates areas of improvement more effectively than written feedback alone.</p>
</div>
</article>
</div>
CSS
#headline {
position:fixed;
top:10px;
left:10px;
width:380px;
}
#page-wrap {
position:relative;
top:200px;
}
.post {
width:300px;
}
.post .title {
cursor: pointer;
}
.post .content {
display:none;
}
Script
$(".title").click(function() {
$title = $(this);
$content = $title.next();
$content.toggle(
function() {
$("#page-wrap").animate({"margin-top":"200px"}, 'fast')
},
function () {
$("#page-wrap").animate({"margin-top":"-200px"}, 'fast')
}
)
});
CodePen Demo
Here's a live page for more context.
I have a parent div and 2 child divs (child-left and child-right). child-right div will contain 1 or 2 icons depending on dynamic page requirement. The child-left div contains the title and also used as a handle to drag operation. I do not want to set a width px or % (like the 90% I have below). How do I set the child-left div to take the rest of available space after what is occupied by child-right.
<div id="parent">
<div id="child-left" style="width:90%">
This is my title
</div>
<div id="child-right">
<i class="fa fa-cog"></i>
</div>
</div>
Thanks!
The following should help you:
HTML:
<div id="parent">
<div id="child-right">Hey</div>
<div id="child-left">This is my title</div>
</div>
CSS:
#child-left {
border: 3px solid gray;
background-color:blue;
margin-left:0px;
overflow:hidden;
}
#child-right {
float:right;
border-style:solid;
}
#parent {
overflow:hidden;
}
DEMO JSFiddle
I have had some problems to resolve this situation.
I have a div "header" with no set height because could have a variable value depending on browser.
Inside her I have two more divs and I want to place one div exacly at the bottom of the another but I never know height "header" height. I tried to define a height for div "header" but sometimes it fails.
Use position:absolute in combination with a positioning context on the parent, for example:
<header>
Ohai
<div>
Noes!
</div>
</header>
CSS:
header {
position:relative;
height:25%;
background:#eee;
}
div {
position:absolute;
bottom:0;
left:50%;
margin-left:-50px;
width:100px;
background:red;
}
The header's size is unknown, since it's based on the viewport height, and the div is locked to its bottom with the combination of position:absolute and bottom:0. The header needs the position:relative to designate it a positioning context used by absolutely positioned child elements.
Fiddle here.
One way to do this would be to set position:relative on the header div, and position:absolute and bottom:0 on the child div you want to sit on the bottom of the header.
jsFiddle example
just use clear:both for the second div at bottom ,and set the height of the header as height:auto
Sample:
<div id="header">
<div id="first">
first
</div>
<div id="second">
second
</div>
</div>
CSS:
#header{height:auto}
#first{}
#second{clear:both}
DEMO
<div id="header">
<h2>Some title..</h2>
<div class="right">
<p style="color: black;display: inline">
Some data.....
</p>
</div>
<div class="left">
<form action="#" >
<input type="text" placeholder="put here..." required="required">
<button type="submit">Validar</button>
</form>
</div>
</div>
CSS:
#header{position: relative;height: 150px; border:1px solid black}
.right{right: 0; bottom: 0; top:auto; position: absolute}
.left {left: 0; bottom: 0; top:auto; position: absolute}
This work just fine in Chrome and Firefox but is not working in IE.
The div which have the left css is not being placed at the bottom of the "header".
<div>
<div>
div1
</div>
<div>
div2
</div>
</div>
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you