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
Related
I need to create a function with switch inside which will use cases. As cases I'll have '#a li' '#b li' '#c li' '#d li'
If #a/b/c/d li clicked, it will check screen width (for responsiveness), and if it is less than 990 it will show modal #amodal #bmodal and etc, depends on which # is clicked.
How to turn it into one function with switch and cases?
Jquery:
$('#a li').click(function(){
if ($(window).width() < 990) {
$('#amodal').modal('show');
}
});
$('#b li').click(function(){
if ($(window).width() < 990) {
$('#bmodal').modal('show');
}
});
$('#c li').click(function(){
if ($(window).width() < 990) {
$('#cmodal').modal('show');
}
});
$('#d li').click(function(){
if ($(window).width() < 990) {
$('#dmodal').modal('show');
}
});
If #a, #b , #c , #d is not a parent of li you shoud use closest to find what modal to open
$('#a li , #b li , #c li , #d li').click(function () {
if ($(window).width() < 990) {
$('#'+$(this).closest("#a , #b , #c , #d").attr("id")+'modal').modal('show');
}
});
If #a, #b , #c , #d is a parent of li use parent
$('#a > li , #b > li , #c > li , #d > li').click(function () {
if ($(window).width() < 990) {
$('#'+$(this).parent().attr("id")+'modal').modal('show');
}
});
I prefer to add class as a selector and use it
$('.open_modal > li ').click(function () {
console.log("Modal to open:" + $(this).parent().attr("id"));
/*if ($(window).width() < 990) {
$('#' + $(this).parent().attr("id") + 'modal').modal('show');
}*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="a" class="open_modal"><li>Test A</li></ul>
<ul id="b" class="open_modal"><li>Test B</li></ul>
<ul id="c" class="open_modal"><li>Test C</li></ul>
<ul id="d" class="open_modal"><li>Test D</li></ul>
You can do something like this, Jquery doc
$("#a li, #b li, #c li, #d li").click(function(){
if ($(window).width() < 990) {
// if parent: $(this).parent().attr("id")
$("#" + $(this).attr("id") + "modal").modal('show');
}
});
I need cookie for 2 levels menu. I have to show last level - this is working. But first level is still unvisible. Can you help me? I need something as this: #nav > li > ul > li > a:eq('+checkCookie+') < li < ul < li
$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
if (document.URL != '') {
if (checkCookie != "") {
$('#nav > li > ul > li > a:eq(' + checkCookie +')').addClass('active has-sub open').next().show();
$('#nav > li > ul > li > a:eq(' + checkCookie + ') < li < ul < li').addClass('active has-sub open').next().show();
}
}
$('#nav > li > ul > li').click(function(){
var navIndex = $('#nav > li > ul >li').index(this);
$.cookie("nav-item", navIndex);
});
});
I use this script
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
http://jsfiddle.net/jhfrench/GpdgF/
for recursive collapsible menu. It works perfectly. But I need the menu collapsed initially that is when the page load and expand only on click.
My JS knowledge is weak. But i tried using toggle(); and hide(); , it results in collapsed and doesnt expand on click
Below is recursive php code
<?php
function listroles($roles)
{
?>
<ul>
<?php
foreach($roles as $role)
{
?>
<li>
<span><i class="icon-plus "></i> Parent</span> <?php echo $role['category']->name; ?>
<?php
if ( ! empty($role['children']))
{
listroles($role['children']);
}
?>
</li>
<?php
}
?>
</ul>
<?php
}
listroles($this->categories_menu);
?>
You can add a css rule to hide the child li elements at the start
.tree li ul > li {
display: none;
}
Demo: Fiddle
or hide the child li element on page load
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
//hide the child li elements
$('.tree li ul > li').hide();
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
Demo: Fiddle
The easiest way to accomplish what you want is to run the click() handler once.
$(function () {
$('.tree li.parent_li > span').on('click', function (e) {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
//blah blah blah
e.stopPropagation();
}).click();
});
edit: forgot some code
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
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');
}
}
};