JavaScript - Creating A Thumbnail Scrollable Clickable Gallery

Dear Experts,

I am very new for javascript so I am not even sure it is possible or not.

The situation is like this,

I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button.

this is the sample layout:

<table>
<tr>
<td colspan=8>
Full size image will be shown in this cell
</td>
</tr>
<tr>
<td colspan=8>
Caption of the image will be displayed here
</td>
</tr>
<tr>
<td>Previous Button</td>
<td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td>
<td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td>
<td>Next Button</td>
</td>
</tr>

My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table.
As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails.

I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you.

Thanks in advance.

Charles

I'm very new at this and have very limited HTML/Java Script knowledge, but since my designer is very busy, I thought I'd take a look at some of this coding and see if I can learn how to do certain things myself.

I'm trying to create a clickable slide show. I read all the instructions given on www.javascriptkit.com and created the following:

Code:

 Slide Show Code

<script type="text/javascript">// <![CDATA[
//preload images
var image1=new Image()
image1.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image2=new Image()
image2.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image3=new Image()
image3.src="http://www.moxiecouture.com/images/daddysprincesstutuonesielarge.jpg"
// ]]></script>
<p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" border="0" alt="" width="50" height="75" /></a></p>
<script type="text/javascript">// <![CDATA[
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==2)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==3)
window.location="http://moxiecouture.com/category_2/TuTu-One-Pieces.htm"
}
// ]]></script>

My issue with this is that it's not rotating the images. Of course, there is something I'm missing even though I tried to read the instructions carefully. Can anyone help me understand what I'm doing wrong?

Thanks!

so my site ... www.brianapurserphotography.com/kitchen1/ (click portfolio to see the div im referring too) loads fine in firefox and safari on my mac but.... refuses to scroll in IE so to find out tonight. The scroll bar comes up just fine but the actual scroll bar itself that one uses to drag does not. All that shows is an inactive scroll bar with inactive arrows.

Why?

A little difficult to explain, but here goes:

I've combined a couple different jquery scrollable functions to a webpage that I'm creating.

This: http://flowplayer.org/tools/demos/sc...one-sized.html for my horizontal scrolling.

And this: http://flowplayer.org/tools/demos/sc.../vertical.html for my vertical.

The problem with the vertical scrolling function is that it relies on the mousewheel and mouse clicks for scrolling and I don't feel it's immediately apparent that the text scrolls. But I really like the effect, so I've added arrows and tried to get the functionality from the vertical scrolling example, but it's not working, except for the down arrow in the content in the very last tab. When you click on an arrow, it currently takes you to the previous or next horizontal section.

I know the answer is in there somewhere, but I'm not sure where to look for it. Here's the javascript file that controls the functionality: http://www.chevalia.net/js/jquery.tools.min.js


And the link to the page: http://www.chevalia.net/chevalia/index2.html

The CSS for the scrollable:
Code:

#flowtabs {
	
	/* dimensions */
	width:425px;
	height:31px !important;
	margin:0 !important; 
	padding:0;	
	
	/* IE6 specific branch (prefixed with "_") */
	_margin-bottom:-2px;
}

/* single tab */
#flowtabs li { 
	float:left; 
	margin-left:7px; 
	padding:0; 
	text-indent:0; 
	list-style-type:none;
}

/* a- tag inside single tab */
#flowtabs li a {
	display:block;
	height: 31px;   
	padding:30px 12px 10px 0;
	margin:0px;
	
	/* font decoration */
	text-align:center;
	text-decoration:none;
}

	
	/* style for horizontal flow */
	#flowpanes {height:468px; width:924px; position:relative; overflow:hidden; clear:both;}
	#flowpanes ul.items {width:20000em; position:relative; clear:both; margin:0; padding:0;}
	#flowpanes ul li {float:left; display:block; width:924px;}

	/* style for vertical flow */
	/* root element for scrollable */
