Hi. I'm playing around with MooTools tooltip-functions, and it works just fine. Although, I have a inline href (href="#note") that doesn't really link to anything if javascript is enabled - then it just shows a tooltip. If javascript is disabled, however, the link goes to the same text below the content - hidden in a <noscript> tag. What I would like is for the value of the link to change - if javascript is enabled, the link should just show "#" and if it's disabled, the whole inline link should be there. How can I do this as simple as possible?
Just use body onload and javascript to getElement and change his href to # This will be executed if javascript is enabled: reverse logic
hmm. That might work, but... how would I do that for this project - here's a code example: I have several values, like this: <a href="#<?php echo $db_value['id']"> This is of course in a loop, and will show something like this in the browser: <a href="#note"> <a href="#unit"> <a href="#recovery"> I want all those to change value if javascript is loaded - if JS is available, it should only display like this: <a href="#"> Could I do this using a class? Or by parsing child-elements? I need something also that does NOT use document.write - XHTML Strict isn't a big fan of document.write A small code-example would be nice.
OK, here is example using jQuery and class name (you must echo class="foo" during the loop): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DEMO</title> <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> //<![CDATA[ $(document).ready(function(){ $('a[class="foo"]').attr('href','#'); }); //]]> </script> </head> <body> ....................................... HTML: Regards
in mootools just do ... two ways to tackle this. 1, if your links are children of a particular parent, for example, a div called "sidemenu": <div id="sidemenu"> <a href="#blah">blah</a> <a href="#blah">blah</a> <a href="#blah">blah</a> <a href="#blah">blah</a> </div> <script type="text/javascript"> window.addEvent("domready", function() { $("sidemenu").getElements("a").set({ href: "#", events: { click: function(e) { new Event(e).stop(); // prevent click from doing anything } } }); }); // end domready </script> PHP: if the tooltip links are spread out through the document, they can share a class called TT, then do: $$("a.TT").set("href", "#").addEvent("click", function(e) { new Event(e).stop(); // prevent click from doing anything }); PHP: if you cannot know what link will be an anchor (hence cannot assign it a class), you can use the .filter function and apply it to all links that have a #, for instance: var links = $$("a").filter(function(item, index) { return item.get("href").contains("#"); }); PHP: p.s. nice framework choice
Hm. I can't get it to work, it seems. I added the following to my main .js-file: window.addEvent("domready", function() { $$("a.tooltip").set("href", "#").addEvent("click", function(e) { new Event(e).stop(); // prevent click from doing anything }); }); // end domready PHP: And the code I'm trying to use this function on looks like this: <td class="prices"><?php if ($note == '***' || $note == '**' || $note == '****' || $note == 'fasttillegg') { ?> <a href="#<?php echo $pricecontent['price_note_linktag'];?>" title="<?php echo $pricecontent['price_note_title']; ?>" rel="<?php echo $pricecontent['price_note_text']; ?>" class="tooltip"><?php echo $pricecontent['price_note']; ?></a></td> PHP: But it isn't working - the resulting links still look like: http://mydomain/index.php?page=prisliste#unit <- if I am to understand correctly, this should have been only "#" with the above code. Am I doing something wrong?
hold on - which version of mootools? the .set only works on 1.2+. do you get any errors? what happens when you do console.log($$("a.tooltip")); - you need firefox and firebug for this but thats the best environment for dev work anyway so go for it. if it comes up with an array of objects, then it works. there also was a 1.2 version released without $$ as a function, you'd have to replace with document.getElements("a.tooltip") instead if the console.log comes blank. if it DOES return the array of tooltips, then the .set method is not supported. in mootools 1.11 this works via setProperty() instead. one way to add debug is to do this iteration (providing that the selector has found your anchors): $$("a.tooltip").each(function(el) { console.log(el); el.addEvent("click", function(e) { new Event(e).stop(); }).setProperty("href", "#"); // or .set() in 1.2x }); PHP:
Hey again! It works now. It was an earlier javascript that messed it up, and wasn't closed properly. Removed that part of the script, and everything works just fine now Thanks for the help, and the tips. + rep added.