SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38

Thread: How do i link?

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post How do i link?

    Hi i just want to ask some help with you,...I have 2 divs, left and right,the left side div contains 3 links
    example

    Link 1
    Link 2
    Link 3

    what i want, if i want to click each links inside the div which is menu it will display the content on the right side div,which is my div content.

    can you help me please how can i achieve on this.Thank you in advance

    Code:
    <div id="menu">
        	
    									<ul>
    									 <li class="header">My Menu</li>
    									 <li><a href="Link1.php"><span>Link 1<span></a></li>
    									  <li><a href="Link2.php"><span>Link 2<span></a></li>
    									  <li><a href="Link3.php"><span>Link 3<span></a></li>
    									  
    									</ul>
    								
    </div>
    
    
    <div id="content">
        Display Here
       
    </div>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi i just want to ask some help with you,...I have 2 divs, left and right,the left side div contains 3 links
    example

    Link 1
    Link 2
    Link 3

    what i want, if i want to click each links inside the div which is menu it will display the content on the right side div,which is my div content.
    Have the separate content in divs each with an identifier, all within the content div, and link the links to each of those divs.

    HTML Code:
    <li><a href="#content1"><span>Link 1<span></a></li>
    <li><a href="#content2"><span>Link 2<span></a></li>
    <li><a href="#content3"><span>Link 3<span></a></li>
    ...
    <div id="content">
        <div id="content1">...</div>
        <div id="content2">...</div>
        <div id="content3">...</div>
    </div>
    That way the links still get you down to the appropriate content when scripting isn't there.

    Then, assign an onclick event to the menu which triggers a function which hides each of the content sections, and then shows the one that the link links to.
    You can also then run that function when the page starts to hide all of the content.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Have the separate content in divs each with an identifier, all within the content div, and link the links to each of those divs.

    HTML Code:
    <li><a href="#content1"><span>Link 1<span></a></li>
    <li><a href="#content2"><span>Link 2<span></a></li>
    <li><a href="#content3"><span>Link 3<span></a></li>
    ...
    <div id="content">
        <div id="content1">...</div>
        <div id="content2">...</div>
        <div id="content3">...</div>
    </div>
    That way the links still get you down to the appropriate content when scripting isn't there.

    Then, assign an onclick event to the menu which triggers a function which hides each of the content sections, and then shows the one that the link links to.
    You can also then run that function when the page starts to hide all of the content.
    Hi,Thank you for the reply,ahm I mean to do this in jquery?I do apologize i am not good in this language i am still learning.I hope you can help me.
    I want that when i clicked the Link1 which is Link1.php this will load to my Div Content which is on the right side.Thank you in advance

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi,Thank you for the reply,ahm I mean to do this in jquery?I do apologize i am not good in this language i am still learning.
    I hope that you don't want me to write the code for you. I can of course though help in other ways.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes i will not let you do that of course you must give me a chance to do this in my own,what i want is to ask some idea on how can i achieve this and please guide me so that i will not be lost.Thank you so much in advance.

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I already include the jquery.js in the head seaction,but what should i use the function in jquery?

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Yes i will not let you do that of course you must give me a chance to do this in my own,what i want is to ask some idea on how can i achieve this and please guide me so that i will not be lost.Thank you so much in advance.
    You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

    When that's done, you can then show the link that was clicked.

    Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

    When that's done, you can then show the link that was clicked.

    Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.

    Okay thank you so much,Iwill try this and i will write back to you as soon as i can.

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

    When that's done, you can then show the link that was clicked.

    Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.


    Hi, i am trying to put some alert so that i can test when i am going to click the link if my code is working,but it failed to alert what is wrong with this?


    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><title>Index</title>
     
    	   <script type="text/javascript" src="jquery.js"></script>
    
    	   <script type="text/javascript">
    	
    		$("div#menu").on("click","a",function()
    		{
    			alert("hello");
    		});
    	</script>
    
      </head>
      <body>
           <div id="menu">	
    	      <ul>
    	            <li class="header">My menu</li>
    		    <li><a href="page1.php"><span>Search name<span></a></li>
    	            <li><a href="page2.php"><span>Search fname<span></a></li>
    	           <li><a href="page3.php"><span>Search lname<span></a></li>
                     
    	     </ul>							
    </div>	
    
    
    <div id="content">
    
    
    </div>
    
    </body>
    
    </html>

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You can use jQuery's .on() method to listen for clicks on the links. The handler that you assign for that can then prevent the default behaviour of the link, after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.

    When that's done, you can then show the link that was clicked.

    Finally, you can also run that handler as a part of starting the page, so that the divs get hidden when the page loads.

    Hi, I am confuse of this and i don't understand what you mean by this
    after which you can use a selector to get all of the links, and then for each of the links you would use the href attribute to hide the div that the link points to.



    This is my code please help me on this. i get stuck

    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><title>Index</title>
     
    	   <script type="text/javascript" src="jquery.js"></script>
    
    	   <script type="text/javascript">
    	
    		 $(function()
    		{
    		   $("div#menu").on("click","a",function(event)
    		    {
    			  event.preventDefault();
    			   $("div#menu a").each(a.attr("href"))
    			   {
    			     
    			   }
    			})
    		});
    	</script>
    
      </head>
      <body>
           <div id="menu">	
    	      <ul>
    	            <li class="header">My menu</li>
    		    <li><a href="page1.php"><span>Search name<span></a></li>
    	            <li><a href="page2.php"><span>Search fname<span></a></li>
    	           <li><a href="page3.php"><span>Search lname<span></a></li>
                     
    	     </ul>							
    </div>	
    
    
    <div id="content">
    
    
    </div>
    
    </body>
    
    </html>

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    This is my code please help me on this. i get stuck
    Sure thing. The each method takes a function, and in that function the this keyword refers to each different element, in this case it's each anchor link in the menu.

    Your HTML needs to be changed so that each link points to a different div. That way your function can get the href attribute from each link with $(this).attr('href') so that you can then use that reference to the div to hide it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Your HTML needs to be changed so that each link points to a different div.
    You mean to do the same in your post no#2?

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    You mean to do the same in your post no#2?
    That's right. It's the best way to connect the link with the section that it's supposed to activate.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    so that you can then use that reference to the div to hide it.
    Why do i hide the div?i want to load the page in the Div with an id of content...example when i click the link "search name" in the menu list.the page1.php will load to the Div id="content".because the page1.php have textboxes and table,and this is something like displaying user profile...just like other links when i click the link fname the page2.php will load to the <div id="content"> and this will display also table and displaying the user fname,age.etc...

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Why do i hide the div?
    The main reason is for when you click on another link. You If link 2 is showing and you click on link 3, you don't want link 2 to still be showing. But when you click link 3 the code doesn't have an easy way to tell which one was already open. So the most effective standard procedure to deal with that is to hide all of the ones that the links point to, and to then show the one that was clicked.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The main reason is for when you click on another link. You If link 2 is showing and you click on link 3, you don't want link 2 to still be showing. But when you click link 3 the code doesn't have an easy way to tell which one was already open. So the most effective standard procedure to deal with that is to hide all of the ones that the links point to, and to then show the one that was clicked.

    Hello , i am confuse on how to hide,is this correct? but it shows to my div content
    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><title>Index</title>
     
    	   <script type="text/javascript" src="jquery.js"></script>
    
    	   <script type="text/javascript">
    	
    		 $(function()
    		{
    		   $("div#menu").on("click","a",function(event)
    		    {
    			  event.preventDefault();
    			  $("div#content li").each(function(){
                                $(this).hide();
                             });
    			})
    		});
    	</script>
    
      </head>
      <body>
           <div id="menu">	
    	      <ul>
    	            <li class="header">My menu</li>
    		    <li><a href="page1.php"><span>Search name<span></a></li>
    	            <li><a href="page2.php"><span>Search fname<span></a></li>
    	           <li><a href="page3.php"><span>Search lname<span></a></li>
                     
    	     </ul>							
    </div>	
    
    
    <div id="content">
      <a href="page1.php"><span>Search name</span></a>
     <a href="page2.php"><span>Search fname</span></a>
     <a href="page3.php"><span>Search lname</span></a>
    
    </div>
    
    </body>
    
    </html>

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    Hello , i am confuse on how to hide,is this correct? but it shows to my div content
    The different parts of your content need to be in separate identified divs.
    Your links need to link to those identified divs.
    Your script needs to go through each of the menu links (not the content ones) and use the link as a selector so that you can hide the target.
    Your script also needs to use the link of the one that was clicked, to show the target of that link.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The different parts of your content need to be in separate identified divs.

    Code:
    <div id="menu">	
    	      <ul>
    	            <li class="header">My menu</li>
    		    <li><a href="page1.php" id="content1"><span>Search name<span></a></li>
    	            <li><a href="page2.php" id="content2"><span>Search fname<span></a></li>
    	           <li><a href="page3.php" id="content3"><span>Search lname<span></a></li>
                     
    	     </ul>							
    </div>	
    
    
    <div id="content">
    
         <div id="content1">
            <a href="page1.php"><span>Search name</span></a>
        </div>
    
        <div id="content2">
              <a href="page2.php"><span>Search fname</span></a>
       </div>
    
       <div id="content3">
            <a href="page3.php"><span>Search lname</span></a>
       </div>
    </div>

    Your script needs to go through each of the menu links (not the content ones)
    Code:
    <script type="text/javascript" src="jquery.js"></script>
    
    	   <script type="text/javascript">
    	
    		 $(function()
    		{
    		   $("div#menu").on("click","a",function(event)
    		    {
    			  event.preventDefault();
    			  $("div#menu a").each(function(){
                                $(this).hide();
                             });
    			})
    		});
    	</script>

    and use the link as a selector so that you can hide the target.
    Your script also needs to use the link of the one that was clicked, to show the target of that link
    I have no idea on this,can you please show me what you mean?

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    and use the link as a selector so that you can hide the target.
    Your script also needs to use the link of the one that was clicked, to show the target of that link
    I have no idea on this,can you please show me what you mean?
    For the first one, see post #2

    After you've done that, it's not $(this) that you need to hide (because $(this) is the link that was clicked on), but instead it is what the link is linking to instead that you need to hide. That's most easily achieved by using this.hash for the selector, which retrieves the fragment identifier from the link. An example of a fragment identifier is "#content2"

    With showing the target of the link, after you've hidden the other ones you need to show the one that the clicked link refers to. So at the end of the function for the click event you will want to use the fragment identifier of the clicked link to show what the link is linking to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    For the first one, see post #2
    if use like this

    Code:
    <li><a href="#content1"><span>Link 1<span></a></li>
    <li><a href="#content2"><span>Link 2<span></a></li>
    <li><a href="#content3"><span>Link 3<span></a></li>
    ...
    <div id="content">
        <div id="content1">...</div>
        <div id="content2">...</div>
        <div id="content3">...</div>
    </div>
    how can i call my page1.php,page2.php and page3.php?

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    how can i call my page1.php,page2.php and page3.php?
    How do you expect a link to trigger the display of content on the page, as well as link to some other location? Are you wanting one link to perform different behaviour at different times?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I do apologize i could not get you,what i want to perform is that every time when i click a link in my menu and that link is calling the page1.php or page2.php
    hre="page1.php" or href="page2.php", this will load into the dive which id is content.

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jemz View Post
    I do apologize i could not get you,what i want to perform is that every time when i click a link in my menu and that link is calling the page1.php or page2.php
    hre="page1.php" or href="page2.php", this will load into the dive which id is content.
    Ahh, well that's very different. You can use jQuery's .load() method for that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    by the way what is inside the div in your post #2?

    div has 3 dotted,or what should i put in that dotted?

  25. #25
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,087
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can use jQuery's .load() method for that.
    Sounds like that will work now for me.hehehe.

    by the ways in you post no#2 how does it behave as i have thought it will load to the div?but you've said now that i will use the .load method?


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
  •