CODEWITHSUNDEEP
htmlcss
slopedoo
slopedoo

Reputation: 47

HTML links won't link to http

I have an issue with hrefs linking away from my site.

Certain links (the ones linking out of the page) in my header refuse to work no matter what, but the links in the header that link to internal divs work just fine.

Also, when I right click the link and select Open from the dropdown menu, it works as intended.

Link to site:

http://66.*.*.89

It's the twitter and youtube button in the upper left in the header.

Code for the CSS:

#header {
    font-family:arneper;
    color:white;
    width:100%;
    height: 100px;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.7);
}

#header #headermenu {
    width:97%;
    padding: 0;
    float:left;
    margin:0 25px;
}

#header #headermenu li {
    list-style: none;
}

#header #headermenu li a {
    color:#888;
    float:right;
    text-align:center;
    font-size:12px;
    margin:8px;
    width:50px;
    padding: 8px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-t-border-radius: 3px;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

#header #headermenu li a:hover {
    color:#FFF;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

#header #title {
    font: bold 310%/100% Didot, Arial, sans-serif;
    font-size:30px;
    font-weight: lighter;
    margin: 25px 40px 0px 35px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -2px;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

#header #title :hover{
    color: #888;
    -o-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
    -webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}

Header HTML:

<div id="header">
    <div id="title"><a href="index.html" target="_blank">Home</a></div>
    <ul id="headermenu">
      <li style="float:left"><a href="http://www.twitter.com/">Twitter</a></li>
      <li style="float:left"><a href="http://www.youtube.com/">YouTube</a></li>
      <li><a href="#main">Top</a></li>
      <li><a href=".about">About</a></li>
      <li><a href=".code">Code</a></li>
      <li><a href=".portfolio">Portfolio</a></li>
    </ul>
  </div>

EDIT: I just realised that the buttons in the footer has the same issue..

Upvotes: 0

Views: 56

Answers (1)

Brandon
Brandon

Reputation: 69973

You have this jQuery code in your header

$('a').click(function(e){
   e.preventDefault();

   var target= $(this).attr("href");
   $target=$(target);

   $('html,body').animate({scrollTop:$target.offset().top},1200,'swing');
});

It targets all links, not just the internal ones. Since you're calling e.preventDefault() those links aren't going to go anywhere.

You can attach another class to your internal links and narrow down your jQuery selector, or in your handler you can check the href attribute of the link to see if it starts with a #.

You could also use jQuery's starts-with attribute selector.

$("a[href^='#']").click(function(e) {

(You'll need to update your links to use # and not .)

Upvotes: 3

Related Questions