How to link towards a div tag?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Jan 2008
Posts: 1
Reputation: DakDuif is an unknown quantity at this point 
Solved Threads: 0
DakDuif DakDuif is offline Offline
Newbie Poster

How to link towards a div tag?

 
0
  #1
Jan 10th, 2008
hey ^_^ i really hope you guys can help me. Ill try to explain as clear as possible.

Ok, so what I did was; I took a free web template, and tried to adjust it to the website i've been requested to make.

What you see below is this window:


Basically, I placed the whole text inside this code, but I realise it'd be better if I'd make it a page the scrollwindow call to.

So, what I'm trying to do is:
Make a link from the left linklist open a new page to the right scrollwindow without refreshing the whole page (this has to do with background music which will applied later on.)



I know it's pretty annoying with the whole page, but uhm, I really hope you can help me ^_^;;

Here's where the site in construction is placed:
css style sheet
html page
images

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6.  
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  9.  
  10. <title>Magical Awakenings :~Merry Meet~</title>
  11. <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
  12.  
  13. </head>
  14.  
  15. <body>
  16. <div id="wrapper">
  17.  
  18. <div id="header">
  19. <div id="logo" style="position: absolute; left: 312px; top: 42px">
  20. <img src="images/title.jpg">
  21. </div>
  22.  
  23. <div id="nav" style="position: absolute; left: 285px; top: 237px; height: 10px">
  24. <ul>
  25. <li><font face="Monotype Corsiva" size="2"><a href="http://www.freewebsitetemplates.com/">MEN</a> |
  26. </font> </li>
  27. <li><font face="Monotype Corsiva" size="2"><a href="http://www.freewebsitetemplates.com/">WOMEN</a> |
  28. </font> </li>
  29. <li><font face="Monotype Corsiva" size="2"><a href="http://www.freewebsitetemplates.com/">GIRLS</a> |
  30. </font> </li>
  31. <li><font face="Monotype Corsiva" size="2"><a href="http://www.freewebsitetemplates.com/">BOYS</a> |
  32. </font> </li>
  33. <li><font face="Monotype Corsiva" size="2"><a href="http://www.freewebsitetemplates.com/">ACCESSORIES</a> |
  34. </font> </li>
  35. <li><font face="Monotype Corsiva" size="2"><a href="http://www.freewebsitetemplates.com/">CONTACT US</a></font></li>
  36. </ul>
  37. </div>
  38.  
  39. </div>
  40. <div id="body">
  41. <div id="categories">
  42. <h2>Categories</h2>
  43. <ul>
  44. <li><a href="http://www.freewebsitetemplates.com/">Formal Dresses</a></li>
  45. <li><a href="http://www.freewebsitetemplates.com/">Party Dresses</a></li>
  46. <li><a href="http://www.freewebsitetemplates.com/">Summer Special</a></li>
  47. <li><a href="http://www.freewebsitetemplates.com/">Cocktail Dresses</a></li>
  48. <li><a href="http://www.freewebsitetemplates.com/">Formal Ware</a></li>
  49. <li><a href="http://www.freewebsitetemplates.com/">Winter Special</a></li>
  50. <li><a href="http://www.freewebsitetemplates.com/">Regular Ware</a></li>
  51. <li><a href="http://www.freewebsitetemplates.com/">Night Dress</a></li>
  52. <li><a href="http://www.freewebsitetemplates.com/">Sports Dress</a></li>
  53. <li><a href="http://www.freewebsitetemplates.com/">Wedding Dress</a></li>
  54. <li><a href="http://www.freewebsitetemplates.com/">Jeans</a></li>
  55. </ul>
  56. </div>
  57. <div id="seasonal">
  58. <div class="inner">
  59. <div style="overflow:auto; height:350px; width:450px;">
  60. <div class="fw-container">
  61. <div class="fw-with-mini fw-content">
  62. <table cellSpacing="0" cellPadding="0" width="90%" border="0" id="table1">
  63. <thead>
  64. <tr>
  65. <td onmouseover="this.style.backgroundColor='#EFEFEF';" onmouseout="this.style.backgroundColor='';" align="left">
  66. <table id="table2" cellSpacing="0" cellPadding="0" width="90%" border="0">
  67. <tr>
  68. <td>
  69. <div class="fw-paragraph">
  70. <h2>UNDER CONSTRUCTION
  71. </h2>
  72. <div class="fw-text">
  73.  
  74. <p>
  75. <img style="WIDTH: 92px; HEIGHT: 70px" height="32" src="../../images.freewebs.com/Images/Smilies/Round/biggrin.gif" width="74"><font size="5">WELCOME
  76. TO MAGICALAWKENINGS<img height="67" src="../../images.freewebs.com/Images/Smilies/Round/biggrin.gif" width="85"></font></p>
  77. <p><font size="5">
  78. <img height="50" src="../../images.freewebs.com/Images/Smilies/Round/exclamation.gif" width="52">&nbsp;<font color="red">There
  79. are alot of change's going on with
  80. this site..and there all good</font><img height="44" src="../../images.freewebs.com/Images/Smilies/Round/exclamation.gif" width="50">&nbsp;</font></p>
  81. <p><font size="5">
  82. <img height="39" src="../../images.freewebs.com/Images/Smilies/Round/huh.gif" width="52">&nbsp;<font color="red">Please
  83. excuse the mess</font><img height="43" src="../../images.freewebs.com/Images/Smilies/Round/huh.gif" width="47">..
  84. <font color="red">we are adding and
  85. changing things and moving things
  86. around.</font> So if you are looking
  87. for something and you cant seem to
  88. find it no worries its still here
  89. its just been moved around abit. No
  90. we arn't removing any thing from&nbsp;the
  91. site..&nbsp;well.,&nbsp;at least we dont think
  92. so..<img height="42" src="../../images.freewebs.com/Images/Smilies/Round/unsure.gif" width="62">&nbsp;Dont
  93. worry the changes wont be that bad
  94. we will still be the same old site
  95. but better<img height="45" src="../../images.freewebs.com/Images/Smilies/Round/cool.gif" width="54">.</font></p>
  96. <p><font size="5">
  97. <img height="59" src="../../images.freewebs.com/Images/Smilies/Round/exclamation.gif" width="56"><font color="red">BUT
  98. LOOK AT&nbsp; THE <font size="6">NEWS
  99. THINGS THAT ARE COMING!</font></font></font></p>
  100. <p><font size="5">We will have a
  101. <font color="red" size="6">BIGGER
  102. variety </font>of all kinds of
  103. <font color="black">wiccan
  104. information</font>, more&nbsp;tarot
  105. information. &nbsp;<font color="red"><font size="6">MORE</font>
  106. </font>spells, oils,&nbsp;herbs mix's/
  107. powder&nbsp;and a <font color="red">
  108. NEW&nbsp;RECIPE&nbsp;LIST,<font color="black">and
  109. a</font> BIGGER BETTER
  110. <font color="black">suggested
  111. reading list, a&nbsp;</font>NEW
  112. SUGGEST&nbsp;WEB LIST/LINKS </font>
  113. <font color="black">to other wiccan
  114. web site that we&nbsp;have found
  115. helpfull.&nbsp;<font color="red">AND NOW
  116. WE&nbsp;ARE GOING TO ADD OUR OWN
  117. PERSONAL&nbsp;EMAIL ADRESS </font>SO THAT
  118. YOU CAN REACH US ANY TIME&nbsp;FOR ANY
  119. WICCAN NEED. ALSO <font color="red">
  120. NEW</font> <font size="4">IF YOU
  121. HAVE ANY QUESTIONS YOU CAN ASK THEM
  122. AND <font color="red">WE WILL ANSWER
  123. THEM </font>AND&nbsp; <font color="red">
  124. WE WILL POST IT ON THE QUESTION PAGE
  125. UNLESS YOU SAY OTHER WISE</font>.
  126. YOU CAN DO THAT <font color="red">2
  127. WAYS YOU CAN EMAIL </font>US OR
  128. <font color="red">WRITE IT IN THE
  129. QUESTION IN THE GUEST BOOK!!&nbsp; </font>
  130. </font></font></font></p>
  131. <p><font color="black" size="5">
  132. <img style="WIDTH: 54px; HEIGHT: 56px" height="41" src="../../images.freewebs.com/Images/Smilies/Round/biggrin.gif" width="110">&nbsp;&nbsp;<font color="red">LOOKIE!!!
  133. LOOKIE!!!!</font><img style="WIDTH: 71px; HEIGHT: 55px" height="65" src="../../images.freewebs.com/Images/Smilies/Round/biggrin.gif" width="54">HURRAY!!!
  134. YIPPIE!!</font></p>
  135. <p><font color="red" size="5">
  136. FINALY!!! NOW WE HAVE A FEW THINGS
  137. TO SELL!!! <font color="#000000">But
  138. it is only temporary because we want
  139. to see how it goe's were going &quot;to
  140. test the waters&quot; so speak. We would
  141. like to sell home made candles, herb
  142. mix's, oils,and magic kits.&nbsp;That are
  143. home made and blessed by the wiccans
  144. that are part of this&nbsp; web site
  145. (raven, annatris, anjileak, willow)
  146. and we will tell you who exactly
  147. made it&nbsp;and blessed them and what
  148. its for!! </font></font></p>
  149. <p><font color="red" size="5">
  150. <font color="#000000">Yes we know
  151. that there are other wiccan ppl that
  152. sell these things but one thing is
  153. differnt with us <font color="red">
  154. we wont charge you an arm and a
  155. leg!! </font>That reminds me
  156. also&nbsp;another&nbsp;<font color="red">NEW
  157. THING WE WANT TO DO..</font>&nbsp;if
  158. there is something that you need and
  159. dont see it on our site or there is
  160. something that you need just email
  161. us any time and tell us what you
  162. need and will be glad to help you
  163. example (herbs, oils, what ever) and
  164. we will make it, bless it and send
  165. it to you. </font><font color="red">
  166. NEW&nbsp;also go's with the spells if you
  167. need a spell or oil or what ever and
  168. we dont have it on the site email us
  169. and we will be more than happy to
  170. email the reipe or the spell or even
  171. mail it to you if you wish 4 free<img src="../../images.freewebs.com/Images/Smilies/Round/exclamation.gif">.</font><font color="black">I
  172. know we said the sale part was
  173. temporary how ever the&nbsp;email is
  174. going to be a permanent thing.NEW:
  175. </font>
  176. <font face="georgia" color="black">
  177. you can also email us any spells you
  178. have that you would like to share
  179. that goes for oils, herbs and what
  180. not. And OF CORSE <font color="red">
  181. YOU WILL GET THE CREIDT ITS ONLY
  182. RIGHT !!!&nbsp;And this also goe's for
  183. any poems or what ever else you wish
  184. to share</font></font></font></p>
  185. <p><font size="5">We are very
  186. excited about all the new changes
  187. and hope that you are to and that
  188. you enjoy the site...</font></p>
  189. <p><font size="5">So dont let the
  190. constuction ruin your visit please
  191. feal free to look around and enjoy
  192. your visit.</font></p>
  193. <p><font size="5">Sincerely....
  194. </font></p>
  195. <p>&nbsp;</p>
  196. <p>
  197. <img src="../../www.freewebs.com/magicalawakenings/wiccan%20hat.gif" border="0"><font face="georgia" size="5">Raven,
  198. Annatris, Anjileak, Willow</font></p>
  199. <p>&nbsp;</p>
  200. <p>&nbsp;</p>
  201. <p>&nbsp;</p>
  202. </div>
  203. </div>
  204. </td>
  205. </tr>
  206. </table>
  207. </td>
  208. </tr>
  209. </thead>
  210. </table>
  211.  
  212. <table cellSpacing="0" cellPadding="0" width="90%" border="0" id="table3">
  213. <thead>
  214. <tr>
  215. <td onmouseover="this.style.backgroundColor='#EFEFEF';" onmouseout="this.style.backgroundColor='';" align="left">
  216. <table style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" cellSpacing="0" cellPadding="3" width="100%" id="table4">
  217. <tr align="middle" bgColor="#efefef">
  218. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Edit" onclick="editParagraph(96472411, 59963612);" onmouseout="this.style.backgroundColor='#EFEFEF';" width="51">
  219. <img height="14" alt="Edit" src="../../images.freewebs.com/Images/edit.gif" width="16" align="middle">
  220. Edit</td>
  221. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Delete" onclick="deleteParagraph(96472411, 59963612);" onmouseout="this.style.backgroundColor='#EFEFEF';" width="72">
  222. <img height="17" alt="Delete" src="../../images.freewebs.com/Images/delete.gif" width="16" align="middle">
  223. Delete</td>
  224. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Move Up" onclick="moveupParagraph(96472411, 59963612)" onmouseout="this.style.backgroundColor='#EFEFEF';" width="95">
  225. <img height="16" alt="Move Up" src="../../images.freewebs.com/Images/moveUp.gif" width="12" align="middle">
  226. Move Up</td>
  227. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Move Down" onclick="movedownParagraph(96472411, 59963612)" onmouseout="this.style.backgroundColor='#EFEFEF';" width="110">
  228. <img height="16" alt="Move Down" src="../../images.freewebs.com/Images/moveDown.gif" width="12" align="middle">
  229. Move Down</td>
  230. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Insert Paragraph" onclick="insertParagraph(96472411, 59963612,2, false);" onmouseout="this.style.backgroundColor='#EFEFEF';" width="140">
  231. <img height="16" alt="Insert Paragraph" src="../../images.freewebs.com/Images/insertParagraph.gif" width="16" align="middle">
  232. Insert Paragraph</td>
  233. </tr>
  234. </table>
  235. <table id="table5" cellSpacing="0" cellPadding="0" width="90%" border="0">
  236. <tr>
  237. <td>
  238. <div class="fw-paragraph">
  239. <h2>Welcome
  240. ... </h2>
  241. <div class="fw-text">
  242.  
  243. <font face="georgia" color="aliceblue" size="4">
  244. <font face="georgia" size="4">
  245. <p>
  246. <font face="comic sans ms" color="blue">
  247. to the site....</font></p>
  248. <p>
  249. <font face="comic sans ms" color="blue">
  250. Merry meet to one and all. This site
  251. is new and we hope the site is very
  252. helpful to you. We have all kinds of
  253. information on Wicca and other
  254. things that have to do with it..
  255. Hopefully soon we will have great
  256. things to sell, we have great hopes
  257. for this site. So you should come
  258. back every once in a while to see
  259. what’s new because we are always
  260. adding new things and information.
  261. </font></p>
  262. <p>
  263. <font face="comic sans ms" color="blue">
  264. We have information that we have
  265. added from our own individual books
  266. of shadows and questions we have
  267. been asked. So in short this is a
  268. book of shadows from several
  269. Wicca’s/ witch’s</font></p>
  270. <p><font face="comic sans ms">
  271. <font color="black">
  272. <font color="blue">There are</font>
  273. <font color="deeppink"><em>**some**
  274. </em></font></font>
  275. <font color="blue">spells and
  276. formulas that we each have made and
  277. used many of times. . Soon we would
  278. like to sell things like incense and
  279. burners, and oils, and other Wiccan
  280. needs,</font></font></p>
  281. <p>
  282. <font face="comic sans ms" color="blue">
  283. so stop by and have a look. Don’t be
  284. shy!! Sign the guest book and tell
  285. us what you think . And if you think
  286. we have a spell you may need and its
  287. not here drop us a email and we will
  288. be happy to help. </font></p>
  289. <p>
  290. <font face="comic sans ms" color="blue">
  291. you can also email us any spells you
  292. have that you would like to share
  293. that goes for oils, herbs and what
  294. not. And OF CORSE YOU WILL GET THE
  295. CREIDT ITS ONLY RIGHT !!!</font></p>
  296. <p>
  297. <font face="comic sans ms" color="blue">
  298. Sadly we do not have the store
  299. portion of the site up yet. But we
  300. will…but if you live in the
  301. Reno/sparks area you should go over
  302. to shopper square and check out teas
  303. and gifts across from Ben franklins
  304. they have a lot of great stuff it’s
  305. a good store and the owners are
  306. really nice. </font></p>
  307. <p>
  308. <font face="comic sans ms" color="deeppink">
  309. <em>(**SOME **&nbsp; we place these
  310. spells, formulas, herbs, oils&nbsp;here
  311. for your use.&nbsp;The spells are free,
  312. and we are more&nbsp;that happy to email
  313. you what ever you need &nbsp;so please
  314. dont steal theim because there is
  315. no&nbsp;need to if they &nbsp;are free now is
  316. there&nbsp;)</em></font></p>
  317. </font></font>
  318. </div>
  319. </div>
  320. </td>
  321. </tr>
  322. </table>
  323. </td>
  324. </tr>
  325. </thead>
  326. </table>
  327.  
  328. <table cellSpacing="0" cellPadding="0" width="90%" border="0" id="table6">
  329. <thead>
  330. <tr>
  331. <td onmouseover="this.style.backgroundColor='#EFEFEF';" onmouseout="this.style.backgroundColor='';" align="left">
  332. <table style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" cellSpacing="0" cellPadding="3" width="100%" id="table7">
  333. <tr align="middle" bgColor="#efefef">
  334. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Edit" onclick="editParagraph(97506389, 59963612);" onmouseout="this.style.backgroundColor='#EFEFEF';" width="51">
  335. <img height="14" alt="Edit" src="../../images.freewebs.com/Images/edit.gif" width="16" align="middle">
  336. Edit</td>
  337. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Delete" onclick="deleteParagraph(97506389, 59963612);" onmouseout="this.style.backgroundColor='#EFEFEF';" width="72">
  338. <img height="17" alt="Delete" src="../../images.freewebs.com/Images/delete.gif" width="16" align="middle">
  339. Delete</td>
  340. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Move Up" onclick="moveupParagraph(97506389, 59963612)" onmouseout="this.style.backgroundColor='#EFEFEF';" width="95">
  341. <img height="16" alt="Move Up" src="../../images.freewebs.com/Images/moveUp.gif" width="12" align="middle">
  342. Move Up</td>
  343. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Move Down" onclick="movedownParagraph(97506389, 59963612)" onmouseout="this.style.backgroundColor='#EFEFEF';" width="110">
  344. <img height="16" alt="Move Down" src="../../images.freewebs.com/Images/moveDown.gif" width="12" align="middle">
  345. Move Down</td>
  346. <td class="paraButton" onmouseover="this.style.backgroundColor='white';" title="Insert Paragraph" onclick="insertParagraph(97506389, 59963612,3, false);" onmouseout="this.style.backgroundColor='#EFEFEF';" width="140">
  347. <img height="16" alt="Insert Paragraph" src="../../images.freewebs.com/Images/insertParagraph.gif" width="16" align="middle">
  348. Insert Paragraph</td>
  349. </tr>
  350. </table>
  351. <table id="table8" cellSpacing="0" cellPadding="0" width="90%" border="0">
  352. <tr>
  353. <td>
  354. <div class="fw-paragraph">
  355. <h2>the
  356. beginning
  357. </h2>
  358. <div class="fw-text">
  359.  
  360. <p>&nbsp;</p>
  361. <font face="Tahoma" color="royalblue" size="4">
  362. <font face="Tahoma" size="4">
  363. <p>&nbsp;</p>
  364. </font><font face="Tahoma" size="4">
  365. <p><font face="comic sans ms">Is the
  366. best place to start …..so lets go
  367. there shall we.....</font></p>
  368. <p><font face="comic sans ms">This
  369. is were we have great info on all
  370. kinds of Wicca things for you to
  371. know, learn and find out. We found
  372. out some thing's we had </font></p>
  373. <p><font face="comic sans ms">for
  374. gotten about over time, and even
  375. learned some other things we did not
  376. know about while getting all the
  377. information that was needed for this
  378. site along with what was in our<em>
  379. <font color="darkorchid">** b.o.s.’s**</font>
  380. </em></font></p>
  381. <p><font face="comic sans ms">So we
  382. hope that You find what you need.</font></p>
  383. <p><font face="comic sans ms">Maybe
  384. you will learn from what is on this
  385. site or maybe you just needed a
  386. little refreshing you memory, lol
  387. Zeus knows that I did I needed a
  388. little refresh and learn at the same
  389. time in putting this together.</font></p>
  390. <p><font face="comic sans ms">There
  391. is lots of information and more to
  392. come. We say we a lot because Im not
  393. alone in this path of making the
  394. site</font></p>
  395. <p><font face="comic sans ms">page
  396. or learning the craft. I and my
  397. sister (annatris)and good friend
  398. (willow) are still learning as much
  399. as we can. </font></p>
  400. <p>
  401. <font face="comic sans ms" color="darkorchid">
  402. <em>**BOS** Book Of Shadows</em></font></p>
  403. </font></font>
  404. </div>
  405. </div>
  406. </td>
  407. </tr>
  408. </table>
  409. </td>
  410. </tr>
  411. </thead>
  412. </table>
  413. </div>
  414. </div>
  415. <h2>&nbsp;</h2>
  416. </div>
  417.  
  418. </div>
  419. </div>
  420.  
  421. <div class="clear"> </div>
  422. <div id="seas">
  423. <div id="seas-one">
  424. &nbsp;</div>
  425. <div id="seas-two">&nbsp;</div>
  426. <div id="seas-three">&nbsp;</div>
  427. <div class="clear"></div>
  428. </div>
  429. </div>
  430. <div id="copyright">
  431. <p>Copyright &copy; 2007. Magical Awakenings all rights reserved</p>
  432. </div>
  433. </div>
  434. </body>
  435.  
  436. </html>
Last edited by DakDuif; Jan 10th, 2008 at 4:50 am.
Reply With Quote Quick reply to this message  
Join Date: Apr 2005
Posts: 1,403
Reputation: ShawnCplus is a glorious beacon of light ShawnCplus is a glorious beacon of light ShawnCplus is a glorious beacon of light ShawnCplus is a glorious beacon of light ShawnCplus is a glorious beacon of light 
Solved Threads: 224
Sponsor
ShawnCplus's Avatar
ShawnCplus ShawnCplus is offline Offline
Code Monkey

Re: How to link towards a div tag?

 
0
  #2
Jan 10th, 2008
The simplest way is to have that content section an iframe then to load that you would set the link's target attribute to the id of the iframe ie.,
  1. <a href="test.html" target="MyIFrame">Open this in the content</a>
GCS d- s+ a-->? C++(++++) UL+++ P+>+++ L+++ E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r y+
PMs asking for help will not be answered, post on the forums. That's what they're there for.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC