Frogjsimage Gallery

**Magnum777** · 07-12-2007, 03:28 AM

1) Script Title: FROGJSIMAGE GALLERY

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ogjs/index.htm

3) Describe problem: My header cannot display as FROGJS doest no adjust to new positions as shown in the trail host:

http://trialsites.ihoststudio.com/tr...140754/website

Itried to adjust the position so that my header can apear, but I was not able. Any assistance will be appreciated.

Thanks

**jscheuer1** · 07-12-2007, 04:09 AM

The main problem was that you hadn't closed your body tag:

Code:

  <BODY BGCOLOR="white" <div id="FrogJS">

But there were some other issues, missing </a> tags, the use of /> for images - not allowed in this type of document, missing meta information, too many style sections, use of the antiquated bgcolor attribute. I'm not sure what you are going for or why you need absolute positioning or those weird id's and that empty division. Assuming you need all that, this looks fairly nice:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>


  <head>

    <title>Home</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css"> 
        p {
	margin-top:0;
	}
	body {
	background-color:white;
	}

          a:link { text-decoration:none; color: blue;}
          a:visited { text-decoration:none; color: blue;}
          a:hover { text-decoration:underline; color: red;}

    #FrogJS{
    width: 460px;
    height:760px;
    margin: 0 auto;
    }
    #FrogJSCredit{
    text-align: center;
    font-size: 80%;
    color: #999;
    padding: 1px;
    }
    #FrogJSCaption{
    text-align: left;
    line-height:140%;
    }
    </style>

    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="frog.js"></script>


  </head>

  <body>
<div style="position:relative;height:160px;width:789px;margin:0 auto;">
          <div id="HTMOBJ7D774C1351B3E0" style=" position:absolute; top:413px; left:354px; width:104px; height:150px; z-index:0;">
          </div>

          <div id="SGROBJ7D7719A191510" style=" position:absolute; top:0px; left:0px; width:789px; height:160px; z-index:1;">
            <img src="Home/IMAG000.JPG" width="789" height="160" border="0" alt="">
          </div>

</div>
 <div id="FrogJS">



    <a href="RTC100.jpg" title="Test1">

    <img src="TRTC100.jpg" alt="Exquisite Jewelry.">

    </a>



    <a href="RTC200.jpg" title="Test2">

    <img src="TRTC200.jpg" alt="Stylish and Affordable.">

    </a>



    <a href="RTC400.jpg" title="Test3">

    <img src="TRTC400.jpg" alt="Elegantly Stylish.">

    </a>



    <a href="RTC500.jpg" title="Test4">

    <img src="TRTC500.jpg" alt="Stylish and Affordable.">

    </a>



    <a href="RTC600.jpg" title="Test5">

    <img src="TRTC600.jpg" alt="One in town.">

    </a>


    <a href="RTC700.jpg" title="Test6">

    <img src="TRTC700.jpg" alt="Girl's best friend.">

    </a>


    <a href="RTC800.jpg" title="Test7">

    <img src="TRTC800.jpg" alt="A piece of jewelry that you can't afford to miss.">

    </a>



    <a href="RTC900.jpg" title="Test8">

    <img src="TRTC900.jpg" alt="Sensational look.">

    </a>



    <a href="RTC1000.jpg" title="Test9">

    <img src="TRTC1000.jpg" alt="Stylish and Affordable.">

    </a>



    <a href="RTC1100.jpg" title="Test10">

    <img src="TRTC1100.jpg" alt="Adorable.">

    </a>



    <a href="RTC100.jpg" title="Exquisite Jewelry">

    <img src="TRTC1100.jpg" alt="Stylish and Affordable.">

    </a>



    </div>


    </body>

</html>

**Magnum777** · 07-12-2007, 11:17 AM

Hi John:

Withou your assistance I would not have achieved the abililty to make any head way with the Frog JS. But since your original assistance I am trying to implement the code to my my website with a header That you'll ultimately see in Example #3.

