loading content within same page from link on that page - kinda confusing

[unionguy]

Hey everyone! I have a project I'm working on, need some guidence but didn't know how to word my search before posting so please forgive me.

I'm farely new at creating javascript programs for web site and I have an idea for my webpages to help minimize the amount of scripting and documents for content.

My idea is to have content load within a specific page from a link within the same page without using iframes or creating multiple documents with html and javascript. I want it to be an effecient way for users to view material on my site while minimizing the amount of files on the server and having to create all of this webpages to get my information out to my viewers.

What I want is to have links over to one side of my webpage, and when a viewer clicks on that link the information is called over to the other side of the page within a <div> area (not in a new window or with iframes).

I've checked several different sites for this script or a version (at DynamicDrive, Hotscipts, W3schools under javascript examples, etc.) but was not successful at finding anything like it.

I considered using variables or arrays to hold the content and then have a function call it within the <div> area. I even tried using include(); with php and it didn't work the way I had intended.

If anyone has any ideas on how to go about creating script to do this, please share or point me in the direction to write the script.

I feel that it would benefit web designers of all caliber by proving to be a more efficient way to get content to their viewers while tightening up the work load involved.

 

[misson]

What you're looking for is AJAX. Keep in mind that requiring JS in order to use your site is a bad idea, as some people have JS turned off and others use browsers that don't support JS. Search spiders, for instance, don't support JS and your approach will severely harm a site's search ranking.

JS requirements aside, AJAX has other issues. For instance, your browser has widgets that let the user know when a page is loading. This isn't built in to AJAX, which means you'll need to implement it. If you don't, a user may keep clicking a link, thus interrupting the current request, which will make the user wait longer and waste network resources.

AJAX isn't appropriate for all pages. Use it (mostly) for application-like pages. For other guidelines when to (and not to) use AJAX, read what others say, especially Jesse Skinner.

Though someone beat you to the punch, keep thinking up new techniques. Innovation like that can be a good thing.

 

[unionguy]

I see what you mean with AJAX an js. It's extremely difficult to know which visitors have js enabled and who do not. It's also not fare to force visitors that do not have js enabled to have to.

I believe I have a solution. I'll make one page with all of the info I need to put out, use php to include that to each page and anchor the articles then use css to hide any over flow. I hope that works LOL.

I'll test it out and see if it works well. I may have to use AJAX if nothing else.

Thanks! Will post the outcome.

 

[misson]

"Overflow" has a specific meaning in CSS, but I'm not sure you mean the same thing. Generally, if something is never to show in a page, it shouldn't be part of the page.

Putting a shared element in a single file and including it wherever needed is a time-tested technique (before PHP was CGI, and before CGI was SSI [Server Side Includes]). A more advanced extension of the technique is to use templates, perhaps as part of a CMS (Content Management System).

I was going to note before: reducing the number of files (is that what you meant by "amount of files"?) probably isn't a worthwhile goal. The one advantage is that it can make it easier to find the file that contains something that needs to be changed. However, a well designed site will break down into modules, involving many files organized into many folders. Finding something that needs to be changed can be difficult (that's where design documentation is handy), but makes the change easier as it reduces interdependencies between lines of code and reduces code repetition.