Dynamic code to addClass to an element specified in the link - javascript

I'm trying to add a class to an element specified within my HTML from clicking on a button.
HTML:
<div id="servicenext"><p class="four">next</p>
Script:
$('#servicenext a').click(function(){
$('ul.navigation a').removeClass('active');
$(*the div in the href*).addClass('active');
});
I'm hoping to have code that's dynamic. Basically it'll work by adding the class to any element specified in the a href.
This is because i have quite a handful of these and do not wish to code them individually.
EDIT:
Thanks James! that's great!
But I do have to apologize, i was confused myself at what I was asking for!
What I'm actually looking to addClass to was actually the li in ul.navigation a
So if I'm thinking right, im trying to do this:
by clicking onto the servicenext button,
the code gets the id of the div in the href
the addClass is applied to the li with the same href
I'm guessing there should be if else statements somewhere, forgive me, i'm not really a programmer.
the gibberish i came up with is:
$('#servicenext a').click(function(){
$('ul.navigation a').removeClass('active');
$($(this).attr("href").find($('ul.navigation li a').attr("href"))).addClass('active');
});
});

Since the value of the href attribute is already a valid ID selector, you can simply use the value of the attribute:
$($(this).attr("href")).addClass('active');
Note that you have to get the actual attribute value. The native DOM property returns an actual URL, not just the value of the attribute.
Here's a working example.

Related

jQuery Hide and show elements with add remove class not working after applying uniform.js

After applying uniform.js the jQuery doesn't work.
The jQuery was like this. The original.
Now the html code changed after applying the uniform.js but the jQuery is not working anymore. The uniform wrapper added wrappers to the checkbox maybe that's why is not working.
here is the new code: New Code
Yes, previously, your checkbox and your UL were siblings, so .next() worked. Now, however your checkbox is wrapped up and further down in the tree. So this:
$selexcta(this).next('.child-list')...
won't find the next ul.
I might be missing something, but I'd suggest not using .next() to traverse the tree. Rather, when a checkbox is clicked, deselect all checked check boxes. Then go 'up' the tree from the checkbox to the nearest li using
$(this).closest('li')
Then down one to the nearest ul
$(this).closest('li').find('ul')
then you can make that visible:
$(this).closest('li').find('ul').slideToggle('fast').addClass('mm');
You should be able to get away without using the .method() function at all.
Hope that helps.

Hide A element with CSS or Javascript

I have this element in my HTML page:
<a style="display:block;width:728px;height:90px;margin:0 auto;background:#EEE url('/_images/2011images/img_dotco_3.jpg') no-repeat top left; text-decoration:none;color:#000;" href="/domain-registration/dotco-overview.aspx?sourceid=bnrq2co728x90">
<span style="float:right;margin:5px 27px 0 0;width:110px;color:#FFF;text-align:center">
<span style="display:block;font-size:1em;text-align:center">NOW ONLY</span>
<strong style="display:block;font-size:1.6em;text-align:center"><!-- START TAG // Co_RegisterPrice_TLD -->
<span class="Tag_Co_RegisterPrice_TLD"><strong>$35.70</strong>/yr</span>
<!-- End TAG // Co_RegisterPrice_TLD --></strong>
</span>
</a>
I need to hide it with CSS or Javascript. CSS would be the best scenario but Javascript is OK as well.
The fact is that I cannot edit the HTML code at all, so I have no way to delete this item directly. Also this is not parent of any other HTML element, so I do not find an easy way to hide it with CSS.
Also I need to hide this A element even if the background image changes or the link changes, in fact it's not always the same.
I reported all the available HTML.
Here is an example http://subdir.co/help-center/default.aspx
It's the top banner there.
Let me know how to hide it from the page. Thanks.
Try with jQuery:
$('a[href^="/domain-registration/dotco-overview.aspx?sourceid"]').hide();
This hides the a tag with a href attribute starting with /domain-registration/dotco-overview.aspx?sourceid.
Use:
document.getElementById('yourElementId').display=none;
You can traverse the dom tree from the class "Tag_Co_RegisterPrice_TLD" to find the A tag which you can then hide.
If you need to do additional logic then you can access the text (e.g. price/title/url) before deciding to hide.
Use jQuery if raw javascript is to much for you.
Since you cannot change the HTML code, you can't add an identifier to the element in order to select and manipulate it.
But you can use jQuery to select the first 'a' element, and set the 'display' property to 'none'.
I think something like this should do:
$('a:first').css("display","none");
You could try it with css:
a[style][href] {
display: none !important;
}
i think adding class or making some rule for css selector woudn't work, because definition in attribute of the elements overrides another style definition.
It will be easy if you use some javascript library for dom manipulating for example jQuery.
after that you can write something like
$(".sCntSub3 > a").hide()
you can try finding element from browser console. It is easy way how to verify you choose right element
jsFiddle Classname Method DEMO
jQuery via Classname: In this method we "look inside" the anchor for clues.
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
$('.Tag_Co_RegisterPrice_TLD').closest('a').hide();
});
jsFiddle ID Method DEMO
jQuery via ID: This time, we don't look inside since anything can change. We now use a div reference!
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
// No matter the unique ID code in front of MasterUpdatePanel Div, it will always be matched.
$('[id$="MasterUpdatePanel"]').next('a').hide();
});
Shown here is a Firefox Screenshot of the HTML Page. Notice the Div ID contains ctl00_MasterUpdatePanel. The letters, numbers, and underscore in front of that may change, but not this keyword. Therefore, a match of the "ending part" of the id works!

