Sample Code | Code Example | Computer Programming Tips: Javascript/JQuery

Showing posts with label Javascript/JQuery. Show all posts

Wednesday, September 14, 2011

Javascript Confirm Message Box

This is the simple and easiest way to create a JavaScript confirm message box. A JavaScript confirm message box is similar to an alert box.with the JavaScript confirm message box the user can get two choices — OK and Cancel button in the message box. One ristriction with the JavaScript confirm message box is that You can't change the names of the choices but you can determine what they do.

<html>
<head>
<script type="text/javascript">
function showConfirmBox()
{
     var r=confirm("Kindly Press a button!");
     if (r==true)
    {
         alert("You just pressed OK!");
    }
   else
   {
        alert("You just pressed Cancel!");
    }
}
</script>
</head>
<body>
<input type="button" onclick=" showConfirmBox ()" value="Click here for confirm box" />
</body>
</html>

Thursday, October 7, 2010

Download JQuery Fundamentals Book and Examples

Monday, September 6, 2010

Display Javascript Popup with Server side code in sharepoint 2010

Simple add the below method in your code behind

public void Popup()
{
// Define the name and type of the client scripts on the page.
String csname1 = "PopupScript";

//String csname2 = "ButtonClickScript";
Type cstype = this.GetType();

// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;

// Check to see if the startup script is already registered.
if (!cs.IsStartupScriptRegistered(cstype, csname1))
{

String cstext1 = "alert('Common are u still copying ...!');";

cs.RegisterStartupScript(cstype, csname1, cstext1, true);
}

}

Saturday, April 24, 2010

Jquery Space Gallery Slider

This jQuery plugin is called SpaceGallery which provides a great new visual effect for your images.View and Download

Thursday, March 25, 2010

Super slick jQuery menu with CSS

To view the Demo Click here

Installing :
First, you'll need to import the script after importing jQuery. You'll need to place this between the <head> and </head> section of your HTML page.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jslickmenu.js"></script>
Right after importing the Javascript files, you'll need to import the CSS for jSlickmenu. This needs to be placed in the head-section too.

<link rel="stylesheet" type="text/css" href="css/slickmenu.css"/>
Now, the menu HTML needs to be as follows:
<div id="menu">
<ul>
<li><a href="[LINK]">
<img src="[IMG]" alt="[TITLE]" />
</a></li>

</ul>
</div>

The id from the surrounding division can be of your choice, as long as you follow it up with an ul. The unorded list contains list items, which contains links and the images. Note The alt attribute of the image will be used as title when the user hovers the image.When that's all set, you can execute the following JavaScript statement to enable the plugin on the just created menu:

$("#menu").jSlickmenu();

That's it! Your menu should be fully capable of showing some amazing effects.

Options :
You want to change some of the slick default effects? Of course you can! Make sure you check out the advanced demonstration too. You can change the following settings:

* speed - Any of the jQuery speed values. Speed for the animation when hovering.
* fadeopacity - Any of the jQuery opacity values. Opacity of the siblings when hovering.
* infomargin - Integer. Margin (in px) for the infobox to appear above the image.
* leftmargin - Integer. Margin (in px) for the menu items seperated from each other.
* css3rotate - Boolean. Whether the menu items should be rotated using CSS3.
* css3shadow - String. The CSS3 box-shadow property.
* css3borderradius - Integer. The size of the border radius property.
* borderneutral - Integer. Width of the border size in px when the user is not hovering.
* borderhover - Integer. Width of the border size in px when the user is hovering.
Here's an example of how the jSlickmenu can be changed with options:

$("#menu").jSlickmenu({
speed : 100,
fadeopacity : 0.1,
infomargin : 15,
leftmargin : 150,
css3rotate : false,
css3shadow : '#999 5px 10px 10px',
css3borderradius : 3,
borderneutral : 5,
borderhover : 20
});

To view the Demo Click here

Stunning Sliding Door Effect with jQuery

To view the Demo Click here
HTML :
<div class="qitem">
<a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
<span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