.vertical {  
	
	/* required settings */
	position:relative;
	overflow:hidden;
	
		

	/* vertical scrollers have typically larger height than width */	
	height: 450px;	 
	width: 611px;
	
}

/* root element for scrollable items */
.vert_items {	
	position:relative;
	width: 600px;
	float:left;
	
	/* this time we have very large space for height */	
	height:5000em;	
	margin: 0px;
	
}

.actions {
	width:15px;
	height:auto;
	float: right;
	margin:auto;
		
}

.actions a {
	cursor:pointer;
		
}


.nextPage {
	float:right;
	margin-top:38px;
	
}

.prevPage {
	float:right;
	margin-top:200px;
}

Anyone care to take a stab at this puzzle?

Many thanks in advance.

Hi Everyone,

I hope it was the right decision to post here and not in the Javascript framework forum, as I think my problem is not necessarily related to the use of jQuery, but my lack of Javascript knowledge and how I can make both scripts work together.

I am using a jQuery tab plugin that shows a different content div on click of each tab. It also has a fade in (http://www.stilbuero.de/jquery/tabs/...n73#fragment-7)

In addition, I am using the scroller scripts from Blueshoes (I also tried another, similar scroller script, but run into the same problem: http://www.dyn-web.com/code/scroll/vert.php).


What I want to achieve:
Have a simple tab function with up to 6 tabs. Each tab content will have a scrollable div with a custom scrollbar that also scrolls on mouseover.

The problem:
The tab and scrollbar on initial page load work fine. Once I click on the second or third tab, the tab content loads fine, but the scroller function does not load. I have to click on the tab number again for the scrollbar to appear (I added an onClick event that loads the scrollbar, but this only seems to be activated on the second click, not the first click)

I thought I could just reload the page again with an onClick event on the tabs, but this only reloads the page with the first tab active, and the tab content fade in effect doesn't quite show anymore. In addition, I do not know how to change the script so the tab that was been clicked on (e.g. tab2 or tab3) is active on page reload.

Please take a look at site, where you can see everything it all in action:
http://www.webjungle.com/TESTDEV/ind...s_reduced.html

I'd prefer a solution that loads the scroller script immediately onClick of each tab without reloading the page.

I tried all kinds of possibilities, and I have been working on this for the past 2 days! My Javascript knowledge is just to limited to grasp what needs to happen.

Here is my code, as simplified as possible, with comments in italics:

CSS, JAVASCRIPT and LINKS to JS libraries and plugins:

Code:

<style type="text/css">
 <!--Begin scroller css --> 
.scrollingtext {
	position:absolute; 
	width: 480px; 
	font-size:13px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height: 19px;		
}
</style>
 <!--End scroller css --> 

 <!--Begin Tab scripts --> 
<script src="scripts/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="scripts/jquery.tabs.pack.js" type="text/javascript"></script>

 <!--tab content fade in --> 
<script type="text/javascript">
  $(function() {

    $('#tabcontainer').tabs({ fxFade: true, fxSpeed: 'fast' });
				
});
</script>
        
<link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">
  <!--End Tab scripts --> 

 <!--Begin blueshoes scroller scripts --> 
<script type="text/javascript" src="scripts/LibCrossBrowser.js"></script>
<script type="text/javascript" src="scripts/EventHandler.js"></script>
<script type="text/javascript" src="scripts/Bs_FormUtil.lib.js"></script>
<script type="text/javascript" src="scripts/Bs_Slider.class.js"></script>
<script type="text/javascript" src="scripts/Bs_ScrollableDiv.class.js"></script>
<script type="text/javascript" src="scripts/scrollFunction2.js"></script>
 <!--End blueshoes scroller scripts --> 

HTML:

Code:

<body onLoad="init();"> <!--init() calls the scroller script --> 

  <div class="scroller">
   <div id="tabcontainer">
 
 <!--TABS --> 
            <ul>
                <li><a href="#tab1" onClick="init();"><span>1</span></a></li> <!--i was hoping to be able to initialize the scroller script with a click, but doesn't work when first clicking on it. Only after a second click the scrollbar shows up --> 
                <li><a href="#tab2" onClick="init();"><span>2</span></a></li>
                <li><a href="#tab3" onClick="init();"><span>3</span></a></li>
            </ul>
            
 <!--TAB 1 CONTENT --> 
            <div id="tab1">
              <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1" onLoad="init();">
                    <tr>
                      <td width="499px" valign="top"><div id="divcontainer_1" style="position:relative; width:499px; height:380; overflow:hidden;">
                          <div id="divContent_1" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
                        </div></td>
                      <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv1"></div></td>
                    </tr>
                  </table>
            </div>
            
 <!--TAB 2 CONTENT --> 
            <div id="tab2">
                   <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
                    <tr>
                      <td width="499px" valign="top"><div id="divcontainer_2" style="position:relative; width:499px; height:380; overflow:hidden;">
                          <div id="divContent_2" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
                        </div></td>
                      <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv2"></div></td>
                    </tr>
                  </table>
                </div>
            
 <!--TAB 3 CONTENT --> 
            <div id="tab3">
               <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1">
                    <tr>
                      <td width="499px" valign="top"><div id="divcontainer_3" class="slidertext" style="position:relative; width:499px; height:380; overflow:hidden;">
                          <div id="divContent_3"  class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. 
                            While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div>
                        </div></td>
                      <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv3"></div></td>
                    </tr>
                  </table>
                 </div>
        
   </div> <!-- END tabcontainer *****************--> 
 </div> <!-- END scroller *****************--> 


</body>

P.S. I am using a transitional doctype, which seems to be correct and working with each script on its own...
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I would appreciate some hints or tips sooo much!!!!

Thank you for reading my essay.

Hi,

I need to change the background and the header of a website on which i display ads (by an adserver)

It works with this code :

<script type="text/javascript">
parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)";
parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0";
parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat";
parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21";
parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)";
</script>

