I am pretty new in JQuery and I have a question about addClass(). I spent some time to try to get this working, but seems like I did something wrong. I created a top menu with HTML and bootstrap. I assume visitors will land on my index.php first, so I created the class="active" for my index.php. Then if they click on any other link on the top menu (ex. About Us), then the class="active" will add to the and remove the class="active" from the "li" tab for index.php.
Below is my HTML code:
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li id="home" class="active"> Home</li>
<li id="about"> About Us</li>
<li id="browse"> Browse</li>
<li id="contact"> Contact</li>
</ul>
</div>
And below is the JQuery code that I use and try to get this done.
$(function (){
var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});
});
I tested it out on my local server. I could see the tab in my top menu turned to grey after I clicked it, but it didn't stay. So I am sure I did something wrong, but not sure where. I am really new in JQuery, so I hope I can learn from you guys. thank you!
When the link is clicked on, it takes the browser to a whole new page which starts a whole new javascript environment and nothing you've done to the current page carries over to the newly loaded page.
Thus the active class may be changed on the current page, but then a whole new page loads which inherits nothing from the first page (e.g. it's starts over from scratch). Your code from the first page is no longer in play once the new page is loaded.
You need to either just code the active class into each separate page (since each page knows what page it is) or have one common set of JS that sets the active class when the page loads based on the URL so it is intialized properly when the page loads.
Also, you probably don't need an inactive class. The default CSS state can represent the inactive look and the active class can apply a CSS override to show the active state.
This is not working, because when someone clicks on another link, they are redirected to a different page. However, your header doesn't really know which link was clicked on nor which page it is on. You need to let your header know which page you are. Does this make sense?
The other answers are correct, when you click on the tag you are opening a new page and therefore losing your javascript environment.
If you want to have a single page app, you can use preventDefault to stop the browser from following the link.
sidebar.delegate("li", "click", function(e){
e.preventDefault();
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});
Related
I have a homepage that has its main menu.
One of the Menu items called "Contacts" uses Jquery to activate the Smooth Scroll to the "Our Contacts" block located below on that same Homepage.
"Contacts" menu item has its a href="#contact-js" that links it to "Our Contacts" block.
" Our Contacts" block has its assigned id="contact-js"
That smooth scroll work perfectly well!!
My problem is that when I leave the Home Page and open another page or post on my website I see the same menu displayed in the header section of my website.
When I press that "Contacts" menu item nothing happens because it is used to run that smooth scroll action on the Home Page.
My Question is how to assign this "Contact" menu item (it has a class="menu-item-28") a different URL pointing to my Contact Page when the visitor is located on a page or on a post (not on the home page)?
That's what I was struggling to compile:
$("#menu-item-27 a").on("click", function(event) {
if(location.href != "http://www.mynewmedia.dev") {
window.location.href = "http://www.mynewmedia.dev/Contacts-Page/";
}
});
Thanks is advance!!!
Best Regards,
Alexander
Maybe try this if you really want to take them to a full contact page instead of have them go back to the homepage contact section. If you want to take them back to the homepage section follow the advice from "I wrestled a bear once".
<script type="test/javascript">
jQuery(document).ready(function() {
if (!jQuery('body').hasClass('page-id-XX')) {
jQuery('.menu-item-28 a').attr('href', 'http://www.mynewmedia.dev/Contacts-Page/');
}
});
</script>
You'd need to update page-id-XX to use the actual homepage body class that your homepage has if this is indeed WordPress. I hate to speculate, but I believe it is based on your menu item class.
If its not WordPress, this will still work if you add a class to the <body> tag that is only present on the homepage, and then add that class name to if (!jQuery('body').hasClass('classNameHere')) {.
You just need tom change it to the full url of whatever page has the contact info and then add the #contact-js behind it.
<a href='http://www.pageWithContactInfo.com/#contact-js'>contact us</a>
Have a look at this w3c link:
https://www.w3.org/TR/html4/intro/intro.html#fragment-uri
Note the "#fragment-uri" which will scroll to the element on that page with id='fragment-uri'.
Click on that link for more info.
Requirements:
When I clicked first time on menu item which has dropdown menu, It should show its dropdown and when I clicked on the same menu item second time it will redirect to its own page.
Please consider the situation. Menu item redirect to its own page only when its dropdown are opens
Reference Images:
Reference website link:
Reference website link
Note for referaence website:
1) Please open reference website link on mobile view.
2) Click on about page than Dental Page and than again About page , When you second time clicked on about page It goes to its own page. But on this occasion I want to open its dropdown and again If I clicked About page than it goes to its own page
Currently I am using jQuery bind function and disable link through event.preventDefault() but i didn't resolve my problem
Here's my code
jQuery Code:
$(document).ready(function(){
$(".flexnav li.parent-menu-item > a").bind("click.myclick", function(event) {
event.preventDefault();
$(".flexnav li .sub-menu").hide();
$(this).unbind(".myclick");
$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu").toggle();
});
});
Sorry for my language mistakesThanks!
Instead of handling the click event inside the $(document).ready function, you should try doing it inline with each li.
<li id="link1" onclick="ShowMenu('#menu1', 'index.html')">
<ul class="dropdown" id="menu1">
...
</ul>
</li>
<li id="link2" onclick="ShowMenu('#menu2', 'aboutus.html')">
<ul class="dropdown" id="menu2">
...
</ul>
</li>
<script>
function ShowMenu(menuId, linkRef){
var display = $(menuID).css('display');
if(display == 'block')
window.location.href = linkRef;
else{
$('dropdwon').hide();
$(menuId).show();
}
}
</script>
So, here, what I am doing is to call the ShowMenu() function with the id of the menu I want to show, as the parameter and the url of the page linked to it.
The function then checks if that menu is being displayed or not. If being displayed then it redirects the user to the url. If not, then it proceeds to hide all other dropdowns and shows only the one that was clicked.
You can use CSS class toggle to see if the dropdown is open or not and perform the action accordingly. (Assuming your current code is working fine to open dropdown)
$("body").on("click",".flexnav li.parent-menu-item > a",function(e){
var dropdowns=$(this).parent('li').children(".sub-menu");
var menu=$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu");
if(dropdowns.size()>0) {
if(!menu.hasClass('open')) {
e.preventDefault();
menu.addClass('open');
menu.show();
}
}
});
I have the following jQuery code:
$(function() {
var linkSet = $('#link1').add('#link2');
linkSet.click(function() {
linkSet.toggle();
if ($(this).attr('id')=='link1'){
$('#frame').attr('src', 'www.google.com');
} else if ($(this).attr('id')=='link2'){
$('#frame').attr('src', 'www.yahoo.com');
}
});
});
On pageload, the link with id link1 is shown while link2 is hidden. When the user click the link1, it will the link1 then show the link2 then vice versa. While toggle takes place, it also changes the source of an iframe which is named frame.
My problem here is when I hit back button, the content of the frame will go back to its previous content BUT the link are not changing. What did I missed here? Thanks in advance!
Note: The links are on a webpage, then inside that webpage is an iframe.
EDIT:
<div id="header">
<ul>
<li><a id="link1" href=#">Link1</a>
<li><a id="link2" href=#">Link2</a>
</ul>
</div>
<div id="iframe">
<iframe id="frame" src="www.google.com"></iframe>
</div>
You mean when pressing the browser's back button right.
If so:
The issue is you need to have an event to trigger when the history changes, as that is the only easy way to respond to changes in history (such as when clicking the back button). Since the iframe url is indeed changing, it is therefore also affected by the back button naturally.
To get other non history based logic to work when pressing the back button and such...
There are two ways to do this. The new one is by using the history API, while the other more supported, and simpler way is by adding a hash to the url.
WHAT DOES THIS MEAN?
When you click the button you change the url with a hash. Like the url can become
'http://domain.com/blah/#myHash'
Then instead of doing your logic in the click, you do it when the hash changes. So this way as the user clicks back and/or forward the logic always runs fully.
I wrote an entire article about this technique a few months ago at http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
I have a Spry Tabbed Panel in Dreamweaver and the first tab is open when the page is loading. I don't want to have any tab opened when the page is loaded.
How can i do this?
Thanks!
That's my html:
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab play" tabindex="0"><h4>Play! Framework</h4></li>
<li class="TabbedPanelsTab ruby" tabindex="1"><h4>Ruby on Rails</h4></li>
<li class="TabbedPanelsTab api" tabindex="2"><h4>Restful Api</h4></li>
</ul>
This could be the clumsiest workaround available but at least it's easy to do. Locate your SpryTabbedPanels.js file and see what the first function looks like. If you have somewhere a line this.defaultTab = 0; comment it and see what happens. It should make the panels invisible.
You might also want to get rid of javaScript error so find a line that contains panels[tpIndex].style.display = "block"; and replace it with:
if(panels[tpIndex]){
panels[tpIndex].style.display = "block";
}
Actually you need to do also the second correction if you have more than one panel groups on the page. Otherwise only the first panel group is hidden.
This should work. At least it works for me for Spry made with DW CS3. But it looks ugly IMHO. No transitions/animations. But at least no panels are visible when the page is loaded for the first time. The tabs, of course, are visible.
$('ul > li').removeClass('selected');
SpryCollapsiblePanel.js
Top section:
this.contentIsOpen = false;
(replace true by false)
Dreamweaver CS6
I guess my problem needs more explanation. I am trying to get my drop down menu to function correctly on the ipad. I have top level menu items and sub menu items. When I tap the top level, the sub menu drops down, which is correct. Then when I tap one off the sub menu items, my html page loads inside my index.html (#!affordable-holidays.html). The problem is that the sub level drop down does not disappear when the html loads dynamically. So once I have tapped a parent item, the sub menu is there forever.
I thought that having some javascript at the top of the dynamically loaded html to hide the ul would work.
I am not sure of the correct terminology of how the page loads as this was a purchased template. For an example, mysite.com would be the index, and then when I go to another page it is mysite.com#!second-page.html
How would I hide a ul in a menu when the page loads?
This is my html
<li>Tester
<ul class="menu-hide">
<li ><span class="title">PAY AS YOU GO</span></li>
<li ><span class="title">AFFORDABLE HOLIDAYS ALWAYS</span></li>
<li ><span class="title">HOW POINTS WORK</span></li>
<li ><span class="title">MORE THAN A ROOM</span></li>
</ul>
</li>
This is the javascript I have found that is close to what I want:
<script type="text/javascript">$("div.menu-hide").hide()</script>
But I can't seem to target ul.menu-hide. I have tried this
<script type="text/javascript">$("ul.menu-hide").hide()</script>
You appear to be missing your document.ready call
<script type="text/javascript">$(document).ready(function(){$("ul.menu-hide").hide()});</script>
also ensure that the link to your jQuery library is declared before your other javascript
http://api.jquery.com/ready/
try this
<script type="text/javascript">
$(window).load(function () {
$("div.menu-hide").hide()
})
</script>
you can also use the
$(window).ready(function () {
$("div.menu-hide").hide()
})
but the difference is that The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet.
The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images.
Good Read
$(document).ready vs. $(window).load
Hiding an HTML element on page load via JavaScript will result in the element producing a flickering effect when it is displayed and then hidden.
I would hide the element with your css file, and then show via JavaScript.
css code:
.menu-hide{ display: none; }
jQuery show code:
$(function(){
$('.menu-hide').show();
});