CSS :
body {
font-family:arial;
}
.qitem {
/* width and height must be even number */
width:126px;
height:126px;

/* some styling for the item */
border:4px solid #222;
margin:5px 5px 5px 0;
background: url('bg.gif') no-repeat;

/* make sure the four divs are hidden after changing the position */
overflow:hidden;
/* absolute position enabled for children elements*/
position:relative;
/* display item in single row */
float:left;

/* hand symbol for ie and other browser */
cursor:hand; cursor:pointer;
}
.qitem img {
border:0;
}
/* styling for caption, position absolute is a must to set the z-index */
.qitem .caption {
position:absolute;
z-index:0;
color:#ccc;
display:block;
}
.qitem .caption h4 {
font-size:12px;
padding:10px 5px 0 8px;
margin:0;
color:#369ead;
}
.qitem .caption p {
font-size:10px;
padding:3px 5px 0 8px;
margin:0;
}

/* Generic setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
/* allow javascript to move the corners */
position:absolute;
background-repeat: no-repeat;
z-index:200;
}

/* set the background position for different corners */
.topLeft {
background-position: top left;
}
.topRight {
background-position: top right;
}
.bottomLeft {
background-position: bottom left;
}
.bottomRight {
background-position: bottom right;
}
.clear {
clear:both;
}

JAVASCRIPT :
$(document).ready(function() {

//Custom settings
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 1000;
var speed_out = 300;

//Calculation for corners
var neg = Math.round($('.qitem').width() / 2) * (-1);
var pos = neg * (-1);
var out = pos * 2;

$('.qitem').each(function () {

//grab the anchor and image path
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');

//remove the image
$('img', this).remove();

//append four corners/divs into it
$(this).append('

');

//set the background image to all the corners
$(this).children('div').css('background-image','url('+ img + ')');

//set the position of corners
$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});

}).hover(function () {

//animate the position
$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});

},

function () {

//put corners back to the original position
$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});

}).click (function () {

//go to the url
window.location = $(this).find('a').attr('href');
});
});
To view the Demo Click here

Saturday, March 20, 2010

Javascript Vertical Scroll Bar For Asp.net

The Script :
<script type="text/javascript">
var delayb4scroll = 2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed = 1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit = 1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed = marqueespeed
var pausespeed = (pauseit == 0) ? copyspeed : 0
var actualheight = ''

function scrollmarquee() {
if (parseInt(cross_marquee.style.top) > (actualheight * (-1) + 8)) //if scroller hasn't reached the end of its height
cross_marquee.style.top = parseInt(cross_marquee.style.top) - copyspeed + "px" //move scroller upwards
else //else, reset to original position
cross_marquee.style.top = parseInt(marqueeheight) + 8 + "px"
}

function initializemarquee() {
cross_marquee = document.getElementById("vmarquee")
cross_marquee.style.top = 0
marqueeheight = document.getElementById("marqueecontainer").offsetHeight
actualheight = cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
if (window.opera || navigator.userAgent.indexOf("Netscape/7") != -1) { //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height = marqueeheight + "px"
cross_marquee.style.overflow = "scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload = initializemarquee
</script>

The Css:
<style type="text/css">
#marqueecontainer
{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>

The HTML :
<body>
<form id="form1" runat="server">
<div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

</div>
</div>
</form>
</body>

Monday, March 8, 2010

JQuery Magnifier

Installation :
Add first the last jQuery release, then the jQZoom script(don't forget this),the correct order is important.Look at the installation code below.
<script type='text/javascript' src='js/jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>
Add jqzoom.css to your header.
<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

How To Use :
Using jQZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.

<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" >
</a>
The anchor element wraps the small image you would like to zoom.Following this schema the necessary and base elements are:

SMALLIMAGE.JPG: Represents the small image you would like to zoom.
BIGIMAGE.JPG: Represents the big image that jQZoom will reveal.
MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).
MYTITLE/IMAGE TITLE: Anchor title and/or image title that will be used to show the zoom title close to the jQZoom Window.

Now load the plugin at window load.

$(document).ready(function(){
    $('.MYCLASS).jqzoom();
});

This would instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.

$(document).ready(function(){
    var options = {
        zoomWidth: 300,
        zoomHeight: 250,
            xOffset: 10,
            yOffset: 0,
            position: "right" //and MORE OPTIONS
};
    $('.MYCLASS).jqzoom(options);
});