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 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Hash Transition Navigation - Help Please

    Hi All

    I'm using the fantastic turtorial here for my site navigation:

    http://css-tricks.com/6336-dynamic-p...acing-content/

    It's all working wonderfully but I've hit a major stubmling block. After the new page is loaded it won't load an scripts. E.g. I'm using scripts for expanding divs, galleries, contact forms etc and they simply don't run after the page transition

    Let me know if you need a link to my project

    I'm aware the page isn't actually 'refreshed' so I'm asuming they wont fire the standard way by having the script tags in the header (Please correct me if I'm wrong) So my question is how can I get them working once the new page is loaded?

    Script below:

    Code:
    $(function() {
    
        var newHash      = "",
            $mainContent = $("#right"),
            $pageWrap    = $("#wrap"),
            baseHeight   = 0,
            $el;
            
        $pageWrap.height($pageWrap.height());
        baseHeight = $pageWrap.height() - $pageWrap.height();
        
        $("nav").delegate("a", "click", function() {
            window.location.hash = $(this).attr("href");
            return false;
        });
        
        $(window).bind('hashchange', function(){
        
            newHash = window.location.hash.substring(1);
            
            if (newHash) {
                $mainContent
                    .find("#guts")
                    .fadeOut(200, function() {
                        $mainContent.hide().load(newHash + " #guts", function() {
                            $mainContent.fadeIn(200, function() {
                                $pageWrap.animate({
                                    height: baseHeight + $mainContent.height() + "px"
                                });
                            });
                            $("nav a").removeClass("current");
                            $("nav a[href="+newHash+"]").addClass("current");
                        });
                    });
            };
            
        });
        
        $(window).trigger('hashchange');
    
    });
    All help is appreciated
    Thanks in advance

    Craig

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,298
    Thanks
    10
    Thanked 584 Times in 565 Posts
    you have to find all the script tag with a regexp and eval() the contents of each one.

    dig through the Prototype.js lib for a good regexp...

    another trick would be to mod your injected html to id new script tags, and then loop through them once the new content is added.

    ex:

    Code:
    strMyHTML.replace(/<script/gi, "<script title='dirty' " );
    
    document.body.innerHTML=strMyHTML;
    
    
    [].slice.call(document.querySelectorAll("script[title='dirty']")).map(function(a){
      if(a.textContent){ 
         // eval(a.textContent) //eval won't create globals, but string-based setTimeouts will...
       setTimeout(a.textContent, 10);
      }else{  
         var s=document.createElement("script");
         document.body.appendChild(s);
         s.src=a.src;
     } 
    
     a.title="";
    })
    Last edited by rnd me; 10-13-2011 at 04:24 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks rnd

    You'll have to forgive my ignorance, I'm still limited to basic scripts and plugins at the moment

    Had a look at the prototype library and they've got an option for evalScripts:true although I'm struggling to implement it

    Also read up on regexp and eval and from what I understand:

    regexp - search for a string
    eval - evaluate and execute the script

    Would you mind getting me started with an example?

    Lets say I'd like to run the prettyphoto plugin within the ajax generated content

    At the moment the script tag is in the header like so:

    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

    Thanks for your time

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,298
    Thanks
    10
    Thanked 584 Times in 565 Posts
    just eval all the script tags's contents in the new html:

    Code:
    var r=document.body.innerHTML.match(/<script[^>]*>([\S\s]*?)<\/script>/g);
    for(var i=0, mx=r.length;i<mx;i++){
      var txt=r[i].split(">").slice(1).join(">").split("<").slice(0,-1).join("<");
       if(txt){ eval(txt); }
    }
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Brill

    What if they're all in the header of the 'parent' page? They seem to run on page load but as soon as I use the navigation and the transition is complete ..... nothing

    Perhaps a link to my project may help:

    http://www.bluecoast.co.uk/test/temptation

    Thanks

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    **Update

    I also tried your suggestion by doing the following:

    - Added a simple alert script inside the #guts container on the about page

    <script type="text/javascript">
    alert('Hi');
    </script>


    - Included your eval example in the hashchange function

    Code:
    $(function() {
    
        var newHash      = "",
            $mainContent = $("#right"),
            $pageWrap    = $("#wrap"),
            baseHeight   = 0,
            $el;
            
        $pageWrap.height($pageWrap.height());
        baseHeight = $pageWrap.height() - $pageWrap.height();
        
        $("nav").delegate("a", "click", function() {
            window.location.hash = $(this).attr("href");
            return false;
        });
        
        $(window).bind('hashchange', function(){
        
            newHash = window.location.hash.substring(1);
            
            if (newHash) {
                $mainContent
                    .find("#guts")
                    .fadeOut(200, function() {
                        $mainContent.hide().load(newHash + " #guts", function() {
                            $mainContent.fadeIn(200, function() {
                                $pageWrap.animate({
                                    height: baseHeight + $mainContent.height() + "px"
                                });
                            });
                            $("nav a").removeClass("current");
                            $("nav a[href="+newHash+"]").addClass("current");
                        });
                    });
            };
            
        });
        
        $(window).trigger('hashchange');
    	
    	var r=document.body.innerHTML.match(/<script[^>]*>([\S\s]*?)<\/script>/g);
    	for(var i=0, mx=r.length;i<mx;i++){
    	var txt=r[i].split(">").slice(1).join(">").split("<").slice(0,-1).join("<");
    	if(txt){ eval(txt); }
    	};
    
    });
    I'm not sure if you'd expect this to work but it doesn't. Any ideas?

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Mod - Please delete this thread

    I will create a new one to simplify things

    Thank you


  •  

    Posting Permissions

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