But i need those elements become clickable.
Have you any solutions ?

Thanks a lot.

Sorry for my %"*!?& english

Benoo

I have a "button" that calls formA, which in turns calls formB, all done through javascript. As a button:
Code:

<input type="button" value="Preview" onClick="popupform();">

works perfectly. Of course the user doesn't want some ugly standard button. They want this beautiful image to show instead (personally, I think the .gif they made looks like barf, but that's besides the point...sorry).

When I substitute
Code:

<input type="image" src="/preview/preview_button.gif" name-"preview" alt="Preview Your Item" border="0" onClick="popupform();">

everything works as it should, except the original form, the one that has the button/image on it, becomes a 404 Object not found.

The popupform() sets a bunch of cookies, and calls formB. FormB is a .php which reads the cookies and does some other stuff.

Not that it should matter, but I am running everything locally in Vista using the XAMPP Apache Friends Edition and going through localhost (because formB is a .php)

Thanks in advance.

I have a situation in which I have to track clicks (links etc..).

The problem is, I have a larger div ie - parentDiv - like 300px height, 400px width - approximate. This div has a background image.

Now, the issue arises because over this div (parentDiv), I have another div "announceDiv" on top of it showing information.

I ONLY want the parts of parentDiv that is NOT covered by announceDiv to be clickable.

Just to reiterate, I have a big div that I want clickable (so I can add a link to the click), but over this big div I have a smaller div showing content ie, information, that links to its own stuff. BUT I want to be able to link from this background image that is in the parentDi without affecting when I click in the smaller div that is superimposed over it.

any ideas?

has to work in ie6+ and ff 3+

I have created this svg color picker :

Edit fiddle - JSFiddle

I want that each color can be clicked and if each of them clicked, it will rotate the selected image to the top while the rest of the color will be moved accordingly clockwise (like a wheel).

So about a couple of weeks ago I decided to start learning the basics of web development and design through the w3schools website. I found no problems learning HTML/XHTML and CSS1/2/3. I decided the best way to learn these languages was to implement something from each language into a project (a website, which is currently stored locally on my laptop)

