I've created a dynamic page that, depending on the view type, will sometimes utilize the anchor tags and other times not. Essentially, I want to be able to control if on click the page jumps to the anchor. Is it possible to hide anchor tags using jQUery, so they are essentially removed? I need to be able to re-enable the anchors when necessary, and always show the current anchor in the browser's address bar. It seems to work in FireFox, but not in Internet Explorer.
I have three sections: the 'table of contents', the content, and the javascript (jQuery) code
Table of Contents
<a id="expandLink0" class="expandLinksList" href="#green">What is green purchasing</a><br>
<a id="expandLink1" class="expandLinksList" href="#before">Before you buy</a><br>
Contents
<ul id="makeIntoSlideshowUL">'
<li id="slideNumber0" class="slideShowSlide">
<a name="green"></a>
<div>Green Purchasing refers to the procurement of products and service...Back to Top</div>
</li>
<li id="slideNumber1" class="slideShowSlide">
<a name="before"></a>
<div>We easily accomplish the first four bullet points under...Back to Top</div>
</li>
</ul>
jQuery On Page Load
$(".slideShowSlide").each(function() {
$(this).children(":first-child").hide();
});
jQuery to re-enable links
$(".slideShowSlide").each(function() {
$(this).children(":first-child").show();
});
I've also tried prepending an extra character to all anchor names to 'disable' them, but IE won't change the names using attr("name"). The only real manipulation it's letting me do is remove().
Try doing it this way:
$(".slideShowSlide").each(function() {
$(this).children().first().hide();
});
Or even this way:
$(".slideShowSlide").each(function() {
$(this).children(':first').hide();
});
Related
I am working on a HTML website. In Website menus are working properly on desktop screen. But In mobile version Parent menus are opening properly as a dropdown. but when I trying to open sub menus it is not opening. If I click on icon , it is redirecting to a page which is linked to parent menu.
I just want to open sub menu dropdown when I click on a icon. But Parent menu link should be there.
I am very new to javascript. Please help me to solve my problem.
Here is my html code
<nav class="navigation">
<ul>
<li> HOME
</li>
<li> <span>WHO WE ARE </span>
<i class="ion-ios-plus-empty visible-xs"></i>
<ul class="sub-nav">
<li>
Vision
</li>
</ul>
</li>
</ul>
</nav>
and hrere is my js
$('.sub-menu >a').on('click', function() {
if ($(window).width() <= 767) {
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
}
});
please help
Your code is very messy, so first I'll answer the question generally: If you want an event to occur when clicking a link without the link actually opening, you must stop the event from firing. There are 3 ways to do that (I included a link in the bottom of my answer regarding which does what), here I chose e.preventDefault():
document.getElementById("myspeciallink").addEventListener("click", function(e) {
alert("A different action!");
e.preventDefault(); //return false / stopPropagation could've also worked here
});
I'm a link!
Regarding your code:
You're trying to bind an event to sub-menu, which doesn't exist in your code.
The sub-menu > a selector only applies to direct children, so for your selector and the following example code only example B would apply to the selector. Perhaps sub-menu a would be better suited here:
$(".sub-menu > a").click(() => alert("Clicked"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
<li>
Example A
</li>
</ul>
<br/>
<ul class="sub-menu">
Example B (Which is what you did but not what you want)
</ul>
Animations based on screen size (a.k.a Responsive Web Design) shouldn't be done like this unless you don't have a choice, and you do. It is preferred you use CSS to achieve what you're trying to accomplish with transistions. I recommend reading more on this subject.
I highly recommend learning CSS, JS and HTML better in order to have a better understanding of what's going on and of good & bad practices.
See also:
What's the difference between event.stopPropagation and event.preventDefault?
Couple of things here.
First of all you apply jQuery code for element $('.sub-menu >a') which means that it will applay to all a elements which are direct children of .sub-menu element.
But you don't have element wih class .sub-menu. You should add it to direct parent of an a element to which it should be applied.
Secondly, if you don't want the a tag to redirect you, then you shiuld add event.preventDeault() where event is an event variable which you can get in .on() function like this $('.sub-menu >a').on('click', function(event) {...
Lastly, this code
$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
$(this).parent('li').addClass('on');
$(this).next().next('ul').slideDown('normal');
}
works that way that firstly it hides all dropdowns and then opens teh one you clicked. If it is desired behavior, then ignore this. But I don't think it is.
Why? Because right now when you click on visible dropdown a tag (the one that opens it) you would expect the dropdown to hide. And in your case it will hide and show again. But if you want it to work that way, then no problem. The code is correct.
I have a problem with pages scrolling down when clicking on my links. I'm pretty sure it's because the browser thinks the link is supposed to be an anchor to a certain area on the page.
I'm using this jquery code to hide the main div and show the div corresponding to the link clicked. The main info div and main info2 divs are the same in css. The only thing different is the text inside.
$(document).ready(function(){
$("#home").click(function(){
$("#main_info2").hide();
$("#main_info").show();
});
$("#info").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#gyms").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#contact").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
});
Here is my navigation list:
<ul>
<li><img src="main home page/purhome.jpg"></li>
<li><img src="main home page/purinfo.jpg"></li>
<li><img src="main home page/purgyms.jpg"></li>
<li><img src="main home page/purcontact.jpg"></li>
When I click on the info link for example the home div hides and the info div is shown, but the page scrolls down due to the href="#info". If I change it to href="#" it works fine without scroll, however, the browser url does not reflect the div that is showing if only using the "#".
For example, I want the browser to show http://google/index.php#info and not just http://google/index.php#.
Any ideas?
Here's your problem:
In this line:
<img src="main home page/purhome.jpg">
You are setting up a link which indeed scrolls to a certain area on the page, in this case to itself.
href="#home" means: when clicked on this link make the element with the id of home visible.
The actual link which is clicked, has the id of home.
So it ensures that whatever is inside itself is visible, browsers usually scroll down the page to the specific element with the specified id. This explains the behaviour.
In your case you can just get rid of the href attribute on the links, that should fix it.
Edit
The easiest way for you to get the desired behaviour is to just change your id's to something like this:
HTML
<ul>
<li><img src="main home page/purhome.jpg"></li>
...
</ul>
JavaScript
$("#home-link").click(function() {
$("#main_info2").hide();
$("#main_info").show();
});
...
And you could even change the id of main_info to home to ensure main_info (or home then) is visible after clicking the link, if that is the kind of behaviour you are after.
Edit 2 - reading the hash solution
HTML
<ul>
<li><img src="main home page/purhome.jpg"></li>
...
</ul>
<div id="home">This is the tab content for the "home" tab.</div>
No id needed on the link, but set one on the <div> or on whatever element you use to create your tab content. Now the href attribute on the link will ensure the right thing happens in combination with the JavaScript below which catches the click and shows the right tab based on the hash value .
JavaScript
$("a").click(function() {
// Hide all tab content elements.
$('some-selector-which-selects-all-tab-content-elements').hide();
// Show only the tab content element with an id equal to the hash value.
$(window.location.hash).show();
});
Since you're assigning click event handlers to the a tags there's no need to use the 'href' attributes in your code:
<a id="home">
I have the following menu items:
<ul>
<li class="static">
<a class="static menu-item" href="/mySites/AboutUs">About Us</a>
</li>
<li class="static">
<a class="static-menu-item" href="/mySite/Practices">Practices</a>
</li>
<li class="static">
<a class="static-meunu-item" href="/mySite/Sectors">Sectors</a>
</li>
</ul>
I cannot add specific background images to the menu items as they all have the same class. In order to achieve this it will be ideal if specific classes could be added for example:
<ul>
<li class="static">
<a class="static menu-item about-us" href="/mySites/AboutUs">About Us</a>
</li>
<li class="static">
<a class="static-menu-item practices" href="/mySite/Practices">Practices</a>
</li>
<li class="static">
<a class="static-meunu-item sectors" href="/mySite/Sectors">Sectors</a>
</li>
</ul>
In the above example highlighted in red are the classes that have been added. This will then allow me to add the specific background images to each menu item.
How can I achieve this using the .addClass() method in jQuery?
In this case, adding specific classes is overkill. I would simply use an href selector since that seems to be what you're basing your classes off of:
// *= indicates contains
$('a[href*="AboutUs"]').addClass("about-us");
$('a[href*="Practices"]').addClass("practices");
$('a[href*="Sectors"]').addClass("sectors");
If there are other anchors on the page with the same href's that you don't want to include, simply use the parent > child selector:
// *= indicates contains
$('.static > a[href*="AboutUs"]').addClass("about-us");
$('.static > a[href*="Practices"]').addClass("practices");
$('.static > a[href*="Sectors"]').addClass("sectors");
Here is a working jsFiddle to illustrate the solution.
You should be able to add a class by passing a callback function to the addClass function -
$("a").addClass(function() {
var newclassname = $(this).text().toLowerCase();
return newclassname.replace(/ /g,'-');
})
Demo - http://jsfiddle.net/aZEZN/
I personally find it overkill to do such things with Javascript.
Makes more sense doing it server side as it's been mentioned above.
Or...
CSS! You could use CSS3 pseudo classes to do this.
I have created an example here
To make this work in older browsers such as IE7, make sure you add Selectivizr to your head section
define your class like this;
.highlight { background:yellow; }
.highlight2 { background:yellow; }
.highlight3 { background:yellow; }
then add your class like this;
$(".about-us").addClass("highlight");
$(".practices").addClass("highlight2");
$(".sector").addClass("highlight3");
It's not necessarily overkill specifying individual classes for each list item. A class should be used (as opposed to an ID) when there is even a possibility to group multiple elements together (for scripting, styling). In your case, as this is a navigation menu, you might have multiple menus (such as a left-side pane side bar, a footer menu aswell). From my experience, I would specify each menu button as its own class in order to handle the group of links together (ie all links that directs the user to the About us page).
The most obvious benefit of this is that you will be able to handle the active links as a group vs. individually; just as you would have a hover color on these links, you might as well want the link to be bold when the user is on that specific page. Grouping the links together and handling this as a class would allow you to bold all the links if you have multiple menus.
To add to this, erimerturk had a good idea of specifying highlights or 'themes' within your styles. This is a good practice (although not for your case) when you want to specify a certain color scheme for your site. Specify your color, background color and highlights as classes and tag these classes to the required elements within your html directly. This is a huge boost for maintainability and scalability, so although I wouldn't say as far as saying it's good practice, it's certainly not bad practice as far as I'm concerned.
Overkill or not, sometimes we may just want to test out ideas quickly on the browser, or you might be working on nodejs. I have edited the link classes to static-menu-item.
var links = $("body").find("a.static-menu-item");
$.each(links, function(value) {
var items = $(this).attr('href').split("/");
$(this).addClass(items[items.length-1].toLowerCase() );
});
Working example
I have a set of DIVs, which I am displaying via Colorbox.
It works fine as below
$(".my_group").colorbox({rel:'my_group', inline:true, href:$(this).attr('href')});
Now I want to kick off colorbox as soon as the page is open, so I tried
$.fn.colorbox({rel:'my_group', inline:true, href:$('.my_group').attr('href')});
Which doesn't work. I also tried
$.fn.colorbox({rel:'my_group', inline:true, href:'#box1'});
Where #box1 is the first div of the group. However, it actually ADDS box1 as another inline slide in the group.
So what's the best way to start the group transition colorbox automatically?
To open colorbox automatically (on page load), just add open:true to your settings. Also, the grouping with the 'rel' doesn't necessarily need to be in the options. If you leave it out, it will allow you to put all your colorbox groups in one call. Also, if your target elements already have an href attribute, you don't need to put that in the options (colorbox looks for this attribute automatically, even on divs and whatnot). So, your colorbox call could look like this:
$(".cbox").colorbox({inline:true, open:true});
And then this html:
<a class="cbox" href="#C" rel="my_2group">C</a>
<a class="cbox" href="#D" rel="my_2group">D</a>
<a class="cbox" href="#A" rel="my_group">A</a>
<a class="cbox" href="#B" rel="my_group">B</a>
Will give you 2 seperate colorboxes each with 2 images, and the first group will open when the page is loaded.
Note that combining them all in one colorbox call only works when you can ensure that the group you want to open is the highest up in the dom (which is usually not a problem, as inline content is usually hidden). If that's not the case, then you will have to split it into a couple calls.
I have two html pages, when you click on something on the first html, it will go to the second one. What I want to do is to show text according to what you clicked on the first html. different texts are wrapped with different ids. Here's how I wrote:
I'm expecting to see two.html load the text with id "one", but it doesn't work, does anyone know what I did wrong?
Here's the code on second page:
<ul id="menu" class="aaa">
<li><a id="one" href="#">one</a></li>
<li><a id="two" href="#">two</a></li>
<li><a id="three" href="#">three</a></li>
</ul>
And I have a JS file to modify each id:
$("one").observe('click', function() {
$('Pic').writeAttribute('src',"picone.jpg");
$('Bio').update("texthere!");
});
Same for two and three.
Right now if I click on a button on the first page, it will always show
the text and pic for "one", no matter which button I click.
But I want to see the pic and text for "two" if i click on it.
What you want to do is simulate a click on your anchor when the page loads. Since you're using jQuery, the simplest approach (but far form best) would be the following:
$(window).observe('domready', function () {
$(location.hash).click();
});
attach ondomready-event to window. Fetch element with id=one (with jQuery this would be '#one', same as your location.hash would be, very handy in this case), trigger a click on it.
You might need to replace $(location.hash).click(); with $(location.hash).get(0).click() since jQuery tend to return arrays of jQuery-objects.
But a better solution in your case would be to have an event-handler that you can trigger manually, thus circumvent the need of firing events, aswell as drop the anchors and put onclick directly on your li's.
And furthermore, why do you load a second page when all you seem to want to do is to show/hide content dynamically? Do it on the same page...
the #blastuffbla is not an ID but the location hash.
You can acces it by using:
self.document.location.hash
which would return #hash, if you would only want hash you would use:
self.document.location.hash.substring(1)
Hope this helps
tags do not have id's but names to handle the anchors in Urls, you will still need the ID to manage them in JS though.
So your list should be:
<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>
Your javascript seemed correct though.
When you say "different ids" how are you setting up your anchors on the 2nd page? The anchor on the 2nd page should look like this:
<a name='one'></a>
Put this right above the text that you want to mark on the 2nd page.
Do you want to scroll the page to the positon of the id "one"? Maybe the content of the page is too small that you cant scroll there. I mean sometimes the browser cant move the element marked with the id to the top of the canvas and looks like it doenst scrolled there. Try to include enough space after the element to make it scrollable to the top of the browser.
Hope that helps.