Thursday, July 28, 2011

Random image on refresh using javascript, Change image on every refresh, Another Picture, every refresh

Changing things on every refresh to your website is attractive feature to retain your visitors to your website.

Because it create suspense into visitor about the next information.

So I want to share this JavaScript.

JavaScript Code
var ranNum = Math.floor(Math.random() * 3);
        //alert(ranNum);
        var quote = new Array(3)
        var lnk = new Array(3)


          quote[0] = "home/modeltiranga.jpg";
          quote[1] = "home/modelbeauty.jpg";        
          quote[2] = "home/modeltiranga.jpg";


          lnk[0] = "product_category.aspx?id=446";      

          lnk[1] = "Product_category.aspx?samemodel=17440"; 
          lnk[2] = "product_category.aspx?id=446"; 

Put this code into HEAD tag.


HTML Code
<script type="text/javascript">                                
 //<![CDATA[
                                    document.write('<a href="' + lnk[ranNum] + '"><img src="' + quote[ranNum] + '" alt="Mart of Images"/></a>')
 //]]>
</script>

put this code into BODY tags



Friday, July 22, 2011

javascript marquee example, JavaScript Marquee, horizontal scroller text using Jquery, Jquery tutorial to create Marquee effect, simple Jquery tmple Jquery to o create Marquee, horizontal ticker using jquery


Marquee is nice and useful feature for New news and promotions of website for which most of designer and Developers are used marquee tag and its attributes.

Now these days web accessibility is become must for websites due to make website GOOGLE friendly. So google can easily crawl them.

But according to W3C Marquee is not more with HTML tag family it shows error in W3C validation.

after searching long time to web I found the REPLACEMENT of Marquee using JQUERY and this information I would like to share with my designer and Developer friends using this Post.

Its very simple to use and implement into our website whether its Dynamic or static.

HTML CODE
<ul id='ticker02'>
 <li><a href="#">Hello 1</a></li>
 <li><a href="#">Hello 2</a></li>
 <li><a href="#">Hello 3</a></li>
 <li><a href="#">Hello 4</a></li>
 <li><a href="#">Hello 5</a></li>
</ul>
<script type="text/javascript" language="javascript"> 
//<![CDATA[ 
$(function(){ $("ul#ticker02").liScroll({travelocity: 0.03}); }); 
//]]> 
    </script>

CSS CODE

Now just need to add two Script file URL given Below you can save them too.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
https://www.obcindia.co.in/obcnew/site/common/css/jquery.li-scroller.1.0.js


Saturday, July 16, 2011

Image Slide Show with Typing text effect, Jquery Tutorial for imagegallery, Typing text effect in Jquery, jQuery Image Galleries & Sliders

Last time I share some of Image gallery and slideshows for Image rotators having auto run and clicked event using Jquery.

also share another jquery slideshow and image gallery onhover effect having left scroller and right scroll depending on your mouse cursor position.


Today I am going to share one more simple image gallery with name of image and its description.  Using nice effect of typing to showing image name and its description.

Its easy to implement in your blog or site.

Here I am providing the Jquery tutorial for implementing the image gallery.

HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>
 PROMPT:: we envision. we deliver
</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/animation1.css" rel="stylesheet" type="text/css" />
<script src="http://web15346.38.ocpwebserver.com/meltbook/CSS/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="css/scripts.js" type="text/javascript"></script>    
</head>
<body>
<div class="mid_ani">
<div id="header">
            <div class="wrap">
                <div id="slide-holder">
                    <div id="slide-runner">
                        <a href="">
                            <img id="slide-img-2" src="images/1.jpg" class="slide" alt="Prompt" /></a> <a href="">
                                <img id="slide-img-3" src="images/4.jpg" class="slide" alt="Prompt Solution" /></a> <a href="">
                                    <img id="slide-img-4" src="images/3.jpg" class="slide" alt="Prompt Solution Inc" /></a>
<a href="">
                            <img id="slide-img-5" src="images/0.jpg" class="slide" alt="Prompt Slide" /></a>
                        <div id="slide-controls">
                            <p id="slide-client" class="text">
                                <strong>post: </strong><span></span>
                            </p>
                            <p id="slide-desc" class="text">
                            </p>