The project is a site dedicated to favourite images of my family. In it is a main image viewer, followed by a nav bar underneath displaying thumbnails of a few images. I implemented a small JS script so when I click a thumbnail, the corresponding image is displayed within the main image viewer.

I then moved onto jQuery in my development knowledge quest, and decided the next thing I wanted to do was add more images to the nav bar and be able to scroll (with two buttons) across the nav bar. This is where I've hit an end stop in being able to do this with no help.

So to begin with, this is my HTML for the thumbnail navbar:

Code:

<div class="scrollWrapper">
<div class="controlsPrev"></div>
<div class="controlsNext"></div>
		

<div class="scrollableArea">
		<p><input type="image" src="images/home/54.jpg" alt="Image" onclick="displayImage('images/home/54.jpg')" /></p>
		<p><input type="image" src="images/home/55.jpg" alt="Image" onclick="displayImage('images/home/55.jpg')" /></p>
		<p><input type="image" src="images/home/56.jpg" alt="Image" onclick="displayImage('images/home/56.jpg')" /></p>
		<p><input type="image" src="images/home/57.jpg" alt="Image" onclick="displayImage('images/home/57.jpg')" /></p>
		<p><input type="image" src="images/home/58.jpg" alt="Image" onclick="displayImage('images/home/58.jpg')" /></p>
		<p><input type="image" src="images/home/59.jpg" alt="Image" onclick="displayImage('images/home/59.jpg')" /></p>
		<p><input type="image" src="images/home/60.jpg" alt="Image" onclick="displayImage('images/home/60.jpg')" /></p>
		<p><input type="image" src="images/home/61.jpg" alt="Image" onclick="displayImage('images/home/61.jpg')" /></p>
		<p><input type="image" src="images/home/62.jpg" alt="Image" onclick="displayImage('images/home/62.jpg')" /></p>
		<p><input type="image" src="images/home/63.jpg" alt="Image" onclick="displayImage('images/home/63.jpg')" /></p>
		

</div>
</div>
</div>

CSS Styling (external sheet):

Code:

div.scrollWrapper
{
background-color:#252525;
width:960px;
height:115px;
display:block;
overflow:hidden;
}

div.scrollableArea
{
height:115px;
}

div.scrollableArea p
{
margin:0;
}
div.controlsPrev
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
}

div.controlsNext
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
right:195px;
}

My first problem is that now I have added further <p> elements to the navbar, they "wrap" to the next line, causing scrollableArea to be double the height.

The second problem is implementing some code to bring the navbar to life. Since it's jQuery (and I've linked the googleapis library in my html document) I thought the custom animation methods would be the best way to create this effect. Though I've thought of a few obstacles in my way, namely:

1. How to hide the right most or left most (depending on which control class eg. Prev or Next) <p> element and show the opposite <p> element at the same time, and also shift or slide all other <p> elements in view across (again depending on which control class or direction control I have clicked).

2. I want flexible code, that allows for (in the future) more <p> elements. All my code has been based around flexibility and the fact that it will be constantly changing at a fast rate. Therefore I think a function within my script to count the number of <p> elements within the scrollableArea would resolve this issue somewhat.

Any help or advice given on the subject would be greatly appreciated, if there would be another method to get the desired effect then please share. I've stayed away from plug-ins apart from the generic jQuery library provided by google, I want to be able to say I have created everything by myself and not "cheated" if you will. It doesn't take a genius to implement plug-ins into code, I see it on various websites and have seen developers use them before and claim them as their own.

I took a look at a few tutorials on the subject, but I haven't found anything specific to my cause.

Cheers dudes,

Johnny.

Code:

<ul>
<li><a href="dog.jpg"><img src="dog_t.jpg"  alt="dog" /></a></li>
<li><a href="cat.jpg"><img src="cat_t.jpg"  alt="cat" /></a></li>
<li><a href="pig.jpg"><img src="pig_t.jpg"  alt="pig" /></a></li>
<li><a href="cow.jpg"><img src="cow_t.jpg"  alt="cow" /></a></li>
</ul>

