On ready position of specific class for li - javascript

I code this page that I want to navigate in a li menu by the wheelmouse. My question is: I want the li with the class selected was in the first position on the left.
How can I do to make the specific li with the class selected at this position using jquery code?
$(document).ready(function() {
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});
#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>
Like this :
image
I tried this :
$("#menu").css("left", $(".selected").css("left"));
But it's not work
Please help me

Try this in $("#menu ul li.selected").prependTo("#menu ul");
$(document).ready(function() {
$("#menu ul li.selected").prependTo("#menu ul");
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});
#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>

I found the answer
We must add this :
var pos = $("li.selected").position();
$("#menu").css("left", pos);

Related

Why isn't my code changing the div colour?

var el = document.querySelectorAll('.gange-color ul li'),
colorLesit = [],
i;
for (i = 0; i < el.length; i++) {
colorLesit.push(el[i].getAttribute('datacolor'));
el[i].addEventListener('click', function() {
document.body.classList.remove('red', 'green', 'purbal', 'black');
document.body.classList.add(this.getAttribute('datacolor'));
})
}
* {
box-sizing: border-box;
}
.gange-color {
margin-left: 40%;
}
ul li {
display: inline-block;
list-style: none;
width: 30px;
height: 30px;
margin: 30px auto;
cursor: pointer;
}
ul li:first-child {
background-color: red;
}
ul li:nth-child(2) {
background-color: green;
}
ul li:nth-child(3) {
background-color: purple;
}
ul li:last-child {
background-color: black;
}
*emphasized text* h3 {
color: red;
font-size: 19px
}
.contant {
background-color: red;
padding: 30px;
}
.contant h4 {
color: white;
font-size: 17px
}
<head>
<title>cangecolor</title> `
</head>
<body>
<div class="gange-color">
<ul>
<li datacolor='red'></li>
<li datacolor='green'></li>
<li datacolor='purbal'></li>
<li datacolor='black'></li>
</ul>
</div>
<h3>TWFSRG</h3>
<div class="contant">
<h4>TESTINH</h4>
</div>
</body>
Because you have not defined css styles for body e.g
body.green {
background-color: green;
}

dynamic html element issue

when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>
You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()

why cannot read property 'top' of undefined?

I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error
You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.

I'm trying to add previous and next arrows to this content slider

Currently there are circles at the bottom that can be used to navigate between slides. I would like to add next and previous arrows to the sides that the user can click on to proceed forwards or back through the slides.
CSS:
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 500px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
}
#navLinks ul li:hover {
background-color: #FFF;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
}
#navLinks ul li.active:hover {
background-color: red;
color:#FFF;
}
#itemOne {
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-image: url("http://cuteimages.net/data/2015/5/the-first-puppy-to-leave-me-speechless-name-cuteimages.net.png");
}
HTML:
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>
JavaScript:
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
Here is the JSFiddle http://jsfiddle.net/stormbloom/2d0a1215/
I would like to learn this for personal experience, otherwise I would just use a plugin like WowSlider. If it's easier to do this by building a new slider from scratch then any links to resources explaining how to accomplish this would also be appreciated.
This is an approach with arrows, just tweak with the design.
In the HTML I added the correspoding arrows, and in the JS I added the EventListeners and the function goToPreviousItem() at the end.
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
document.querySelector('#previous').addEventListener('click', goToPreviousItem, false);
document.querySelector('#next').addEventListener('click', goToNextItem, false);
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
//startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
function goToPreviousItem() {
removeActiveLinks();
if(activeLink == 0) {
activeLink = links.length - 1;
} else {
activeLink--;
}
var newLink = links[activeLink];
changePosition(newLink);
}
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#outsideContainer {
width: 600px;
}
#previous {
width: 50px;
display: inline-block;
text-align: center;
float: left;
margin-top: 150px;
}
#next {
width: 50px;
display: inline-block;
text-align: center;
float: right;
margin-top: 150px;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
display: inline-block;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 600px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
border:rgba(255,255,255,0.9) 1px solid;
box-shadow: 0 0 4px #fff;
}
#navLinks ul li:hover {
background-color: #FFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.6) 1px solid;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
outline-width: 1px;
}
#navLinks ul li.active:hover {
background-color: rgba(255,255,255,0.7);
color: #FFFFFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.9) 1px solid;
}
#itemOne {
background-color: #000;
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-color: #fff;
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-color: #fff;
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-color: #fff;
background-image: url("http://images5.fanpop.com/image/photos/28100000/Katy-Perry-gifs-katy-perry-28147211-500-300.gif");
}
<div id="outsideContainer">
<div id="previous"><<</div>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content"></div>
<div id="itemTwo" class="content"></div>
<div id="itemThree" class="content"></div>
<div id="itemFour" class="content"></div>
</div>
</div>
<div id="next">>></div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>

Jquery scrollbar hides elements in menu

I dont want my li list to disappear while the new menu (menu.fixed) appears! I just want'em to follow the fixed menu down! how do i fix this? Here is the jquery:
var menuTop = $('.menu').offset().top;
var menuClone = $('.menu').clone().addClass('fixed');
$(window).bind('scroll', function() {
var scrollY = window.pageYOffset;
if(scrollY > menuTop) {
if(menuClone.parent().length === 0) {
menuClone.appendTo($('.menu').parent());
}
} else if(menuClone.parent().length > 0) {
menuClone.remove();
}
});
And this the relevant css:
.menu {
background-color: white;
width: 80%;
height: 50px;
font-size: 1.5em;
font-family: Roboto;
margin-bottom:0px;
margin-left:10%;
border-bottom: 2px solid #756B6B;
}
.menu.fixed {
position: fixed;
left: 0;
top: 0;
height: 50px;
width:76.8%;
margin-left: 11.55%;
border-bottom: 2px solid #756B6B ;
}
li {
float: right;
margin-left:40px;
list-style: none;
position:relative;
padding-bottom: 10px;
}
and the html
<div class="menu">
<ul>
<li id="sistaord">ovrigt</li>
<li id="jobberfarenhet">Jobberfarenhet</li>
<li>Utbildning</li>
</ul>
</div>
Probably you don't need to clone menu. You only need to switch class "fixed" for the menu element:
HTML the same,
CSS:
.menu {
background-color: white;
width: 80%;
height: 50px;
font-size: 1.5em;
font-family: Roboto;
margin-bottom:0px;
margin-left:10%;
padding-bottom: 10px;
border-bottom: 2px solid #756B6B;
}
.menu.fixed {
position: fixed;
left: 0;
top: 0;
}
li {
float: right;
margin-left:40px;
list-style: none;
}
JS:
var menu = $('.menu');
var menuTop = menu.offset().top;
$(window).bind('scroll', function() {
var scrollY = window.pageYOffset;
if (scrollY > menuTop) {
if (!menu.data('fixed')) {
menu.addClass('fixed').data('fixed', true);
}
} else if (menu.data('fixed')) {
menu.removeClass('fixed').data('fixed', false);
}
});
Here is a demo

Categories