Jquery: please help explain this code because I need to tweak it

Can someone explain this to me? I'm trying to understand exactly why drop down lists inside a li tag work okay but when using a form the menu disappears when clicked anywhere.
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
}
It works in combo with:
$("html").click(function() {
menu.find('.active').removeClass('active');
});
Full code with menu example:
http://jsfiddle.net/e4yy4/
This bit of code
$("html").click(function() {
menu.find('.active').removeClass('active');
});
would remove the active class of the menu and so hide it when ever a click is detected anywhere on the page.
But
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();});
Would override the first piece of code when the click is detected in the drop down list.
So you can add the below code to override the first piece of code so it also cancel the hiding when clicking in the form.
menu.find('ul > form').bind('click', function (event) {
event.stopPropagation();});
Just like this
http://jsfiddle.net/Quincy/e4yy4/3/
You also want to stop form events propagating to html (should probably be document).
Change the selector to select descendent form elements too.
jsFiddle.
If you change the first check to menu.find('ul li>*') then it seem to work.
I think that line was only handling clicks on links, and your form elements aren't links.
<form> is an element just like any other, as such, it should be eligible for selection using the CSS selectors (which are called by the find() function).
You need to change your selector to include the <form> tag and possibly change the selector to pickup on <input> elements instead of <a>.
For more information on jQuery selectors, please see: http://api.jquery.com/category/selectors/

Remove dynamically added elements

I've looked through some of the other posts but couldn't find an answer, so sorry if this is a somewhat stupid question.
I have a div
which I add span elements dynamically to, like <span id="agolf-squirecreek1.jpg">golf-squirecreek1.jpg</span>. I need to remove these elements dynamically as well when clicked on. I have the click event linked with .live(), but the remove() wont work on it. Any ideas?
Try to use .remove
http://api.jquery.com/remove/
Or
Why dont you hide the element on click using
.hide()
or by putting style or class. .add() or .addClass
or replace the html itself by .html or .text
This will remove a span when clicked within the context of div#id.
$('div#id').delegate('span', 'click', function() {
$(this).remove();
});
If you want to remove everything within an element you can use .empty() and furthermore, if you want to remove a span element but retain its event handlers/data object you can use .detach() which is useful if you intend to add the element back to the DOM.

jquery to find all the elements inside a div tag

How to find all the anchor tags inside a div tag and need to append one more property to the anchor tag. say target="_blank".
How can i do this in using jquery?
Do you mean all the anchors in any div element, or in some specific div element? If it's the former, this will do the trick:
$('div a').attr('target', '_blank');
If it's a particular div you're interested in, give that element an id attribute and then use it like so:
$('#divid a').attr('target', '_blank');
replacing "divid" with the id in question.
Can you be more specific about what exactly you want?
In any case, you're going to need to use the attr() function to set the attribute; see the documentation here.
You are probably interested in a single div, not every div on page, so You have to identify it.
$('div#theDivsId a').attr('target','_blank');
or
$('div.theDivsClass a').attr('target','_blank');
PS. read documentation. it's easy.
jQuery("#yourDIV a").attr("target", "_blank");
Have you read the jQuery docs? This can't be more basic.
$('div a').attr('target','_blank');

Categories

Resources