Showing posts with label javascript. Show all posts

Copy to Clipboard !!! using Javascript

by Noman Muhammad

Copy to clipboard functionality is very useful when we want to copy any particular content of a web page automatically. I search over the net to know how to implement it. I found that almost every tutorial use the javascript function "execCommand()". Here is an example how I use it:


<body>
<script type="text/javascript">
function ClipBoard()
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}
</script>


<SPAN ID="copytext" STYLE="background-color:pink">
COPY This Line!
</SPAN>

<TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA>
<BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>
</body>


When I click on the button the line "COPY This Line!" will be copied to the clipboard and then I can paste it anywhere.
But its not a solution of my problem when i open my page on Mozilla Firefox browser.
As per I know Firefox doesn't support the javascript function "execCommand()".

After some googling I find this link which solve my problem both for IE and FireFox. Here is my implementation of this:

<html>
<head>Copy to Clipboard</head>
<body>
<script type="text/javascript">
function copy_to_clipboard(text)
{
if(window.clipboardData)
{
window.clipboardData.setData('text',text);
}
else
{
var clipboarddiv=document.getElementById('divclipboardswf');
if(clipboarddiv==null)
{
clipboarddiv=document.createElement('div');
clipboarddiv.setAttribute("name", "divclipboardswf");
clipboarddiv.setAttribute("id", "divclipboardswf");
document.body.appendChild(clipboarddiv);
}
clipboarddiv.innerHTML='<embed src="clipboard.swf" FlashVars="clipboard='+
encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
}
}
</script>

<input type="text" id="rt" value="" />
<input type="button" value="Copy" onclick="copy_to_clipboard(document.getElementById('rt').value);" />

</body>
</html>


To use it for firefox I have to download the flash (.swf) file from here and placed at path where this function is placed or else source parameter for embed tag to be changed to correct path where the flash file is been placed.
I also need firefox plugins for flash player as it depends on flash.
Now if I write something on the text box and then press the button the written text on the input box will be copied to the clipborad.

It works very fine. :)

Scrolling PHP News Ticker

by Noman Muhammad

We often show latest news from various News Site RSS feed in our site. We can show this news as like as scrolling news in the TV channels. We called it news ticker. Here i show the steps that i do to show those news like TV channel scrolling news. I use this javascript file to do this. Here is my steps

1. create a index.php file and add these lines between body tag:

<DIV ID="TICKER" STYLE="width:520px; overflow:hidden"  onmouseover="TICKER_PAUSED=true" onMouseOut="TICKER_PAUSED=false">
<?php
include("xmlparser.php");
?>
</DIV>
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>


2. Download the webticker_lib.js javascript file from here

3. create a .php file name xmlparser.php and put those line:

<?php

$insideitem = false;
$tag = "";
$title = "";
$description = "";
$link = "";

function startElement($parser, $name, $attrs) {
global $insideitem, $tag, $title, $description, $link;
if ($insideitem) {
$tag = $name;
} elseif ($name == "ITEM") {
$insideitem = true;
}
}

function endElement($parser, $name) {
global $insideitem, $tag, $title, $description, $link;
if ($name == "ITEM") {
printf("<a href='%s' target='_blank'>%s</a> ",
trim($link),htmlspecialchars(trim($title)));
$title = "";
$description = "";
$link = "";
$insideitem = false;
}
}

function characterData($parser, $data) {
global $insideitem, $tag, $title, $description, $link;
if ($insideitem) {
switch ($tag) {
case "TITLE":
$title .= $data;
break;
case "DESCRIPTION":
$description .= $data;
break;
case "LINK":
$link .= $data;
break;
}
}
}


$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, "startElement", "endElement");
xml_set_character_data_handler($xml_parser, "characterData");
$fp = fopen("http://bangla.irib.ir/index.php?option=com_rss&feed=RSS2.0&no_html=1","r")
or die("Error reading RSS data.");
while ($data = fread($fp, 4096))
xml_parse($xml_parser, $data, feof($fp))
or die(sprintf("XML error: %s at line %d",
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
fclose($fp);
xml_parser_free($xml_parser);

?>


Here "http://bangla.irib.ir/index.php?option=com_rss&feed=RSS2.0&no_html=1" is the rss feed address, from that i retrieve news. So we to change this address when we want to retrieve news from other RSS feeder.
Thats all. Now Run the index.php file and get news ticker in action.

Simple Javascript menu :OpenCube

by Noman Muhammad

Often we to create Javascript menu to use in website. Opencube provides a tremendous software to produce various type(horizontal/vertical) of menu and use it our site. This software can be downloaded from this link. For Linux/mac download from here. Use it and enjoy it :).