Style Switcher Scriprs - javascript

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

Related

Can we use selectors as cases in JQuery?

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');
}
});

How to adapt scrolling jQuery listeners to CSS media queries? (Javascript/ jQuery / Bootstrap)

I'm new to all this; so I've been trying for the past day to get the jQuery to function. I have a navigation bar(nav bar) that changes background-color/color due to scrolling position, this is done through jQuery. I have it working effectively on desktop width (1350px) but trying to juggle both the media queries and the jQuery listeners seems impossible. I've applied eveything I've found, and tried it all twice but to no avail.
HTML
The HTML is pretty a basic Bootstrap navbar, the navbar just changes due to the jQuery (scroll position)
</head>
<body>
<nav class="navbar sticky-top navbar-expand-sm">
<a class="navbar-title" href="#aboutUs-box">counterCarbon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i><span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav align-items-end">
<li class="nav-item">
<a class="nav-link active" href="#navLink1">Emissions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#navLink2">Comparisons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#navLink3">Partners</a>
</li>
</ul>
</div>
</nav>
CSS
The only interesting part of the CSS would be the visible/hidden changes made, I imagine.
.visible {
visibility: visible;
opacity: 1;
transition: opacity .35s linear, color .5s;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility .50s, opacity .50s linear, color .5s;
}
jQuery
The changes are all implemented with the jQuery, the navbar should change the excat same way just at different scrolling positions depending on the different width/device used. Crucially I can't get the program to recognise three separate ($(window).width()) blocks (ie, all three sections) recoginsing one is easy. But it seems to get confused with two and three is completely impossible.
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
{if(($(window).width() >= 1350 && scroll_pos > 50)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 1350 && scroll_pos > 690)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 1350 && scroll_pos > 1270)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 1350 && scroll_pos > 1290)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 1350 && scroll_pos < 50)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}}
if(($(window).width() >= 1020 && scroll_pos > 45)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 1020 && scroll_pos > 650)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 1020 && scroll_pos > 1220)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 1020 && scroll_pos > 1245)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 1020 && scroll_pos < 45)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}
{if(($(window).width() >= 750 && scroll_pos > 40)) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if(($(window).width() >= 750 && scroll_pos > 620)) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color','#404040');
}
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if(($(window).width() >= 750 && scroll_pos > 1200)) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if(($(window).width() >= 750 && scroll_pos > 1220)) {
$("nav").css('background-color', '#fafafa');
}
if(($(window).width() >= 750 && scroll_pos < 40)) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color','#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}}
});
});
```

I had a bit of a hard time trying to understand what intervals you wanted so I put some comments to help you achieve what you wanted if it doesn't as it is.
Furthermore, I have combined the ifs structures in order not to reevaluate an expression uselessly.
$(document).ready(function () {
var scroll_pos = 0;
$(document).scroll(function () {
scroll_pos = $(this).scrollTop();
var width = $(window).width();
if (width >= 1350) {
// ALL WHAT FOLLOW IMPLIES THAT width >= 1350
// (1) : This overrides (2) because
if (scroll_pos <= 50) { // Range [0,50]
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color', '#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}
if (scroll_pos > 50) { // RANGE [50,+∝]
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if (scroll_pos > 690) { // [689,∝]
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color', '#404040');
}
/**
*
* (2)
* THIS IS NEVER "VISIBILY EXECUTED" : SEE (1)
*
* YOU HAVE WRITTEN :
else {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
**/
if (scroll_pos > 1270) { // [1270,+∝]
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
/**
*
* NOTE THAT IF SCROLL_POS > 1970 EVERYTHING ABOVE WOULD BE EXECUTED SO YOU WOULD HAVE A COMBINATION
* THIS IS BECAUSE 1970 > 690 > 50 SO EVERYTHING ABOVE IS TRUE
* IF YOU WANT TO MAKE CLOSED INTERVALS PLEASE TRY PUTTING THE HIGHEST VALUE OF scroll_pos AT BEGINNING AND USING ELSE IF
*/
}
if (width >= 1020) {
if (scroll_pos >= 45) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if (scroll_pos > 650) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color', '#404040');
} else { // RANGE [0,620]
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if (scroll_pos > 1220) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if (scroll_pos > 1245) {
$("nav").css('background-color', '#fafafa');
}
if (scroll_pos < 45) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color', '#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}
}
if (width >= 750) {
if (scroll_pos > 40) {
$("nav").removeClass("visible").addClass("hidden");
$("nav a").removeClass("visible").addClass("hidden");
$("nav span").removeClass("visible").addClass("hidden");
}
if (scroll_pos > 620) {
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
$("nav").css('background-color', '#fafafa');
$("nav a").css('color', '#404040');
$('nav span').css('color', '#404040');
} else { // RANGE [0,620]
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$("nav span").css('color', '#fafafa');
}
if (scroll_pos > 1200) {
$("nav a").css('color', '#33adff');
$("nav span").css('color', '#33adff');
}
if (scroll_pos > 1220) {
$("nav").css('background-color', '#fafafa');
}
if (scroll_pos < 40) {
$("nav").css('background-color', 'transparent');
$("nav a").css('color', '#fafafa');
$('nav span').css('color', '#fafafa');
$("nav").removeClass("hidden").addClass("visible");
$("nav a").removeClass("hidden").addClass("visible");
$("nav span").removeClass("hidden").addClass("visible");
}
}
});
});

Cookies menu javascript multilevel

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);
});
});

jQuery Accordion Menu - Keep Active Menu open

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

Bootstrap Collapsed on load

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

Categories