Image not showing on webpage - javascript

I'm making a webpage and after tweaking some code my image on the website doesn't show anymore but i have errors in the console here is the code please someone help ive tried a few things to no luck so this my last resort
<!DOCTYPE HTML>
<html>
<head>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>
<link href="easy-sidebar.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse easy-sidebar" style="z-index: 99999; position: absolute;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<aside>
<ul class="nav nav-tabs">
<li>One
</li>
<li>Two
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane" id="two"></div>
</div>
</aside>
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="bodyMain" style="z-index: 1 !important; display: inline-block; position: absolute; left: 0px;">
<div class="container" style="">
<button class="btn btn-danger easy-sidebar-toggle">Toggle Sidebar</button>
<script type="text/javascript">
</script>
</div>
<div id="canvasContainer" style="width: 800px; height: 940px; border: 1px solid; padding-left: 0; padding-right: 0;
margin-left: auto; margin-right: auto; display: block; "></div>
<script type="text/javascript">
$(document).ready(function() {
$(document).mousewheel(function(event, delta) {
setYPos(delta);
});
});
var yposition = 50;
var xposition = 20;
var width = 200;
var height = 137;
function setYPos(v) {
yposition += v;
width += v;
height += v;
console.debug('Y: ', yposition);
drawImage(imageObj);
}
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "canvasContainer",
width: $('#canvasContainer').width(),
height: $('#canvasContainer').height()
});
var layer = new Kinetic.Layer();
// image
var image1 = new Kinetic.Image({
image: imageObj,
x: xposition,
y: yposition,
width: width,
height: height,
draggable: true,
dragBoundFunc: function(pos) {
if (pos.x < this.minX) this.minX = pos.x;
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
stage.getContent().addEventListener('mousemove', function() {
xposition = stage.getPointerPosition().x;
});
// add cursor styling
image1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
image1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
image1.dragBoundFunc(function() {
return {
x: xposition,
y: yposition
};
});
layer.add(image1);
stage.add(layer);
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'image1.png';
};
</script>
</div>
<script src="js/bootstrap.min.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>


It looks like the error is because you are defining the imageObj variable after it is being used. Instead, rearrange your code to put the imageObj definition near the other top level variable definitions.
In other words, change the big script block to something like this:
<script type="text/javascript">
$(document).ready(function() {
$(document).mousewheel(function(event, delta) {
setYPos(delta);
});
});
var yposition = 50;
var xposition = 20;
var width = 200;
var height = 137;
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'image1.png';
function setYPos(v) {
yposition += v;
width += v;
height += v;
console.debug('Y: ', yposition);
drawImage(imageObj);
}
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "canvasContainer",
width: $('#canvasContainer').width(),
height: $('#canvasContainer').height()
});
var layer = new Kinetic.Layer();
// image
var image1 = new Kinetic.Image({
image: imageObj,
x: xposition,
y: yposition,
width: width,
height: height,
draggable: true,
dragBoundFunc: function(pos) {
if (pos.x < this.minX) this.minX = pos.x;
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
stage.getContent().addEventListener('mousemove', function() {
xposition = stage.getPointerPosition().x;
});
// add cursor styling
image1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
image1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
image1.dragBoundFunc(function() {
return {
x: xposition,
y: yposition
};
});
layer.add(image1);
stage.add(layer);
};
</script>

Related

active anchor link not being highlighted

I have been staring at this code for far too long, unfortunately I do not see the problem.
I am trying to get the active menu entry highlighted when the relevant div gets scrolled into view. But nothing is happening and no errors are being thrown in the console.
My menu html:
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
An example div:
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9"></div>
</div>
My jquery/js:
if ($('.LeftAnchorNav').length > 0) {
// prepare the variables
var lastID;
var anchorMenu = $(".LeftAnchorNavMenu");
var anchorMenuHeight = anchorMenu.outerHeight() + 100;
var anchorMenuItems = anchorMenu.find(".leftlink");
var anchorMenuItemsTarget = anchorMenuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// bind everything to the scrolling
$(window).scroll(function () {
// get anchornav container scroll position and add buffer
var fromTop = $(this).scrollTop() + anchorMenuHeight + 300;
// get ID of the current scroll item
var currentItem = anchorMenuItemsTarget.map(function () {
if ($(this).offset().top < fromTop)
return this;
});
// get the ID of the current element
currentItem = currentItem[currentItem.length - 1];
var id = currentItem && currentItem.length ? currentItem[0].id : "";
if (lastID !== id) {
lastID = id;
// Set/remove active class
anchorMenuItems.removeClass("highlightleftnavactive")
anchorMenuItems.filter("[href='#" + id + "']").addClass("highlightleftnavactive");
}
});
}

It's quite fiddly to do the arithmetic for scrolling so this snippet uses IntersectionObserver instead. This has the added benefit of less processing overhead as it just gets informed when the elements come in or go out of view, not every time the user scrolls a bit.
It sets up the observer to observe when any of the relevant elements come into or go out of the viewport. When alerted to that it adds or removes the highlighting class to the related navbar link.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<style>
.LeftAnchorNav {
position: fixed;
z-index:1;
}
.tall {
width: 100vw;
height: 100vh;
background-image: linear-gradient(cyan, magenta, yellow, black);
}
.highlightleftnavactive {
background-color: yellow;
}
</style>
</head>
<section class="LeftAnchorNav" style="display: block;">
<nav id="LeftAnchorNav">
<div class="container" style="padding-left: 50px;">
<div class="col-md-4 LeftAnchorNavWrapper">
<ul class="LeftAnchorNavMenu">
<li class="leftanchorlink">
<a class="leftlink" href="#20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">About us</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#d736bc13-a2a7-48d4-8ecc-75b9a17f801b">Demo Center</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#545a6339-87e4-41ed-ad51-70c3788cedee">Testimonial</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#9355324a-6219-4300-ae97-aa77bf67dab4">Newsletter</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#0c70b0db-3e70-4faa-ab98-154b4eae498e">Blog</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#4903bc53-b862-42f0-a600-e21061204e42">Contact</a>
</li>
<li class="leftanchorlink">
<a class="leftlink" href="#002f6fd7-758b-4b27-8c75-0ce087ee826a">Solution Finder</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<div class="tall"></div>
<div class="block anchorblock col-lg-12 col-md-12 col-sm-12 col-xs-12 span12 "><div id="20a51af3-f8b0-4ef9-ba73-cf3cd0a321b9">
An example block coming into and going out of view it belongs to the About us link in the navbar</div>
</div>
<div class="tall"></div>
<script>
let callback = (entries) => {
entries.forEach(entry => {
let id = entry.target.firstChild.id;
let leftLink = document.querySelector("a.leftlink[href='#"+ id + "']");
if (entry.isIntersecting) { leftLink.classList.add('highlightleftnavactive');}
else { leftLink.classList.remove('highlightleftnavactive');}
});
};
const observer = new IntersectionObserver(callback);
const anchorBlocks = document.querySelectorAll('.anchorblock');
anchorBlocks.forEach( (anchorBlock) => {
observer.observe(anchorBlock);
});
</script>

header Element prevent execution of Javascript

sorry for my English...
I to try an image zoom as here to say, it working (the image zoom) without <header> Tag.
Width the <header> tag
When getting with the Maus on the image, the image disappears.
Here I can show how to build my Html code.
$('.wrapper').on('mouseenter', function() {
$('.img').css({
transform: 'scale(2.5)'
});
});
$('.wrapper').on('mouseleave', function() {
$('.img').css({
transform: 'scale(1.0)',
backgroundPosition: 'center center'
});
});
$('.wrapper').on('mousemove', function(e) {
$('.img').css({
backgroundPosition: (e.pageX * -1) + 'px ' + (e.pageY * -1) + 'px'
});
});
.row {
margin: 10px;
}
.wrapper {
width: 300px;
height: 300px;
border: 1px solid navy;
overflow: hidden;
}
.img {
width: 100%;
padding-bottom: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="log">
<img id="logo" src="/kalamulur/Photo/my-logo5.png" alt="">
</div>
<div class="linken">
<ul class="linken_ul">
<li class="dropdown">
<i>Home</i>
</li>
<li class="dropdown">
<i>Taschen & Rucksäcke</i>
<div class="dropdown-content">
<i>Taschen, Tablettaschen & Computertaschen</i>
<i>Rucksäcke</i>
<i>Beutel</i>
<i>Gürteltasche, Mäppchen & Schnupftabakdose</i>
</div>
</li>
<li class="dropdown">
<i>Haus</i>
<div class="dropdown-content">
<i>Dekoration</i>
<i>Teppich</i>
<i>Yogamatten & Necessaire</i>
</div>
</li>
<li class="dropdown">
<i>Kleidung</i>
<div class="dropdown-content">
<i>T-Shirts für Frauen & Männer</i>
<i>Hösen für Frauen & Männer</i>
<i>Schals, Mützen & Hute</i>
<i>Sandalen</i>
</div>
</li>
<li class="dropdown">
<i>Schmuck</i>
<div class="dropdown-content">
<i>Ringe, Ohrringe, Ketten ...</i>
</div>
</li>
<li class="dropdown">
<i>Über uns</i>
<div class="dropdown-content">
<i>Über uns</i>
<i>Kundenservice</i>
</div>
</li>
<li class="dropdown">
🌍 English
<div class="dropdown-content">
Spanisch
</div>
</li>
</ul>
</div>
</header>
<main>
<div class="wrapper">
<div class="img" style="background-image: url('http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg');"></div>
</div>
</main>
I too tried with and without <header> Element, and to show which only working without <header> Element....
Can please someone help me and say where is my mistake? , Thanks!

Your code works, fine, if you had give your wrapper bigger size you would have seen your img does not lose it self but moves up behind header.
Problem was here in your js: backgroundPosition: (e.pageX * -1) + 'px ' + (e.pageY * -1) + 'px'
This positioned your zoomed image behind header. If you remove it shows in box and zooms but does not update zoom on mouse movement.
I tired to play around with this but I couldn't make it work and I don't have any time for this anymore. So i am leaving this answer here maybe someone else has an idea.
I tried to play around with this:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX
I could make mouse to react only for inside wrapper but I couldn't make the picture work to react to this.
Good luck.
$('.wrapper').on('mouseenter', function() {
$('.img').css({
transform: 'scale(1.5)'
});
});
$('.wrapper').on('mouseleave', function() {
$('.img').css({
transform: 'scale(1.0)',
backgroundPosition: 'center center'
});
});
$('.wrapper').on('mousemove', function(updateDisplay) {
var box = document.querySelector(".wrapper");
var pageX = document.getElementById("x");
var pageY = document.getElementById("y");
function updateDisplay(event) {
$('.img').css({
backgroundPosition: (event.pageX * -1) + 'px ' + (event.pageY * -1) + 'px'
});
}
box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);
});
.wrapper {
width: 300px;
height: 300px;
border: 1px solid navy;
overflow: hidden;
}
.img {
margin-right: auto; /* 1 */
margin-left: auto;
width: 100%;
padding-bottom: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="log">
<img id="logo" src="/kalamulur/Photo/my-logo5.png" alt="">
</div>
<div class="linken">
<ul class="linken_ul">
<li class="dropdown">
<i>Home</i>
</li>
<li class="dropdown">
<i>Taschen & Rucksäcke</i>
<div class="dropdown-content">
<i>Taschen, Tablettaschen & Computertaschen</i>
<i>Rucksäcke</i>
<i>Beutel</i>
<i>Gürteltasche, Mäppchen & Schnupftabakdose</i>
</div>
</li>
<li class="dropdown">
<i>Haus</i>
<div class="dropdown-content">
<i>Dekoration</i>
<i>Teppich</i>
<i>Yogamatten & Necessaire</i>
</div>
</li>
<li class="dropdown">
<i>Kleidung</i>
<div class="dropdown-content">
<i>T-Shirts für Frauen & Männer</i>
<i>Hösen für Frauen & Männer</i>
<i>Schals, Mützen & Hute</i>
<i>Sandalen</i>
</div>
</li>
<li class="dropdown">
<i>Schmuck</i>
<div class="dropdown-content">
<i>Ringe, Ohrringe, Ketten ...</i>
</div>
</li>
<li class="dropdown">
<i>Über uns</i>
<div class="dropdown-content">
<i>Über uns</i>
<i>Kundenservice</i>
</div>
</li>
<li class="dropdown">
🌍 English
<div class="dropdown-content">
Spanisch
</div>
</li>
</ul>
</div>
</header>
<main>
<div class="wrapper">
<span id="x"></span>
<div class="img" style="background-image: url('http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg');"></div>
<span id="y"></span>
</div>
</main>

Javascript Get div / Insert Div

I am trying to fetch the div with the id removeNav and paste it back in again.
but my div is undefined.
function init() {
var insertMenu = $("#removeNav").html();
console.log(insertMenu);
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".navbar-collapse"),
removeNav = document.getElementById('removeNav'),
insertNav = document.getElementById('insertNav'),
body = document.querySelector("body");
//var insertMenu = '<div id="removeNav" class="navbar-collapse collapse header"><img class="navbar-left" src="img/MRS_Logo_WEB_Interlaced.png" width="120" height="96"> <ul class="nav navbar-nav navbar-right"> <li class="divider-vertical"></li> <li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li> <li class="divider-vertical"></li> <li>Download</li> <li class="divider-vertical"></li> <li class="divider-vertical"></li> <li>Karriere</li> <li>Sitemap</li> <li class="divider-vertical"></li> <li>Impressum</li> <li class="divider-vertical"></li> <form class="navbar-form navbar-right"> <div class="form-group"> <input class="form-control" placeholder="Suchen" type="text"> </div> <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button> </form> </ul></div>';
if(distanceY > shrinkOn){
classie.add(header, "smaller");
removeNav.parentNode.removeChild(removeNav);
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
insertNav.innerHTML = insertMenu;
}
}
});
}
window.onload = init();
My Code:
https://jsfiddle.net/t23nn1pp/