<p id="slide-nav">
                            </p>
                        </div>
                    </div>
                    <!--content featured gallery here -->
                </div>

                <script type="text/javascript">
                    if (!window.slider) var slider = {}; slider.data = [
                                    { "id": "slide-img-2", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here"}];
                </script>

</div>
        </div>
        <!--/header-->
    </div>
</body>
</html>


scripts Code
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  //$.each(css_ims,function(){(new Image()).src=_siteRoot+'../images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a class="num" id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};


Animation1 CSS Code
a img {
border : 0;
}

div.wrap a,div.wrap a:hover
{
    color:#fff;
}
div.wrap {
width : 980px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 980px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 235px;
background : url(../images/ani.png) no-repeat left top ;
}
div#header div#slide-holder {
z-index : 40;
width : 980px;
height : 236px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 1px;
left : 1px;
width : 975px;
height : 224px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 0px;
width : 973px;
height : 30px;
display : none;
position : absolute;
background : url(../images/images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display:none;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 5px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 17px;
display : inline;
margin : 2px 5px 0 0;
font-size : 0px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
color:#fff;
line-height:22px;
margin : 0 5px 0 0;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(../images/images/silde-nav1.png);
}
div#nav ul li a {
background : url(../images/images/nav.png) no-repeat;
}

Tuesday, July 12, 2011

Jquey Tutorial for Slideshow, Jquery Image gallery, Image galley with description using Jquery, Image Slideshow using Lightbox in Jquery Image Slideshow using Lightbox in Jquery

while searching for Slideshow(image gallery) I found Jquery light box plugin which use Modelbox (Light box) to view show gallery image and its description.

This image gallery is too easy to implement on our websites.

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery's selector.

Here I am providing the tutorial to implement the image gallery.

HTML Source Code
<div id="gallery">
    <ul>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image3.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image4.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image5.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

CSS and Script
http://119.82.71.124/fb/jquey_lightbox/js/jquery.js
http://119.82.71.124/fb/jquey_lightbox/js/jquery.lightbox-0.5.js
http://119.82.71.124/fb/jquey_lightbox/css/jquery.lightbox-0.5.css
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
       <style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

Modification
Here we mention the ID selector name in which the gallery exist. you can use any of id exist in you webpage.


$(function() {
        $('#gallery a').lightBox();
    });



Image and thumbnail information

BIG Image: Anchor tags href contain the URL of Bigger image which has to be open after click on image thumbnails.


Description: For inserting Description of image we need to mention all description into anchor tag's TITLE attribute.

Thumb: For Thumbnail we use IMG tag as small image.

<a href="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" title="put your descript here">
                <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>



Wednesday, July 6, 2011

jquery tutorial for check all checkbox, Select Multiple checkbox, JQuery Check and Uncheck All Checkboxes

This function is specially designed for dynamic pages with varying numbers of checkboxes.

I found same functionality in JavaScript too but we can't use same script for two control.

So i decide to create Jquery for same script here I am providing both SCRIPT code for JavaScript and Jquery.

JavaScript
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
 if(!document.forms[FormName])
  return;
 var objCheckBoxes = document.forms[FormName].elements[FieldName];
 if(!objCheckBoxes)
  return;
 var countCheckBoxes = objCheckBoxes.length;
 if(!countCheckBoxes)
  objCheckBoxes.checked = CheckValue;
 else
  // set the check value for all check boxes
  for(var i = 0; i < countCheckBoxes; i++)
   objCheckBoxes[i].checked = CheckValue;
}



Jquery

 $('#ctl00_ContentPlaceHolder1_chkPending').live('click',function() {
            if(pending==0){
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", false);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", false);
            });
            pending=1;
            }
            else
            {
            $("#ctl00_ContentPlaceHolder1_chkPending").attr("checked", true);
            $("#ctl00_ContentPlaceHolder1_chkPendingList input:checkbox").each(function() {
                $(this).attr("checked", true);
            });
            pending=0;
            }
        });

Please do not forget to add Jquery library file.
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

You  all need to do is put two id's into script.
$("#ctl00_ContentPlaceHolder1_GridView1_ctl01_ChkAll").toggle

here  you need to put id of whom click you want to check all check-box .


$("#accordion1 input:checkbox").each
here you need to mention in which all check-box should be checked.

Tuesday, July 5, 2011

Jquery Smooth Navigation menu, DropDown Menus, MultiLvel DropDown Menu in Jquery, MultiLevel Menu on Click event

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontalvertical (sidebar) orientation. and

 This menu i found from Dynamic Drive Smooth Navigation Menu and used for multiple website.

because it provides the orientation based Menu. Means we can use this menu as HORIZONTAL and VERTICAL also.

But this menu is work on hover event.

By modifying its jquery I able to run it on click event.