My jQuery is set up so that when I click on a thumbnail, a div opens up with the bigger image. I also want the thumbnail of the next image to appear in the same div. So if I click the cat, I want to see the large cat and the pig thumb. How do I tell it that I want the next IMG inside the next A inside the next LI?

Hello all,

I am using an editable iframe to change the style of the text as a person enters text depending on what they type in. Sometimes the text needs to be a link, and while inserting a link works, I can't click on it. I was wondering if anyone knows how to get links in an editable iframe to click through. I've researched this for a while now without getting anywhere.

Right now I'm guessing that I need to somehow find out if the user is hovering over a link and turn "designMode" off for that section of text, or the whole iframe, I'm not completely sure.

Anyway, any help would be greatly appreciated!

I have called a table through XML with four fields. One of them is Excel file name. I like to make a clickable link with Excel file name to open it.
XML code:

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<searchable_index>
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  </searchable_index>


Javascript code
document.write('<table border="1" style="width: 100%;">');
		document.write('<tr><th>name</th><th>title</th><th>link</th></tr>');
		for(var i=0; i<results.length; i++) {
		 document.write('<tr>');
		 document.write('<td>' + results[i].getAttribute("name") + '</td>');  
		 document.write('<td>' + results[i].getAttribute("title") + '</td>');
		 document.write('<td>' + results[i].getAttribute("link")" > + '</td>'); //<a href="url">Link text</a> 
		 
			 
			
			document.write('</tr>');
		}
		document.write('<table>');
		document.close();

Hi,
Im having a weird issue...
I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable...

And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float

[it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...]

Code:

<script language="javascript" type="text/javascript">
        var floating_header = function() {

            this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];

            this.getXY = function(o) {
                var y = 0;
                var x = 0;
                while (o != null) {
                    y += o.offsetTop;
                    x += o.offsetLeft;
                    o = o.offsetParent;
                }
                return { "x": x, "y": y };
            }

            this.setheader = function() {
                if (window.header == undefined) {
                    floating_header();
                }
                var screenpos = this.scrollTop;
                var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
                if (screenpos > window.theady - 100 && screenpos < theady_max) {
                    window.header.style.position = 'absolute';
                    window.header.style.top = this.offsetTop;
                    window.header.style.display = 'block';
                    window.headerOffsetTop = this.offsetTop;
                }
                else {
                    if (screenpos != undefined && window.header != undefined) {
                        window.header.style.position = '';
                        window.header.style.top = '';
                        window.headerOffsetTop = undefined;
                        window.header = undefined;
                    }
                    else {
                        if (window.headerOffsetTop) {
                            window.header.style.position = 'absolute';
                            window.header.style.top = window.headerOffsetTop;
                            window.header.style.display = 'block';
                        }
                    }
                }
            }
            document.getElementById("divcn").onscroll = this.setheader;
            this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
            this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
        };
        floating_header();        
    </script>

Hi! Not sure if this is the right forum for this, but I'm using Javascript so it kinda made sense

I have some Javascript that is selecting text from a form textarea and copying it to the clipboard:

Code:

document.myForm.myTextarea.focus();
document.myForm.myTextarea.select();
document.execCommand( 'Copy' );

This works great. However there is a problem when I try to paste the text somewhere else. Assuming that the text that is being copied is a URL ( ie. http://www.google.com ), I would like it to be pasted as a link.

When I grab a URL from the address bar inside a web browser and paste it somewhere ( such as an e-mail ), it automatically shows up as a clickable link. When I put a URL into my form textarea and run the javascript, it gets pasted as a plain text ( ie. not underlined and not clickable ).

Why are these two different? I've tried running a program to see what is actually copied into the clipboard and I don't see any differences. There must be something that denotes the URL copied from the address bar as a link and therefore makes it clickable when pasted. Is there a way to force this in order to make what is copied to the clipboard from my form textarea a clickable link?

Thanks!