I have been satisfactorily using a submit button like this
for some time. The class defines the position of the button and it's appearance.
Now I have added a Jquery script to the page, and the button no longer works. The script is
$(document).ready(function() {
$("#tabcontent > div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#tabcontent div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
});
$('#prices').load('../prices.php?hid=<?php echo $hid;?>');
});
Presumably it is something to do with having "javascript:void()" in the href, but I can't see why. Is there an alternative way of writing the href to get both things working together?
PARTIAL SOLUTION
The problem was not really what I thought it was. In the end I found that the parent page and the page being loaded by Jquery both contained a with the same name. Re-naming one of the forms solved that part of the problem.
However now that that is out of the way I am finding another issue that appears to be a conflict between two bits of Jquery. I've asked another question about that at Jquery - Scripts are conflicting
Change the function as below. Add the submit in last line of the function like I shown
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
$(this).submit() **// ADD HERE**
});
$('#tabs a').click is your problem. You are overwriting the click event for the <a> tag with this code.
You can update the jQuery code to this:
$('#tabs a:not(.buttonavail)').click
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");
});
})
Creating tabs in jQuery. When you click another tab, all the tabs disappear. Can't figure out the fix
Here's the page not working: http://www.sleepfullnights.com/products/sfn-537
Here's the JSFiddle another guy made of it working: http://jsfiddle.net/gravitybox/7pHg4/ I've copied and pasted every element of this into the page and the issue is still there.
One person pointed out that something is giving the tabs the css "display:none" when clicked and I can't find where to fix it.
Also, another observation someone made was that "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');" when you click a tab".
Here's the jQuery code I have:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
And the code from the working JSFiddle:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
alert('yep');
});
});
});
Any help/guidance is greatly appreciated.
I'm the one who noted "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');"
It breaks there because that line is what is hiding the ul containing the tabs.
Looking at your website's code, you need to change the following inside app.js on Line 39.
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
to this:
$(contentLocation).show().addClass('active').siblings('div').hide().removeClass('active');
You only want to target the div siblings of the selected tab's content div. Right now, the ul is also a sibling of the selected div. Without the 'div', siblings() will select all of its siblings and hide() them (thus hiding the tabs too).
Preferably, I would add a tab-content class to the tab content div elements and use siblings('.tab-content') instead of siblings('div') to be more specific. That way if you add another div that happens to be a sibling, it won't hide that.
What's Going On
The code used for those tabs is much more complicated than you need, and I'm not really sure what is breaking. Rather than try to fix it, it would be easier to just start over. This is what you want:
Every time a user clicks on a tab, all tabs have the active class removed, and all content is hidden. Then, the active clicked on tab is given the active class and it's content is shown. This should seem instantaneous to the user. You will need to add a class to your content divs to accomplish this easily. I'd add tab-content.
Code
Working Fiddle
HTML (Only change is adding the class)
<div class="tab-content" id="tab-1">
...Content...
</div>
<div class="tab-content" id="tab-2">
...Content...
</div>
<div class="tab-content" id="tab-3">
...Content...
</div>
Javascript:
$(document).ready(function() {
$('.tabs li a').click(function(event){
event.preventDefault();
$('.tabs li a').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
$($(this).attr('href')).show();
});
});
It's definitely a problem with the ul getting display: none. You could try overriding it in the click handler with $('ul.tabs').css('display','block'). It's hard to tell where the issues is coming from because of the amount of scripts on your page.
I have some JQuery code that filters out a list of links on the page. At present the filtering is fired when a link wih a blind href is clicked. The id of the link is taken to determine which content remains visible on the page. EG:
<script type="text/javascript">
$(document).ready(function () {
//when a link in the filters div is clicked...
$('#filters a').click(function (e) {
//prevent the default behaviour of the link
e.preventDefault();
//get the id of the clicked link(which is equal to classes of our content
var filter = $(this).attr('id');
//show all the list items(this is needed to get the hidden ones shown)
$('#content ul li').show();
/*using the :not attribute and the filter class in it we are selecting
only the list items that don't have that class and hide them '*/
$('#content ul li:not(.' + filter + ')').hide();
});
});
I need to changed this so that, the JQuery is activated when an option is changed in a DropDownList/SELECT. However, I cant quite get my head around how to change this JScript to detect the selection in the DDL rather than a hyperlink.
Any help would be greatly appreciated.
Thanks.
Use the change() event
$("#idOfDropDown").change(function() {
//code here
var filter = this.value //gets the value of the selected dropdown item.
});
This will fire each time a dropdown selection has been made.
My webpage is at http://www.sarahjanetrading.com/js/resume
All the HTML, CSS and jQuery code + images are available there for anyone to access.
My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).
And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.
You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.
You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.
Try changing the function:
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
to the following:
$("ul.tabs li a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
$(".active-tab").removeClass();
$(this).parent().addClass("active-tab");
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
This should work and you should be able to remove your other javascript function.
If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:
jQuery UI - Tabs Demo
If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.
Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor, when you want to assign it to the li.
$(this).addClass("active");
should be rewritten to modify the li. Personally, I would wrap the li in the anchor link:
<li></li>
This will probably require modifying your JS code a little, but will give a uniform result.
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.