Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Wizard1988 · Feb 24th, 2007, 11:00 PM

I have a page which lists information on courses Link. I am trying to create a back to top link after the information for each course.

Each section describing a course looks like this

(Toggle Plain Text)

<div class="article">
    <div class="courseTitle">SCI202    CHEMISTRY 1.0 Cr.<a name="chemistry" id="chemistry"></a></div>
    <div class="courseCategory">Prereq:</div>
    <div class="content">Having passed Integrated Physics and Algebra 1 or Algebra A-B.</div>
<div class="courseCategory">Description:</div>
    <div class="content">
        <p>This course is designed for sophomores who have successfully completed Integrated Physics and Algebra 1 or Algebra A-B.  The subject matter includes the study of the following topics: scientific methods, matter, energy, atoms (behavior and interactions), periodic table, gases, liquids, solids and stoichiometry.  This course is designed to give the student an overview of the basic concepts of chemistry, including how chemistry relates to biology, physics, and earth science.  Students will use various forms of technology to collect, analyze, and report data.</p><p><strong>This course is required and is a prerequisite for biology.</strong></p>
</div>
</div>

How would I go about adding a .backUp element after the last content section within the article?

Any hints or tips are welcome.

Arevos · Feb 25th, 2007, 6:38 AM

Place something like:

 html Syntax (Toggle Plain Text) 
<a name="top"/>
<a name="top"/>

At the top of the page, and:

 html Syntax (Toggle Plain Text) 
<a href="#top">Back to top</a>
<a href="#top">Back to top</a>

At the bottom.

Wizard1988 · Feb 25th, 2007, 8:38 AM

I know I can do that. However I am looking for a way to automatically add that link after every section describing a class. I hope this clears things up.

Arevos · Feb 25th, 2007, 10:53 AM

Oh, I see. I'd recommend first getting Prototype, which is a widely used javascript library that makes tasks like these so much easier. And then maybe something like:

 javascript Syntax (Toggle Plain Text) 
document.getElementsByClassName("article").each(function(article) {
    new Insersion.Bottom(article,
        '<div class="content"><a href="#top">Return to top</a></div>')
}
document.getElementsByClassName("article").each(function(article) {
    new Insersion.Bottom(article,
        '<div class="content"><a href="#top">Return to top</a></div>')
}

Wizard1988 · Feb 25th, 2007, 11:05 AM

I actually figured it out, but it was much messier than what you did. I think I will check out Prototype.

Thanks.

Feb 24th, 2007, 11:00 PM	#1
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 417 Rep Power: 4	Adding div elements with JavaScript I have a page which lists information on courses Link. I am trying to create a back to top link after the information for each course. Each section describing a course looks like this (Toggle Plain Text) <div class="article"> <div class="courseTitle">SCI202 CHEMISTRY 1.0 Cr.<a name="chemistry" id="chemistry"></a></div> <div class="courseCategory">Prereq:</div> <div class="content">Having passed Integrated Physics and Algebra 1 or Algebra A-B.</div> <div class="courseCategory">Description:</div> <div class="content"> <p>This course is designed for sophomores who have successfully completed Integrated Physics and Algebra 1 or Algebra A-B. The subject matter includes the study of the following topics: scientific methods, matter, energy, atoms (behavior and interactions), periodic table, gases, liquids, solids and stoichiometry. This course is designed to give the student an overview of the basic concepts of chemistry, including how chemistry relates to biology, physics, and earth science. Students will use various forms of technology to collect, analyze, and report data.</p><p><strong>This course is required and is a prerequisite for biology.</strong></p> </div> </div> <div class="article"> <div class="courseTitle">SCI202 CHEMISTRY 1.0 Cr.<a name="chemistry" id="chemistry"></a></div> <div class="courseCategory">Prereq:</div> <div class="content">Having passed Integrated Physics and Algebra 1 or Algebra A-B.</div> <div class="courseCategory">Description:</div> <div class="content"> <p>This course is designed for sophomores who have successfully completed Integrated Physics and Algebra 1 or Algebra A-B. The subject matter includes the study of the following topics: scientific methods, matter, energy, atoms (behavior and interactions), periodic table, gases, liquids, solids and stoichiometry. This course is designed to give the student an overview of the basic concepts of chemistry, including how chemistry relates to biology, physics, and earth science. Students will use various forms of technology to collect, analyze, and report data.</p><p><strong>This course is required and is a prerequisite for biology.</strong></p> </div> </div> How would I go about adding a .backUp element after the last content section within the article? Any hints or tips are welcome. __________________ JG-Webdesign

Feb 25th, 2007, 6:38 AM	#2
Arevos Programming Guru Join Date: Aug 2005 Location: England Posts: 1,499 Rep Power: 5	Place something like: html Syntax (Toggle Plain Text) <a name="top"/> <a name="top"/> At the top of the page, and: html Syntax (Toggle Plain Text) <a href="#top">Back to top</a> <a href="#top">Back to top</a> At the bottom.

Feb 25th, 2007, 8:38 AM	#3
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 417 Rep Power: 4	I know I can do that. However I am looking for a way to automatically add that link after every section describing a class. I hope this clears things up. __________________ JG-Webdesign

Feb 25th, 2007, 10:53 AM	#4
Arevos Programming Guru Join Date: Aug 2005 Location: England Posts: 1,499 Rep Power: 5	Oh, I see. I'd recommend first getting Prototype, which is a widely used javascript library that makes tasks like these so much easier. And then maybe something like: javascript Syntax (Toggle Plain Text) document.getElementsByClassName("article").each(function(article) { new Insersion.Bottom(article, '<div class="content"><a href="#top">Return to top</a></div>') } document.getElementsByClassName("article").each(function(article) { new Insersion.Bottom(article, '<div class="content"><a href="#top">Return to top</a></div>') }

Feb 25th, 2007, 11:05 AM	#5
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 417 Rep Power: 4	I actually figured it out, but it was much messier than what you did. I think I will check out Prototype. Thanks. __________________ JG-Webdesign

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
disable 'backspace' key in Javascript.	pushkarajthorat	JavaScript and Client-Side Browser Scripting	1	Dec 26th, 2006 6:01 AM
Hidden unless Javascript enabled?	Writlaus	JavaScript and Client-Side Browser Scripting	3	Apr 25th, 2006 10:52 PM
Javascript alternative?	Writlaus	JavaScript and Client-Side Browser Scripting	32	Apr 21st, 2006 12:44 AM
HTML page not reading external Javascript file	aznluvsmc	JavaScript and Client-Side Browser Scripting	9	Nov 21st, 2005 9:17 PM

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Adding div elements with JavaScript