CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraphref
rockitude
rockitude

Reputation: 75

Left-clicking links doesn't work, but 'Open in New Tab' does

I'm working on my personal website (building from a template) and just as I finished up, my links stopped responding to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.

I've done a fair bit of searching about this already, and it seems there may be some JavaScript that's overriding the default behavior for the tag. I've tried looking in the Network and EventListener sections of the Chrome and Firefox DevTools, but I'm not entirely sure what I'm looking for.

I don't want to paste the code for the whole site here (too long), but you can download it from my Github page to try it out yourself.

Since I think the problem is related to JavaScript, here are the header and footer sections of my site, so you can see what I have attached:

<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>Mike Lipson | Instructional Technology Specialist</title> 

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="css/style.css">    

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>


<link rel="prefetch" href="images/zoom.png">

<style type="text/css" media="screen">
    a.heading_link {
        color: white;
    }
</style>


    <!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> <!-- Potential link-breaker -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>

<!-- fancybox init -->
<script>
$(document).ready(function(e) {
    var lis = $('.nav > li');
    menu_focus( lis[0], 1 );

    $(".fancybox").fancybox({
        padding: 10,
        helpers: {
            overlay: {
                locked: false
            }
        }
    });

});
</script>

Upvotes: 3

Views: 8573

Answers (1)

Sherbrow
Sherbrow

Reputation: 17379

The carousel API automatically catches any click on [data-slide] or [data-slide-to] elements (tags that possess the data-slide or data-slide-to argument).

And you set on one of your main containers the <div data-slide="1"> attribute (see index.html#L68) therefore any click will be catched and prevented (e.preventDefault()).

You can see that in the carousel plugin definition js/carousel.js#L187.

So you should either remove this attribute and use another attribute name, or deactivate the carousel API.

Upvotes: 9

Related Questions