So when it comes to loading the page on mobile devices, images start loading but they fail to load completely. I have already tried to preload the images before the page is displayed, but it still fails to load. I also tried to minimize the amount of images, but even with one image it fails to load. The images are also compressed, so size is not the issue with loading. Sometimes when the page is refreshed, the images load; however, other times they don't. Is this an ios/browser issue? Possibly something with css? Maybe too much going on at once?
By the way, the images load fine locally, but on the live site, the loading issue persists. Could it be the hosting service?
HERE IS THE LIVE PAGE (loads fine on desktop but not mobile)
http://thelittlepenguinshop.com/shop.php
All help is appreciated.
<?php
include 'db/connect.php';
?>
<!DOCTYPE html>
<html>
<head>
<?php include 'includes/head.php' ?>
</head>
<script type="text/javascript">
var imgs = [
"img/shopView/IMG_1932.jpg",
"img/shopView/DSCF2657.jpg",
"img/shopView/DSCF2655.jpg",
"img/shopView/DSCF2654.jpg",
"img/shopView/DSCF2652.jpg",
"img/shopView/DSCF2647.jpg",
"img/shopView/DSCF2645.jpg",
"img/shopView/DSCF2643.jpg",
"img/shopView/DSCF2641.jpg",
"img/shopView/DSCF2639.jpg",
"img/shopView/DSCF2637.jpg",
"img/shopView/DSCF2635.jpg",
"img/shopView/DSCF2633.jpg",
"img/shopView/DSCF2628.jpg",
"img/shopView/DSCF2627.jpg",
"img/shopView/DSCF2624.jpg",
"img/shopView/DSCF2623.jpg",
"img/shopView/DSCF2619.jpg",
"img/shopView/DSCF2618.jpg",
"img/shopView/DSCF2615.jpg",
"img/shopView/DSCF2610.jpg",
"img/shopView/DSCF2608.jpg",
"img/shopView/DSCF2606.jpg",
"img/shopView/DSCF2602.jpg",
"img/shopView/DSCF2600.jpg",
"img/shopView/DSCF2598.jpg",
"img/shopView/DSCF2594.jpg",
"img/shopView/DSCF2591.jpg",
"img/shopView/DSCF2589.jpg",
"img/shopView/DSCF2587.jpg",
"img/shopView/DSCF2584.jpg",
"img/shopView/DSCF2580.jpg",
"img/shopView/cELSM.jpg",
"img/shopView/cBae.jpg",
]
function preload(all_imgs) {
$(all_imgs).each(function() {
$("<img/>")[0].src = this;
});
}
preload(imgs);
</script>
<body>
<?php include 'includes/body-internals/mainnav.php' ?>
<input type="hidden" class="activeCheck" id="shop">
<div id='sh-ul-wrap' class='card'>
<div id="sh-ul">
<?php
$start_from = 1;
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * 12;
$sql = "SELECT * FROM items LIMIT $start_from, 12";
if ($result = $db->query($sql)) {
if ($count = $result->num_rows) {
while($row = $result->fetch_object()) {
echo '
<div class="li">
<a href="itempage.php?item_id=', $row->item_id, '">
<div class="sh-it-wrap">
<div class="sh-it-names">', $row->item_name, ' <span style="font-weight:300"> | ', $row->item_type, '</span></div>
<div class="sh-it-prices">$', $row->item_price, '</div>
<img src="img/shopView/', $row->item_img, '">
</div>
</a>
</div>
';
}
$result->free();
}
}
?>
</div>
</div>
<div id='shop_pg_num'>
<ul class='card'>
</ul>
</div>
<?php include 'includes/body-internals/footer.php' ?>
</body>
<script type="text/javascript">
//keeps the list within the widths of 500 and 950 pixels
$(document).ready(function() {
function sh_ul_wrap_width() {
$('#sh-ul-wrap').css('width', '950');
if (window.innerWidth >= 1500) {
$('#sh-ul-wrap').css('width', '950');
} else if (window.innerWidth <= 500) {
$('#sh-ul-wrap').css('width', '500');
}
$('.sh-it-wrap').css('height', String($('.sh-it-wrap img').height()));
}
setInterval(sh_ul_wrap_width, 500);
//displays number of pages based on how many items are in the database
function num_pages() {
var x = '<?php $v = $db->query("SELECT * FROM items"); $count = $v->num_rows; echo $count; ?>';
var num_pages = Math.ceil(x / 12);
for (var i = 1; i <= num_pages; i++) {
$('#shop_pg_num ul').append(
'<li>' + String(i) + '</li>'
);
}
}
num_pages();
});
</script>
</html>
HERE IS THE CSS
#sh-ul-wrap {
width: 950px;
margin: 0 auto;
}
#media only screen and (max-width: 1000px) {
#sh-ul-wrap {
width: 90vw;
}
}
#sh-ul {
position: relative;
width: 100%;
display: block;
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
/*large screen DEFAULT 4 items per row*/
#sh-ul .li {
width: 25%;
float: left;
padding: 0;
margin: 0;
text-align: center;
margin: 10px 0;
}
#sh-ul .li a {
color: white;
text-decoration: none;
transistion: 0.2s ease color;
}
#sh-ul .li a:hover {
color: #60DFE5;
}
/*#sh-ul .li > span {
display: block;
}*/
.sh-it-wrap {
margin: 0 auto;
width: 200px;
position: relative;
}
.sh-it-wrap img {
height: 100%;
width: 100%;
}
.sh-it-names {
width: 100%;
background-color: rgba(0,0,0,0.6);
position: absolute;
bottom: 0;
line-height: 50px;
font-size: 15px;
}
.sh-it-prices {
width: 50px;
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
font-size: 25px;
line-height: 50px;
}
/*medium screen causes 3 items per row*/
#media only screen and (max-width: 1500px) {
#sh-ul .li {
width: 33.3%;
}
}
/*small screen causes 2 items per row*/
#media only screen and (max-width: 1000px) {
#sh-ul .li {
width: 50%;
}
.sh-it-wrap {
width: 75%;
}
}
#shop_pg_num {
text-align: center;
}
#shop_pg_num ul {
list-style-type: none;
padding: 10px;
margin-top: 10px;
border: 0;
display: inline-block;
}
#shop_pg_num ul li {
text-align: center;
font-size: 20px;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
FIXED (our stupidity)
We fixed the issue. There was some old code that made the page responsive that was somehow messing up the styling for the images. We got rid of that old code and now it is working beautifully now. Thanks for all the help :)
try this in your css file
#media only screen and (max-device-width: 480px) {
// css for image here.
}
if you want to know more specific. Share your code!.
Related
So, i am having an issue with a div, when another div is generated (via javascript) below it, it is changing the size of the div.
// for the side nav message list
const chatList = function(list) {
let br = document.createElement("br")
for (let index in list) {
try {
let chat = list[index]
let chatBodyParent = document.createElement("div")
chatBodyParent.onclick = function() {
$("#message-list").empty()
api.listMessages(chat.chat.id)
document.getElementById("message-list").channelId = chat.chat.id
}
chatBodyParent.id = `chat-body-${chat.chat.id}`
let chatBody = document.createElement("div")
chatBody.className = "chat-body"
let chatImg = document.createElement("img")
chatImg.src = chat.chat.cover
if (!chat.chat.cover && chat.chat.type == 1) {
chatImg.src = "/dump/pfp.svg"
}
if (!chat.chat.cover && chat.chat.type == 3) {
chatImg.src = "/dump/public.png"
}
chatImg.className = "chat-img"
chatImg.setAttribute("align", "left")
chatBody.appendChild(chatImg)
let chatInfoContainer = document.createElement("div")
chatInfoContainer.className = "chat-info-container"
let chatName = document.createElement("span")
chatName.className = "chat-name"
chatName.innerText = chat.chat.title
chatInfoContainer.appendChild(chatName)
chatInfoContainer.appendChild(br.cloneNode(true))
let chatMessageContent = document.createElement("span")
chatMessageContent.className = "chat-message-content"
chatMessageContent.id = `chat-message-content-${chat.chat.id}`
let messageContent
if (chat.message) {
let long = false;
if (chat.message.text.length >= 30) {
long = true
}
messageContent = chat.message.text.substring(0, 30)
if (long) {
messageContent += "..."
}
} else if (chat.type == "file") {
messageContent = chat.user.nick + " sent a file"
}
chatMessageContent.innerText = messageContent
chatInfoContainer.appendChild(chatMessageContent)
chatBody.appendChild(chatInfoContainer)
chatBodyParent.appendChild(chatBody)
document.getElementById("chat-list").appendChild(chatBodyParent)
} catch {
console.log(list[index])
}
}
}
.sidenav {
height: 100%;
width: 15%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: var(--lightish-grey);
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 15%;
padding: 0px 10px;
overflow-x: hidden;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
::-webkit-scrollbar {
color: var(--grey);
}
::-webkit-scrollbar-corner {
color: var(--grey);
}
::-webkit-scrollbar-track {
color: var(--grey);
}
.menu {
width: 90%;
min-width: 90%;
height: 200px;
margin-left: 5%;
margin-right: 5%;
background-color: var(--menu-grey);
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-bar {
position: fixed;
bottom: 1%;
width: 50%;
height: 3.5%;
padding: 0px 5px;
margin: 8px 0;
display: inline-block;
border-top: hidden;
border-left: hidden;
border-right: hidden;
border-bottom: solid var(--light-grey);
box-sizing: border-box;
background-color: var(--grey);
color: var(--light-grey);
font-family: "FontRegular";
}
.chat-bar:focus {
outline-width: 0;
}
.chat-body {
width: 90%;
height: 50px;
margin-left: 5%;
border: 3px;
border-top: hidden;
border-left: hidden;
border-right: hidden;
/*border-bottom: solid var(--light-grey);*/
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-body:hover {
opacity: 0.8;
cursor:pointer;
}
.chat-body:focus {
opacity: 0.8;
}
.chat-img {
height: 50px;
width: auto;
border-radius: 50%;
}
.chat-info-container {
position:relative;
top: 10%;
}
<!DOCTYPE html>
<html>
<head>
<title>iFChat - Dashboard</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/dashboard.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/api.js"></script>
<script type="text/javascript" src="/js/dashboard.js"></script>
</head>
<div class="sidenav">
<div id="menu" class="menu">
</div>
<div>
</div> <br><br>
<div id="chat-list">
</div>
</div>
<div class="main" id="main">
<div id="message-list" class="message-list">
</div>
<input type="text" name="chat..." id="chat-bar" class="chat-bar" placeholder="chat..." maxlength="500">
</div>
</html>
Here is an image before the chat list is loaded
Then menu is loaded with the correct size and margin
pre-load
after the chat list loads, it changes the width or margin of the div above some how, and im not sure how or why its doing that, but i cant figure it out, heres an image of after the chat list is loaded post-load
i have tried different margins and positioning settings but cant seem to get it to work, any help is greatly appreciated :)
edit: One possible solution may be to change the css with javascript every time the chat list is loaded, but i would like to avoid that if at all possible.
OK, so i figured out the issue, the issue occurs when enough elements pop up to trigger the scrollbar, so the fix for me was this
::-webkit-scrollbar {
display: none;
}
Because i want a user to beable to scroll, but i dont want there to be a scrollbar, My next plan is to make this static, so that it doesnt move on scroll at all. Still the issue was arising when my (invisible scroll bar, that still had a width) was appearing. Gotta watch out for hidden elements.
I'm having a hard time figuring out why the code below doesn't work as expected.
What I'm trying to achieve is same functionality with position:sticky whereas when the scrolled reaches the top of the #second-header then fixes its position below the #header which is also fixed, however, the height of the #header is unknown which is I believe can be calculated using the function outerHeight(true) on JQuery.
Then after reaching out to the bottom of the #second-header-container, remove the fixed position of #second-header turning it back to normal position.
Due to browser compatibility issues and other customization, I cannot simply use the position:sticky of css.
It looks like my logic is wrong, and I need help.
jQuery(document).ready(function(){
var $document = jQuery(document);
var header = jQuery('#header');
var second_header = jQuery('#second-header-container').find('#second-header');
var second_header_container = jQuery('#second-header-container');
var second_header_offset = second_header.offset().top;
var second_header_container_offset = second_header_container.offset().top;
jQuery(window).scroll(function(){
var top_margin = header.outerHeight(true);
var second_header_height = second_header.outerHeight(true);
var second_header_container_height = second_header_container.outerHeight(true);
if( jQuery(window).scrollTop() > (second_header_offset - second_header_height) && jQuery(window).scrollTop() < second_header_container_height) {
second_header.addClass('fixer');
second_header.css({position:'fixed', top:top_margin, 'z-index':'999999'});
} else {
second_header.removeClass('fixer');
second_header.css({position:'relative', top:'0px', 'z-index':'0'});
}
});
});
*{
color: #FFFFFF;
padding: 0;
margin: 0;
}
.fixer{
position: fixed;
width: 100%;
}
#header, .banner, #second-header, .contents{
padding: 5px;
}
#header{
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner{
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container{
min-height: 300px;
background-color: #775F5E;
}
#second-header{
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents{
min-height: 200px;
background-color: #97A36D;
}
.footer{
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
To achieve this you need first check if the scroll height is near the second div header and within the height of the second div. Then add a class that make it stick below the main header. I have created a sticky class and added it while scrolling conditions are met.
Please check below code
jQuery(document).ready(function() {
var headerHeight = $('#header').outerHeight(true);
var secondHeaderContainer = $('#second-header-container');
const secondHeaderTopPos = secondHeaderContainer.offset().top;
const secondHeaderContainerHeight = $(secondHeaderContainer).height();
$(window).scroll(function() {
const scrollTop = $(this).scrollTop();
const secondContainerHeightEnd = secondHeaderContainerHeight + secondHeaderTopPos - $('#second-header').height() - headerHeight;
if (((secondHeaderTopPos - headerHeight) <= scrollTop) && (secondContainerHeightEnd >= scrollTop)) {
$('#second-header').addClass('sticky').css('top', headerHeight);
} else {
$('#second-header').removeClass('sticky');
}
});
});
* {
color: #FFFFFF;
padding: 0;
margin: 0;
}
.sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.fixer {
position: fixed;
width: 100%;
}
#header,
.banner,
#second-header,
.contents {
padding: 5px;
}
#header {
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner {
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container {
min-height: 300px;
background-color: #775F5E;
}
#second-header {
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents {
min-height: 200px;
background-color: #97A36D;
}
.footer {
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.
Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>
Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.
In my snippet below you will see a blue and red block. The red is indicating that a specific duty is not completed. What I am trying to do for these unfinished duties is dynamically make its outer div (one of these #account-unfinished-package, #account-unfinished-logo) to act as a link.
I am unsure of how to do this dynamically, since the duties (blocks) will be changing from unfinished/finished. I do not want the finished blocks to have links, or else I would just add it to the html.
Does anyone have any ideas of how I can make the outer divs for the unfinished blocks act as a link dynamically?
Here is a jsfiddle.
var unfinishedPack = 1;
var unfinishedLogo = 0;
if (unfinishedPack == 0) {
$('#account-unfinished-package').addClass('red');
$('#unfinished-title-package').html('Product package needs setup.');
$('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Package Needs Setup'>");
}
else if (unfinishedPack > 0) {
$('#account-unfinished-package').addClass('blue');
$('#unfinished-title-package').html('Product Package Setup Complete!');
$('#unfinished-img-package').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Package Complete'>");
}
if (unfinishedLogo == 0) {
$('#account-unfinished-logo').addClass('red');
$('#unfinished-title-logo').html('Company logo needs added. Click to add');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>");
}
else if (unfinishedPack > 0) {
$('#account-unfinished-logo').addClass('blue');
$('#unfinished-title-logo').html('Account Logos Complete!');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>");
}
#account-unfinished {
width: 100%;
height: auto;
/*color: #D8000C;*/
/*background: #FFBABA;*/
margin-bottom: 10px;
display: none;
}
#account-unfinished.block {
display: block;
}
#account-unfinished-package, #account-unfinished-logo {
width: 50%;
height: 100%;
display: inline-block;
vertical-align: top;
}
#account-unfinished-package.red, #account-unfinished-logo.red {
background: #D8000C;
height: 100%;
}
#account-unfinished-package.blue, #account-unfinished-logo.blue {
background: #09afdf;
height: 100%;
}
.account-unfinished-inner {
padding: 15px;
}
.account-unfinished-title {
font-size: 1.5rem;
color: #FFF;
font-family: 'Lato', sans-serif;
line-height: 1.4em;
text-align: center;
}
.account-unfinished-title a {
color: #FFF;
}
#unfinished-img-package, #unfinished-img-logo {
margin: 10px auto;
display: block;
text-align: center;
}
.unfinished-img {
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="account-unfinished-package">
<div class="account-unfinished-inner">
<p class="account-unfinished-title" id="unfinished-title-package"></p>
<div id="unfinished-img-package"></div>
</div>
</div><div id="account-unfinished-logo">
<div class="account-unfinished-inner">
<p class="account-unfinished-title" id="unfinished-title-logo"></p>
<div id="unfinished-img-logo"></div>
</div>
</div>
Use the wrapInner function:
if (unfinishedLogo == 0) {
$('#account-unfinished-logo').addClass('red');
$('#account-unfinished-logo').wrapInner('');
$('#unfinished-title-logo').html('Company logo needs added. Click to add');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/error-circle.png' class='unfinished-img' alt='Logo Needs Added'>");
}
else if (unfinishedPack > 0) {
$('#account-unfinished-logo').addClass('blue');
$('#unfinished-title-logo').html('Account Logos Complete!');
$('#unfinished-img-logo').html("<img src='http://s3.amazonaws.com/retain-static/images/realestate/checkmark-circle-white.png' class='unfinished-img' alt='Logo Complete'>");
}
I made you a fiddle: https://jsfiddle.net/4mLjdee5/
I am extremely new to JQuery, I just started looking into it today. I have searched all around for what might be causing this bit of code to not work. When you scroll down, I want the h1 to move to the side and a menu button to appear. That works, but when I scroll back up again, it takes an extremely long time to reverse itself. I have tried to fine anything that might be causing it like a delay or something, but as far as I can see, there isn't any problems.
Link to website: http://www.dragonmath.net/rockets
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<title>Rockets</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<img id="menu" src="images/menu1.png" />
<div id="headerdiv">
<h1>Rockets</h1>
<img id="logo" src="images/logo1.png" />
</div>
</header>
<nav>
<ul>
<li>
<a>Space Race</a>
</li>
<li>
<a>SpaceX</a>
</li>
</ul>
</nav>
<script>
$( document ).ready(function() {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.delay(800).slideDown(800);
$nav.addClass('testnav');
}
if ($(window).scrollTop() < 40) {
$menu.slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
}
});
});
</script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
color: #00AAFF;
font-family: Arial;
}
body {
height: 800px;
}
header {
position: fixed;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: #333;
z-index: 1;
}
div#headerdiv {
display: inline;
transition: all 1s;
}
h1 {
display: inline;
margin-left: 40px;
font-size: 40px;
}
header > img#menu {
position: fixed;
top: 20px;
left: 40px;
width: 40px;
height: 40px;
display: none;
}
header > div > img#logo {
display: inline;
width: 60px;
height: 60px;
position: relative;
top: 18px;
left: 20px;
transition: height 1s, width 1s;
}
nav {
position: relative;
top: 100px;
height: 40px;
width: 100%;
background-color: #333;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-right: 1px solid #00AAFF;
}
nav > ul > li > a {
position: relative;
top: 6px;
}
.testheaderdiv {
margin-left: 80px;
transition: all 1s;
}
.testnav {
display: none;
}
The main problem I could see with the code is how scroll is handled, for every scroll event you are adding delay to the menu element.
So try
$(document).ready(function () {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
var flag;
$(window).on('scroll', function () {
if (flag !== 1 && $(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.stop(true, true).delay(800).slideDown(800);
$nav.addClass('testnav');
flag = 1;
}
if (flag !== 2 && $(window).scrollTop() < 40) {
$menu.stop(true, true).slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
flag = 2;
}
});
});