JavaScript - Copy Clickable Link To Clipboard

I have a small snippet of code which will copy the contents of a textbox to the clipboard when a small image, say a button, is clicked.

I want to achieve a similar effect when I click a hotspot on an image, but in this case the text will have to come from...well, I don't know. Maybe the title in an area tag?

This is what I have so far for a textbox:

Code:

//clipboard copy
function ClipBoard(what){
Copied = document.getElementById(what).createTextRange();
Copied.execCommand("Copy");
alert ("Information copied to the clipboard. Use CTRL-V to paste."); 
}

<textarea id="holdtext1"></textarea> <img border="0" src="copyclick.gif" onclick="ClipBoard('holdtext1');" alt=" Click to copy text to clipboard / CTRL-V to paste" style="cursor: hand" width="18" height="18">

Does anyone have any ideas?

I have been to this forum many times as a lurker and I have picked up some good information. For this I give Thanks wholeheartedly.

My situation: I enter information in a system based on the # of a report that comes in. So if I see a report that says "333" i want to enter specific information for "333" same with "444" and "555" and so on and so forth.

So I want to have a drop down menu for 111, 222, 333, 444 etc...


Basically what I need is, if I select the report # from the drop down menu, I want it to copy information from a HIDDEN textbox to the clipboard. That's it!

I've been trying to figure it out, but to no avail. Sorry I am fake coder

Hello.

I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting)
I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard.
For example:
Code:

text line one
text line two
text line three

user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'"

What would be the approach?

Thank you.

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 I have some code but have no skills so need a lot of help here is what I have



Code:

<script type="text/javascript"><!--
alert(window.clipboardData.getData ('Text' ))
{if  (1,2,3,4) //repeats 4 times
  {
  //open 1.exe
  }
else if (5,6,7,8) //repeats 4 times
  {
   // open 2.exe
  }else if (9,10,11,12) //repeats 4 times
  {
   // open 3.exe
  }
else
  {
  // 
  }
//--></script>

I need to get it to listn for sertan words and numbers and make a decision on what file to open the .exe files. It needs to recognise when the info has changed in the clipboard

Please help <- thats me

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).

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.

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 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+

Hi im using this php code right here for a search function that opens url's in an iframe PHP Code:
$text = $_POST['text'];
switch($_POST['engine']) {
case 1:
      for($i=0;$i<strlen($text);$i++) { if($text[$i]==" ") { $text[$i]="+"; } }
      $data = "http://www.yahoo.com".$text;
      break;
case 2:
      $data = "http://www.google.com".$text;
      break; 


Code:

<FORM name="search" ACTION='search.php' METHOD='POST' target="frame">
				   <input TYPE='text' NAME="text" id="text" class="search" /> 
					   &nbsp;<font face="verdana">
					   <input type='submit' name="submit" value="Go" class="button" /><br />
					   Select Engine: </font><br />
					   <select name="engine" size="26">
                              
                              <option value="1">yahoo</option>
					                                <option value="2">google</option>
</select>
</form>

what i want to do is instead of using the option form i want to make clickable tables or divs, that when clicked opens the url in the iframe. can anybody help me with this?

Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs.
This is example of what I mean:


Thanks

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>

I have created a slideshow before but I want to create a slideshow where a person clicks on a link and it goes to a certain picture which might have one or more links embedded into the picture something like this:

http://www.myeloma.org.uk/


any guides on how to do this?


help much appreciated

Hello..

I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button.

What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously.

How can I obtain this?
Whether if it's created in JavaScript or jQuery doesn't matter, I use both...

Thanks

My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you.

Shawnel


<head>
<style type="text/css">
.style1 {
vertical-align: top;
}
</style>
</head>

<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/Picture Box/PictureBox1.jpg"
var image2=new Image()
image2.src="Images/Picture Box/PictureBox2.jpg"
var image3=new Image()
image3.src="Images/Picture Box/PictureBox3.jpg"
var image4=new Image()
image4.src="Images/Picture Box/PictureBox4.jpg"
var image5=new Image()
image5.src="Images/Picture Box/PictureBox5.jpg"
//-->
</script>

<body style="margin-top: 0">

&nbsp;<a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",3000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="learnmore.htm"
else if (whichimage==2)
window.location="contactus.htm"
else if (whichimage==3)
window.location="hungerheroes.htm"
else if (whichimage==4)
window.location="donate.htm"
else if (whichimage==5)
window.location="volunteer.htm"
}
//-->
</script>