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
    Feb 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax page fetcher load with default

    I'm Using the Ajax page fetcher script from Java Script Kit.
    http://www.javascriptkit.com/script/...efetcher.shtml

    Works Great!! but I can it do this;

    How could I make it load a default page. Now it start off blank. The user need to click to load something. I would like it to start with default content and then the user could switch.

    thanks for any help.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,448
    Thanks
    11
    Thanked 598 Times in 578 Posts
    just put some html in the target div, #demo in the linked demo...
    you can also call the same command that a link triggers in an onload() event to default to one of the links.

    i would consider trying to find something a little newer though. the sub-pages in the said system are not bookmark-able or sharable, are not SEO visible, don't respond to clicking "back", and won't work at all without javascript being enabled.



    you can link to the documents, using a target attrib and an iframe instead of a div. this will work without javascript. using javascript, you hide the iframe, find the links that are to be bound to the ajax (they will have a target attrib on them), and setup click events that load the content at the link's url into the div, just like in the linked demo. alternately, and better, convert the absolute or relative urls in the special links to hash hits (href="#/folder/file.ext"), and use onhashchange() to load the pages. this system responds to back() button clicks, is book-markable and sharable, and since the actual HTML contains valid links, is compliant with SEO techniques.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,448
    Thanks
    11
    Thanked 598 Times in 578 Posts

    Post proper ajax navigation using progressive enhancement

    I have realized there is a lack of good examples of ajax navigation, partial-page refreshes, or whatever you want to call it.


    Here is one simple way to progressively enhance your existing site by adding a script tag, a few extra attribs to some links, and adding an extra hidden iframe to un-hide and use as a viewer for the few % of folks without javascript enabled on their browsers.

    this style of progressive ajax also means that search engines can find the partial-page content, which gives you broader and more targeted reach.

    all you need to do to config the script is change the hash tag on the ezajax.js script to match an attribute of your links.

    the setup scheme is ezajax.js#attrib=value, customize the hash to suit your needs.

    since we use the target attrib to support non-js browsers, it's perfect for signaling to the script that this link fetches a partial page. if you want to match a class attrib, it must be exact and you must use "className" instead of "class" on the config hash.


    This has been tested in IE6, Chrome, and FF8 both with and without javascript.

    view a live demo.

    index.html
    Code:
    <!DOCTYPE html><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title> Simple Ajax Demo: Home </title>
    
    <style type="text/css" media="all">
      #view { display: none; border: 0; width: 99%; height: 6em;   }
    </style>
    
    <script type="text/javascript" src="ezajax.js#target=view"></script>
    
    </head><body>	
    
    <noscript>
      <style type="text/css" media="all">
        #view { display: block; }
      </style>
    </noscript>
    
    <header>
     <h1> About our states </h1>
     <h2> We have pretend operations in Illinois, Ohio, and New York. Click around below to find out more about these places. </h2>
    </header>
    
    <h3>Locations</h3>
    <nav>
     <ul>
      <li><a href="il.html" target="view">Illinois</a></li>
      <li><a href="oh.html" target="view">Ohio<a/></li>
      <li><a href="ny.html" target="view">New York<a/></li>
     </ul>
    </nav>
    
    <hr />
    
    <div id="viewer">
     <iframe width="90%" height="300" name="view" id="view" src="il.html" allowtransparency="true"></iframe>
    </div>
    
    
    <p>Example text contents taken from http://wikipedia.org, please donate!</p>
    
    </body>
    </html>

    ezajax.js
    Code:
    //ez-ajax, by dandavis (danml.com) :: 100% Free for everyone who includes this comment ::
    
    (function boot(){
    
    var 	myTags=document.getElementsByTagName("script"), 
    	ops= (myTags[myTags.length-1].src.split("#")[1]||"target=view").split("="),
      	flagAttrib=	ops[0]||"target" 	,// markup should match this <A> attribute
    	flagValue=	ops[1]||"view"    	;// with this exact value
    
    
    
    function convertLinkstoHashes(){
    	var links=document.links, mx=document.links.length, i=0, x;
    
    	for(i;i<mx;i++){
    	  var a=links[i];
    		if((x=a.href.split(document.domain)[1]) && a[flagAttrib]==flagValue){ a.href="#"+x; a.target=""; }
    	}//next link
    
    }//end convertLinkstoHashes()
    
    
    function onhashchange2(e){
     var hash=location.hash.slice(1);
     if(hash){aGet(hash, painter);}
    };window.onhashchange=onhashchange2;
    
    
    function painter(html){
      //show new content:
      document.getElementById("viewer").innerHTML=html;
    
      //show new title:
      var title=document.title.split(":");
      document.title=title.slice(0,-1).join(":") +": "+ (location.hash||"").replace(/\/$/,"").split("/").slice(-1)[0].split(".")[0];
    }//end painter()
    
    
    function aGet(turl, callback) {
    	if(aGet.pool[turl]){ return callback(aGet.pool[turl]); }
    	var XHRt =  !window.XMLHttpRequest ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
    	XHRt.onreadystatechange = function () {if (XHRt.readyState == 4 && XHRt.status == 200) {callback(aGet.pool[turl]=XHRt.responseText, XHRt);}};
    	XHRt.open("GET", turl, true);
    	XHRt.send("");
    }aGet.pool={};//end aGet()
    
    
    window.onload=function ol(e){
    
       //apply fix for IE6+7:
       if("\v"=="v" && !top.postMessage){
    	var hashcache=location.hash;
    	setInterval(function(){
    		if(hashcache!=location.hash){ 
    			hashcache=location.hash; 
    			onhashchange2();
    	}}, 150);
       }//end if IE<8
    
       convertLinkstoHashes();
       onhashchange2();
    }//end onload()
    
    
    }());
    oh.html
    Code:
    Ohio is a Midwestern state in the United States.[17] The 34th largest state by area in the U.S.,[18] it is the 7th-most populous with over 11.5 million residents,[19] containing several major American cities and seven metropolitan areas with populations of 500,000 or more. The state's capital is Columbus. The Anglicized name "Ohio" comes from the Iroquois word ohi-yo’, meaning "great river".[20][21][22][23][24] The state, originally partitioned from the Northwest Territory, was admitted to the Union as the 17th state (and the first under the Northwest Ordinance) on March 1, 1803.[9][25] Although there are conflicting narratives regarding the origin of the nickname, Ohio is historically known as the "Buckeye State" (relating to the Ohio buckeye tree) and Ohioans are also known as "Buckeyes".[1]


    il.html
    Code:
    Illinois is the fifth-most populous state of the United States of America, and is often noted for being a microcosm of the entire country.[8] With Chicago in the northeast, small industrial cities and great agricultural productivity in central and northern Illinois, and natural resources like coal, timber, and petroleum in the south, Illinois has a broad economic base. Illinois is a major transportation hub. The Port of Chicago connects the state to other global ports from the Great Lakes, via the St. Lawrence Seaway, to the Atlantic Ocean; as well as the Great Lakes to the Mississippi River, via the Illinois River. For decades, O'Hare International Airport has ranked as one of the world's busiest airports. As the "most average state",[8] Illinois has long had a reputation as a bellwether both in social and cultural terms[8] and politics.




    ny.html
    Code:
    New York is a state in the Northeastern region of the United States. It is the nation's third most populous state. New York is bordered by New Jersey and Pennsylvania to the south, and by Connecticut, Massachusetts and Vermont to the east. The state has a maritime border with Rhode Island east of Long Island, as well as an international border with the Canadian provinces of Ontario to the north and west, and Quebec to the north. The state of New York is often referred to as New York State to distinguish it from the city of New York.
    example text contents taken from http://wikipedia.org, please donate!
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #4
    New to the CF scene
    Join Date
    Feb 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    DUDE - WOW - DUDE!!!

    This is so GREAT!

    THANKS . I'll get right into it and post back


  •  

    Posting Permissions

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