I am making a blog template and I have added a self-made jQuery slider on it which uses recursive setTimeout() for infinite slideshow iteration.
The images in the slideshow are side by side and the slideshow works in the following manner:
The first image fades out and is appended to the last position of its parent.
So the second image now becomes the first child and the same happens to it.
And the slideshow continues running in this way.
The problem is, sometimes the slideshow goes crazy and for multiple times, all the images fade out and fade in at the same time. Then after a few seconds, the slideshow starts acting normal again.
Please let me know where the bug is.
The JSFiddle
setTimeout(function run() {
fade_out();
setTimeout(run, 3000);
}, 3000);
// var first_child;
// setInterval(fade_out,3000);
// setInterval also causes the same problem
function fade_out() {
first_child = $('.timeline-list li:first');
first_child.fadeOut(1000);
setTimeout(function() {
$('.timeline-list').append(first_child);
first_child.fadeIn();
}, 1000);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row {
width: 1140px;
margin: 0 auto;
}
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.timeline-container {
overflow: hidden;
position: relative;
}
.timeline-title {
text-align: center;
font: 120%;
color: #D35400;
width: 200px;
height: 125px;
background-color: #fff;
border: 1px solid #D35400;
line-height: 130px;
}
.timeline-list {
list-style: none;
width: 1600px;
height: 125px;
position: absolute;
left: 200px;
top: 0;
z-index: -1;
margin-left: 2px;
}
.timeline-list li {
width: 200px;
height: 125px;
background: #000;
overflow: hidden;
float: left;
color: #fff;
border-right: 1px solid #fff;
line-height: 125px;
text-align: center;
}
<section class="timeline">
<div class="row">
<div class="timeline-container clearfix">
<div class="timeline-title">My Timeline</div>
<ul class="timeline-list clearfix">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
</ul>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Say Hello to my little Friend requestAnimationFrame
requestAnimationFrame is your friend
The benefits of requestAnimationFrame
They are browser optimised, so they can operate in most cases at 60fps (aka the sweet spot for animation).
Animations taking place in inactive tabs are stopped. Meaning if a user navigates away from your tab and you have an animation, it
releases the stronghold it has on the CPU.
Because of the aforementioned performance and respect, battery life and page responsiveness are better on low-end devices and mobile
browsers.
If you have the urge to perform animations in Javascript, then you have probably used a setTimeout or setInterval to achieve this. This is bad for a whole number of reasons, the biggest one being they will suck performance from your visitor's browser and flatten their little phone batteries.
The problem with these two functions is simple. They don't understand the subtleties of working with the browser and getting things to paint at the right time. They have no awareness of what is going on in the rest of the page. These qualities made them very inefficient when it came to powering animations because they often request a repaint/update that your browser simply isn't ready to do. You would often end up with skipped frames and other horrible side effects.
Read this Article and here for requestAnimationFrame DOC
function fade_out() {
first_child = $('.timeline-list li:first');
first_child.fadeOut(1000);
setTimeout(function() {
$('.timeline-list').append(first_child);
first_child.fadeIn();
requestAnimationFrame(fade_out);
}, 3000);
}
requestAnimationFrame(fade_out);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.row {
width: 1140px;
margin: 0 auto;
}
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.timeline-container {
overflow: hidden;
position: relative;
}
.timeline-title {
text-align: center;
font: 120%;
color: #D35400;
width: 200px;
height: 125px;
background-color: #fff;
border: 1px solid #D35400;
line-height: 130px;
}
.timeline-list {
list-style: none;
width: 1600px;
height: 125px;
position: absolute;
left: 200px;
top: 0;
z-index: -1;
margin-left: 2px;
}
.timeline-list li {
width: 200px;
height: 125px;
background: #000;
overflow: hidden;
float: left;
color: #fff;
border-right: 1px solid #fff;
line-height: 125px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="timeline">
<div class="row">
<div class="timeline-container clearfix">
<div class="timeline-title">My Timeline</div>
<ul class="timeline-list clearfix">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
<li>Image 6</li>
</ul>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Related
I want to build a hamburger menu and I don't know why when I add position absolute to my UL(links-list) his background doesn`t show.It only shows the links and the border-bottom. I will post maybe someone will spot the issue.
Thank you in advance.
I will write here something because I need to have more words to post the question.
.header {
width: 100%;
display: block;
height: 0;
z-index: 1;
.header-content {
display: block;
.logo {
display: none;
}
.links-list {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
margin: 0;
width: 100%;
background: #505050;
height: 0;
.close {
display: block;
& a {
padding: 0 .5rem;
}
}
& li {
border-bottom: 1px solid #404040;
}
}
}
}
.open {
height: auto !important;
}
#burger-menu {
display: block;
height: 40px;
width: 100%;
background: url(/Core/img/burger.png)no-repeat 98% center;
background-size: 70px;
background-color: red;
}
<header class="header ">
<div class="container">
<div class="header-content">
<a href="#" id="burger-menu">
</a>
<img src="/Core/img/logo1.jpg" class="logo" alt="logo" />
<ul class="links-list">
<li class="close"><i class="fas fa-times"></i></li>
<li>Home</li>
<li>Bio</li>
<li>Training</li>
<li>Academy</li>
<li>Gallery</li>
<li>Store</li>
<li>Contact</li>
</ul>
<div class="overlay"></div>
</div>
</div>
</header>
It's because you have height: 0 on .links-list. When positioning elements absolutely, in most, if not all, cases you need to make sure the height has a positive value so the background has an area to draw on.
I want to have a fixed container (a leaflet map) that a list with informations about the selected map item can be scrolled over.
I came up with this
https://jsfiddle.net/m5ntbyxs/5/
My list, that can be scrolled over the map, should start at the bottom of the screen and able to scroll up until it reveals all its content. I am using a translate to position the list further down on the screen. When no item is selected on the map, the list should scroll back down and not be visible. Just setting the transform: translateY(100vh) does only work, when the user has not previously scrolled up the list. Then the amount the user would have scrolled the list, would still be visible.
But it has another problem: it uses fixed layout, which takes the container out of the flow so it can not live properly in an app shell that also displays a title bar and nav bar.
Is there a way to achive this kind of effect without fixed element?
jQuery is not an option to solve this.
made it work like so:
html :
<div class="box">
<div class="menu"><h1>div.menu</h1></div>
<div class="map">
<p class="title">div.title</p>
<div class="out" id="scroll">
<li class="empty"></li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>a line of text</li>
<li>etc...</li>
</div>
</div>
<div class="down"><p>div.down</p></div>
</div>
css :
body {
background-color: darkslategray;
text-align: center;
box-sizing: border-box;
width: 100%;
height: 100vh;
}
.box {
color: gainsboro;
width: 100%;
height: 100%;
min-height: 200px;
display: flex;
flex-flow: column nowrap;
}
.menu {
text-align: center;
border: solid 1px;
padding: 10px 0 0;
flex: 1 1 auto;
order: 1;
&>h1 {
border: solid 1px;
}
}
.map {
display: block;
background: teal;
text-align: center;
position: relative;
overflow: hidden;
flex: 10 10 auto;
order: 2;
&>.title {
position: absolute;
border: solid 1px;
background: teal;
margin: 0 1%;
width: 98%;
padding: 16px 0;
font-size: 24px;
z-index: 2;
}
&>.out {
overflow-y: auto;
position: absolute;
height: 100%;
width: 98%;
margin: 0 1%;
display: block;
border: solid 1px white;
z-index: 1;
&::-webkit-scrollbar {
display: none;
}
&>.empty {
content: "";
margin: 0;
height: 90%;
margin: 5px;
border: solid 1px;
position: realtive;
background: none;
}
&>li {
list-style-type: none;
padding: 10px;
margin: 5px;
border: solid 1px;
font-size: 16px;
}
}
}
.down {
text-align: center;
display: block;
position: relative;
border: solid 1px;
flex: 1 1 auto;
order: 3;
}
Right, so I have a basic Jquery script that adds a "fixed" class to the nav bar when the user scrolls past the nav bar (154 pixels down). The issue is, the content below the nav bar then jumps up by 35 pixels (the height of the nav bar). I've tried adding a div class with a padding of 35px that shows when the user scrolls past the nav bar, which, although fixed other display problems, still allowed the content to lift up by 35 pixels. Here's what I have so far:
The jQuery that adds the fixed class, and the jQuery that shows the padding:
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
} else {
$('ul.nav').removeClass('fixed');
}
});
</script>
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.padd').show();
} else {
$('.padd').hide();
}
});
</script>
The HTML:
<body ONMOUSEWHEEL="OnMouseWheel()">
<p><img src="images/BannerPicture.png" alt="Leisure in mk logo" width="1024" height="150"></p>
<ul class="nav">
<li class="nav">
Home
</li>
<li class="nav">
Centre MK
</li>
<li class="nav">
Music
</li>
<li class="nav">
More Stuff</li>
</ul>
<div class="pad">
</div>
<div class="padd">
</div>
<div class="Informationbox">
text and shizz
</div>
And finally, the CSS:
ul.nav {
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 1024px;
display: table;
table-layout: fixed;
vertical-align: middle;
height: 35px;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
background-color: #C60;
font-size: 25px;
}
/* this styles each link when the mouse is NOT hovered over */
li.nav {
display: table-cell;
vertical-align: middle;
height:100%;
align-items: center;
vertical-align:middle;
line-height:35px;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a {
display: block;
height: 100%;
width: 80%;
text-decoration: none;
vertical-align: middle;
align-items: center;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a:hover {
line-height: 25px;
transition:.4s;
}
ul.nav.fixed {
position: fixed;
top: 0;
left: 50%;
margin-left: -512px;
margin-right: 0;
}
.padd {
padding-bottom: 40px;
display:none;
}
.Informationbox {
background-color: #FF9900;
border: 1px solid #FFF;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
add top 35px to the "nav" after block when u scrolles down using jquery.. and need to remove it when scrolls top..
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
$('.your_div').css({"top" : "35px"});
} else {
$('ul.nav').removeClass('fixed');
$('.your_div').css({"top" : "0px"});
}
});
I am creating a popup with a blacked out background. I want the popup to disappear when the background is clicked. Whilst the popup appears, the background does not appear to be clickable with jQuery. Even when I insert an "alert()" into the code, nothing happens.
HTML:
<div id="blacked_out_background"></div>
<div id="tr_panel">
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
CSS:
#blacked_out_background
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
opacity: 0.5;
background-color: #000;
text-align: center;
z-index: 2000;
}
#tr_panel
{
position: relative;
margin: auto;
bottom: 600px;
width: 300px;
background-color: #eee;
border-radius: 5px;
border: 2px solid #111;
background-color: #FFF;
opacity: 1;
z-index: 3000;
}
jQuery:
$("#blacked_out_background").click(function () {
$("#blacked_out_background").hide();
});
I have this layout
I have 2 problems:
The height of div 2 is not same as div 1 or 3, i tried this solution
from stack overflow, but its not working.
The menu to be set in div 2 is responsive, but on shrinking the width, it
list down, which pushes the carousel even below, screwing the whole
design..... is there any method i can make the mid_div responsive
by not shrinking but instead create a horizontal scroll in that div
only (depending on screen size) ??
CSS
#h_scroll {
margin: 0 auto;
margin-top: 10px;
width: 80%;
}
#h_scroll_banner {
display: inline-block;
width: 100%;
}
#h_scroll .fltlft {
float: left
}
#h_scroll .fltryt {
float: right
}
#h_scroll .mid_div {
width: 100%;
background-color: #F11181;
height: 100%;
}
#h_scroll .mid_div ul {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#h_scroll .mid_div li {
list-style: none;
display: inline-block;
}
#h_scroll .mid_div li a {
display: block;
line-height: 20%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 4%;
width: 20%;
}
HTML
<div id="h_scroll">
<div id="h_scroll_banner">
<div class="fltlft" id="div_height_to_get">
<img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
</div>
<div class="fltryt">
<img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
</div>
<div class="mid_div" id="div_height_to_set">
<ul>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
</ul>
</div>
</div>
If you have full control over the source, here is my solution (JSFiddle preview):
HTML
<div class="wrapper">
<div class="banner-left"></div>
<div class="banner-mid">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="banner-right"></div>
<p>This is some content under the menu</p>
</div>
CSS
.wrapper {
margin: 40px auto;
width: 600px;
}
.banner-left, .banner-right {
background: #eee;
float:left;
height: 50px;
width: 50px;
}
.banner-left {
margin-left: -50px;
}
.banner-right{
margin-right: -50px;
}
.banner-mid {
float:left;
margin-bottom: 20px;
width: 100%;
}
.banner-mid > ul {
background: #ddd;
list-style:none;
margin: 0;
padding: 0;
height: 50px;
width: 100%;
}
.banner-mid > ul > li {
float:left;
line-height: 50px;
padding-left: 10px;
}
Since your banner flairs don't have any content in them, why not use a ::before and ::after? I don't see the need why all 3 divs need to be the same height and using generated content you can just have the slideshow positioned based on margins from .mid_div.
.mid_div {
position: relative;
}
.mid_div::before, .mid_div::after {
display:block
width: 50px; /* image width */
height: 50px; /* image height */
content: '';
position: absolute;
top: 0;
left: -50px;
background: url(image/scroll_banner_left.jpg);
}
.mid_div::after {
left: 100%;
background: url(image/scroll_banner_right.jpg);
}
As for you wanting a scrollbar, use overflow-x: auto on the .mid_div and for the .mid_div ul have a set pixel width for it and whenever .mid_div gets smaller the content won't reflow. You could also try white-space: nowrap on the ul also while having the li {display: inline}.
The answer to your first question, making all the divs the same height, you need to do this:
div1, div2, div3 { display: table-cell; }
For your second answer you could apply a min width to the divs/div and set the overflow to scroll.