Develop Reference

How to change pages using JS keeping the navbar locked on top?

.mid {
display: block;
width: 60%;
margin: auto auto;
}
.navbar {
display: inline-block;
position: absolute;
}
.navbar li {
display: inline-block;
font-size: 140%;
}
<div class="mid">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Feedback</li>
<li>Support</li>
</ul>
</div>
I want to go to the Services pages with the navbar locked on top. If the bar is fixed on top then called page should cover the rest of the screen.

you can try:
.navbar {
top: 0;
position: fixed;
width:100%;
}
this should hold the nav bar at the top of the page.

UL Background doesn`t show when i add position absolute

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.

jQuery slider animation is not working properly

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>

Long Navigation bar introducing horizontal scroll?

I have designed a Navbar in which the drop down are absolutely positioned with respect to their parent list items (Main menu list is position: relative and submenus position: absolute).
My navbar 's main list is long (stretches till right-end of page). So when I hover on the last main menu item, then my drop-down occupies it's width and the page introduces a horizontal scroll (goes outside the body content).
I want the dropdown's on extreme ends of the page to open from right to left so that they lie within the body itself and no scroll is introduced.
How can I achieve this??? Please Help.
I have designed a Navigation Bar as follows:
HTML:
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>CSS</li>
<li>Graphic design</li>
<li>Development tools</li>
<li>Web design</li>
</ul>
</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
CSS:
#menu li {
float: left;
border-right: 1px solid black;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu ul {
position: absolute;
top: 38px;
left: 0;
margin: 20px 0 0 0;
opacity: 0;
visibility: hidden;
transition: all .2s ease-in-out;
}
#menu ul ul {
top: 0;
left: 195px;
margin: 0 0 0 20px;
}
#menu ul a {
padding: 10px;
width: 175px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu li:last-child ul {
left: auto;
right: 0;
}

Responsive menu in a div design issue

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.