 A couple of problems/questions... |
  |
| Chemacky |
 Sep 14 2011, 01:16 AM
Post
#1
|
|
Newbie  Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396  |
Hello!
I'm trying to make a website for my girlfriend's birthday for her (soon to be started) jewellery business... where she makes the jewellery. The problem is, I have very little experience and even less knowledge. I decided to start with a template, which seemed to be a good way to get something that looked nice... and reasonably professional. What I've ended up with, and am reasonably happy with so far can be found at http://www.jewellerytest.net84.net/ Ok, so what I'm trying to do is pretty intuitive really. I want the semi-navigation-type buttons on the site to more or less do what you'd expect them to do. So the up and down buttons circled here:  would scroll up and down through a number of different pictures of rings... this number would grow as she made them. With only four visible at a time. The only way I could conceive to do this is to load an entirely new, similar page each time... which is not a very good way at all. Can anyone help? Similarly, I want to be able to make the buttons circled here:  To not necessarily scroll... but just toggle to the next picture (from the vertical bar) in order. Again, I can only think to load a new page each time. Can anyone help me with a better way? Perhaps with frames? Though from what I can remember (as I don't seem to see them anymore.. or maybe I don't notice) frames are pretty ugly. Lastly, I'd want it to work so as when a picture was selected from the vertical scrolling bar, it would then become the large picture. How would I got about doing this? Here is my current code: CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body><div id="content"><div class="inner_copy"><a href="http://www.site2you.com/">Website Builder</a> <a href="http://www.freetemplatesonline.com/">fto</a> <a href="http://www.websitetemplates.org/">websitetemplates.org</a> <a href="http://www.webdesign.org/website-design">Website Design</a></div></div> <table width="766" align="center"> <!--header--> <tr><td class="bgr_logo"><a href="index.html"><img alt="" src="images/logo.gif"></a></td></tr> <tr><td class="menu"><img alt="" src="images/m_left.jpg"><a href="index.html"><img alt="" src="images/m1.jpg"></a><a href="index-1.html"><img alt="" src="images/m2.jpg"></a><a href="index-2.html"><img alt="" src="images/m3.jpg"></a><a href="index-3.html"><img alt="" src="images/m4.jpg"></a><a href="index-4.html"><img alt="" src="images/m5.jpg"><img alt="" src="images/m_right.jpg"></td></tr> <tr><td><img alt="" src="images/img_under_menu.jpg"></td></tr> <!--content--> <tr> <td class="size_heit"><table style="height:100%"> <tr> <td class="bgr_left"><img alt="" src="images/img_left.jpg"></td> <td class="bgr_content"><table> <tr> <td width="256"><table class="box_foto1"> <tr><td class="bgr_big_foto1 size_foto"><a href="#"><img alt="" src="images/button_1.gif" class="indent_button"></a><a href="#"><img alt="" src="images/button_2.gif"></a></td></tr> </table></td> <td><table width="91" style="margin-top:3px;"> <tr><td><a href="#"><img alt="" src="images/button_top.jpg"></a></td></tr> <tr><td class="indent_foto"><a href="#"><img alt="" src="images/1f1.jpg" width="83" height="83"></a><br><a href="#"><img alt="" src="images/1f2.jpg" width="83" height="83"></a><br><a href="#"><img alt="" src="images/1f3.jpg" width="83" height="83"></a><br><a href="#"><img alt="" src="images/1f4.jpg" width="83" height="83"></a></td></tr> <tr><td><a href="#"><img alt="" src="images/button_bottom.jpg"></a></td></tr> </table></td> <td><table class="indent_content"> <tr> <td class="wrapper_content"><table> <tr> <td style="height:294px;"><table class="txt_indent"> <tr><td style="height:25px;"><img alt="" src="images/1title2.gif"></td></tr> <tr><td><strong>New Projects!</strong> <br>Here are my newest projects, or <a href="#">click here to view all</a>.</td></tr> <tr><td><img alt="" src="images/line_x.gif" style="margin:8px 0 10px 0;"></td></tr> <tr><td style="height:25px;"><img alt="" src="images/1title3.gif"></td></tr> <tr><td><img alt="" src="images/1f6.jpg" width="69" height="69" class="img_indent"> <strong>DD/MM/YYYY</strong><br><br style="line-height:5px;"> <strong>New Pendant! </strong><br>Commissioned by a young man to preserve an old family antique for his mother!<img alt="" src="images/bull_1.gif" class="bull"> </td></tr> <tr><td><img alt="" src="images/1d1.gif" style="margin:5px 0 5px 0;"></td></tr> <tr><td><img alt="" src="images/1f5.jpg" width="69" height="69" class="img_indent"> <strong>DD/MM/YYYY</strong><br><br style="line-height:5px;"> <strong>Good things come in threes! </strong><br>A set of three rings - all bought as presents!<img alt="" src="images/bull_1.gif" class="bull"> </td></tr> </table></td> </tr> <tr> <td class="bgr_form"><form id="form" action="" enctype="multipart/form-data" name="form"><table> <tr><td style="height:24px;"><img alt="" src="images/1title1.gif"></td></tr> <tr><td class="f1"><input type="text"><a href="#" onClick="document.getElementById('form').submit()"><img alt="" src="images/button_go.gif"></a></td></tr> </table></form></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> <td class="bgr_right"><img alt="" src="images/img_right.jpg"></td> </tr> </table></td> </tr> <!--footer--> <tr><td class="footer_bgr">© 2011 Dorothy Peisley. All rights reserved</td></tr> </table> </body> </html> Thanks for baring with me on this, and I would appreciate any help at all! Cheers! Ps. I'm aware of the typo's on the site  |
  |
 
|
| pandy |
Sep 14 2011, 06:40 AM
Post
#2
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You need JavaScript. Since the template is obviously made for this, didn't it come with the needed scripts?
QUOTE Thanks for baring with me on this No problem. A girl does anything for diamonds.  |
|
|
|
| Chemacky |
Sep 15 2011, 03:07 AM
Post
#3
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
It did not come with any scripts. Would these be available on the internet? Or would I have to write them myself? Thanks for the reply!
|
|
|
|
| Frederiek |
Sep 15 2011, 05:28 AM
Post
#4
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
No, you'll find them on the web, either with or without jQuery.
See for exemple: http://www.dyn-web.com/code/scroll/demos.php?demo=horiz ( found via http://www.noupe.com/javascript/30-javascr...scrollbars.html ). Also go see Stu Nicholls' web sites http://www.cssplay.co.uk/ and http://www.stunicholls.com/ . |
|
|
|
| Chemacky |
Sep 16 2011, 03:33 AM
Post
#5
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
Hey, thanks for the reply!
I've looked over the sites, and found exactly what I'm trying to do here: http://www.dyn-web.com/code/scroll/demos.php?demo=images The vertical scrolling one second from the top. The only difference is that I want four pictures to be visible at a time. So I downloaded the zip file with all the java scripts, and had a play around trying to implement it into my sites design, and am struggling basically. I've got as far as to 'link' the javascripts to the css file so that there aren't errors when I open the page... but that's about all I could work out. As far as I can tell, there's only a direct script demo page for a horizontally scrolling version of this script. I realise that to make it scroll down instead of up I just need to change the scrolling string from CODE <a class="click_left_by_166_300" href="#"></a> to CODE <a class="click_down_by_166_300" href="#"></a> But I'm running into issues with the tabling I think. I can't seem to get things to line up properly, or to be invisible until scrolled to. As soon as I add more images to the thing, they just keep lining up making the page longer and longer. Here is my code for that particular bit: CODE <div id="scrollLinks"> <tr><td><a class="click_up_by_56_300" href="#"><img alt="" src="images/button_top.jpg"></a></td></tr> </div> <div id="wn"> <div id="lyr1" class="content"> <tr><td class="indent_foto"> <a href="#"><img alt="" src="images/1f1.jpg" width="83" height="83"></a><br> <a href="#"><img alt="" src="images/1f2.jpg" width="83" height="83"></a><br> <a href="#"><img alt="" src="images/1f3.jpg" width="83" height="83"></a><br> <a href="#"><img alt="" src="images/1f4.jpg" width="83" height="83"></a> <a href="#"><img alt="" src="images/1f4.jpg" width="83" height="83"></a> </td></tr> </div> <div id="scrollLinks"> <tr><td><a class="click_down_by_56_300" href="#"><img alt="" src="images/button_bottom.jpg"></a></td></tr> </div> </table></td> Can anyone help me out here? Or should I be posting this in another section of the forums? This post has been edited by Chemacky: Sep 16 2011, 03:36 AM |
|
|
|
| Frederiek |
Sep 16 2011, 10:36 AM
Post
#6
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Looking at the HTML code you posted, it isn't correct. The <div id="scrollLinks"> should be inside the TD around the A tag, in both cases. And you have used only one TD to contain all images.
For the sake of testing, I d/l the scripts and demo. I took the glide_scroll_h.html and saved it as glide_scroll_v.html. All I needed to do was: - change the height:166px; to height:500px; for div#wn (approximately the height of 3 images), - put every TD in a separate TR, - change the classes for the links to "click_up_by_166_300" and "click_down_by_166_300" respectively. That shows 3 images at a time and scrolls them one by one. Of course, to accomodate your needs, you'll have to tweek the CSS height and the scroll amount in the class. And change the left/right arrow images with your own up/down images. |
|
|
|
| Chemacky |
Sep 19 2011, 09:19 AM
Post
#7
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
Thanks for the help!
I too was able to modify the existing code to make it scroll vertically... however porting it over to the real website is proving difficult. I've modified the code as bes I can, but it's still not yielding the results I'm after. It appears like it's creating the 'scroll area' which is blank and above the table containing the images, while the images (including the scroll up button) are being pushed well below where they should be. The images are also not being hidden beyond the preset pixel length - which I think is probably due to the scroll area being created in the wrong place. Here is my modified version of the code: CODE <tr><td> <div id="scrollLinks"> <a class="click_up_by_84_300" href="#"><img alt="" src="images/button_top.jpg"></a> </div> </td></tr> <div id="wn"> <div id="lyr1" class="content"> <tr><td class="indent_foto"> <a href="#"><img src="images/1f1.jpg" width="83" height="83" /></a></tr> <tr><td height="85" class="indent_foto"><a href="#"><img src="images/1f2.jpg" width="83" height="83" /></a></td></tr> <tr><td class="indent_foto"><a href="#"><img src="images/1f3.jpg" width="83" height="83" /></a></td></tr> <tr><td class="indent_foto"><a href="#"><img src="images/1f4.jpg" width="83" height="83" /></a></td></tr> <tr><td class="indent_foto"><a href="#"><img src="images/1f4.jpg" width="83" height="83" /></a> </td></tr> </div> <tr><td> <div id="scrollLinks"> <a class="click_down_by_84_300" href="#"><img alt="" src="images/button_bottom.jpg"></a> </div> </td></tr> </table></td> Any other help is would be greatly appreciated!! |
|
|
|
| Darin McGrew |
Sep 19 2011, 12:28 PM
Post
#8
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Your structure is broken. Our online validator will show you the problems. (See the links at the top and bottom of this page.)
|
|
|
|
| Chemacky |
Sep 19 2011, 06:50 PM
Post
#9
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
Thank you!
I used the validator, and fixed up quite a few problems through out the site, however I'm now left with the problems of the <TR>'s. It just says element not allowed here. I'm not sure where it can go then. The example in the 'TR help' page seems very similar? It is also telling me the <Div> is not allowed where it is and to check where it's allowed. I did check, and one of the places is inside a <td>, however since all my images are in different <td>'s this puts one image inside the scrolling area and pushes the rest below (or above) it. However, another place it says a <div> tag is allowed is within a <table> tag... and as far as I can tell, it is... Any idea's as to where else it can go? The last thing is the scroll links. It's saying it was already defined. Does this mean I can have just one set of tags around the entire table? Since the images are on opposite sides? Thanks very much for your help, and sorry to be a pain! Starting to get a bit rushed, as it's her birthday tomorrow. This post has been edited by Chemacky: Sep 19 2011, 06:52 PM |
|
|
|
| pandy |
Sep 19 2011, 07:18 PM
Post
#10
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
So what does it look like now?
If it's <div id="wn"> it's because you've put it between two table rows (in the old code sample). Nothing can go there. All content must be in the TDs, including other markup. |
|
|
|
| Chemacky |
Sep 19 2011, 07:31 PM
Post
#11
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
It now looks like this:
CODE <table id="t1" width="91" cellpadding="8" cellspacing="0" style="margin-top:3px;"> <tr><td> <div id="scrollLinks"> <a class="click_up_by_84_300" href="#"><img alt="" src="images/button_top.jpg"></a> </div> </td></tr> <div id="wn"> <div id="lyr1" class="content"> <tr><td class="indent_foto"><a href="#"><img src="images/1f1.jpg" width="83" height="83" /></a></td></tr> <tr><td class="indent_foto"><a href="#"><img src="images/1f2.jpg" width="83" height="83" /></a></td></tr> <tr><td class="indent_foto"><a href="#"><img src="images/1f3.jpg" width="83" height="83" /></a></td></tr> <tr><td class="indent_foto"><a href="#"><img src="images/1f4.jpg" width="83" height="83" /></a></td></tr> <tr><td class="indent_foto"><a href="#"><img src="images/1f4.jpg" width="83" height="83" /></a> </td></tr> </div></div> <tr><td> <div id="scrollLinks"> <a class="click_down_by_84_300" href="#"><img alt="" src="images/button_bottom.jpg"></a> </div> </td></tr> </table></td> I think there was only one minor change somewhere. My problem with where to place the '<div id="wn">' is if I do it with in one of the <td> tags that the images are also contained, it creates the scroll area only with in this table data cell.. and pushes everything else around it. In the scrolling script example, the table looks like this: CODE <div id="wn"> <div id="lyr1" class="content"> <table id="t1" border="0" cellpadding="8" cellspacing="0"> <tr> <td><img src="images/demo/sunset.gif" width="150" height="150" alt="" /></td> <td><img src="images/demo/cave-art.gif" width="150" height="150" alt="" /></td> <td><img src="images/demo/swans.gif" width="150" height="150" alt="" /></td> <td><img src="images/demo/design1.gif" width="150" height="150" alt="" /></td> <td><img src="images/demo/mandala2.gif" width="150" height="150" alt="" /></td> <td><img src="images/demo/turtle.gif" width="150" height="150" alt="" /></td> <td><img src="images/demo/mandala1.gif" width="150" height="150" alt="" /></td> </tr> </table> </div> </div> <!-- end wn div --> Any suggestions? |
|
|
|
| pandy |
Sep 19 2011, 07:37 PM
Post
#12
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Split the table maybe. Or don't use tables. You can't have the DIV where you have it now anyway.
|
|
|
|
| Ephraim F. Moya |
Sep 19 2011, 08:49 PM
Post
#13
|
|
Advanced Member Group: Members Posts: 167 Joined: 2-September 07 From: New Mexico Member No.: 3,702 |
I think you've misspelled 'jewelry'
|
|
|
|
| Chemacky |
Sep 19 2011, 09:08 PM
Post
#14
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
I'm Australian, and we spell it (and pronounce it) Jewellery.
I had actually tried splitting the table, and used the code like this: CODE <table width=91 border="0" cellpadding="0" cellspacing="0" style="margin-top:3px;"> <tr><td> <div id="scrollLinks"> <a class="click_up_by_90_300" href="#"><img alt="" src="images/button_top.jpg"></a> </td></tr> </table> <div id="wn"> <div id="lyr1" class="content"> <table width=91 id="t1" border="0" cellpadding="8" cellspacing="0"> <tr> <td class="indent_foto"><img src="images/1f1.jpg" width="83" height="83" alt="" /></td></tr> <tr><td class="indent_foto"><img src="images/1f2.jpg" width="83" height="83" alt="" /></td></tr> <tr><td class="indent_foto"><img src="images/1f3.jpg" width="83" height="83" alt="" /></td></tr> <tr><td class="indent_foto"><img src="images/1f4.jpg" width="83" height="83" alt="" /></td></tr> <tr><td class="indent_foto"><img src="images/1f1.jpg" width="83" height="83" alt="" /></td></tr> <tr><td class="indent_foto"><img src="images/1f2.jpg" width="83" height="83" alt="" /></td></tr> <tr><td class="indent_foto"><img src="images/1f3.jpg" width="83" height="83" alt="" /></td> </tr> </table> </div> </div> <!-- end wn div --> <table width=91 border="0" cellpadding="0" cellspacing="0" style="margin-top:3px;"> <tr><td> <a class="click_down_by_90_300" href="#"><img alt="" src="images/button_bottom.jpg"></a> </div> </td></tr> </table> This now looks almost as it it should, however the scroll links do not work. I also tried to put the entire "<div id="scrollLinks"></div>" around both links and this didn't work. Any ideas? This post has been edited by Chemacky: Sep 19 2011, 09:08 PM |
|
|
|
| Ephraim F. Moya |
Sep 19 2011, 10:18 PM
Post
#15
|
|
Advanced Member Group: Members Posts: 167 Joined: 2-September 07 From: New Mexico Member No.: 3,702 |
QUOTE(Chemacky @ Sep 19 2011, 07:08 PM)  I'm Australian, and we spell it (and pronounce it) Jewellery. It's still spelled wrong! Aussie or not. |
|
|
|
| Chemacky |
Sep 19 2011, 10:50 PM
Post
#16
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
That's why at the end of my post it said:
QUOTE Ps. I'm aware of the typo's on the site This post has been edited by Chemacky: Sep 19 2011, 10:56 PM |
|
|
|
| Ephraim F. Moya |
Sep 19 2011, 11:27 PM
Post
#17
|
|
Advanced Member Group: Members Posts: 167 Joined: 2-September 07 From: New Mexico Member No.: 3,702 |
QUOTE(Chemacky @ Sep 19 2011, 08:50 PM) That's why at the end of my post it said: QUOTE Ps. I'm aware of the typo's on the site I thought that you were going to cite the archaic Australian rule of the 'implied e'. If so, your use of 'Dotti P Jewellry' on the top line of your page image is masterful! |
|
|
|
| Frederiek |
Sep 20 2011, 01:32 AM
Post
#18
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
This is how the tables should look like. I only surrounded the original exemple with another table and set the IMG SRC's to absolute paths for testing.
CODE <table> <tr> <td> <div id="scrollLinks"> <a class="click_up_by_84_300" href="#"><img alt="" src="http://www.jewellerytest.net84.net/images/button_top.jpg"></a> </div> <div id="wn"> <div id="lyr1" class="content"> <table id="t1" border="0" cellpadding="8" cellspacing="0"> <tr> <td class="indent_foto"><a href="#"><img src="http://www.jewellerytest.net84.net/images/1f1.jpg" width="83" height="83" /></a></td> </tr> <tr> <td class="indent_foto"><a href="#"><img src="http://www.jewellerytest.net84.net/images/1f2.jpg" width="83" height="83" /></a></td> </tr> <tr> <td class="indent_foto"><a href="#"><img src="http://www.jewellerytest.net84.net/images/1f3.jpg" width="83" height="83" /></a></td> </tr> <tr> <td class="indent_foto"><a href="#"><img src="http://www.jewellerytest.net84.net/images/1f4.jpg" width="83" height="83" /></a></td> </tr> <tr> <td class="indent_foto"><a href="#"><img src="http://www.jewellerytest.net84.net/images/1f5.jpg" width="83" height="83" /></a></td> </tr> </table> </div> </div> <div id="scrollLinks2"> <a class="click_down_by_84_300" href="#"><img alt="" src="http://www.jewellerytest.net84.net/images/button_bottom.jpg"></a> </div> </td> <tr> </table> As you can see, the two scroll div's had the same ID. ID's need to be unique and can only be used once in a page. So I changed the second one to "scrollLinks2". Then, the setup of the scroll links had to be changed too: CODE function init_dw_Scroll() { var wndo = new dw_scrollObj('wn', 'lyr1', 't1'); wndo.setUpScrollControls('scrollLinks'); wndo.setUpScrollControls('scrollLinks2'); } With only five images available here, I changed the height of div#wn to 300px. Et voilà. See also the attached test page. 
test.html ( 2.52k )
Number of downloads: 440 |
|
|
|
| Chemacky |
Sep 22 2011, 12:47 AM
Post
#19
|
|
Newbie Group: Members Posts: 11 Joined: 14-September 11 Member No.: 15,396 |
You, my friend, are the best!
Killed it! Fixed everything, and looks absolutely brilliant! I am very grateful, and not just for your help, but for everyone that helped. Thanks guys! All right, now I'm onto the whole sort of 'dynamic update' thing... whereby clicking on an image in this just finished scroll bar brings up a larger version of it on the left. This appears to be what I need to do: http://www.dyn-web.com/code/scroll/demos.php?demo=refresh After doing a little bit of reading, and looking for a bit more documentation on the dynamic update, it appears there isn't much available unless I purchase the licence... which I'd rather do once I knew everything was working. In the meantime, I think what I need to do is use a whole bunch of hidden <div>'s, and call them to the front using the image links. Is that right? Can anyone point me in the right direction on this? |
|
|
|
| Frederiek |
Sep 22 2011, 01:31 AM
Post
#20
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
How about this exemple from Stu Nicholls: http://www.stunicholls.com/gallery/simple.html ?
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:23 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC