I have a working code that adds a period to the nav-item marked with active class and moves the class="active" when a link to another page in my nav is clicked.
I need to add a few lines of code that will remove the period at the end of the current link and move it to the newly clicked active link.
Can someone please help me with this code, as I am a bit lost?!
See code and image below for reference.
Thanks in advance!
$(document).ready(function () {
'use strict';
// SITE MENU
// This line of code adds the period to end of link
document.getElementById("nav-item").innerHTML += ".";
// These lines of code move the active class when a link is clicked
$(function () {
var current_page_URL = location.href;
$("a").each(function () {
if ($(this).attr("href") !== "#") {
var target_URL = $(this).prop("href");
if (target_URL == current_page_URL) {
$('.nav a').parents('li, ul').removeClass('active');
$(this).parent('li').addClass('active');
return false;
}
}
});
});
});
Can you use CSS to accomplish this? I'm not sure what the structure of your code is since the HTML isn't included, but assuming you can target the active link, you could use something like:
.active:after {
content: ".";
}
Instead of adding period with innerHTML, you can use CSS to insert that period as shown below :
.active:after {
content: ".";
}
So whenever active class is added to an element it will add period to the end of the content.
Related
i have a page with a logo that changes his color by scrolling the page. I want to keep this function except for some page, so i want to remove this function.
How i could remove the effect if i insert a css class in the code?
var b = $(window).scrollTop();
if( b > 60 ){
$(".navbar").addClass("scroll-fixed-navbar");
$(".navbar-brand img").attr('src', 'img/dark-logo.png');
} else {
$(".navbar").removeClass("scroll-fixed-navbar");
$(".navbar-brand img").attr('src', 'img/white-logo.png');
}
});
$(document).ready(function() {
"use strict";
for esample i want to insert if class contain "black", so keep only the dark logo (the previous function will be disabled)
Wrap the current javascript with this:
if (!$(someElement).hasClass("black")) {
//do stuff here
}
This will prevent the class="black" from running that script, I cannot help any further since all your code is not posted but this will certainly point you in the right direction.
The title is a bit of a tongue twister. A brief description of the fiddle, is that it's a toggle style accordion where the toggle state changes color when one of the divs is toggled. I've got it working to where if another div is toggled it will close that previous div and open the new div while changing the toggle state.
The issue I am running into is if a user wants to close the current toggle without clicking a different div it will close the current toggle but not change the toggle state back to it's original state. I am currently using this and have tried multiple things including if the container 'is: visible' or hasClass then to remove the toggle class, but nothing seems to work. I've also tried a different slideToggle function, but of course that applied it to the toggled element I've found.
Fiddle: http://jsfiddle.net/NFTFw/1256/
What I am trying to do?
I want the current toggle class to change back to its original state if the user clicks the current toggled div or clicks another div. So essentially I want the user to have either option.
CODE:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
$(".toggle").removeClass("toggle-d");
$(this).addClass('toggle-d');
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
});
Check to see if the thing that you're clicking already has the class. If so, remove it, if not, add it. I suspect the problem you were having with hasClass() is that you were attempting to check the wrong this.
Oooh I did a bad thing and didn't remove the class when a new div was clicked. I've fixed that and updated the jsfiddle
jsfiddle
js:
$(document).ready(function () {
$('.column').each(function (index) {
$(this).delay(750 * index).fadeIn(1500);
});
$('.column').hide();
var width = $(window).width();
if (width <= 600) {
$('.body').hide();
$('.column').each(function () {
var $toggle = $(this);
$('.toggle', $toggle).click(function () {
if($(this).hasClass('toggle-d')){
$(this).removeClass("toggle-d");
}
else{
$('.toggle').removeClass('toggle-d');
$(this).addClass('toggle-d');
}
$body = $('.body', $toggle);
$body.slideToggle();
$('.body').not($body).hide();
});
});
}
});
What i would suggest is to pass the element itself in the function
in the index.html Do this
<a class = 'classname' onclick = toggle(this)>
Your Content Here
</a>
After that in the script.js
what i am saying is in javascript, i believe you can easily convert it to jquery
function toggle(value){
if(value.className == 'the predefined value'){
value.className = value.className + ' Your new class addition'
// remember there should be a space if you are adding an additional class to the present class, else directly change the classname
}
else{
value.className = 'the predefined value'
}}
this will toggle your classname whenever the element is clicked
I am using the following js which works great for hiding and showing content when one of 5 tabs is clicked. Works great but my question is, how could i adjust the code so that when a tab's content is currently being displayed, the tab has an active class. The hover class works well and so does everything else besides the active class. Any help is hugely appreciated:
$(window).ready(function() {
$('#infotab').click(function() {
$(document).find('.tabcontent').hide();
$('.infotabcontent').show();
$(document).find('.top-nav2-menu li').removeClass('tabactive');
$('#infotab').addClass('tabactive');
$('#reviewtab').removeClass('tabactivelast');
});
$('#findingtab').click(function() {
$(document).find('.tabcontent').hide();
$('.findingtabcontent').show();
$(document).find('.top-nav2-menu li').removeClass('tabactive');
$('#findingtab').addClass('tabactive');
$('#reviewtab').removeClass('tabactivelast');
document.getElementById('frame1').contentDocument.location.reload(true);
});
$('#streetviewtab').click(function() {
$(document).find('.tabcontent').hide();
$('.streetviewtabcontent').show();
$(document).find('.top-nav2-menu li').removeClass('tabactive');
$('#streetviewtab').addClass('tabactive');
$('#reviewtab').removeClass('tabactivelast');
document.getElementById('frame2').contentDocument.location.reload(true);
});
$('#videotab').click(function() {
$(document).find('.tabcontent').hide();
$('.videotabcontent').show();
$(document).find('.top-nav2-menu li').removeClass('tabactive');
$('#videotab').addClass('tabactive');
$('#reviewtab').removeClass('tabactivelast');
});
$('#reviewtab').click(function() {
$(document).find('.tabcontent').hide();
$('.reviewtabcontent').show();
$(document).find('.top-nav2-menu li').removeClass('tabactive');
$('#reviewtab').addClass('tabactivelast');
});
});
Your code is a pain ...
$(window).ready(function() { should be $(function() {
which is a shorthand for $(document).ready(function(){
In your HTML assign a class class="tab" to all your id="***tab" elements
Cache your elements collections $('.tabcontent') and $('.top-nav2-menu li')
use the $(this) selector
Than this is all you need:
$(function(){ // DOM is now ready
// Cache your selectors
var $tabCont = $(".tabcontent"),
$topNavLi = $(".top-nav-menu li"),
$tabRev = $('#reviewtab');
$('.tab').click(function() {
var myId = this.id;
if(myId=="findingtab"){
$('#frame1')[0].contentDocument.location.reload(true);
}
if(myId=="streetviewtab"){
$('#frame2')[0].contentDocument.location.reload(true);
}
$tabCont.hide();
$("."+ myId +"content").show();
$(this).addClass('tabactive').siblings().removeClass('tabactive');
$tabRev.removeClass('tabactivelast');
if(myId=="reviewtab"){
$(this).addClass('tabactivelast');
}
});
});
With something like:
function deactivateAllTabs(){
$('#infotab, #findingtab, #streetviewtab, #videotab, #reviewtab').removeClass('tabactive');
}
Then, prior to adding your tabactive class you'd call this method:
So, for example, instead of:
$('#infotab').addClass('tabactive');
do this:
deactivateAllTabs();
$('#infotab').addClass('tabactive');
repeate this for all your click handlerss
This way, the active tab will always have a tabactive class
I don't know your DOM structure, since you didn't post it, but I'm assuming that every tab has an identical class, "tabcontent", from what you've posted. If so, you could do something like this inside your function:
$('.tabcontent').removeClass('.tabactive'); // removes class from all tabs
$('#sometab').addClass('.tabactive'); // adds class to specific tab
Then you could show or hide using just some CSS, like this:
.tabcontent { display: none; }
.tabactive { display: block; }
IMHO you'd also be better off using a single function for all of your tabs so they get the same treatment. Easier to maintain. e.g. Give each tab bar item that you click on to see the tab a data attribute with the id of the div you want to display, and you could expand on something like this (untested but hopefully you get the gist):
$('.tab').click(function() {
$('.tabcontent').removeClass('.tabactive');
$($(this).data('tabcontent')).addClass('.tabactive');
});
finally i did this by following javascript..
function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "selected";
arr[i].parentNode.className = "selected";
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;
if (document.getElementById("but_a")!=null)
setActiveMenu(document.getElementById("but_a").getElementsByTagName("a"), extractPageName(hrefString));
}
if i click the ul without clicking the link.. its working.. when i click the link. it works until the page loads. after the page load, the ul back groud going default class not "selected" class..am new to tis.. am struggling so hard.. need help..??
I've added a jdFiddle with an example here:
http://jsfiddle.net/Suren/u4szQ/1/
$(document).ready(function() {
$("a.button").click(function () {
$(this).toggleClass("selected");
});
});
You've got too much javascript there.
After your posted fiddle. Here is a working fiddle.
Note you have a great deal of malformed HTML. You can't place divs in between list items. You can't have multiple objects on a page with the same ID (use a class instead).
After clicking on anchor the page is going to navigate to the url set on anchor's href attribute so whatever javascript operation you do is going to be lost after the page is loaded.
If you want to highlight the selected link the you can probably send the link id or some identifier along with the url and then check for it on page load and set the appropriate link selected.
By the way toggleClass adds or removes one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
I have a list of a list that uses jquery toggle and slideToggle so that when items are clicked on, explanatory text slides out and the class changes on the h3. The html for the items looks like:
<li><h3>What do I know about javascript?</h3>
<div class="check_list_wrap feature1">Not a lot, apparently.</div>
</li>
I included the jquery files and then write this in the header:
<script type="text/javascript">
$(function() {
$("#listfeatures h3 a").toggle(function(){
$(this).addClass("check_list_selected");
}, function () {
$(this).removeClass("check_list_selected");
});
$("#listfeatures h3 a").click(function() {
$("."+this.id).slideToggle('fast');
return false;
});
});
</script>
This makes it so that if a link is clicked on, it will toggle the class change of the h3, the display:block/display:inline and the sliding out of the div. It works fine.
BUT, now I want it so that with a url like index.php#feature1, the toggling for that list item will be activated as if it'd been clicked on. I know I need to use location.hash but I'm not sure how to do that. Where should I start?
location.hash contains everything in the URL including and after the hash (#) mark. So, if went to index.php#feature1 and wanted the div with id "feature1" to show on load, you could do
$(document).ready(function() {
if(location.hash) {
var id = location.hash.slice(1); //Get rid of the # mark
var elementToShow = $("#" + id); //Save local reference
if(elementToShow.length) { //Check if the element exists
elementToShow.slideToggle('fast'); //Show the element
elementToShow.addClass("check_list_selected"); //Add class to element (the link)
}
}
});