Web Analytics Made Easy -
StatCounter Naming the DIV to open content in that frame/div(?) - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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; Apr 4, 2009, 04:16 PM.
    You can not say you know how to do something, until you can teach it to someone else.

    Comment


    • #3
      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.

      Comment


      • #4
        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!; Apr 4, 2009, 04: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

        Comment

        Working...
        X