Monday, January 11, 2010

JavaScript for getting user details

If you want to get user detail through java script, use this script


<!-- ONE STEP TO INSTALL IP ADDRESS:

1. Copy the coding into the HEAD of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// http://www.kdcgrohl.com

// Depending on your server set-up,
// you may need to use the ".shtml"
// extension [instead of the "html"
// or "htm"] as the script uses Server
// Side Includes. To display in the
// title bar, exclude the
//"<title></title>" code from the page.

// This part gets the IP
var ip = '<!--#echo var="REMOTE_ADDR"-->';

// This part is for an alert box
alert("Your IP address is "+ip);

// This part is for the status bar
window.defaultStatus = "Your IP address is "+ip;

// This part is for the title bar
document.write("<title>Your IP address is "+ip+"</title>");
// End -->
</script>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 1.09 KB -->

Thursday, January 7, 2010

Add to favorite link script

Some times we can see a add to favorite link in many sites. When you click on this link, the "Favorites" window pop-ups asking if you would like to add the site to the list.
Let us first see the advantages of adding such a link:
If visitors really like your site, they can easily add it to their favorites list through the normal process - Under Internet Explorer, click on the "Favorites" menu item and then on "Add to Favorites...".
However, they might just forget about this or they just might feel lazy (...you now what I mean). If you have an "Add To Favorites" link, you not only remind the visitors of the favorites folder but also prompt them to add your site and this just takes one click.
Here we use a little JavaScript and tie it up to the HREF tag of the link and here is the JavaScript function code:
function addfav()
{
if (document.all)
{
window.external.AddFavorite
("http://www.addictdotnet.blogspot.com","Dot the Net")
}
}
Note: The javascript statement "window.external.AddFavorite(..." should be a single line
The part in red color in the above code is the URL and the blue is the Name you want to give to the link.
The function can be placed inside the document head or an external .js file and will be called from the link as:
Add To Favorites

Wednesday, January 6, 2010

YouTube Video Player

In main window you can search videos according to you proffered keyword.

You are free to drag the YouTube feed items around, providing you are currently in Drag mode. Where the Mode is changable using the right click context menu.

When you toggle out of Drag mode, you will be in Play mode, so will no longer be able to move the video items around. Instead when you move the mouse over an video item you will see a PLAY icon appear.

When you then click this PLAY icon a new video viewer will be shown where you can view the YouTube video. This window is animated into/out of view. You should be able to open the viewer window whenever you are in Play mode and click on a unique video item.

it is actually just a bit of XLINQ, as follows

var xraw = XElement.Load(string.Format(SEARCH,keyWord));
var xroot = XElement.Parse(xraw.ToString());
var links = (from item in xroot.Element("channel").Descendants("item")
select new YouTubeInfo
{
LinkUrl = item.Element("link").Value,
EmbedUrl = GetEmbedUrlFromLink(item.Element("link").Value),
ThumnailUrl =
item.Elements().Where(
child => child.Name.ToString().Contains("thumbnail")
).Single().Attribute("url").Value

}).Take(20);

return links.ToList();



So this is used within the YouViewerMainWindow to create a bunch of YouTubeResultControl controls, which are then added to a DragCanvas. I can take no credit for the DragCanvas, I stole that straight from Josh Smith, using this code

There is nothing special to say about the YouTubeResultControl controls, they are fairly simply controls, that simply contain a single YouTubeInfo item which is used within an event that is raised when the user clicks the internal YouTubeResultControl controls play button. The YouViewerMainWindow uses the YouTubeInfo item to pass to the Viewer control, which in turn is resposible for playing the actual video.

So far nothing special right, all very easy stuff.

The only part that's a bit interesting is that we can play the YouTube video in the new WebBrowser control. This is neat.

Normally WPF only lets you play Windows Media Player supported files that are local or MMS prefixed streams.

YouTube is neither of these, so how does it work. Well luckily the RSS feed contains enough information for us to do some string manipulation to get a new Url, that points to something much more interesting.

Basically from the RSS feed we can get the following string

http://youtube.com/?v=FhZ-HsiS8aI

but if we mess around with it a bit we can get

http://www.youtube.com/v/FhZ-HsiS8aI&hl=en

Which is a link to a SWF (Flash) file, that will play directly in the new browser if you past this in to a browser address bar. Aha.

So we can use this new Url and use that as the Source property for the new .NET 3.5 SP1 WebBrowser control, and we get the usual YouTube player we are used to, for free. Neato. I also tried this with the .NET 2.0 WinForms WebBrowser (interop so WindowsIntegration Dll required) control, and the WPF Frame control but they didn't work like the new .NET 3.5 SP1 WebBrowser control.

Retrieve Images from fatabase

This is a sample code to retrieve images from data base in a gridview as to upload images to database.

use fileupload control to upload images and on upload button click retrieve image from fileupload control(named as fulimage)by writing

StreamimgStream = fuImage.PostedFile.InputStream;

and insert it into database along with other parameters.

to retrieve image from database in a gridview use generic handler. place a template in gridview and place itemtemplate in it.now add a image here like this.



and in the ImageHandler.ashx get image id from query string and retrive image from database in a datareader then return that image by this code

context.Response.BinaryWrite((Byte[])dr[0]);

here dr[0] means that image is in first field of the database.

Download the complete code here

Upload Image to database in Binary formate

This is a sample code for uploading images in database.


protected void Button1_Click(object sender, EventArgs e)
{
byte[] image = FileUpload1.FileBytes;

String name = TextBox1.Text;

String qryString = "INSERT INTO [Table] VALUES ( '" + name + "' , '" + image + "' )";
using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
{
using (SqlCommand command = new SqlCommand(qryString, connection))
{
connection.Open();
command.ExecuteNonQuery();
}
}
}


for more details download code from here

Tuesday, January 5, 2010

Java Script Drag anddrop example

This a simple example of drag n drop using javascript.


<!-- TWO STEPS TO INSTALL DRAG-N-DROP:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->



<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}

if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
// End -->
</script>
</HEAD>



<!-- STEP TWO: Copy this code into the BODY of your HTML document -->



<BODY>

<div id="s" style="position:absolute;left:50;top:300;">
<img src=~/img/cards/spades.gif name="s">
</div>

<div id="d" style="position:absolute;left:50;top:350;">
<img src=~/img/cards/diamonds.gif name="d">
</div>

<div id="c" style="position:absolute;left:100;top:300;">
<img src=~/img/cards/clubs.gif name="c">
</div>

<div id="h" style="position:absolute;left:100;top:350;">
<img src=~/img/cards/hearts.gif name="h">
</div>

Just click and hold the 4 suit images to the left and then you can move them around the page!

</body>
</html>

original post