How do I open a link on click with jquery

Question

1.00/5 (1 vote)

See more:

So I am using a very weird CMS, which is preventing me from attaching a link to a url.

I cannot tell you the name of the CMS, for unspecified reasons, but that is beyond the point.

I have a background image on the body and I would like to make the background image a clickable link, which would lead to another page.

I need to do this with jQuery alone.

What I have tried:

$('body').click(function()
{
window.open('link');
});

Posted 21-Oct-19 23:54pm

Ves93

Updated 22-Oct-19 4:50am

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

MadMyche · Answer 1 · 2019-10-22T01:03:00

What you need to do is going to be able to figure out how to identify that particular element; and the way to do this is via the jQuery selector.
Your current code selects the entire BODY of the page

If that image has an ID attribute on it, or you could add one; that would be the best way and the selector would be $("#ImageID"). The reason I believe this would be the best way is that in compliant HTML, an ID can only appear once.

If using the ID attribute is not an option, you may want to base your selector on the actual image source attribute.
<img src="smiley.jpg" /> would use $("[src='smiley.jpg']")

Reference:
jQuery Selectors[^]

Harsh.Shah.ifour · Answer 2 · 2019-10-22T02:17:00

Hi Ves93

yes This can be done easily.

First set background image to the body tag. after that you need to add a simple jquery code in <script> tag:

<html>
<head>
<style>
        body {
            background-image: url('img.jpg');
        }
 </style>
</head>
<body>
<h1>This is Body</h1>
</body>
</html>

<script>
$(document).ready(function () {
        $("*").click(function () {
            window.open('https://www.google.com/');
        });
    });   
</script>

so as you can see that "*" will select all the content of the entire web page so when you will click anywhere in entire page, you will redirect to your another page. Replace above link by adding your link.

Hope This will help you.
Thank you.

Richard Deeming · Answer 3 · 2019-10-22T04:50:00

Quote:
the problem is that the background image is only visible on the sides - left and right - and I wouldn't want people to be redirected to that specific link when they click on something that's NOT the background image.

Effectively, you need to intercept the click events on anything inside the body, and stop them from propagating to the body itself. Using jQuery:

JavaScript

$("body").click(function(){ 
    window.open(...); 
});
$("body > *").click(function(e){ 
    e.stopPropagation(); 
});

Demo[^]

NB: You'll need to make sure the body always fills the height of the window, even if the page content is short:

CSS

body {
    min-height: 100vh;
}

Also note that the margins between elements can create gaps which will be clickable. If you want to avoid that, you'll need to wrap your non-clickable content in another element.

How do I open a link on click with jquery

3 solutions

Solution 1

Solution 3

Solution 4

Add your solution here

Preview 0