PDA

View Full Version : Lifehacker.com like website design?


FethrdWlf
03-28-2011, 03:37 AM
So, if you look at Lifehacker.com (http://www.lifehacker.com), you'll see how they have two parts of the page, having both control each other. If you click on a link in the right-hand one (the smaller sidebar) will load the article or post in the main part of the page. How can I achieve this? Is it possible to do it through iframes?

gentleone
03-28-2011, 07:26 AM
It would be possible with iframes, but SEO wise not recommended. That lifehacker site used AJAX which if code not right it would also not be good for your SEO, but they did a good job because every snippet loads it's own url so SE will crawl those links to the snippets as it were seperate pages.

FethrdWlf
03-29-2011, 02:11 AM
It would be possible with iframes, but SEO wise not recommended. That lifehacker site used AJAX which if code not right it would also not be good for your SEO, but they did a good job because every snippet loads it's own url so SE will crawl those links to the snippets as it were seperate pages.

How can I have it control the main body though?... Kind of like "document.getElementById(main).location.href='...' "? I'm very new to this style of web design, as everything seems to be transitioning to minimalistic.

gentleone
03-29-2011, 06:07 PM
Here's an article that explains how to load external content in a div with AJAX and jQuery:
http://amphee.wordpress.com/2010/11/15/loading-external-content-with-ajax-using-jquery-and-yql/

And if you use it together with the jQuery BBQ plugin you have a user/search engine friendly AJAX driven website.
http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html

Ricky55
03-29-2011, 09:46 PM
A video tut also

http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

FethrdWlf
03-30-2011, 01:40 AM
Here's an article that explains how to load external content in a div with AJAX and jQuery:
http://amphee.wordpress.com/2010/11/15/loading-external-content-with-ajax-using-jquery-and-yql/

And if you use it together with the jQuery BBQ plugin you have a user/search engine friendly AJAX driven website.
http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html

A video tut also

http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/


Thank you to both of you! I will try to find some time today to try those out, and then I'll get back to the Forums to ask more questions (which I will have).

FethrdWlf
03-30-2011, 06:01 AM
Yes! Thank you! It all worked out. I just need to look at a couple more things, but later.

FethrdWlf
04-01-2011, 03:45 AM
Here's an article that explains how to load external content in a div with AJAX and jQuery:
http://amphee.wordpress.com/2010/11/15/loading-external-content-with-ajax-using-jquery-and-yql/

And if you use it together with the jQuery BBQ plugin you have a user/search engine friendly AJAX driven website.
http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html

So now, however, I have my login form inside of an iframe, and I can't exactly figure out how to change the content outside of the iframe with the examples you gave. How can I do that?

gentleone
04-03-2011, 10:53 AM
Why do you use an iframe anyway?
Anyways, I found another interesting AJAX script for you and it might be easier for you to implement, because you don't have to combine two different scripts like the examples I gave you before.

Here is the link to the demo:
http://www.bydust.com/examples/com.bydust.ajax/

Here is the link to the info:
http://www.bydust.com/#/ajaxed-website-automatically-convert-to-ajax-website-combydustajax/

Although with that first AJAX url I gave you in my previous post you can load cross-domain external content either through PHP or through JSON if that's necessary for you.