I was wondering if it is possible to have links target a specific <div> with an ID the way you can have links target specific frames. I only want the one <div> to have stuff load into it when a user clicks a link instead of everything on the page reloading.
Can you target a <div> like a frame?
With HTML? Impossible!
But it´s very easy indeed.
You must use javascripts innerHTML.
You must make a <div> and change its innerHTML to the new content.
Example:
If this is not your solution, use Inline Frames (<iframe>).
You can also include an iframe in a div if you want.
Hope this helped you.
K
But it´s very easy indeed.
You must use javascripts innerHTML.
You must make a <div> and change its innerHTML to the new content.
Example:
| Code: |
|
<html> <head> <script language="JavaScript"> function changeContent() { document.getElementById('yourDiv').innerHTML="Your Content Here!<br><b>HTML Allowed!</b>"; } </script> </head> <body> <div id="yourDiv">Initial Content</div><br> <input type="button" value="CHANGE!" onClick="changeContent()"> </body> </html> |
If this is not your solution, use Inline Frames (<iframe>).
You can also include an iframe in a div if you want.
Hope this helped you.
K
And then if you want it to work fully like an iframe, you could point links to a Javascript function that calls the page via AJAX, and then inserts it into the div (as above). I recommend using a library that handles such things for you in a nice way, such as JQuery (free) (www.jquery.com).
This can be done very nicely. But then, it would not work on browsers without javascript, or with it disabled. Why not use a normal IFrame?
This can be done very nicely. But then, it would not work on browsers without javascript, or with it disabled. Why not use a normal IFrame?
kevinalle, would the javascript you provided work if the button is not within the div where the content will change? I want the menu links to change the content of the center div, which the menu is not in.
Yes,
The function changeContent() does all the work.
You just have to call this function with whatever method you like.
It could be a button, a link, some time, or any other event.
just make sure you can call this function.
(I think it´s a bit more complicated if you try calling the function from another frame)
Experiment!
The function changeContent() does all the work.
You just have to call this function with whatever method you like.
It could be a button, a link, some time, or any other event.
just make sure you can call this function.
(I think it´s a bit more complicated if you try calling the function from another frame)
Experiment!
One quick question: Are iframes compatible with Netscape/Firefox? I alwaystry to make my sites IE and Netscape-compatible (love Netscape). The new version runs the IE engine and Firefox engine, but I want to make sure they work on Firefox as well.
Yes they are.
(I´m almost sure)
I think Iframes is the solution you need.
Obviously iframes are much more cross browser than divs.
(I´m almost sure)
I think Iframes is the solution you need.
Obviously iframes are much more cross browser than divs.
Yeah, I noticed that the divs don't come out right when the paged is viewed with Firefox. There are spaces between them and thus the whole page is out of whack. What i'll have to do is have a browser check when the page loads, and if they are using anything but IE, redirect them to a version of my site that is laid out with tables (or iFrames). I just know that these days frames are a design no-no. But then again so are tables for doing layouts 
Always make an non-supported webpage just in case...
remember to put the link to the other version OUTSIDE the content that youi may not see.
Good luck,
K
remember to put the link to the other version OUTSIDE the content that youi may not see.
Good luck,
K
Is this what you looking for?
http://www.jmaguire.com/downloads/source_code/javascript/client_side_include/
http://www.jmaguire.com/downloads/source_code/javascript/client_side_include/
I don't know . I was looking for a PHP way of doing it. So far my best best is using Ajax to do it. I have a post about this div thing in the php forum of this scripting section too 
. I was looking for a PHP way of doing it. So far my best best is using Ajax to do it. I have a post about this div thing in the php forum of this scripting section too | Quote: |
| Obviously iframes are much more cross browser than divs. |
Oh ! I didn't know that. I was gonna try putting everything in DIV thinking frames might not supported everywhere.
Thanks for the info bro. Know any way to check whether ur site is all browser compatible ? It's really laborious installling all the browsers on the comp and checking out each time
I guess it might be there on some other thread here. I'll go find it. Thanks.
| eday2010 wrote: |
| Yeah, I noticed that the divs don't come out right when the paged is viewed with Firefox. There are spaces between them and thus the whole page is out of whack. What i'll have to do is have a browser check when the page loads, and if they are using anything but IE, redirect them to a version of my site that is laid out with tables (or iFrames). I just know that these days frames are a design no-no. But then again so are tables for doing layouts |
If you are experiencing this, I would suggest running your website through the CSS and HTML validators ont he W3C website. It has been my experience that Firefox has better support for CSS than IE does. My website (which uses CSS2 heavily and an Iframe) Is perfectly viewable under Firefox, Opera, and Safari, BUT requires IE7 (which I believe is still in beta form) to be viewed with out being completely out of wack.
Just use switches
http://poker.ovh.org/switch/
and here is an example (.rar)
http://poker.ovh.org/switch/switch.rar
This is simple PHP script
This sample is in tables but it also works in DIVs whit no problem
You can even use mod_rewrite to change index.php?page=main to main.html or main.php
In this example You have 2 switches for one link (one switch is changing the content in table, and the second one is changing the <title></title> Thanx of that - You may ad a diffrent titles, keywords and descriptions for each page )
http://poker.ovh.org/switch/
and here is an example (.rar)
http://poker.ovh.org/switch/switch.rar
This is simple PHP script
This sample is in tables but it also works in DIVs whit no problem
You can even use mod_rewrite to change index.php?page=main to main.html or main.php
In this example You have 2 switches for one link (one switch is changing the content in table, and the second one is changing the <title></title>
Thanx of that - You may ad a diffrent titles, keywords and descriptions for each page )| Quote: |
| You can even use mod_rewrite to change index.php?page=main to main.html or main.php |
mod_rewrite?
That interested me. I looked up php.net for it, but it doesn´t seem to be any PHP function. How do you use it?
Thanks,
K
| kevinalle wrote: | ||
mod_rewrite? That interested me. I looked up php.net for it, but it doesn´t seem to be any PHP function. How do you use it? Thanks, K |
It's not PHP
You place rules in .htaccess file on server (this is server configuration file)
Here You are a little tutorial:
http://www.sitepoint.com/article/guide-url-rewriting
what is so special about ajax? i hear people talking about it all the time... although i've never actually seen code for ajax or anything.... can someone fill me in?
Ajax is really a combination of things...
Often Javascript and xml or javascript and another serverside language.
The idea is that, when the user clicks a link, the javascript asks for the content via xmlHttpRequest (which is passed to the xml doc) and uses the DOM to change the content.
Unless you are developing high-interactivity type products, there is no real reason why you should need to know about ajax, but if you want to read more try wikipedia.
Often Javascript and xml or javascript and another serverside language.
The idea is that, when the user clicks a link, the javascript asks for the content via xmlHttpRequest (which is passed to the xml doc) and uses the DOM to change the content.
Unless you are developing high-interactivity type products, there is no real reason why you should need to know about ajax
, but if you want to read more try wikipedia.You may use PHP? 
| bnbrown wrote: |
| You may use PHP? |
I have never used ajax myself, as I've never designed a site where it really would have been handy, however, yea...I think you can.
I may be wrong though...
| Shike wrote: |
| If you are experiencing this, I would suggest running your website through the CSS and HTML validators ont he W3C website. It has been my experience that Firefox has better support for CSS than IE does. My website (which uses CSS2 heavily and an Iframe) Is perfectly viewable under Firefox, Opera, and Safari, BUT requires IE7 (which I believe is still in beta form) to be viewed with out being completely out of wack. |
The thing is my code validates (except for a missing "alt" tag), in HTML and CSS. My page renders fine in IE7 and Netscape 8 using the IE render engine, but not when using the Firefox engine. Plus when I had IE6 installed, there was a gap at the bottom of the page that's not supposed to be there.
So does anyone else have a suggestion for laying out a page without using tables (which is apparently a no-no), or using divs that don't seem to cooperate in Firefox? Here is my test site:
http://www.wnstudios.ca/test/index2.html
View it in Firefox and in IE (6 or 7) and you'll see what it's doing to me. I am hoping there is another method for laying it out the way I have it (and the reason it's layed out like that is because all content will be loaded into the center of the page while everything else is not re-loaded.
| eday2010 wrote: |
| ...or using divs that don't seem to cooperate in Firefox? Here is my test site: |
I can see that it doesnt display the way you want it to in firefox, but that doesnt meen that its working badly in firefox. div's work perfectly in firefox as far as i know - only certain things like display: inline-div and other obscure but useful css attributes arent yet incorporated.
Program for firefox, then correct the way it looks in IE - thats BY FAR the easiest way to go.
When I get it to work in both, I still have a problem with how it displays in Firefox. When everything lines up, there are gaps inbetween some divs.
I think that for now, I will lay out the site with tables, and once the site id done and up, go back and try to use divs. These divs have caused nothing but problems. At least that way I can work on the rest of the stuff I still have to do.
I think that for now, I will lay out the site with tables, and once the site id done and up, go back and try to use divs. These divs have caused nothing but problems. At least that way I can work on the rest of the stuff I still have to do.
Yea, I have had some of the same problems... but when you are using tables be sure to set the cellpadding and cellspacing attributes!
I set them all to zero 
. I am having an issue with a thin gap between my recond and third columnin my main table. I have a table within the main one and I think somehow that is causing the thin gap, though I have no problems elsewhere.
. I am having an issue with a thin gap between my recond and third columnin my main table. I have a table within the main one and I think somehow that is causing the thin gap, though I have no problems elsewhere.The best way to do this would obviously be ajax, which i taught myself a few weeks ago. it outputs whatever you want i the <div> tag, but it is fairly advanced. As said I would use iframes. Even though you said you don't want the page to reload, the way i usually make content on a page change is is a little php script. Put this where you ant content to be put.
have all your urls be like so http://myhost.com/index.php?page=something.php
| Code: |
|
<? $page = $_GET['page']; if($page == null){echo "default.php";}else{echo $page;} ?> |
have all your urls be like so http://myhost.com/index.php?page=something.php
 |