CSS/Ajax Help
- Started
- Last post
- 13 Responses
- dMullins
Trying to find a way to load content/HTML pages into my #stage div here:
http://www.dylanmullins.com/arch… (ignore the logotype treatment, this is in-progress)
I tried implementing these scripts to load the content via Ajax, but even when using loadobjs, the pages are loading un-styled, and without functionality.
http://www.dynamicdrive.com/dyna…
I'm sure I managed to mess something up along the way and broke it, but I was wondering if anyone had a recommendation for a similar solution that I could compare the above example/script to.
- acescence0
uh, you're already using jquery?
you know jquery does ajax...
$("#stage").load("page.html");
- dMullins0
Sorry, I'm far from an expert.
- dMullins0
Do you think you could expand on that snippet you posted? How do I link that to an onclick in my UL/LI structure?
- acescence0
paste this into a script tag in the head of the doc. it will apply a function to all anchors inside li's inside a ul with the id of nav. it will take the href of the anchor and load it into #stage. i think. i didn't actually test it.
- dMullins0
I must be doing something wrong that's very obvious, because the results that I got when using your code are similar to the results I got when I followed the tutorial that I linked above.
Thanks for the help. If you have any other ideas, I'd love to hear em. I went ahead and uploaded a newer version with your changes saved.
- dMullins0
The first link in the navigation is the only that is active and using your script right now.
- acescence0
ok, i understand what you mean. the problem is that your main page contains stuff that renders things via javascript that isn't executing when content loaded via ajax is inserted, it only fires when the main page is loaded. things like applying click functions to things can be remedied by using what are called "live" events in jquery...
http://docs.jquery.com/Events/li…
for the other bits, i think you can apply the js with a callback function that will execute when the ajax content is loaded...
$("#stage").load(theurl, , function(){
// do some js stuff here to the things you just loaded
});and i gotta run, sorry!
- airey0
hey acescence, i know it's been asked before but could you recommend a good place to start with jquery from a designers (ie: low brain cell count) pov?
- dMullins0
Might be what I need too, Airey. I know what I want done, and it seems pretty straight-forward, but it seems there's a missing link somewhere I'm not understanding.
- acescence0
modify the load function as i've noted above and insert the Cufon.replace(); calls. that should style that stuff when the ajax is loaded.
the slideviewer isn't working because the code that creates the slideviewer is not present nor fires when the ajax content loads.
move the bit of code that creates the slideviewer into the head of the doc . then change (window).bind to ("#stage").bind and that will apply the slideviewer code whenever #stage's load event fires.
airey- not sure what i'd recommend. i already knew js before jquery, learned the jquery basics thru the "15 days of jquery" site a long time ago, then read the documentation site front to back
- dMullins0
I tested out a number of things, but none of them worked out quite right. I think I will have to resort to just reloading the whole page everytime, which is what I wanted to avoid.
Thanks a bunch acescence, I will come back to this later, and try to figure it out then.
- acescence0
i got the first link working here...
http://culturekiller.com/dm.html…
also check the source of the page it's loading, i changed that as well. that Cufon thing is stubborn, couldn't get it to behave exactly how i'd like, but it seems to all be working.
- dMullins0
Thanks so much. I really appreciate you doing that for me. I think the onClick load is a much more refined approach, instead of waiting for Cufon and XYZ JS to load every time I want to view a different project.
I owe you a beer. Or a shot. Or a hooker. Whatever your vice is.