We Keep Coding

How to use Javascript to change href and html text?

So I've got this little piece of HTML that I have zero access to, and I need to change the URL of where it's linking, to somewhere else.
Now I've looked around, and I've tried different approaches and non seem to work so I must be doing something wrong.
the Html code:
<div class="manageable-content" data-container="edit_register_ind_container">
<a class="entry-text-link secondary-step step-button" id="register_ind_container" href="oldurl">Register</a>
</div>
First I wanted to try something that seemed easier, which was to change the displayed text "Register" to "Start a Fundraiser"
This is what I have got for that part:
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$("#manageable-content a").text('Start a Fundraiser');
});
$("#register_ind_container").attr("href", "http://google.ca");
});
No luck so far for any of it.
a little background information:
I am using a platform called Luminate/Blackbaud, its a CMS with a weird set up. header tags and stuff like that go in a different place than the html body and the css is somewhere else as well (but I'm just using ftp to reference it in the header).
How I'm referencing the javascript code.
<script type="text/javascript" src="../mResonsive/js/urlmanipulation.js"></script>
My css works so I'm certain this should to, but I just don't know why it isn't.
All suggestions welcome (except for asking for the html access because I have, 3 weeks ago lol)
Thank you for your time!

I saw your both code :
$("#register_ind_container").attr("href", "http://google.ca");
This line will execute on page load so href should be changed on load
$("#register_ind_container").click(function(){
But when you performing this click on Id
it wont work because at that instance this id associated with an hyperlink
so hyperlink having the default subset rules
for Overriding this you can try
$("#register_ind_container").click(function(e){
// custom handling here
e.preventDefault();
$(this).text('Start a Fundraiser');
});
But this is also not a Good Practice. Hope this helps !

$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser');
$(this).attr("href", "http://google.ca");
});
});

You are changing the URL outside the click event.. Wrap it inside the click event.. Also make use of $(this)
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser').attr("href", "http://google.ca");
});
});

Access class with specific text content and display:none

I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});

I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});

Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps

There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')

Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}

jQuery starts with selector

Here's my code:
<script type="text/javascript">
$(document).ready(function () {
$("[class^=\"hide\"]").hide();
});
</script>
<div class="hide1">Hide</div>
<div class="show1">Show</div>
<div class="hide2">Hide</div>
<div class="show2">Show</div>
<div class="hide3">Hide</div>
<div class="show3">Show</div>
<div class="hide4">Hide</div>
<div class="show4">Show</div>
But on page load, the hide divs are still visible... what am I doing wrong?

Wow... I feel so stupid. I spent so much time banging my head against a wall, and only discover the solution after I post here...
So turns out I was doing everything correctly, but the divs were in a View (I'm using MVC3) that was being loaded after $(document).ready was being called. Moving the code into the View solved the problem.

Why do you have separate classes for those? Why not have a single hide class and set those attributes above (e.g. "hide1") as ids, then your selector can simply be on that class e.g. $('div.hide')?
See http://jsfiddle.net/2GzpA/1/ for an example.
EDIT:
For your question, you comment:
#Tomgrohl well my code is actually much more complicated. I need to be able to hide and show each div individually.
Why not add a separate class to use for this case? Then your selector becomes $('div.specificCaseHideClass'). You can have as many classes as you like and this is a fine example of when to add one.

try this its simple
$("div:even").hide();

Are you sure that jquery is included? This seems to work: http://jsfiddle.net/6ycbT/
Also, check your js console to see if any errors are getting thrown that might prevent this code from executing

switch out the outer quotes by single quotes and it works:
working fiddle: http://jsfiddle.net/geertvdc/hv4Ls/
code:
$('[class^="hide"]').hide();

You can do :
$(document).ready(function () {
$("div[class*=hide]").hide();
});

JQuery: Why is hoverIntent not a function here?

I'm modifying some code from a question asked a few months ago, and I keep getting stymied. The bottom line is, I hover over Anchors, which is meant to fade in corresponding divs and also apply a "highlight" class to the Anchor. I can use base JQuery and get "OK" results, but mouse events are making the user experience less than smooth.
I load JQuery 1.3 via Google APIs.
And it seems to work. I can use the built in hover() or mouseover(), and fadeIn() is intact... no JavaScript errors, etc. So, JQuery itself is clearly "loaded". But I was facing a problem that it seemed everyone was recommending hoverIntent to solve.
After loading JQuery, I load the hoverIntent JavaScript. I've triple-checked the path, and even dummy-proofed the path. I just don't see any reasonable way it can be a question of path.
Once the external javascripts are (allegedly) loaded in, I continue with my page's script:
var $old=null;
$(function () {
$("#rollover a").hoverIntent(doSwitch,doNothing)
});
function doNothing() {};
function doSwitch() {
var $this = $(this);
var $index = $this.attr("id").replace(/switch/, ""); //extract the index number of the ID by subtracting the text "switch" from its name
if($old!=null) $old.removeClass("highlight"); //remove the highlight class from the old (previous) switch before adding that class to the next
$this.addClass("highlight"); //adds the class "highlight" to the current switch div
$("#panels div").hide(); //hide the divs inside panels
$("#panel" + $index).fadeIn(300); //show the panel div "panel + number" -- so if switch2 is used, panel2 will be shown
$old = $this; //declare that the current switch div is now "old". When the function is called again, the old highlight can be removed.
};
I get the error:
Error: $("#rollover a").hoverIntent is not a function
If I change to a known-working function like hover (just change ".hoverIntent" to ".hover") it "works" again. I'm sure this is a basic question but I'm a total hack when it comes to this (as you can see by my code).
Now, for all appearances, it SEEMS like either the path is wrong (I've zillion-checked and even put it on an external site with an HTTP link that I double-checked; it's not wrong), or the .js doesn't declare the function. If it's the latter, I must be missing a few lines of code to make the function available, but I couldn't find anything on the author's site. In his source code he uses a $(document).ready, which I also tried to emulate, but maybe I did that wrong, too.
Again, the weird bit is that .hover works fine, .hoverIntent doesn't. I can't figure out why it's not considered a function.
Trying to avoid missing anything... let's see... there are no other JavaScripts being called. This post contains all the Javascript the page uses... I tried doing it as per the author's var config example (hoverIntent is still not a function).
I get the itching feeling I'm just missing one line to declare the function, but I can't for the life of me figure out what it is, or why it's not already declared in the external .js file. Thanks for any insight!
Greg
Update:
The weirdest thing, since I'm on it... and actually, if this gets solved, I might not need hoverIntent solved:
I add an alert to the "doNothing" function and revert back to plain old .hover, just to see what's going on. For 2 of my 5 Anchors, as soon as I hover, doNothing() gets called and I see the alert. For the other 3, doNothing() correctly does NOT get called until mouseout. As you can see, the same function should apply for any Anchor inside of "rollover" div. I don't know why it's being particular.
But:
If I change fadeIn to another effect like slideDown, doNothing() correctly does NOT get called until mouseout.
when using fadeIn, doNothing() doesn't get called in Opera, but seems to get called in pretty much all other browsers.
Is it possible that fadeIn itself is buggy, or is it just that I need to pass it an appropriate callback? I don't know what that callback would be, if so.
Cheers for your long attention spans...
Greg

Hope I didn't waste too many people's time...
As it turns out, the second problem was 2 feet from the screen, too. I suspected it would have to do with the HTML/CSS because it was odd that only 2 out of 5 elements exhibited strange behaviour.
So, checked my code, dug out our friend FireBug, and discovered that I was hovering over another div that overlapped my rollover div. Reason being? In the CSS I had called it .panels instead of .panel, and the classname is .panel. So, it used defaults for the div... ie. 100% width...
Question is answered... "Be more careful"
Matt and Mak forced me to umpteen-check my code and sure enough I reloaded JQuery after loading another plugin and inserting my own code. Since hoverIntent modifies JQuery's hover() in order to work, re-loading JQuery mucked it up.
That solved, logic dictated I re-examine my HTML/CSS in order to investigate my fadeIn() weirdness... and sure enough, I had a typo in a class which caused some havoc.
Dumb dumb dumb... But now I can sleep.

Styling select element (jQuery)

I tried some plugins but they all come with their own styling which takes quite some time to get rid of. Is there any plugin with minimal styling (or a really simple way) to apply custom background to select element? I just need something very simple.
Thanks

I found this one. It even degrades automatically if JavaScript is disabled.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

With jQuery am using lines like this in my dom ready function :
$(".overlay").css("top","300px");
Goes like this in the header:
<script type="text/javascript">
jQuery(document).ready(function(){
$(".overlay").css("backgroundColor": "#0f0");
});
</script>
.overlay is the class of the div i wanna change and then comes the css property and its value.
Hope this helps.