I've created CSS sprite menu based on this tutorial:
http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Now I'd like to assign .selected class to the 'a' which was clicked as last one. I've added sipmle script:
<script>
$("a").click(function(){
$(this).addClass("selected");
});
</script>
but the class .selected appears only during loading the page. After loading whole page menu item returns to its normal state. Could you help me with this issue? TIA
Have a nice day:)
Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:
<script>
$(function(){ //short form of $(document).ready(function(){
$("a").each(function(){
path=window.location;
path=String(path).split('/')['3']; //if you use absolute URLs then disable this line
if($(this).attr('href')==path)
{
$(this).addClass("selected");
}
});
});
</script>
It will add class selected to link(s) if it's href matches the current URL of the browser.
I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)
First off, your body tags should have classes assigned to them.
<body class="products">
for example.
Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.
<li class="products">Products</li>
for example.
Now, in your CSS, simply do this:
body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }
These CSS rules will then only be "used" when the visitor is on the "selected" page.
This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.
Related
I'm using jQuery v1.8.3 and jQuery UI v1.9.2.
On a click of a button I wish a menu (via a ul) to hide if it's open, or show if it's closed, so I chose to use the toggle function in it's most basic form, on click, toggle(). Simple as that, e.g.
button.click =>
autocomplete = input_field.data("ui-autocomplete")
menu = autocomplete.menu
ul = menu.element
ul.toggle()
(it's coffeescript, but you get the gist)
What actually happens is that when the ul is displayed at first (not via the button) it has display property set the display property set to display: block.
Then, on first click of the button if I check within the click function what the current status of the display property is via:
console.log "display = #{ul.css('display')}"
ul.toggle()
console.log "display = #{ul.css('display')}"
the output is:
display = none
display = block
So for some reason the property is being incorrectly picked up initially.
it adds the display property as display: block and then on the next click sets display: none.
I'm not in control of the ul directly as it is rendered by the autocomplete widget and I'm not keen on having to fiddle about with that.
Is this expected behaviour, and what is the best way to work around this? I'm thinking of passing a function to click that checks if there is a display attr set and then show or hide dependent on that, but if there's an easier way or better function, maybe a newer version of toggle, then please let me know. The jQuery docs are, in my view, some of the worst of any tech project so I consider it quite likely that I'm using the wrong function entirely.
Any help is much appreciated.
Set the display attribute on page load. Something like
$(function(){
$("ul").hide();
});
once the autocomplete is rendered.
This will set display:none use .show() to make it display:block
toggle should work even if your element doesn't have a display property explicitly set. See this jsfiddle for an example. One thing to check is that you're doing the click handler in $(function() { ... });
You are saying that you see the li when the page first loads, if that is expected behavior then great - it shouldn't matter either way. I created this JS fiddle http://jsfiddle.net/r0k3t/Rcpet/ Go there and try it, whether the CSS sets the display property to block or none when you first load the page the toggle works just fine. If you had posted more code it would be easier to see what you want to accomplish but it's hard to know where the issue is just from your description, you could have a simple syntax error but we can't see that. Anyway - here is the same code that is on JS fiddle.
Toggle li element
<ul>
<li>You can see me now</li>
</ul>
//Here is the JS wired up in document load
function toggleLi() {
$("ul li").toggle();
}
$("#toggleButton").click(toggleLi);
/* Here is the CSS */
ul li {
display: block; /*change to none and test - works as well */
}
Check this code
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("ul").toggle();
});
});
</script>
<style>
ul {display:none;}
</style>
</head>
<body>
<button id="show">Show</button>
<ul>
<li>aaaa </li>
<li>bbbb </li>
<li>ccccccc </li>
</ul>
</body>
</html>
The above-show code works fine excepting the following case. When I open web-page, the content of DIV container is empty and I can see just the navigation menu. Once I press on menu or submenu items, the content is filled with correct data. So, my question is how to use the DIV container 'submenu11' by default? The code line $active = $('#submenu11').addClass('active'); does not solve this issue.
Look at jFiddle.
Can you add css to the fiddle? I am not understanding the question completely.
From what I understand you want to show the submenu11 by default right? so I am assuming the rest of the stuff should be hidden which I assume it is done in the css already. your code
$active = $('#submenu11').addClass('active');
does not do anything because you are assigning it to $active
I think you are looking for something like this maybe?
$(document).ready(function() {
$('#submenu11').addClass('active');
});
this is assuming all your css classes are defined correctly
$(document).ready(function() {
//code for ajax calling
$('#submenu11').addClass('active').trigger('click);
});
The company I am working for handed me over a messy website ran using templates, so some elements in the website are automatically generated and are active links.
My main problem is that there are some elements on the site are active links that aren't suppose to be links at all. I was wondering if there is a way to remove the link from an html element using JQuery and maybe CSS?
this will help me tremendously, thanks in advance. I need to remove all href's from class 'slider'.
Here is some of my jquery, can someone please show me how to add it?
<script type="text/javascript">
$(document).ready(function(){
$("#productsLink").hover(function(){
$("#productsMenu").slideDown();
});
$("#productsLink, #productsMenu").hover(function(){
$("#productsLink").css("color","red");
});
$(".spacer", this).hover(function(){
$("#productsLink").css('color', 'white');
$("#productsMenu").slideUp();
$("#aboutLink").css('color', 'white');
$("#aboutMenu").slideUp();
});
});
</script>
try unwrapping the sliders using .unwrap(), assuming all these links have the class slider and they are directly wrapped in an anchor tag.
$('.slider').unwrap()
If you want to remove links with the class name slider from the DOM:
$('a.slider').remove();
You can remove all href attributes from links with class slider with this code:
$('a.slider').removeAttr('href')
This will keep the content of the elements intact and just disables them as a link.
CSS is no help here, it could only be used to hide elements completely.
You can use the replaceWith method to turn specific a elements into span elements. Example:
$('a.something, a.someother').replaceWith(function(){
return $('<span/>').text($(this).text());
});
Is there a way (possibly using Javascript?) of changing CSS element details when a User clicks an HTML link?
My aim here is to grey out a series of links defined as:
<span>Link</span>
and a class defined as:
.Document
{
background:#000;
}
What I am after is, when the User clicks MyLink, I would like the Document class to change its background to something else.... say #CCC. I would also like it to revert back to its original state when another link is selected e.g. MyLink2.
Is this even possible? If so does anyone know where to look for at least the beginnings of a solution?
jQuery! - http://jquery.com/
$("your-selector").click(function(){
$("your-destination").css("border-color","#CCC");
});
Apply for each link, and it should do it!
<a href="#" title="MyLink" onclick='document.body.style.background="#CCC";'>Link</a>
You could use the :focus CSS pseudo-selector:
a:focus {
background-color: #ccc;
}
Now when the user clicks on a link, the background will go grey.
I assume the .Document classname is applies to a number of other elements & not the link itself.
In this case, the best practice is to create another classname (for example, .document-active), and change the classname on all the elements that .Document is applied to when MyLink is clicked.
Using your markup above (and jQuery):
$(function(){
$("a[title='MyLink']").click(function(){
$('.Document').removeClass('Document').addClass('document-active');
return false;
});
});
I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.