jsFiddle: https://jsfiddle.net/t23nn1pp/6/
I know my fix is a little off your original code, however have you tried just hiding and showing the nav bar?
jQuery
function init() {
var $insertMenu = $("#removeNav");
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset;
var shrinkOn = 100;
if(distanceY > shrinkOn){
$insertMenu.hide();
} else {
$insertMenu.show();
}
});
}
window.onload = init();
CSS for example
body{
min-height: 2000px;
}
#insertNav{
width: 100%;
max-height: 200px;
background-color: #F0F;
}
Html is the same as you provided.

You are mixing jQuery with vanilla JS, change this line:
var insertMenu = $("#removeNav").html();
for
var insertMenu = document.querySelector("#removeNav").innerHTML;
Snippet below (changed console.log for alert just for demo)
function init() {
var insertMenu = document.querySelector("#removeNav").innerHTML;
alert(insertMenu);
window.addEventListener('scroll', function(e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".navbar-collapse"),
removeNav = document.getElementById('removeNav'),
insertNav = document.getElementById('insertNav'),
body = document.querySelector("body");
if (distanceY > shrinkOn) {
classie.add(header, "smaller");
removeNav.parentNode.removeChild(removeNav);
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
insertNav.innerHTML = insertMenu;
}
}
});
}
window.onload = init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script>
<div id="insertNav">
<div id="removeNav" class="navbar-collapse collapse header">
<img class="navbar-left img-responsive logo-margin" src="img/MRS_Logo_WEB_Interlaced.png" height="96" width="120" />
<ul class="nav navbar-nav navbar-right">
<li class="divider-vertical"></li>
<li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li>
<li class="divider-vertical"></li>
<li>Download</li>
<li class="divider-vertical"></li>
<li class="divider-vertical"></li>
<li>Karriere</li>
<li>Sitemap</li>
<li class="divider-vertical"></li>
<li>Impressum</li>
<li class="divider-vertical"></li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Suchen">
</div>
<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
</form>
</ul>
</div>
</div>

