SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Thread: Anchor Tag

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Anchor Tag

    Hi All,

    Im New Here,

    Actually Im Designing a Single Page Website with four <section> tags

    So when an User Clicks a Specific Link it has to go to that Section

    Everything is Working Fine instead,

    When i Click any of those links it goes to the top of the page instead of the particular section

    this is my html markup

    HTML Code:
    <div class="navbg">
    <nav> 
        			<ul>
        				<li><a class="introlink anchorLink" href="#intro">intro</a></li>
        				<li><a class="portfoliolink anchorLink" href="#portfolio">about</a></li>
        				<li><a class="aboutlink anchorLink" href="#about">portfolio</a></li>
        				<li><a class="contactlink anchorLink" href="#contact">contact</a></li>
        			</ul>				
        		</nav>
    </div>
    this is my css markup

    Code CSS:
    header { width: 100%;  float: left; position:fixed; top:0px; }
     
    #headercontainer { width: 100%; height:76px; background-image:url(images/navbgcrack3.png); }
     
    header section  nav{ display:block;}
     
    #logo { float:left; margin-top:20px; margin-left:20px; border:0px;}
     
    .navbg { background-image:url(images/mainnavbg.png); width:364px; height:71px; margin-left:350px; float:left;}
     
    nav { width: auto; }
     
    nav ul {  position: absolute; margin-top:25px;   }
     
    nav ul li { font-family:Arial, Helvetica, sans-serif; font-size:16px;  display: inline; margin-left:20px;   }
     
    nav ul li a{ color:#47453f; border-bottom: none; text-decoration:none;}

    this is my jquery

    Code JavaScript:
    $(document).ready(function() {
    	$("a.anchorLink").anchorAnimate()
    });
     
    jQuery.fn.anchorAnimate = function(settings) {
     
     	settings = jQuery.extend({
    		speed : 500
    	}, settings);	
     
    	return this.each(function(){
    		var caller = this
    		$(caller).click(function (event) {	
    			event.preventDefault()
    			var locationHref = window.location.href
    			var elementClick = $(caller).attr("href")
     
    			var destination = $(elementClick).offset().top;
    			$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
    				window.location.hash = elementClick
    			});
    		  	return false;
    		})
    	})
    }
    your help is appreciated
    Last edited by Stevie D; Nov 1, 2012 at 06:58. Reason: Code tags added

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hi azhar05hk. Welcome to the forums.

    The key thing you've missed out (or at least, not posted here) is that you need to place those hrefs as IDs on each section. E.g.

    Code:
    <section id="intro">
    Otherwise the link doesn't point to anything.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you Please explain me indetail

  4. #4
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.anchor.js" type="text/javascript"></script>
    <script src="js/jquery.fancybox-1.2.6.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    << onload="MM_preloadImages('images/fb_onhover.png','images/tw_onhover.png','images/sk_onhover.png')">
    'images/fb_onhover.png','images/tw_onhover.png','images/sk_onhover.png')">
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <body>
    <header><!-----Header Area Code Starts Here-------->
    <div id="headerarea">
    <div id="logo">
    <a class="introlink anchorLink" href="#intro"><img src="images/logo.png" width="131" height="28" /></a>
    </div>   
    <div class="navbg">
    <nav> 
        			<ul>
        				<li><a class="introlink anchorLink" href="#intro">intro</a></li>
        				<li><a class="portfoliolink anchorLink" href="#portfolio">about</a></li>
        				<li><a class="aboutlink anchorLink" href="#about">portfolio</a></li>
        				<li><a class="contactlink anchorLink" href="#contact">contact</a></li>
        			</ul>				
        		</nav>
    </div>
    <div id="socialcontainer">
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image68','','images/fb_onhover.png',1)"><img src="images/fb_normal.png" name="Image68" width="32" height="32" border="0" id="Image68" /></a>
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image69','','images/tw_onhover.png',1)"><img src="images/tw_normal.png" name="Image69" width="32" height="32" border="0" id="Image69" /></a>
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image67','','images/sk_onhover.png',1)"><img src="images/sk_normal.png" name="Image67" width="32" height="32" border="0" id="Image67" /></a></div>
    </div>
    </header> <!-----Header Area Code Ends Here-------->
    <section id="contentcontainer"> <!-------Intro Area Code Starts Here----->
        
        	<section id="intro">
            <div id="introcontents" class="fix" >
            <div class="content">
        	<img src="images/hiazhar.png" width="517" height="46" />
            <img src="images/hiazhartagline.png" height="19" width="417" style="margin-top:5px;" />
            <p>What's up! I'm Azhar. Welcome to my portfolio,i specalize in branding & identity design, illustrations, print , web & graphic designs.and this is a showcase of my  virtual home  </p>
            <div class="highlight">more..</div>
            <img src="images/myskills.png" width="158" height="32" style="margin-top:25px" />
            <p>photoshop <span class="highlight">|</span> illustrator <span class="highlight">|</span> indesign <span class="highlight">|</span> flash <span class="highlight">|</span> html <span class="highlight">|</span> css <span class="highlight">|</span> jquery and a some
    1% of php and ajax,yet im continously learning to improve myself</p> 
    <div class="highlight">Download my cv..</div>
    <img src="images/whattheysay.png" style="margin-top:25px" />
    <p><span class="highlight">"</span>He has a great work attitude and willing to undertake any challenge. I will have no hesitation in recommending him for whatever career he pursues<span class="highlight">"</span></p>
    <div class="highlight">more..</div>
    </div>
    <div class="myimage">
    <img src="images/azhar.png" width="113" height="417"/>
    </div>
    </div>
    </section> <!-------Intro Area Code Ends Here----->
    <section id="portfolio"> <!-------About Area Code Starts Here-----> 
    <div id="aboutarea" style="margin-top:1000px;">
    <h1>My name is <span class="highlight">Azhar</span>, I am a Web / Graphic  designer living in India, Chennai. I love solving problems with design, and making great <span class="highlight">new and creative ideas happen</span> with stratergy !!</h1>
    
    <div class="hobbies">
    <div class="box" style="margin-left:0px;">
    <div class="imgicontag">
    <img src="images/musicicon.png" width="55" height="54" />
    <div >
    <ul>MUSICS
    <li>what i listen</li>
    </ul>
    </div>
    </div>
    <div class="sep">
    <img src="images/seperator.png" />
    </div>
    <p>The wonderful group of Rihanna, and <br />
      Avril Lavigne  are one of the best things that have <br />
      happened in music in the <br />
      twenty first century</p>
    <p>Im also a die hard fan of  A.R.Rahman,the<br />
    Oscar Man from India who has changed the entire Music Industry  in India for the <br />
    past decade or so</p>
    </div>
    <div class="box">
    <div class="imgicontag">
    <img src="images/movieicon.png" width="55" height="54" />
    <div >
    <ul>MOVIES
    <li>what i watch</li>
    </ul>
    </div>
    </div>
    <div class="sep">
    <img src="images/seperator.png" />
    </div>
    <p>As you've probably noticed, I'm a Film Geek… <br />
      I'm heavily into it and their works and I'm always interested in what these people<br />
    tend to talk<br />
    </p>
    <p>My favourites are Stanley Kubrick, David Lynch, David Cronenberg, Terry Gilliam, Alfred Hitchcock, Ken <br />
      Russell, Gaspar Noe, Andrei Tarkovsky. <br />
      Alejandro</p>
    </div>
    <div class="box">
    <div class="imgicontag">
    <img src="images/photoicon.png" width="55" height="54" />
    <div >
    <ul>PHOTOS
    <li>what i shoot</li>
    </ul>
    </div>
    </div>
    <div class="sep">
    <img src="images/seperator.png" />
    </div>
    <p>As a photographer, I like to estion everything.<br />
    I like to understand how things work, why they are how they are, and how it affects <br />
    what I do.</p>
    <p>One of my latest ponderings really got me thinking,<br />
      Henri Cartier-Bresson a french photographer said that  &quot;Your first 10,000 photographs are your worst.&quot; <br />
      isn't that intresting?<br />
    </p>
    </div>
    </div>
    </div>
    </section> <!-------About Area Code Ends Here----->
    <section id="about"><!-------Porfolio Area Code Start Here----->
    <div id="portfolioarea" style="margin-top:1000px;">
    <div class="thumarea">
    <div class="thumbheading">
    <img src="images/logoicon.png" width="55" height="54" style="float:left;" />
    <div class="logotext">logo</div>
    </div>
    <div class="thumbs">
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    </div>
    </div>
    <div class="thumarea">
    <div class="thumbheading">
    <img src="images/branding.png" width="55" height="54" style="float:left;" />
    <div class="logotext">branding &amp; stationery</div>
    </div>
    <div class="thumbs">
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    </div>
    </div>
    <div class="thumarea">
    <div class="thumbheading">
    <img src="images/webicon.png" width="55" height="54" style="float:left;" />
    <div class="logotext">web design </div>
    </div>
    <div class="thumbs">
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    </div>
    </div>
    <div class="thumarea">
    <div class="thumbheading">
    <img src="images/printicon.png" width="55" height="54" style="float:left;" />
    <div class="logotext">print &amp; illustration</div>
    </div>
    <div class="thumbs">
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    <img src="images/thumbs.jpg" width="65" height="50" />
    </div>
    </div>
    </div>    				
    </section> <!-------Porfolio Area Code End Here----->
    <section id="contact"> <!-------Contact Area Code Starts Here----->
    <div id="contactarea" style="margin-top:1000px; margin-bottom:1000px;" >
    <h1>the best way to reach me is through email. and you can also <span class="highlight">fill out the form</span> below to <span class="highlight">get a quote</span>, I'll be in touch with you as soon as possible.</h1>
    <div class="formarea">
    <div class="name">
    <div class="label">name</div>
    <div class="inputs">
    <input type="text" onfocus="this.value=(this.value=='Enter Email Here…')? '' : this.value ;" >
    </div>
    </div>
    <div class="name">
    <div class="label">email</div>
    <div class="inputs">
    <input type="text" onfocus="this.value=(this.value=='Enter Email Here…')? '' : this.value ;" >
    </div>
    </div>
    <div class="name">
    <div class="label"> your queries</div>
    <div class="inputs">
    <textarea></textarea>
    </div>
    </div>
    <div class="buttons">
    <img src="images/sendme.jpg" width="76" height="29" />
    <img src="images/reset.jpg" width="47" height="29" style="margin-left:10px;" />
    </div>
    </div>
    <div class="need">
    <div class="needanything">
    <div class="highlight">need Anything Else?</div>
    <div class="sep"><img src="images/seperator.png" /></div>
    </div>
    <p>If you have a question or just want to say hi, drop a line at azhar05hk@gmail.com</p>
    <div class="needanything" style="margin-top:20px;"><div class="highlight">find Me Elsewhere</div>
    <div class="sep"><img src="images/seperator.png" /></div>
    </div>
    <p>when I'm not working, you can find me hanging out at one of the places above.</p>
    </div>
    <div class="testimonials">
    <div class="colon"><img src="images/colon1.png" width="48" height="45"/></div>
    <div class="tescontents">
    <div class="whatthey">
    <div class="highlight">what they " say "</div>
    <div class="sep"><img src="images/seperator.png" /></div>
    </div>
    <p>"You're pretty awesome to work with. Incredibly organized, easy to communicate with, responsive with next iterations, and beautiful work. Easy to recommend you to others, happy to do it."</p>
    <p class="highlight">Ahamed ,  Designlabz</p>
    <p>"He has a great work attitude and willing to undertake any challenge. I will have no hesitation in recommending him for whatever career he pursues"</p>
    <p class="highlight">Ahamed ,  Designlabz</p>
    <div class="colon2"><img src="images/colon2.png" width="48" height="45"/></div>
    </div>
    </div>
    </div>   	    		
    </section>        
    </section> <!-------Contact Area Code End Here----->
    <footer>
    <div class="footersep">
    <div class="fl_left"> copyright 2012 azhar personal portfolio - <span class="highlight">www.zars.me</span></div>
    <div class="fl_right"><a class="introlink anchorLink" href="#intro"><img src="images/gototop.jpg" width="35" height="39" /></a></div>
    <div class="fb-like" data-href="https://www.facebook.com/pages/Zarsme/474780415877696?ref=hl" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
    </div>
    </footer>
    
    </body>
    </html>
    Last edited by Paul O'B; Nov 1, 2012 at 07:00. Reason: Code tags added

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Those links work for me. You have

    <section id="intro">

    etc. which is what you need. So if it is not working for you, something is getting in the way that you have not posted—perhaps the JavaScript. Is this online?

  6. #6
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    does it goes to those specfic areas?

  7. #7
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Problem is all four links goes to the top of the page

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by azhar05hk View Post
    does it goes to those specfic areas?
    For me, they go to those specific areas. I modified my post above:

    if it is not working for you, something is getting in the way that you have not posted—perhaps the JavaScript. Is this online?

  9. #9
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive copied and pasted my entire code,can you help me out please

  10. #10
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anchor Tag not Working

    Guys this is My Entire Code for My Web,

    I Have a Problem,

    I Have 4 Sections,when i click each one of the link it goes to the top of the Page instead of the specific section.

    Your Help is Appreciated
    Last edited by Stevie D; Nov 1, 2012 at 06:59. Reason: No need to repeat the entire code block

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    As mentioned, the code you posted works fine as just HTML. I added in your jQuery code, and it works fine with that, too. It seems to be working perfectly.

  12. #12
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange,Il Copy it in a Thumb Drive and check it in Other Computer,and get back to you guys,

    Thanks inbetween

  13. #13
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,ralph.m

    Didn't make any difference?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    What browser(s) are you using? Make sure to change the doctype. If you are using an old IE browser, remember that HTML5 elements are not supported.

  15. #15
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The markup is malformed (so won't render correctly) which won't help matters. The extra adjacent hyphens in those comment delimiters are invalid too they are supposed to be: <!-- Comment --> don't add more -- or it can cause parsing errors. You'd be better off removing that HTML5 nonsense and using something normative. I'd suggest a DIV perhaps with class value of section, etc. The fragment identifiers would work across the browsers if the markup was normative and valid.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    The markup is malformed (so won't render correctly) which won't help matters.
    Yes, run the page through the validator. And because you are using HTML5 elements, make sure to use the HTML5 doctype:

    <!DOCTYPE html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •