jQuery: onClick if else statement not working - javascript

I have an if/else statement for our navigation where when a user clicks on the link associated with the dropdown-toggle class a submenu pops up.
We have multiple links on our navigation with the dropdown-toggle class. I only need to target 1 not all of them that's why I'm using .eq(0).
When the submenu appears a new class called open gets injected to the parent <li>.
For some reason I can't get this if/else statement to fully work. I have the first half working but not the second.
For the else portion I'm trying to add what would happen if the open class got injected and the active-nav-tab class gets added.
active-nav-tab is the class used for the state when users are on the current page. active-nav-tab is supposed to disappear when a user clicks on dropdown-toggle of the current page only and when they click outside the window of the submenu. Then when a user clicks on a navigation link with dropdown-toggle, the active-nav-tab again is supposed to appear on the current page. Hopefully that makes sense. I've been at this for like two days.
Code Below:
$('.dropdown-toggle').click(function (e) {
if ($(this).not('open')) {
$('.dropdown-toggle').eq(0).removeClass('active-nav-tab');
alert('test1');
}
else {
$('.dropdown-toggle').eq(0).addClass('active-nav-tab');
alert('test2');
}
});
HTML
<li>
<a class="link dropdown-toggle active-nav-tab" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
<li class="open">
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
<li>
<a class="link dropdown-toggle" role="button">
<span class="tab-icon icon-header-language"></span>
<span class="tab-text">Region</span>
</a>
</li>
I don't know what I'm exactly missing. Any help is gladly appreciated.
Thanks!

