My navigation links are in layout page and they look like:
<h3 id="my-navigation">
ANKETA
STATISTIKA
...
</h3>
I need active link to change color. CSS to achieve this:
#my-navigation a.active {
text-decoration:none;
color:#E0EBEB;
}
Since there are no navigation links in all html pages, but just in layout, I tried with javascript:
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
Why doesn't this work?
EDIT:
I realised that this gives effect just temporary (at the time of click). For example:
$(document).ready(function () {
$('#my-navigation a').click(function () {
$('#my-navigation a').addClass('active');
});
});
blinks all links on click. So, what to do?
The jQuery script you've included works just fine on my end, so I'd say the issue is most likely either with the version of jQuery you've linked on your page or the script being loaded before the links fully render.
Try surrounding the script you listed with a document ready like this:
$(document).ready(function() {
$('#my-navigation a').click(function () {
$('#my-navigation a').removeClass('active');
$(this).addClass('active');
});
});
It is also acceptable to replace the first line with the shorthand version:
$(function() {
This will ensure the page's content is fully loaded before it assigns the on click trigger to the links, as the links must exist prior to that being defined.
Your code should work, at least it works here: https://jsfiddle.net/kvk1keds/
I just changed the click method for
$('#my-navigation a').on('click', function (ev) {});
You should make sure that the method is running and the class 'active' is being set.
Related
I'm building a clone of Spotify more-less. At this time what I want to achieve is to make on click event on menu span items which on click will show a container a page where some content will be visible.
On my aside bar I added the span with the pages to point and added to HTML the pages with data-page as an anchor for it. I also make a jquery event.
What I did is as follow regarding the Jquery:
$(".menu .sb-item span").on("click", function(e) {
e.preventDefault();
var page = $(this).data("page");
$(".main .page:not('.hide')")
.stop()
.fadeOut("fast", function() {
$(this).addClass("hide");
$('.main .page[data-page="' + page + '"]')
.fadeIn("slow")
.removeClass("hide");
});
});
I have a working version simplified here of what I want to achieve on JSFiddle.
Clicking on the span you will see the pages change.
Now my issue is that on my page where I implemented this is not working at all my example page
On the console clicking on the span I have the following error:
Uncaught TypeError: $(...).stop is not a function
I cannot resolve this issue as on JSFiddle it is working so I cannot see why is not on my page.
I agree with Taplar, if you want to slim version here i changed some modifications
$(function(){
$(".menu .sb-item span").on("click", function(e) {
e.preventDefault();
var page = $(this).data("page");
$(".main").find('#'+page).fadeIn("slow").siblings().fadeOut("fast");
});
})
I have a module that was built using a Handlebars.js template, I orignally had it opening and closing perfectly, but the information wasn't updated, this can be seen here.
Now I have it so it updates the info, but the toggleClass won't fire when clicking either the 'x' or .overlay. This can be seen here.
Here is my jQuery functions to activate the modal.
$(document).on('click', "a.btn", function (e) {
$(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.overlay', function (e) {
$(e.target).prev('.modal').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal').toggleClass('modal--show');
});
How can I make it so this modal will both Open and Close, as well as display the correct information?
Some things I've tried...
replacing: $(e.target) with $(this)
The problem with your code is that you are trying to toggle class of all .modal divs. But you need to toggle the class of only .modal.modal--show.
Also in case of overlay, you need to find the parent div not the sibling div. So use .closest() in place of .prev()
So if you modify your code as
$(document).on('click', '.overlay', function (e) {
$(e.target).closest('.modal.modal--show').toggleClass('modal--show');
});
$(document).on('click', '.modal__close', function () {
$('.modal.modal--show').toggleClass('modal--show');
});
I am not very familiar with the JQuery Address plugin, but i came up with this code, and its working great, except in this situation: When i click on the "nav a", the url is changed and the content is also changed, but when i am reload the page, the plugin is not triggered by default.
$("#player aside nav a").address(function(event, hash) {
var rel = $(this).attr('rel');
$('.ajax_container').hide().removeClass('current');
$('#player aside nav a').removeClass('active');
$('#'+rel).show().addClass('current');
$(this).addClass('active');
return $(this).attr('href').replace(/^#/, '');
});
Any idea, how can i trigger this function on page load?
I think you need to look at $.address.externalChange(fn). When I click the back this event will fire and I believe it gives you the hash value.
You could just trigger the click event of that link. Put it in a "dom ready" function:
$(function() {
$("#player aside nav a").click();
});
I have this jquery code that dynamically loads an html page into a div when a user clicks on a link in a list.
Is there a way to disable one of the links if the user is already viewing the page it links to? Right now the loading animation is triggered every time the link is clicked even if the requested link is already showing.
I need the event to not trigger if the page it calls and loads is already displayed.
$('#navigation a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("slide",{direction:"up"},1000,loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show("slide",{direction:"down"},1000);
}
return false;
});
You can add a custom class which will disable your clicked link. Like:
$('#navigation a').click(function(){
......
$(this).addClass('disabled');
....
}
But you would obivously need to somehow remove that class from other previously added links (so you won't disable whole menu after few clicks. So you could make some reset like:
$('#navigation a').click(function(){
......
$('#navigation a').removeClass('disabled');
$(this).addClass('disabled');
....
}
This is just a simple logic. I believe it can be optimized or written in different way.
Edit: Css class probably won't make it in this case. I am not sure, if you can use disable() on anchor tag. Or you can just execute different logic like using preventDefault on this link, but then you still need to keep track of disabled elements this way so you can enable them once another one is clicked.
Can't find a simple solution to this, I know it's easy and I've tried a few things but I can't quite get it to work. I'm currently working with a sidescrolling site and I want every time you click an image (contained in an li) it scrolls to the next li. I have jQuery plugin localscroll so it smoothly goes from one to the next, and that's working. I need to now write a code that triggers jQuery to utilize the localscroll function and go to the next li. Right now I have this, but I know it's not right:
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(this).next(li).localScroll();
});
});
Accoding to the ScrollTo examples, you need to do this:
$(container).scrollTo(element);
e.g.
$(document).ready(function () {
$('.wrapper ul li').click(function() {
$(window).scrollTo($(this).next('li'));
});
});
After reading the documentation for this here, I figured out the correct of way of using it. Let us say, you the .wrapper element as the one overflowing or in which you want to scroll. You can do the following.
$(document).ready(function () {
var gallery = $('.wrapper ul li')
$(gallery).click(function() {
$('.wrapper').localScroll({
target:$(this).next('li')
});
});
});