Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2002
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with thumbnail generator. PLEASE HELP!

    hi,

    i made this totally DOM-based thumbnail generating code. it works absolutely fine but at one place. Kindly visit this link:

    http://www14.brinkster.com/spark2003/exp01.html

    The problem here is that i do not want the vertical scroll bar to appear. In other words, I want all the images to appear horizontally only. But it is still not appearing that way, i do not understand why. Please help me with this. Any help is appreciated. Here's the code for the same:

    Code:
    <html>
    <head>
    <title></title>
    <style>
    .nStyle	{top: 50px; left: 20px; height: 90; width: 300px; z-index: 3; position: absolute; overflow: scroll; clip: rect(0,300,90,0);}
    .dStyle	{z-index: 4; top: 1px; left: 1px; background-color: red; position: absolute; visibility: visible;}
    .imStyle{margin-top: 5px; margin-left:10px;}
    </style>
    <script language="JavaScript">
    <!--
    var tHeight = 60;
    var tWidth = 80;
    var tBorder = 0;
    var px = "px";
    
    function makeThumb()
    	{
    	var img = new Array()
    	img[0] = "1.jpg"
    	img[1] = "2.jpg"
    	img[2] = "3.jpg" 
    	img[3] = "4.jpg"
    	img[4] = "5.jpg"
    	
    	var x = document.getElementById("oDiv");
    	x.style.visibility = "visible";
    	var w = 0;
    	x.innerHTML = '';
    	for(i=0;i<img.length;i++)
    		{
    		w += tWidth;
    		x.style.width = w + px;		
    		x.innerHTML += '<a href="#"><img id="im'+i+'" class ="imStyle" src="'+img[i]+'" height="'+tHeight+'px" width="'+tWidth+'px" border="'+tBorder+'"></a>';
    		}
    	}
    //--></script>
    </head>
    <body onload="makeThumb()">
    <div id="sDiv" class="nStyle">
    <div id="oDiv" class="dStyle">&nbsp;</div>
    </div>
    </body>
    </html>

    Please help me with this.

    thanx,
    shivboy
    Internet is a massive abode,
    Built of PURE code!

  • #2
    SPD
    SPD is offline
    New Coder
    Join Date
    Apr 2003
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Got an idea...

    Try to copy the below code for the particular case you are showing in your post.

    In general, however, what I did was to add another image that does not exist (see bold in code below) and to cut the extra space in the table and to enlarge (see bold in code below).

    However, this is a "solution" until you find (or other user) the right solution. This is not a permanent solution... as you see...

    Let me know what you think.





    <html>
    <head>
    <title></title>
    <style>
    .nStyle {top: 50px; left: 20px; height: 90; width: 600px; z-index: 3; position: absolute; overflow: scroll; clip: rect(0,460,70,0);}
    .dStyle {z-index: 4; top: 1px; left: 1px; background-color: red; position: absolute; visibility: visible;}
    .imStyle{margin-top: 5px; margin-left:10px;}
    </style>
    <script language="JavaScript">
    <!--
    var tHeight = 60;
    var tWidth = 80;
    var tBorder = 0;
    var px = "px";

    function makeThumb()
    {
    var img = new Array()
    img[0] = "1.jpg"
    img[1] = "2.jpg"
    img[2] = "3.jpg"
    img[3] = "4.jpg"
    img[4] = "5.jpg"
    img[5] = "6.jpg"
    var x = document.getElementById("oDiv");
    x.style.visibility = "visible";
    var w = 0;
    x.innerHTML = '';
    for(i=0;i<img.length;i++)
    {
    w += tWidth;
    x.style.width = w + px;
    x.innerHTML += '<a href="#"><img id="im'+i+'" class ="imStyle" src="'+img[i]+'" height="'+tHeight+'px" width="'+tWidth+'px" border="'+tBorder+'"></a>';
    }
    }
    //--></script>
    </head>
    <body onload="makeThumb()">
    <div id="sDiv" class="nStyle">
    <div id="oDiv" class="dStyle">&nbsp;</div>
    </div>
    </body>
    </html>
    Enjoy!

    http://www.superprodesign.com

    SPD :thumbsup:


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •