...

View Full Version : Hash Transition Navigation - Help Please



ThatBloke
10-13-2011, 01:05 PM
Hi All

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

http://css-tricks.com/6336-dynamic-page-replacing-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:


$(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

rnd me
10-13-2011, 05:18 PM
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:


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="";
})

ThatBloke
10-17-2011, 12:50 PM
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

rnd me
10-17-2011, 05:10 PM
just eval all the script tags's contents in the new html:


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); }
}

ThatBloke
10-17-2011, 05:58 PM
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

ThatBloke
10-18-2011, 12:31 PM
**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


$(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?

ThatBloke
10-18-2011, 12:55 PM
Mod - Please delete this thread

I will create a new one to simplify things

Thank you



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum