Unobtrusive Javascript: Removing links if Javascript is enabled - javascript

I'm using PopBox for magnifying thumbnails on my page.
But I want my website to work even for users which turned javascript off.
I tried to use the following HTML code:
<a href="image.jpg">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/>
</a>
Now i need to disable the a-Tag using javascript, otherwise my PopBox won't work.
How do I do that?

Just put the onclick on the a-tag:
<img ...>
Make sure to return false either at the end of the function (here Pop) or inline like in the above example. This prevents the user from being redirected to the link by the <a>'s default behaviour.

Put the onclick event onto the link itself, and return false from the handler if you don't want the default behavior to be executed (the link to be followed)

You could give all your fallback anchor tags a particular classname, like "simple"
Using prototype, you can get an array of all tags using that class using a CSS selector, e.g.
var anchors=$$('a.simple')
Now you can iterate over that array and clear the href attributes, or install an onclick handler to override the normal behaviour, etc...
(Edited to add that the other methods listed above are much simpler, this just came from a background of doing lots of unobtrusive javascript, where your JS kicks in and goes and augments a functioning HTML page with extra stuff!)

May I suggest, in my opinion, the best solution? This is using jQuery 1.4+.
Here you have a container with all your photos. Notice the added classes.
<div id="photo-container">
<a href="image1.jpg">
<img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" />
</a>
<a href="image2.jpg">
<img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" />
</a>
<a href="image3.jpg">
<img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/>
</a>
</div>
An then you make a single event handler this way:
<script type="text/javascript">
$(document).ready(function(){
var container = $('#photo-container');
// let's bind our event handler
container.bind('click', function(event){
// thus we find (if any) the image the user has clicked on
var target = $(event.target).closest('img.popup-image');
// If the user has not hit any image, we do not handle the click
if (!target.length) return;
event.preventDefault(); // instead of return false;
// And here you can do what you want to your image
// which you can get from target
Pop(target.get(0));
});
});
</script>

The href attribute is not required for anchors (<a> tags), so get rid of it...
<a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a>
<script type="text/javascript">
document.getElementById("apic001").removeAttribute("href");
</script>
This method will avoid library contention for onclick.
Tested in IE6/FF3/Chrome. Side benefit: You can link directly to the portion of the page containing that thumbnail, using the id as a URI fragment: http://whatever/gallery.html#apic001.
For maximum browser compatibility, add a name="apic001" attribute to the anchor tag in your markup ('name' and 'id' values must be identical).
Using jQuery, dojo, Prototype, etc. you should be able to do the removeAttribute on multiple, similar anchors without needing the id.

You should be able to mix and match the return false from Chris's idea with your own code:
<a href="image.jpg" onclick="return false;">
<img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);">
</a>
If someone has Javascript disabled, then their browser ignores the onclick statement in both elements and follows the link; if they have Javascript enabled, then their browser follows both OnClick statements -- the first one tells them not to follow the <a> link. ^_^

Related

How to Dynamically Change "a href" Link on A HTML "rect" Tag?