In my original post for positioning(item #1), my header does not appear but my Frog design dominates. Then you looked at the code to assist me and found out several observations of missing tags and other coding inconsistencies.

1) MY ORIGINAL DESIGN THAT POSITIONINGING IS HARD AND NEEDDED IMPROVEMENT:

http://trialsites.ihoststudio.com/tr...140771/website

Then I copied and pasted what I understood as corrections into my header(please pardon me as I all I do is copy and past while trying to understand) and the result is shown on item #2. The Frog images work, but bunched together without header showing:

2) WITH JOHN'S FORUM CORRECTION (ONLY HEARDER CORRECTION):

http://trialsites.ihoststudio.com/tr...140772/website

NOTICE HOW IMAGES BUNCH TOGETHER. YES WITH PROPER EDITING IMAGES CAN BE SPACED OUT. BUT NOTICE WHAT HAPENS IN #3 below when I copied and pasted the body code into my design to get my designed aim of see my header:

3) WITH JOHN'S CORRECTION(HEADER AND BODY CORRECTIONS MADE):

http://trialsites.ihoststudio.com/tr...140774/website

RESULT: Header finally showed up as double images, but FrogJS lost completely.

Please, I am trying my best to explain what's happening, not to doubt your immerse ability to solving coding problems. I was just wishing with detailed explanations, you can understand where I am heading, and what problems I am encountering so that you can solve it once and for all.

I know it is very possible I am copying and pasting your instructions wrongly. For that reason, if it is possible try to give me the codes according to what needs copied and pasted in each sections as folls:

(A) HEADER-Copy and past paste codes below:

CODE for A CODE for A CODE for A.............

(B) BODY-Copy and Paste codes beblow:

CODE FOR B.............

They are setup that way in DD and even at that I did not get to work until you deciphered what part of code need correction in the header where you asked me to effect change in the lines with "script/prototype" to "prototype and so on. Since then my code works like a charm except that I cannot use it if my header does not show up.

Thanks.

Magnum777

**jscheuer1** · 07-12-2007, 03:05 PM

I don't think you understood. My code wasn't intended to be pasted into a page. It is the entire page:

http://home.comcast.net/~jscheuer1/side/frog_h3.htm

**Magnum777** · 07-12-2007, 07:27 PM

Hi John:

Thanks for the link that shows the presence of my header with the FrogJs design working properly.

Now my problem is that you've made it work without telling what to to duplicate same in my future designs. Specifically, I am very interested to know what aspects of the code needed to be in the Header and the Body tags as instructed in DD.

You're alredy doing a lot for me, please find the time to get me out of this murky waters.

Thanks.

Mazi

**jscheuer1** · 07-12-2007, 08:13 PM

The code for my demo is identical to the code I provided in post #2 of this thread, with one exception, the live page needed a base href back to your domain to get the images and scripts. You may confirm this by using your browser's 'view source' to see the source code of the demo and comparing it to the code I already provided.

It is what it is. Stop trying to make it more complicated.

**Magnum777** · 07-13-2007, 05:17 AM

Hi John:

In your last post to assist me you said "Stop trying to make it more complicated." Trust me. I don't have any reason to make it more complicated. I am trying very hard to make sense of it so that I can duplicate it in a real design.

I have used it in this design and I will appreciate if you or some else can figure out why the header disappeared from its intended location on the top to somewhere lower on the page with everything shifted down. It was working until I added the Xara Drop Down Menu that you see on the top.

Here is a trial host to show my problem:

http://trialsites.ihoststudio.com/tr...gnYourOwn.html

Thanks for your continued assistance.

Magnum777

Thread: Frogjsimage Gallery

Thread Tools

Search Thread

Frogjsimage Gallery

FrogJS image Gallery

FROGJS Imgae Gallery

FrogJs and Xara Drp Down Menu Conflict

Bookmarks

Bookmarks

Posting Permissions