PDA

Click to See Complete Forum and Search --> : 1 Change Changes All

youngdesigner
07-30-2007, 08:49 PM
Hello There. I am looking for a code that would allow me to just one page, in which would affect the others. Let me explain. My website has, on the side, a portion for the Awards. Underneith, there is a section where it shows the date and what happened (ex: 8.23.07: 1 new Entry). I display that on all pages (21 pages). Now i am looking for a way that i could just change it on 1 page, in which it affects the rest. So if i change it on say index.htm, it changes on all other pages. This would save me a ton of time, and would benefit the site.

i however do not want to use iframes, or any other frames to do this. If it is possible, it would be awesome to have in css, javascript, or any other "non-webpage' format.

Thank you for you Valiant Efforts!
kasey
07-31-2007, 07:54 AM
hey :) you could write the awards section in a seperate .js and use a function to put it onto your page like this -


***** in the test.js****
function awards () {

document.getElementById('testpage').innerHTML="<img src='pic1.jpg' />"

}
*****in the html*****
<head>
<script language="JavaScript" src="test.js"></script>
</head>
<body onLoad="awards()">

<div id="testpage"></div>


then just use css to position the <div> where you want it to be

when your are puting the html into the javascript remember that all of the lines must look like this and have ' instead of " in the html
document.getElementById('testpage').innerHTML="normal html here"

then when you want to change it you would just need to change the .js file
youngdesigner
07-31-2007, 09:31 AM
But does this work for an indivisual area of the webpage?
kasey
07-31-2007, 10:33 AM
i'm not sure what you mean

what this script does is add the awards section onto every page you put the html code into. in otherwords when you load the page the javascript writes the awards section into the source code of the html page. the rest of your webpage will still remain as it was.

do you have a link to your site so i can see exactly what you mean?

the best way would be to try it out
back up your pages
write and add the .js file (like i showed in the above post using the code you already have for the awards section)
edit all of your html pages so that where the awards section was it has <div id="testpage"></div> instead and add the code to the head and body section (like in the previous post)
depending on how your page is formated edit the .css or add <style> tags to position the <div>


remember if you are changing the divider id from testpage to change it in the .js aswell
youngdesigner
07-31-2007, 11:16 AM
Allright. The url is http://www.freewebs.com/telpeathsgift/index3.htm

I tried putting in the code, but it wasnt working, maybe once you see the page, you can help just a bit more. I appreciate you for putting time into helping me.
kasey
07-31-2007, 01:10 PM
it works fine when i test it :/, try following these steps to make the changes

in the <head> section of the .html files add this

<script language="JavaScript" src="awards.js"></script>


change the <body> tag to this

<body bgcolor="#5776B6" text="#FFFFFF" onLoad="awards()">


in the .html files where it says

<p></p>
<img src="awards2.gif" />
2/24/07: 1 new entry
<hr>


change it so that it says

<p></p>
<img src="awards2.gif" />
<div id="awardentry" style="font-size: 12pt;"></div>
<hr>



open a new file with notepad and paste this into it and save it as awards.js

function awards () {
document.getElementById('awardentry').innerHTML="2/24/07: 1 new entry"
}



upload all the files to your server


then when you want to change it open the awards.js and change what it says between the " 's like this

document.getElementById('awardentry').innerHTML=" ****what you want here**** "
youngdesigner
07-31-2007, 02:45 PM
after following your steps it worked. Thanks for giving me a step by step solution. I found that way really helped. Thanks so much. It seems like it will make things just a bit easier!

---|YoungDesigner
kasey
07-31-2007, 03:28 PM
your welcome :)

glad it's working now
youngdesigner
08-01-2007, 07:29 PM
kasey, i have a question for you. Is it possible to have multiple of these codes on a page. If so, how would i be able to do it?
kasey
08-01-2007, 08:43 PM
yeah really easy to do :) i'm assuming you mean for different sections of the webpage?
to do it -
in the HTML file find where the section is and replace it with this

<div id=" ***div id*** "></div>

change the ***div id*** to what you want it to be called (make it something simple that refers to that section , makes it much easier to edit later on , but dont name it the same as another divider)


in the awards.js file add this

function ***functionname*** () {
document.getElementById(' ***div id*** ').innerHTML=" ***what you want it to say*** "
}

change the ***functionname*** to what you want it to be called (again something simple and refering to the section)
if you need more than one line of HTML then just copy the document.getEl.... line and paste it before the }
when editing the ***what you want it to say*** put in your html as normal but remember to use ' instead of "


in the HTML file edit the <body tags like this

<body bgcolor="#5776B6" text="#FFFFFF" onLoad="awards(); ***functionname***()">
eg.
<body bgcolor="#5776B6" text="#FFFFFF" onLoad="awards(); thissection()">

all the new functions you add must be seperated by a ;


and thats it :P
youngdesigner
08-02-2007, 10:26 AM
Thanks For your Help! This is awesome!

EDIT: What about the section where i placed <script language="JavaScript" src="awards.js"></script>

How would i change that to being correct?
youngdesigner
08-02-2007, 10:39 AM
Also, why can i not put links in the javascript code?
kasey
08-02-2007, 10:11 PM
your welcome :)
and aslong as you dont change the name of the file from awards.js you dont need to add another one to your page, that line of code just tells the webpage to access that file, so just add your new functions into the awards.js

not sure what you mean , you can put links into the javascript like this if this is what you mean

document.getElementById(' ***div id*** ').innerHTML="<a href='www.bbc.co.uk'>bbc</a>"

it may be that you were using " instead of ' , because the code already uses " to define what it is thats to be wrote onto the page putting a " in makes the line of code finish before it should. the ' works just the same as " in the code and doesn't end the line early
eg.
document.getElementById(' ***div id*** ').innerHTML="<a href="www.bbc.co.uk">bbc</a>"
if you done it that way only - <a href= - would be wrote into the html
youngdesigner
08-02-2007, 10:41 PM
Thanks so much...it does exactly what i was looking for. Thanks for all the time you put in helping me! I really appreciate it!