Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Naming the DIV to open content in that frame/div(?)

    First of all, don't laugh about my English

    Ok. Let start my 'story'

    I've made a site layout in Photoshop and sliced it in there. In order to write some text I must delete that image and insert a DIV tag. Now, on some pages the site has a submenu on the left site. If i click on that link it refreshes the whole site, but I only want that the place of content resfreshes. Is thit possible?

    I'm a noob

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    using anchor tags for links will refresh the whole page. To another page or to itself. If you really don't want it to refresh the whole page then you need a different page approach than the standard anchor tag. You could use javascript or ajax. Though then your links wouldn't work when people are using browsers without javascript or with javascript disabled. You just do a contetns swap like so.

    Code to put inside your head tags
    Code:
    <script language="javascript" type="text/javascript">
    <!--
    function content_swap(page) 
    {
    	var txt='';
    	switch(page)
    	{
                    case 1 :
    			txt='Some content for your page 1.<br />';
    			txt+='Some more content for your page 1';
    		break;
                    case 2 :
    			txt='Some different content for your page 2<br />';
    			txt+='and more';
    		break;
            }
            document.getElementById('the_div').innerHTML = txt;
    }
    -->
    </script>
    Code inside body tags
    Code:
    <a class="custom anchors" onclick="content_swap(1);">Link 1</a><br />
    <a class="custom achnors" onclick="content_swap(2);">Link 2</a><br />
    
    <div id="the_div">
    	Some content for your page 1.<br />
    	Some more content for your page 1
    </div>
    Last edited by timgolding; 04-04-2009 at 10:16 PM.
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    What's the reason you don't want whole page to refresh?
    You can not say you know how to do something, until you can teach it to someone else.

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Dennis_Ajax View Post
    First of all, don't laugh about my English

    Ok. Let start my 'story'

    I've made a site layout in Photoshop and sliced it in there. In order to write some text I must delete that image and insert a DIV tag. Now, on some pages the site has a submenu on the left site. If i click on that link it refreshes the whole site, but I only want that the place of content resfreshes. Is thit possible?

    I'm a noob
    Yes, you could use javascript to achieve this. Here is a brief javascript example (Or is this AJAX? I don't really know what AJAX is to be honest) of how to change content without reloading a whole page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Replacement Text</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    //<!--
    function ahah(url, target) {
      document.getElementById(target).innerHTML = ' Fetching data...';
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (req != undefined) {
        req.onreadystatechange = function() {ahahDone(url, target);};
        req.open("GET", url, true);
        req.send("");
      }
    }  
    
    function ahahDone(url, target) {
      if (req.readyState == 4) { // only if req is "loaded"
        if (req.status == 200) { // only if "OK"
          document.getElementById(target).innerHTML = req.responseText;
        } else {
          document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
        }
      }
    }
    
    function load(name,div) {
    	ahah(name,div);
    	return false;
    }
    //-->
    </script>
    </head>
    <body>
    <div>
    <a href="#" onclick="load('http://www.google.com', 'manipulated_div');return false;">Click to load text below!</a>
    <div id="manipulated_div"><span>You have not clicked on the link yet, have you?</span></div>
    </div>
    </body>
    </html>
    THIS ALLOWS YOU TO LOAD WHOLE PAGES. It works.
    Last edited by Rowsdower!; 04-04-2009 at 10:39 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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