I have nav links that become active once they come into the window. I need to implement this on three separate pages on my website but the following scripts only work for the first page.
var services_refresh = function () {
// do stuff
console.log('Stopped Scrolling');
if ($('#ct_scans.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#ct_scans"]').addClass('active');
} else if ($('#xray.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#xray"]').addClass('active');
} else if ($('#fluoroscopy.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#fluoroscopy"]').addClass('active');
} else if ($('#mri.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#mri"]').addClass('active');
} else if ($('#neuroimaging.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#neuroimaging"]').addClass('active');
} else if ($('#nuclear_medicine.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#nuclear_medicine"]').addClass('active');
} else if ($('#ultrasound.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#ultrasound"]').addClass('active');
} else if ($('#mammography.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#mammography"]').addClass('active');
} else if ($('#breast_ultrasound.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_ultrasound"]').addClass('active');
} else if ($('#breast_biopsy.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_biopsy"]').addClass('active');
} else if ($('#breast_mri.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#breast_mri"]').addClass('active');
} else if ($('#osteoporosis.anchor').visible()) {
$('#our_services_sub_sections li a').removeClass('active');
$('#our_services_sub_sections li a[href="#osteoporosis"]').addClass('active');
}
};
Here is my HTML for the first page that works:
<ul id="our_services_sub_sections" class="diagnostic_images">
<li><a class="scroll active" href="#ct_scans">CT Scans</a></li>
<li><a class="scroll" href="#xray">X-Ray</a></li>
<li><a class="scroll" href="#fluoroscopy">Fluoroscopy</a></li>
<li><a class="scroll" href="#mri">MRI</a></li>
<li><a class="scroll" href="#neuroimaging">Neuroimaging</a></li>
<li><a class="scroll" href="#nuclear_medicine">Nuclear Medicine</a></li>
<li><a class="scroll" href="#ultrasound">Ultrasound</a></li>
</ul>
Here is my HTML for the second page which does not work:
<ul id="our_services_sub_sections" class="womens_imaging">
<li><a class="scroll active" href="#mammography">Mammography</a></li>
<li><a class="scroll" href="#breast_ultrasound">Breast Ultrasound</a></li>
<li><a class="scroll" href="#breast_biopsy">Breast Biopsy</a></li>
<li><a class="scroll" href="#breast_mri">Breast MRI</a></li>
<li><a class="scroll osteo" href="#osteoporosis">Osteoporosis<br />Evaluation (DEXA)</a></li>
</ul>
Why is this not working?
Since you are including the function on every page using an include, you probably need to call the function each time a page is loaded.
So, inside each page (just after the opening <body> tag) run your function from inside a JS script block like so:
<script type="text/javascript">
//call the function
services_refresh();
</script>
Also, instead of making your function a variable - I would just make it a plain function like so:
function services_refresh(){
// code here
}
I finally figured out how to solve my problem.
Here is an example of what I had to do for each of the three pages:
var services_refresh = function () {
if($('#firstpage.anchor').length != 0) {
if($('#firstpage.anchor').visible()) {
$('#nav_sub_section li a').removeClass('active');
$('#nav_sub_section li a[href="#firstpage"]').addClass('active');
}
} else if($('#secondpage.anchor').length != 0) {
if($('#secondpage.anchor').visible()) {
$('#nav_sub_section li a').removeClass('active');
$('#nav_sub_section li a[href="#secondpage"]').addClass('active');
}
} else if($('#thirdpage.anchor').length != 0) {
if($('#thirdpage.anchor').visible()) {
$('#nav_sub_section li a').removeClass('active');
$('#nav_sub_section li a[href="#thirdpage"]').addClass('active');
}
}
};
Related
I have this menu:
<nav class="show-for-large-up main-navigation default-navigation align_right" role="navigation">
<ul class="menu-main-navigation active">
<li id="menu-item-393" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home">
Home
</li>
<li id="menu-item-415" class="menu-item menu-item-type-post_type menu-item-object-page>
Shop
</li>
<li id="menu-item-491" class="menu-item menu-item-type-post_type menu-item-object-page">
About
</li>
<li id="menu-item-1086" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1049 current_page_item active">
Services
</li>
<li id="menu-item-403" class="menu-item menu-item-type-post_type menu-item-object-page">
Portfolio
</li>
<li id="menu-item-1010" class="menu-item menu-item-type-post_type menu-item-object-page">
Contact Us
</li>
<li id="menu-item-503" class="menu-item menu-item-type-post_type menu-item-object-page">
Login / Register
</li>
</ul>
</nav>
myscript.js:
jQuery(document).ready(function($) {
var activeurl = window.location;
$('a[href="'+activeurl+'"]').parent('li').addClass('active');
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$(this).parent().addClass("active");
}
});
});
var aurl = window.location.href; // Get the absolute url
var parts = aurl.split('/');
var lastSegment = parts.pop() || parts.pop(); // handle potential trailing slash
$(".main-navigation > ul > li > a").each(function(){
if($(this).attr("href") == aurl || $(this).attr("href") == '' ) {
$(this).addClass('active');
$(this).parent().addClass("active");
}
});
});
I am loading Js script:
function load_my_script(){
wp_register_script(
'my_script',
get_template_directory_uri() . '/js/myscript.js',
array( 'jquery' )
);
wp_enqueue_script( 'my_script' );
}
add_action('wp_enqueue_scripts', 'load_my_script');
Loading Css script:
function enqueue_custom_stylesheets() {
if ( ! is_admin() ) {
wp_enqueue_style( 'custom_css', get_template_directory_uri() . '/css/customCss.css' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_stylesheets', PHP_INT_MAX );
customCss.css:
.main-navigation > ul > li > a:active {
text-decoration: underline !important;
}
.main-navigation ul li:active {
text-decoration: underline !important;
}
Everything seems in place (loaded),but :active state only shows if I use developer console to trigger active state and only on href.
So to say $(this).parent().addClass("active"); does not any effect although most answers here do refer to parent()
How can I activate active state on href?
Thanx
Try this below code.
JQUERY
<script>
$(document).ready(function(){
$(window).load(function(){
var x = window.location.href;
$('.main-navigation ul a[href="'+x+'"]').each(function() {
if(x == window.location.href){
$('.main-navigation ul li').removeClass('active');
$(this).parent('li').addClass('active');
}
});
});
});
</script>
In your CSS
.main-navigation ul li.active a, .main-navigation > ul > li.active > a{
text-decoration: underline !important;
}
I'ved tried above jquery code and it works! :)
Working JQuery:
jQuery(document).ready(function($) {
var aurl = window.location.href; // Get the absolute url
var parts = aurl.split('/');
var lastSegment = parts.pop() || parts.pop(); // handle potential trailing slash
console.log(lastSegment);
$(".main-navigation > ul > li > a").each(function(){
if($(this).attr("href") == aurl || $(this).attr("href") == '' ) {
$(this).addClass('active');
}
});
});
Working Css:
.main-navigation > ul > li > a.active {
text-decoration: underline !important;
}
Credit to #Rahul.
Thanx everyone
But the top list should have only down arrow and bottom list should have only up arrow after reordering.
i have tried below
check this code
$('#testidone ul li').append('<span ><img class="down-arrow" id="theImg" src="grey-darrow.png" tabindex="0" /><img class="up-arrow" id="2img" src="theImg.png" tabindex="0" /></span>');
$('#testidone ul li:first span img.up-arrow').css("visibility", "hidden");
$('#testidone ul li:last span img.down-arrow').css("visibility", "hidden");
newt = $('#testidone ul li span img');
$(newt).keydown(function(e) {
var pli = $(this).parent().parent("li");
if ($("img.down-arrow").is(":focus")) {
switch (e.which) {
case 40:
pli.insertAfter(pli.next());
break; //down
}
pli.focus();
}
});
$("li").parent().css("background-color", "yellow");
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testidone">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="testidtwo">
<ul>
</ul>
</div>
$('#testidone ul li').append('<span ><img class="down-arrow" id="theImg" src="grey-darrow.png" tabindex="0" data-direction="down" /><img class="up-arrow" id="2img" src="theImg.png" tabindex="0" data-direction="up"/></span>');
function setFirstLast(){
$('#testidone ul li:first span img.up-arrow').css("visibility","hidden");
$('#testidone ul li:last span img.down-arrow').css("visibility","hidden");
}
setFirstLast();
$("#testidone ul li img").click(function(){
var parentEle = $(this).parent().parent("li");
if($(this).hasClass( "down-arrow" )){
$('#testidone ul li:first span img.up-arrow').css("visibility","visible");
parentEle.insertAfter(parentEle.next());
}
else{
$('#testidone ul li:last span img.down-arrow').css("visibility","visible");
parentEle.insertBefore(parentEle.prev());
}
setFirstLast();
});
$("li").parent().css( "background-color", "yellow" );
I can not keep my Menu opened and I am having problem to follow to the Link of the Menu instead to to slide down. The slide down should be done by right floated counter.
The Code to keep opened at current page
$(document).ready( function() {
$('#cssmenu ul li.has-sub').parent().show();
$('#cssmenu ul li.has-sub ul').show();
$('#cssmenu li.has-sub ul').show();
});
My Example Code: http://jsfiddle.net/5abCc/
Thanks!
Add an open class to your active ul like,
HTML
<li class='has-sub open'><a href='javascript:;'><span>Company</span></a>
<ul>
<li><a href='javascript:;'><span>About</span></a></li>
<li class='last'><a href='javascript:;'><span>Location</span></a></li>
</ul>
</li>
SCRIPT
$(document).ready( function() {
$('#cssmenu li.has-sub.active ul').show();
});
To add click event on span try this,
$('#cssmenu > ul > li > a .cnt').click(function() {
// ----------------^ span counter element
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).parent('a').next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
Demo
I'm trying to make a script that goes to the next id when I scroll down and to the prev one when I scroll Up.
I only got it to work with click() which works but I need the same code to work on mousewheel()
Here is my code:
<div id="sidebar">
<ul>
<li><a id = "first_info" href="#">1</a></li>
<li><a id = "second_info" href="#">2</a></li>
<li><a id = "third_info" href="#">3</a></li>
<li><a id = "fourth_info" href="#">4</a></li>
<li><a id = "fifth_info" href="#">5</a></li>
<li><a id = "sixth_info" href="#">6</a></li>
</ul>
</div>
$("#sidebar > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
This is the code that works when I click on the list items and this is the code I tried to use on mouse wheel but with no success.
$('body').mousewheel(function(event, delta) {
if (delta > 0) {
$("#sidebar > ul > li > a").attr("id"));
} else {
$("#sidebar > ul > li > a").attr("id"));
}
event.preventDefault();
});
Try this
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
window.location.href = "#down";
} else {
// upscroll code
window.location.href = "#up";
}
lastScrollTop = st;
});
I am very new to jQuery and Javascript so I'm having issues with my style switcher, the css part works but the script doesn't and I'm not sure how to do make it work.
Javascript:
$("#navorin li a").click(function() {
$("link.nav").attr("href",$(this).attr('rel'));
$("script.nav").attr("src",$(this).attr('role'));
});
HTML:
<ul id="navorin">
<li>Left Menu</li>
<li>Right Menu</li>
<li>Top Menu</li>
<li>Top Menu Fixed</li>
</ul>
It changes these:
<script class="nav" src="assets/js/leftmenu.js"></script>
<link class="nav" href="assets/css/leftmenu.css" type="text/css" media="screen" rel="stylesheet">
My menu scripts looks roughly like this, if that helps:
$(window).load(function () {
$('.sidenav ul > li').click(function (ev) {
$(this).find('>ul').fadeToggle();
ev.stopPropagation();
});
$('.sidenav ul > li a.back').click(function (ev) {
$(this).parent().parent().fadeOut();
ev.stopPropagation();
});
});
$(window).on("load resize", function () {
if ($(window).width() <= 768) {
$(document).on("swiperight", function () {
$(".sidenav").addClass('sidenavhover');
$(".overlay").fadeIn();
$(".sidenav li.user").addClass('usershow');
});
$(document).on("swipeleft", function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").hide();
$(".overlay").fadeOut();
$(".sidenav li.user").removeClass('usershow');
});
$(".overlay").click(function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").hide();
$(".overlay").fadeOut();
$(".sidenav li.user").removeClass('usershow');
});
}
if ($(window).width() >= 769) {
$(".sidenav").mouseover(function () {
$(".sidenav").addClass('sidenavhover');
$(".sidenav li.user").addClass('usershow');
$(".overlay").fadeIn();
});
$(".overlay").click(function () {
$(".sidenav").removeClass('sidenavhover');
$(".sidenav ul > li ul").slideUp(100);
$(".sidenav li.user").removeClass('usershow');
$(".overlay").fadeOut();
});
} if ($(window).height() < 458) {
$(".sidenav ul > li.logout").css('position', 'relative');
$(".sidenav ul > li.logout").css('border-top', '0');
}
if ($(window).height() > 458) {
$(".sidenav ul > li.logout").css('position', 'absolute');
$(".sidenav ul > li.logout").css('border-top', '1px solid #eeeeee');
}
if ($(window).height() < 588) {
$(".sidenav.sidenavhover ul > li.logout").css('position', 'relative');
$(".sidenav.sidenavhover ul > li.logout").css('border-top', '0');
}
if ($(window).height() > 588) {
$(".sidenav.sidenavhover ul > li.logout").css('position', 'absolute');
$(".sidenav.sidenavhover ul > li.logout").css('border-top', '1px solid #eeeeee');
}
});
If anyone could help my make it work that would be amazing
Thanks,
Alfred