The quickest change you can make to your code to get the behavior you want is to replace
if ($(this).not('open')) {
With
if ($('.dropdown-toggle').eq(0).hasClass('active-nav-tab')) {
But without knowing your use case or how many "dropdown-toggle" elements you have it's hard to say if this would be a complete solution or not.

This seems to have solved my issue more or less. I'll see what QA says lol
Thank you!
$('.active-nav-tab').click(function (e) {
if ($(this).parents().hasClass("open")) {
$(this).addClass('active-nav-tab');
alert('activated');
}
else {
$(this).removeClass('active-nav-tab');
alert('deactivated');
}
});

this will process clicking on the first element with "dropdown-toggle" class
$('.dropdown-toggle:first').click(function () {
$(this).toggleClass("active-nav-tab");
if ($(this).hasClass("active-nav-tab")) {
alert ("Tab activated");
} else {
alert ("Tab deactivated");
}
}
also jQuery function not(selector) should be used on enumeration of objects to filter it.

Related

What do I need to change in my code for the modals to work on my log in button?

I currently have this code for the sign-in button in my website
<li style="padding-top:2px;"><button class="btn" style="align:center; width:80px;height:35px;text-align: center;border-radius: 50px;text-transform: uppercase;font-size: 12px;font-weight: 700;" onclick="location.href='buycns.html'">Buy CNS</button></li>
I want to use this code for my plug in modals
<li><a class="cd-main-nav__item cd-main-nav__item--signin" href="#0" data-signin="login">Sign in</a></li>
What do i need to change?
You need to add the onclick attribute in the a tag as in the example. This way you can execute the function that displays your modal preventing navigate to the a-link.
The "event.preventDefault();" line prevents the default behaviour of the a tag (ie, navigate to the href link).
After that line, you need to add the code that executes your modal (in the example, replace 'yourExecuteModalFunction' for your own function name and code).
<script>
function yourExecuteModalFunction(event) {
alert('display modal');
}
</script>
<li>
<a
class="cd-main-nav__item
cd-main-nav__item--signin"
href="#"
data-signin="login"
onclick="event.preventDefault(); yourExecuteModalFunction(event)'">Sign in</a>
</li>

How to change a Bootstrap class list-group-item active depending on page

So, I have got a couple of html files that share exactly some lines of the code. I have that code with an include and I call that in every single page. It's basically a menu or better saying, a Bootstrap list-group. Here is the code:
<div class="list-group">
<i class="glyphicon glyphicon-send"></i> Page1
<i class="glyphicon glyphicon-cog"></i> Page2
<i class="glyphicon glyphicon-question-sign"></i> Page3
<i class="glyphicon glyphicon-picture"></i> Page4
</div>
The problem with this is that, I need my active class to change depending on which page I'm visiting. Therefore, we can say that the menu is only 99% the same, I mean, that class needs to be changed.
What's the best approach, recommendation or solution to tackle this?
You can, on document ready, check the URL and then apply the active class to the element you need.
$( document ).ready(function() {
var url = window.location.href;
if (url.IndexOf('page1') > -1) {
$(".list-group:first-child").addClass("active");
}
// ... other cases, using switch for each
});
Something like that
You can done through jquery
$(".list-group-item").on("click",function(){
$(".list-group-item.active").removeClass('active');
$(this).addClass('active');
});

jQuery: hide by class name and then show next element by the same class name?

I'm trying to create a demonstration type of thing in my page.
basically the first element is showing on the page load and the rest are hidden.
once the close button inside the element has been clicked, I need this showing element to hide and the next element with the same class name to show and the same process until there is no more element in the next() to show.
my html looks like this:
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>
<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>
And my jquery looks like this:
$('.cls').click(function() {
$('.bubs').hide();
$(".bubs").next().show();
});
My simple code will hide .bubs that is showing but it doesn't show the next .bubs
Could someone please advise on this issue?
Thanks in advance.
.bubs are not siblings. Go to ancestor a and then find .bubs in next a like following.
$('.cls').click(function () {
$(this).closest('.bubs').hide();
$(this).closest('a').next('a').find('.bubs').show();
});
The JQuery method "next" should contain the class of the next element you want to show.It should work if you use next(".bubs") like this :
$('.cls').click(function() {
$('.bubs:first').hide();
$(".bubs:first").next(".bubs").show();
});
Note : I assume that the element you want to hide is the first one who has "bubs" class.

Changing Bootstrap Glyphicon on click

I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all.
I'm new(ish) to jQuery / Javascript and I just can't get my head around this.
Heres the
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span class="glyphicon glyphicon-tasks" id="whiter"></span>
</a>
And the script is below:
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
I get all the classes instead of just glyphicon-chevron-up, Im getting:
<span class="glyphicon glyphicon-tasks glyphicon-chevron-up"></span>
Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.
I think you want to swap glyphicon-tasks and glyphicon-chevron-up. You need to toggle both class like following.
$(this).toggleClass('glyphicon-tasks glyphicon-chevron-up');
This is because your function is set to class, which mean all elements with the given class.
To focus a specific element, provide, for example, an unique ID.
Here, you already got one.
$('#whiter').click(function() {
$(this).toggleClass('glyphicon-chevron-up');
});
I guess this can help
$('.glyphicon').click(function(){
$(this).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-up');
}
If you want to have a bit more control, use jQuery to its fullest, apply a data variable to multiple glyphicons (chances are that you'll be checkboxes, folder icons, tree icons):
<nav class="navbar navbar-top" style="position:fixed; width:100%;">
<a class="navbar-brand" href="#">Project name</a>
<a class="navbar-brand" href="#" style="float:right;">
<span><i class="glyphicon glyphicon-tasks" data-tasks="firstCollection" data-mycolor="white" data-icontype="taskIcon"></i></span>
</a>
...plus, elsewhere in your page, another glyphicon, for example (this will not be used, affect or be affected by our code):
<i class="glyphicon glyphicon-unchecked" id="checkbox_Analytics" data-foldername="group_Analytics" data-icontype="groupCheckbox"></i>
...while, on the other hand, this will be affected by our code (because of foldername match):
<i class="glyphicon glyphicon-check" data-foldername="2014" data-icontype="childCheckbox"></i>
...and in JS, toggle their values without affecting each and every other glyphicon:
$('i[data-icontype="taskIcon"]').on('click', function() {
$('i[data-tasks="firstCollection"]').toggleClass('glyphicon-tasks glyphicon-chevron-up');
console.log("current state now displays CHEVRON UP (true/false)? ["+$(this).hasClass('glyphicon-chevron-up')+"]");
});
...
$('i[data-icontype="childCheckbox"]').on('click', function() {
$('i[data-foldername="2014"]').toggleClass('glyphicon-check glyphicon-unchecked');
// Notice that you can also access the `data-foldername` variable directly for each element which has it
var layerFolderName = $(this).closest('i').data('foldername');
console.log("Changed glyphicon chevron in: "+layerFolderName);
});
NOTE1: one style of using glyphicons, places them inside <i> tags and references them directly thusly.
NOTE2: "white" is not, in general, a good idea for an id. I recommend another data variable, data-mycolor, which might in turn be germane to your code's logic. In this example, it is set, but not really used.

Load different CSS files on button click with JavaScript

I want to allow the user to change the 'theme' of the website when he clicks on theme 1 it loads a different CSS file then when the user clicks on theme 2. How is this possible?
This is what I have tierd to do with so far.
<script type="text/javascript">
window.onload = function() {
var fontButton = document.getElementById('changeFont');
fontButton.addEventListener('click', function(){
document.write('<link rel="stylesheet" type="text/css" href="/France2014/css/test.css">');
});
}
</script>
This loads the file when I click on the button, but it removes everything else inside the website and just leaves the HTML tag and CSS file, I know this because I launch the development tool inside of Google chrome.
What can I do? Is there a better way to implement this feature?I am open to suggestions.
Changing a theme is usually done by loading in another class with JQuery.
For example:
HTML:
<body id='skin' class="skin-blue">
JQuery:
$('#skin').addClass('skin-red').removeClass('skin-blue');
To change a font-size easily, consider something like this for example:
var size = 20;
function setFontSize(s) {
size = s;
$('#sidebar-menu').css('font-size', '' + size + 'px');
$('#content').css('font-size', '' + size + 'px');
}
function increaseFontSize() {
setFontSize(size + 5);
}
function decreaseFontSize() {
if(size > 5)
setFontSize(size - 5);
}
$('#inc').click(increaseFontSize);
$('#dec').click(decreaseFontSize);
setFontSize(size);
and for example a + and - button
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-plus" id="inc"></i>
</a>
</li>
</li>
<li class="dropdown tasks-menu">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-fw fa-minus" id="dec"></i>
</a>
</li>
</li>
i suggest you to add id or class onclick to <body> tag, You will have two sets of styles:
.menu{
color:black}
and after click you will add <body id="greenTheme">
#greenTheme .menu{
color:green}
i think you should have to change just the href value of stylesheet on every button click .Doing that ,will load the new CSS file without affecting the DOM elements . Hope I am clear to you .
Thanks !!
I would try the following link as a quick working example...
enter link description here
You can see it in action here...
enter link description here
Even though your attempted solution is pure JavaScript and you might not actually need it I feel the need to mention jQuery.
It should help you write less code that should be cross browser friendly too, it actually makes writing JavaScript less painful
You can put a div before the link tag and use getElementById.innerHTML and change the contents to your desired css

Categories