So, I'm trying to recreate circle navigation on webpage using this reference: https://codepen.io/gzuzkstro/pen/oemMyN
But, I got confused about the link reference at "Learn more" button on each of the navigation. There are 7 navigations and just 1 tag of "rect" to generate "Learn more" button. When I put "a href" tag, it worked but all of the buttons reference the same URL. "rect" tag presents at line 320 of the HTML file.
I put the "a href" tag like this
<rect data-url="/industries" id="learn-more" x="280" y="250" width="90" height="30" />
and it all worked for all the buttons on different navigation. How to dynamically change the link reference on each navigation of the "Learn more" button?
EDIT: Since I've obviously missed the rect part of the question, here's a new answer. The old answer remains below as a reference.
NEW ANSWER:
Short answer is you don't. Rect is not an anchor, so whether you add a href attribute to it or not, will not have any effect. The simplest way to solve this is to store the target URL in a variable that is accessible to the click handler you bind to your rect element.
In the click handler for the circles, you update the value of this variable, and then in the click handler for the rect, you use the variable. It will be a global variable, though, so I can already see someone posting a letter of protest below in the comments.
If you don't like global vars, you can set a data attribute on the rect, and read that in the click handler.
In relation to your actual code, you have several g.service tags that user click to select a service. Then you have a single rect that represents the "Learn more" link. When user clicks on the g.service, that's when you set the target URL according to one of the solutions noted above (either as a global variable, or an attribute on the rect). Finally, when user clicks on the rect, you then take them to the target URL.
Now while this should work, it's a bad idea. Using elements other than an anchor tag for links is bad UX. For example, users cannot do the usual right-click to copy the link or open it in a new tab, etc. I recommend you change the design and use the anchor tag. The portion in the middle does not look like it needs to be SVG.
OLD ANSWER:
Since your code is quite complicated and I did not feel like going through everything to figure out what you have to fix, I'm going to give you a general idea of what you need to do. I see you use jQuery there, so the example is using jQuery.
var learnMore = $('.learnmore');
$('.buttons').on('click', '.topic', function (event) {
var url = $(event.target).data('url');
learnMore.attr('href', url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="learnmore" href="#foo">Learn more</a>
</div>
<div class="buttons">
<button class="topic" data-url="#foo">Foo</button>
<button class="topic" data-url="#bar">Bar</button>
<button class="topic" data-url="#baz">Baz</button>
</div>
We have a basic HTML structure where we have one anchor that has the href attribute we want to manipulate. We also have several interactive elements (in the example it's button) which will set the href when clicked.
The idea is to handle the click event, read the data-url attribute, and then use that attribute to set the href value of the anchor.

How to disable URL tooltip (status bar)?

When I click on a link (or hover with a mouse), the URL shows up at the bottom of the screen. That's the default behaviour in Firefox.
How can I prevent this ?
I'm making a website for tactile interfaces.
Thanks !
It would be better if you are using any other tag other than <a> if suppose you are using a
<div id='idofdiv'> tag
the query will be
$('#idofdiv').click(function(){
window.open('www.google.com');
});
hope this helps!!
Browsers don`t show what object will do onClick, so try this:
<div onclick="location.href ='http://www.google.com';"> click me </div>
Or you can use span which is inline element:
<span onclick="location.href ='http://www.google.com';"> click me </span>
you can achieve this using jquery,
first inlcude the jquery library in your page then
write the script in the page
$(function(){
$('[data-url]') //select all elements having data-url
.click(function(e){ e.preventDefault();
window.location.href= $(this).attr('data-url')})
})
and in the html
<span data-url="#/inbox" >Go to inbox</span>
<a data-url="mydraft.html">Drafts</a>
This is not possible and CSS is nowhere here, you just cannot do it with CSS, well you can use something like this to spoof the <a> link but I suggest you don't use all this, without any specific reason, anyways they'll find the URL from the source page
Spoofing
Demo
Note: Actually just checked, the demo is not working on the fiddle page but just make a local .html page and it will work

How to replace onclick event with GreaseMonkey?

This website has a gallery of images. Each time I click on a thumbnail image it opens the URL in a new tab (not because I set firefox to open links in new tabs). I want to just open the URL in the same window. An example of what the thumbnail images looks like is this.
<span class="thumb" id="789">
<a href="/post/image/12345" onclick="return PostMenu.click(12345)">
<img class="preview" src="http://abc.com/image.jpg" title="title" alt="">
</a>
</span>
I believe that onclick="return PostMenu.click(12345)" is doing this. How can I replace the PostMenu.click() function with my own empty function in GreaseMonkey? Is there a way to make a GreaseMonkey script intercept all onclick events?
My only other option is to go through all the span classes and remove the onclick="return PostMenu.click(12345)" from the link tags. But since there can be over a hundred of these on a single page, I'd rather not do that.
Actually, deleting the onclicks is not at all an onerous task.
With jQuery, the code would merely be:
$("span.thumb a").prop ("onclick", null);
Or, for older versions of jQuery:
$("span.thumb a").removeAttr ("onclick");
A complete script:
// ==UserScript==
// #name _Kill select onClicks
// #include http://YOUR_SERVER/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// ==/UserScript==
$("span.thumb a").prop ("onclick", null);
The advantage of this approach is that:
(1) You preserve PostMenu.click() in case you want it, or it's needed, elsewhere,
(2) You are removing crud from the page, which makes it just a little bit less unwieldy.
(3) I suspect that you might also need to unwrap or modify that link -- in which case, the targeted rewrite approach using jQuery is the way to go.
If you really just want to replace the PostMenu.click() function with your own empty function, the code for that is just:
unsafeWindow.PostMenu.click = function () {};
As for having Greasemonkey intercept all onclick events... That is not easy to do reliably. Forget that approach unless there is an overwhelming need for some reason (which there doesn't seem to be, in this case).

using images for links with <wicket:link>

I'm trying to use an image for a link like so:
<wicket:link>
<a href="UploadPage.html">
<img src="/logo.png"/>
</a>
</wicket:link>
In the rendered HTML, the href of the <a> is correctly set to my upload page.
But curiously, Wicket adds onclick=window.location.href='/logo.png' to the <img> tag. The end result is that clicking on the logo loads the logo itself, rather than the upload page.
A simple work-around is to not use <wicket:link>, and hard-code the url to my upload page, but I'd like to know if there is a proper solution to this.
For me it helped to add empty onClick (Wicket 1.5):
<li><a class="current" href="main">
<img onClick="" src="img/icons/home.png"/>
</a></li>
after this, the link points to the page, not the image itself
Add the following in your html:
<a wicket:id="linkID"><img src="/logo.png"/></a>
Add the following in the corresponding java class:
add(new PageLink<Void>("linkID", new YourWicketPage()));
Or for more generic purposes:
add(new Link<Void>("linkID") {
#Override
public void onClick()
{
// do whatever you want when the link/image is clicked
}
);
Note that I gave the Link a Void model, since a model doesn't seem necessary to me in this case. However, it is imaginable that given a certain context a model for the link should be used.
did you already check out the answer in How to make a wicket link appear as an image?
Which wicket version do you use?
you have maybe forgotten the quote on the "onclick" :
onclick="window.location.href='/logo.png'"
Just to mention: using full url for src tag should help (http://blah/logo.png) but it's not elegent or portable solution. Perhaps it's a wicket bug. Maybe consider using div with css instead?

Invoking Link in Javascript or jQuery

I have an href taged object (graphic) on a page that I want to programatically click on. However,I can't figure out how to reference the object. Here is the tag:
<div id="getthebutton">
<div>
<a onmouseout="MM_swapImage('btn123','','http://www.comp.com/img/btn_img.png',1)" onmousedown="MM_swapImage('btn123','','http://www.comp.com/img/buttons/btn_inv.png',1)" onmouseover="MM_swapImage('btn123','','http://www.comp.com/img/buttons/btn_inv.png',1)" href="javascript:do_activity("param1", 1);">
<img id="btn123" width="180" height="60" alt="" src="http://www.comp.com/img/buttons/other_btn.png"/>
</a>
</div>
</div>
How do I click on this thing? If I read this right "btn123" is just an image file.
To programmatically click on that you would have to do something like this
$("a").click();
Of course it helps to have an event handler assigned first, but it is really that simple :)
Using parentNode will give you access to the <a> tag, but I don't know if that helps you, cause I'm not sure what exactly you are doing.
document.getElementById("btn123").parentNode
I believe in jQuery, it is parent():
$('#btn123').parent()
So you could probably do:
$('#btn123').parent().click()
First off, you should really listen to the comments (javascript: links == dark side). That being said ...
$("div#getthebutton div a").click();
In this case, the anchor has a javascript href-value. Understanding that you have no control over the source, your only other option would be to evaluate the value of the HREF:
// run the href-javascript from the parent anchor
eval($("#btn123").parent().attr("href"));
Invoking a click from the code will not invoke the javascript code. As such, you must evaluate it instead.
If you want to get the result of clicking on the image, from the code I would say your JavaScript should simply be:
do_activity("param1", 1);
That's what ultimately happens when the image is clicked by a human. This bypasses the 'click' events, so you might miss out on some side-effects, but it's what I'd try first.

Categories

Resources