SitePoint Sponsor

User Tag List

Results 1 to 25 of 38

Thread: How do i link?

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    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,716
    Mentioned
    103 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,107
    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,716
    Mentioned
    103 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,107
    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?

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    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.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 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,107
    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,107
    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,107
    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,716
    Mentioned
    103 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,107
    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
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    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...

  14. #14
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    sorry i was disconnected


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
  •