when i scroll the page, i want to add class active menu item.
i can get the current div id like this var currSection = $(this).attr('id'). im stuck with id and data-id matching.
here is the codes. ty for helping guys.
$(document).scroll(function() {
var cutoff = $(window).scrollTop();
$('div').each(function(){
if($(this).offset().top + $(this).height() > cutoff){
$('div').removeClass('current');
$(this).addClass('current');
var currSection = $(this).attr('id');
console.log(currSection);
if ($('.circle li').data('id') == currSection) {
};
return false;
}
});
});
ul{
position:fixed;
z-index:9;
top:0;
}
.active{
color:red;
}
div{
height:500px;
}
div:nth-child(odd){
background:green;
}
div:nth-child(even){
background:blue;
}
<div id="home"></div>
<div id="who"></div>
<div id="team"></div>
<div id="why"></div>
<div id="contact"></div>
<ul class="circle">
<li data-id="home" class="active">a</li>
<li data-id="who">b</li>
<li data-id="team">c</li>
<li data-id="why">d</li>
<li data-id="contact">f</li>
</ul>
Change scroll event listener to this
$(document).scroll(function () {
var cutoff = $(window).scrollTop();
$('div').each(function () {
if ($(this).offset().top + $(this).height() > cutoff) {
$('div').removeClass('current');
$(this).addClass('current');
var currSection = $(this).attr('id');
console.log(currSection);
$('li').removeClass('active');
$('li[data-id=' + currSection + ']').addClass('active');
return false;
}
});
});
Related
I'm trying to hide the .site-header on scroll and have it re-appear after inactivity for a couple of seconds.
I found the most of the answer here: How to hide a Div when the scroll bar is moving with jQuery?
var $header = $(".site-header");
var opacity = $header.css("opacity");
var scrollStopped;
var fadeInCallback = function () {
if (typeof scrollStopped != 'undefined') {
clearInterval(scrollStopped);
}
scrollStopped = setTimeout(function () {
$header.animate({ opacity: 1 }, "slow");
}, 500);
}
$(window).scroll(function () {
if (!$header.is(":animated") && opacity == 1) {
$header.animate({ opacity: 0 }, "slow", fadeInCallback);
} else {
fadeInCallback.call(this);
}
});
$('.menu-toggle').on('click', function(){
$('.menu-toggle').addClass('activated');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<section style="height:5000px;">
<div class="site-header" style="position:fixed; top:5px; left:5px; width:200px; height:100px; display:block; background:#000; opacity:1;">
<button class="menu-toggle">Menu</button>
<nav class="nav-primary">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</nav>
</div>
</section>
The nav is activated by clicking button
However, the nav is nested inside the .site-header which means when the menu is activated it still fades out on scroll...
I'm wondering how to alter this javascript so that when the .activated class is applied to the button the nav remains visible even while scrolling.
Here is the fiddle https://jsfiddle.net/fwa16eok/
Thanks so much!
HTML:
<div>
<div class="a">A</div>
</div>
Javascript:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.a').fadeOut(); }
else {
$('.a').fadeIn();
}
});
Add !$menu.is(":active") before the fade out animation call
var $menu = $("#menu");
var opacity = $menu.css("opacity");
var scrollStopped;
var fadeInCallback = function () {
if (typeof scrollStopped != 'undefined') {
clearInterval(scrollStopped);
}
scrollStopped = setTimeout(function () {
$menu.animate({ opacity: 1 }, "slow");
}, 2000);
}
$(window).scroll(function () {
if (!$menu.is(":active") &&!$menu.is(":animated") && opacity == 1) {
$menu.animate({ opacity: 0 }, "slow", fadeInCallback);
} else {
fadeInCallback.call(this);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<section style="height:5000px;">
<div id="menu" style="position:fixed; top:5px; left:5px; width:200px; height:100px; display:block; background:#000; opacity:1;"></div>
</section>
I've just finished a creating a bare bones JavaScript tabs functionality for website. Right now I'm having a bit of problem trying to add directional functions in order to switch between tabs. Here is what I've created so far. I'm not sue on how I can increment or decrement the index in order to use the directional arrows to switch tabs and also the content
$(document).ready(function() {
$('.tabs-list li:first-child').addClass('active'),
$('.tab-content .show-content:first-child').addClass('active');
$('.tabs-list li').click(function(e) {
event.preventDefault();
if (!$(this).hasClass('active')) {
var tabIndex = $(this).index();
var nthChild = tabIndex + 1;
// select the right elements
var $tabsList = $(this).parent();
var $tabContent = $tabsList.next('.tab-content');
$tabsList.find('li.active').removeClass('active');
$(this).addClass('active');
$tabContent.find('.show-content').removeClass('active');
$tabContent.find('.show-content:nth-child(' + nthChild + ')').addClass('active');
}
})
$('.prev').on('click', function() {});
$('next').on('click', function() {});
})
.tabs-list li {
display: inline-block;
}
.tab-content .show-content {
display: none
}
.tab-content .show-content.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="tabs-list">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div class="show-content">
Content 1
</div>
<div class="show-content">
Content 2
</div>
<di>
Content 3
</di>
</div>
</div>
<ul>
<li class="prev">Prev</li>
<li class="next">Next</li>
</ul>
You can do it using jQuery .prev() and .next() methods. You just need to get the current .active tab and change it accordingly.
Here's the code you need:
$('.prev').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.prev('.tab-content .show-content')[0]) {
current.removeClass('active');
current.prev('.tab-content .show-content').addClass('active');
}
});
$('.next').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.next('.tab-content .show-content')[0]) {
current.removeClass('active');
current.next('.tab-content .show-content').addClass('active');
}
});
Demo:
This is a working Fiddle and a working Demo snippet:
$(document).ready(function() {
$('.tabs-list li:first-child').addClass('active'),
$('.tab-content .show-content:first-child').addClass('active');
$('.tabs-list li').click(function(e) {
event.preventDefault();
if (!$(this).hasClass('active')) {
var tabIndex = $(this).index();
var nthChild = tabIndex + 1;
// select the right elements
var $tabsList = $(this).parent();
var $tabContent = $tabsList.next('.tab-content');
$tabsList.find('li.active').removeClass('active');
$(this).addClass('active');
$tabContent.find('.show-content').removeClass('active');
$tabContent.find('.show-content:nth-child(' + nthChild + ')').addClass('active');
}
})
$('.prev').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.prev('.tab-content .show-content')[0]) {
current.removeClass('active');
current.prev('.tab-content .show-content').addClass('active');
}
});
$('.next').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.next('.tab-content .show-content')[0]) {
current.removeClass('active');
current.next('.tab-content .show-content').addClass('active');
}
});
})
.tabs-list li {
display: inline-block;
cursor: pointer;
}
.tab-content .show-content {
display: none
}
.tab-content .show-content.active {
display: block;
}
.as-console-row-code {
display: none;
}
.prev,
.next {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul class="tabs-list">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab-content">
<div class="show-content">
Content 1
</div>
<div class="show-content">
Content 2
</div>
<div class="show-content">
Content 3
</div>
</div>
</div>
<ul>
<li class="prev">Prev</li>
<li class="next">Next</li>
</ul>
Edit:
To make it loop in a cyclic way and doesn't stop in first or last elements, we should just implement that in the else block of our if statement, so it won't stop.
Here's how will be your code:
$('.prev').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.prev('.tab-content .show-content')[0]) {
current.removeClass('active');
current.prev('.tab-content .show-content').addClass('active');
} else {
current.removeClass('active');
$(".tab-content .show-content:last").addClass('active');
}
});
$('.next').on('click', function() {
var current = $('.tab-content .show-content.active');
if (current.next('.tab-content .show-content')[0]) {
current.removeClass('active');
current.next('.tab-content .show-content').addClass('active');
} else {
current.removeClass('active');
$(".tab-content .show-content:first").addClass('active');
}
});
And this is an updated Fiddle taking in consideration these changes.
I have a drop-down with slide-up and slide-down animation inside a div.
When the drop down is open, the div's height is 124px else its 20px. I have another div, for which height should be equal to that of the first div even, when animating the height of div's drop-down.
I am using jquery 1.11.0
Here is my code:
$( ".dropdown" ).hide();
$('.title').on('click', function(){
var element = $(".dropdown");
if (element.hasClass('open')) {
element.removeClass('open');
element.slideUp();
}
else {
element.addClass('open');
element.slideDown();
}
});
here is my fiddle.
What can I do?
Edit:
I only want the height to be same for both the div's at all times.
When div 1 height is changing the js/jQuery should set the same height to div 2.
$(".dropdown").hide();
$('.title').on('click', function() {
var element = $(".dropdown");
if (element.hasClass('open')) {
element.removeClass('open');
element.slideUp();
} else {
element.addClass('open');
element.slideDown();
}
});
.d1 {
border: 1px solid #333;
}
.d2 {
border: 1px solid #333;
}
.title {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="d1">
<a class="title">title(click here)</a>
<ul class="dropdown">
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>
</div>
<br/>
<div class="d2">
<a>victim</a>
</div>
This is perfect for you:
var slideDown = $("#d1").height();
$( ".dropdown" ).hide();
var slideUp = $("#d1").height();
$('.title').on('click', function(){
var element = $(".dropdown");
if (element.hasClass('open')) {
element.removeClass('open');
element.slideUp(400, function(){});
$("#d2").animate({height: slideUp}, 500);
}
else {
element.addClass('open');
element.slideDown(400, function(){});
$("#d2").animate({height: slideDown}, 500);
}
});
JSFiddle
$( ".dropdown" ).hide();
$('.title').on('click', function(){
var element = $(".dropdown");
if (element.hasClass('open')) {
element.removeClass('open');
element.slideUp();
-get the height of the dropdown
// var elHeight = $('.dropdown').css('height') + 'px';
-apply height to other div
// $('.otherdiv').css("height",elHeight)
}
else {
element.addClass('open');
element.slideDown();
// var elHeight = $('.dropdown').css('height') + 'px';
// $('.otherdiv').css("height",elHeight);
}
});
converting this UL to dropdown
<ul class="list-group showdiv">
<li class="list-group-item {{{ (Request::is('developmentService') ? 'active' : '') }}}">Bespoke Software Development</li>
<li class="list-group-item {{{ (Request::is('UserExperienceService') ? 'active' : '') }}}">User Experience Design</li>
<li class="list-group-item {{{ (Request::is('StaffService') ? 'active' : '') }}}">Staff Augmentation</li>
<li class="list-group-item {{{ (Request::is('TestingService') ? 'active' : '') }}}">Testing and Validation</li>
<li class="list-group-item {{{ (Request::is('GamingService') ? 'active' : '') }}}">Gaming</li>
</ul>
To convert Dropdown
Converting ul by this script.
<script type="text/javascript"> $(function() {
$('ul.showdiv').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
$('select').on('change', function (e) {
var valueSelected = this.value;
window.location.href = valueSelected; }); });
How to enable the "active" item to "selected=true" in dropdown in the pages.
** its always getting selected the first item in the dropdown list
Maybe something like this works: (inside the each loop)
$('ul.showdiv').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
if($(this).children().hasClass('active')){
$option.prop('selected', true);
}
$select.append($option);
});
$(this).replaceWith($select);
});
What about something like this? I know it changes your code a bit, but it works. Just change the filenames accordingly.
Example of a filename that should be used: "userExperienceDesign.html" in order to make sure that the navigation menu works correctly
Just erase the following line when running it from your own files: filename = "item3.html";
jsfiddle
//URL to id to select active link
var href = window.location.href;
var filename = href.split('/').pop();
filename = "item3.html";
//Example of a filename that should be used: "staffAugmentation.html" in order to make sure that the navigation menu works correctly
filename = filename.replace(/\..+$/, '');
$("#nav_" + filename).children("*").addClass("active");
if ($("#nav_" + filename).parent().parent("li")) {
$("#nav_" + filename).parent().parent().children("*").addClass("active");
}
//Fix subMenu widths: min width same as parent nav item and if right side of subMenu item surpasses parent ul's width, left offset compensates
var navWidth = $("#nav").width();
var navLeft = $("#nav").offset().left;
var navTotal = navWidth + navLeft;
var subMenus = $("#nav").children("li").children("ul");
for (var i = 0; i < subMenus.length; i++) {
var subMenu = subMenus.eq(i);
subMenu.parent().children("span").css({"padding-right":30+"px"});
subMenu.parent().addClass("hasSubMenu");
subMenu.children("li").css({
"min-width": subMenu.parent().width() - 5 + "px"
});
var subMenuWidth = subMenu.width();
var subMenuLeft = subMenu.offset().left;
var subMenuTotal = subMenuWidth + subMenuLeft;
if (navTotal < subMenuTotal) {
var newOffsetLeft = navTotal - subMenuTotal;
subMenu.css({
"left": subMenuLeft + newOffsetLeft + "px"
});
}
}
$("#nav").click(function () {
if ($(this).find("span").length > 0) {
$(this).find("ul").toggle();
}
});
html, body {
padding:0px;
margin:0px;
background-color:grey;
}
#nav {
position:absolute;
list-style-type:none;
padding:0px;
margin-left:5px;
margin-top:5px;
background-color:white;
font-size:20px;
white-space:nowrap;
}
#nav * {
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
#nav>li {
display:inline-block;
position:relative;
margin:-5px;
padding:0px;
}
#nav>li.hasSubMenu:after {
content:"\25BE";
display:inline-block;
position:absolute;
right:14px;
bottom:13px;
z-index:2;
font-size:15px;
}
#nav li>* {
display:block;
color:black;
text-decoration:none;
padding:10px;
background-color:white;
text-align:center;
cursor:pointer;
}
#nav>li>* {
padding-right:15px;
}
#nav li>a:hover, #nav li>span:hover{
color:white;
background-color:#bbb;
}
#nav ul {
display:none;
position:absolute;
list-style-type:none;
padding:0px;
margin-left:0px;
background-color:white;
font-size:18px;
white-space:nowrap;
}
.active {
background-color:#789abc !important;
color:bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav" class="list-group showdiv">
<li id="nav_bespokeSoftwareDevelopment">Bespoke Software Development
</li>
<li id="nav_userExperienceDesign">User Experience Design
</li>
<li id="nav_staffAugmentation"><span>Staff Augmentation</span>
<ul>
<li id="nav_item1">Item 1
</li>
<li id="nav_item2">Item 2
</li>
<li id="nav_item3">Item 3
</li>
</ul>
</li>
<li id="nav_testingAndValidation">Testing and Validation
</li>
<li id="nav_gaming">Gaming
</li>
</ul>
Hi I would like to get the current height of an element, then assign the height to the next element and so on..
For example
<ul>
<li class="elem1">Element here </li>
<li class="elem2">Element here </li>
<li class="elem3">Element here </li>
</ul>
Before:
elem1 = 100px
elem2 = 300px
elem3 = 150px
After:
elem1 = 100px (preserve it's height)
elem2 = 100px (will have the height from elem 1 which is 100px)
elem3 = 300px (will have the height of elem 2 which is 300px)
jquery code:
$('ul li').each(function(index){
var elem = $(this);
elem.next().css('height', elem.height()+'px');
});
It's not working. Kindly help me. Thanks.
If you are going to change the height, you need to read it before you change it. So that means you need to start at the end and work your way to the beginning.
var lis = $('ul li');
for(var i=lis.length-1;i>0;i--) {
lis.eq(i).height( lis.eq(i-1).height() );
}
Try this out:- http://jsfiddle.net/adiioo7/hW9ux/
JS:-
$('ul li').each(function (index) {
var elem = $(this);
elem.next().attr('data-height', elem.height() + 'px');
});
$('ul li').each(function (index) {
var elem = $(this);
if (elem.data("height")) {
elem.height(elem.data("height"));
elem.removeData("height");
}
});
CSS:-
.elem1 {
height:100px;
}
.elem2 {
height:200px;
}
.elem3 {
height:300px;
}
HTML:-
<ul>
<li class="elem1">Element here</li>
<li class="elem2">Element here</li>
<li class="elem3">Element here</li>
</ul>
its very simple.. just you the reverse that it..
$($("ul li").get().reverse()).each(function(index){
var elem = $(this);
elem.next().css('height', elem.height()+'px');
})
it will work perfectly.. !! try it
Try this.
<ul>
<li class="elem1">Element here </li>
<li class="elem2">Element here </li>
<li class="elem3">Element here </li>
</ul>
Jquery Code
var incr, i=0;
$('li').each(function(){
var $this = $(this);
incr = $this.height();
if(i == 0){
$this.next().height( $this.height());
i++;
} else {
$this.next().height( $this.height()+incr);
}
});
CSS:
.elem1 {height:100px;}
li {background-color:grey; width:100px;}
Working Demo: http://jsfiddle.net/xMGJe/4/