Change pages dynamically on click in the same view - javascript

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

Related

Link in jquery div stop working

when i click on gallery, and visit for example "paintings", the links on the menu stops working, why is this? can someone please tell me whats wrong -_-
http://madebysam.se/elbarco
This is the code im using
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
$('ul li').on('click',function(event) { event.stopPropagation(); })
});
});
Using dev tools and a breakpoint inside your example code snippet on your live site, I see that only the links loaded initially trigger your event handling code.
The problem is here:
$('a').on('click',function(){
// do stuff
});
The common pitfall is that you register this handler against all anchor tags that are loaded in the page at that moment. Any anchor tags dynamically added later will not enjoy that same event handler.
A workaround is to use a different syntax, targeting first a larger tag that is guaranteed to be there on first load, and then filter down to the anchor tags:
$('body').on('click', 'a', function(){
// do stuff
});

Active link not changing color

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.

jquery slideToggle with siblings not working

I would like to hide one div and show other div.
While hiding and showing other div, it should look like a slide, which can be achieved using slideToggle() in jQuery.
Please suggest the necessary changes in my javascript to make div appear as a slide when clicked on 1 or 2 to show corresponding div in the table. Please find the complete example in this fiddle.
When user clicks on 1 divOne12 should be shown and when user clicks 2 divTwo12 should appear and previous div should be hidden. How can i apply slideToggle() in the below javascript function.
Thanks.
Below is the javascript:
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).show().siblings('div').hide();
});
});
Example: http://jsfiddle.net/0p7djjnc/9/
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).slideDown(500).siblings('div').slideUp(500);
});
});
Is this what you're referring to?

How to load the current content with jQuery Address plugin on page load?

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

jQuery disable link if already on page

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.

Categories

Resources