Hyperlink in JQuery Only Working in JSFiddle

Question

I found something that can not only toggle on/off an image, but also make that image a link.

Problem: It only works in JSFiddle.

I put everything back into html (providing script) and made sure that everything was the same...but still, on my site it won't work. On JSFiddle, it does.

If anyone has a solution, I'd be most grateful.

The code I'm using for the site:

<center>
    <p>
       <div class="icon-container">
          <a id="TOURBUTTON">
              <img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" style="width: 188px; height: 188px;" />
          </a>
        </div>
    </p>
</center>   
<center>
    <p>
        <div class="display-container">
            <img id="T5" style="display:none;" a href="http://music.britrodriguez.com" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png"/>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                      $('#TOURBUTTON').on("click", function(){
                          $('#T5').toggle();
                      });  
                });

                $('#T5').click(function(event){
                    var link = $(this);
                    var target = link.attr("target");
                    if ($.trim(target).length > 0){
                        window.open(link.attr("href"), target);
                    } else {
                        window.location = link.attr("href");
                    }
                    event.preventDefault();
                });
            </script>
            <style type="text/css">
                .icon-container{
                    display:inline-block;
                    margin-bottom: 0px;
                    margin-top: 10px;
                }
            </style>

The JSFiddle:

http://jsfiddle.net/ccymzmvn/

The site it's not working on:

http://www.britrodriguez.com/HITEST

NEVERMIND, I guess it does work! haha But, if anyone sees this and has something better than what I've done, post here for others/me because I'm greedy. — Brit Ann
– Brit Ann, Commented Aug 15, 2014 at 20:08
Lost the <center> elements. They were deprecated decades ago. — j08691
– j08691, Commented Aug 15, 2014 at 20:09
Wrap your <a href> around the <img> tag like you're supposed to, if for no other reason than to ensure it works when JS isn't enabled. — Blazemonger
– Blazemonger, Commented Aug 15, 2014 at 20:09

dalucks · Accepted Answer · 2014-08-15 20:14:25Z

2

Why do you open the url with JavaScript? Just try:

<a href="http://music.britrodriguez.com">
    <img src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
</a>

answered Aug 15, 2014 at 20:14

dalucks

1412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael · Accepted Answer · 2014-08-15 21:14:24Z

These are just suggestions, but:

Make sure your HTML document is well formed and remove extraneous levels. The deeper the DOM tree goes, the "heavier" the page can get for the browser. Always strive towards a shallow DOM tree
The event handler when you click #T5 doesn't really need jQuery, I've used native JS, you can see it has a one to one drop-in.
Whenever you have a click event on an element, change the cursor for the user so they know it is clickable.
I have also user opacity to hide the #T5 instead of display. That way you can make it fade nicely

http://jsfiddle.net/ccymzmvn/5/

HTML

<p class="icon-container">
    <a id="TOURBUTTON">
        <img src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" />
    </a>
</p>

<p class="display-container">
    <a href="http://music.britrodriguez.com">
        <img id="T5" src="http://static.tumblr.com/6s0fefr/GXHnabnep/tahoeshow.png" />
    </a>
</p>

CSS

body {
    text-align: center;
}

#TOURBUTTON {
    display: inline-block;
}

#TOURBUTTON img {
    cursor: pointer;
    display: block;
    width: 188px;
    height: 188px;
}

img#T5 {
    border: 1px solid red;
    max-width: 100%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 800ms;
    transition: opacity 800ms;
}

img#T5.active {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

function open_link(event) {
    event.preventDefault();

    var link = this,
        target = link.target;

    if($.trim(target).length > 0) {
        window.open(link.href, target);
    } else {
        window.location = link.href;
    }

}


$(document).ready(function() {
    var $T5 = $('#T5');

    $('#TOURBUTTON').on("click", function(){
        $T5.toggleClass('active');
    });  

    $T5.on('click', open_link);
});

Collectives™ on Stack Overflow

Hyperlink in JQuery Only Working in JSFiddle

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related