Updated
Running your code with the link provided, there are a few things missing.
- jQuery
- Classie
As for jQuery, you can try adding:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
If you fix (or remove, as suggested by others), it'll work.

checking both scrollTop and id offset for sticky menu in single condition

I want to check the scroll position is greater than 350 and menuSticky offset position is 92 in same condition.that condition is not working.I gave my piece of code
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky'); //shows error
// var menu = $('.secMenu'); working
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if((($('.menuSticky').offset.top)==92)) {
console.log('true');
$('.dropdown').hover(function() {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.secMenu').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>
updated
$(window).scroll(function(){
if($(document).scrollTop() > 350) {
$('.secMenu').addClass('menuSticky');
} else {
$('.secMenu').removeClass('menuSticky');
}
var menu = $('.menuSticky');
console.log(menu.length);
if (menu.length==1) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
$('.dropdown').hover(function() {
$('.menuSticky').hide();
$(this).toggleClass("open");
}).mouseleave(function(){
$('.menuSticky').show();
});
}
});
.menuSticky{
/*top:14%; */
top:92px;
z-index:999;
position: fixed;
width: 100%;
left:1.1%;
}
#consultant,#segment,#partner,#insights{
min-height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1" >Consulting & Solutions</li>
<li class="test2" >Segments</li>
<li class="test3" >Our Partners</li>
<li class="test4" >Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="" id="consultant">consultant
</div>
<div class="" id="segment">segment
</div>
<div class="" id="partner">partner
</div>
<div class="" id="insights">insights
</div>

In your block of code have a condition to remove class menuSticky when scroll position less than 350px. So it will be a case you try to get offset top from an undefined variable menu.
To fix your issue, check menuSticky is existing before doing further.
var menu = $('.menuSticky');
if (menu.length) {
var origOffsetY = menu.offset().top;
console.log(menu.offset().top);
if ((($('.menuSticky').offset.top) == 92)) {
console.log('true');
$('.dropdown').hover(function () {
$('.secMenu').hide();
$(this).toggleClass("open");
}).mouseleave(function () {
$('.secMenu').show();
});
}
}

jQuery Animate inline style issue

I cant fix one bug in my code. I create on click slide up/down div, but yet when i click it 4 times very fast my css top value is to height and function stop working. Can you please suggest me some solution or another way to handle this ?
Here is code:
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>

Is this what you want?
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
section { position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>
I think this is better:
$(function() {
$(".nav li a").click(function(event) {
var href=$(this).attr('href');
$(href).toggleClass('offscreen');
event.preventDefault()
});
});
section { position: relative; transition: 0.5s all; top:0 }
.offscreen { top: -500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9 offscreen">About
</section>

Categories