Web Solution 4U: May 2011

Tuesday, May 31, 2011

Sliding Menu Effect, Single Level Menu using Jquery, Jquery Tutorial for Sliding Effect

When we create Web pages there is a big roll of animation of menu.

here I am providing one of menu effect available in Javascript.

HTML CODE

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Menu Effect</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" language="javascript"

 src="script.js"></script>
</head>
<body onload="menuSlider.init('menu','slide')">
<div class="menu">
    <ul id="menu">
        <li><a href="#">JavaScript</a></li>

<li><a href="#">Graphic Design</a></li>
        <li><a href="#">HTML</a></li>
        <li value="1"><a href="#">User Interface</a></li>
        <li><a href="#">CSS</a></li>
    </ul>
    <div id="slide"><!-- --></div>
</div>

</body>
</html>

CSS Classes

<style>
body {font:14px Helvetica, sans-serif; font-weight:bold;

background:#FFF}
.menu {position:relative; background:url(images/bg.gif) no-repeat;

height:35px;

width:459px}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100;

padding:9px 5px}
.menu li {float:left}
.menu a, .menu a:active, .menu a:visited {text-decoration:none;

color:#FFF;

padding:10px}
.menu a:hover {color:#ebf0e6}
#slide {position:absolute; bottom:0; height:4px;

background:#89957a; z-index:10}

 </style>

JavaScript

var menuSlider=function(){
 var m,e,g,s,q,i; e=[]; q=8; i=8;
 return{
  init:function(j,k){
 m=document.getElementById(j); e=m.getElementsByTagName('li');
 var i,l,w,p; i=0; l=e.length;
 for(i;i<l;i++){
var c,v; c=e[i]; v=c.value;

if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
 c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function()

{menuSlider.mo(s)};
 }
 g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';
 },
 mo:function(d){
 clearInterval(m.tm);
 var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
 m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
 },
 mv:function(el,ew){
 var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);

if(l!=el||w!=ew){
if(l!=el){

var ld,lr,li; ld=(l>el)?-1:1;

lr=Math.abs(el-l);

li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
if(w!=ew){

var wd,wr,wi; wd=(w>ew)?-1:1;

wr=Math.abs(ew-w);

wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}
 }else{clearInterval(m.tm)}
}};}();

</script>

Online Example

Saturday, May 28, 2011

Drag-Drop In javascript, Hit test in javascript, JavaScript Tutorial to create Drag-Drop Events

As i created some small game in flash using HIT TEST. I always thought about same event in java-script too. After some day i need it to implement one for my company client's website who deals in stock market and they want drag-drop feature to show user's best stock.

Here i going to share the work i did for my client using HITTEST and Drag-Drop in java-script.

// Custom drop actions for <div id="dropBox">
    function dropItems(idOfDraggedItem, targetId, x, y) {

document.getElementById('ctl00_Site_fOREX1_dragged1').innerHTML = 
document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('ctl00_Site_fOREX1_HiddenField1').value = 
document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('ctl00_Site_fOREX1_HiddenField_id1').value = 
idOfDraggedItem
    }

   

    // Custom drop actions for <div id="dropBox1">

    function dropItems1(idOfDraggedItem, targetId, x, y) {

document.getElementById('ctl00_Site_fOREX1_dragged2').innerHTML = 
document.getElementById(idOfDraggedItem).innerHTML;

document.getElementById('ctl00_Site_fOREX1_HiddenField2').value = 
document.getElementById(idOfDraggedItem).innerHTML;
document.getElementById('ctl00_Site_fOREX1_HiddenField_id2').value = 
idOfDraggedItem

}

    // Custom drop actions for <div id="dropBox2">
function dropItems2(idOfDraggedItem, targetId, x, y) {
document.getElementById('ctl00_Site_fOREX1_Dragged3').innerHTML = 
document.getElementById(idOfDraggedItem).innerHTML;

document.getElementById('ctl00_Site_fOREX1_HiddenField3').value = 
document.getElementById(idOfDraggedItem).innerHTML;

document.getElementById('ctl00_Site_fOREX1_HiddenField_id3').value = 
idOfDraggedItem
    }

var dragDropObj = new DHTMLgoodies_dragDrop();

dragDropObj.addSource('Forex1', true);

dragDropObj.addSource('Forex2', true);

dragDropObj.addSource('Forex3', true);

dragDropObj.addSource('Forex4', true);

dragDropObj.addSource('Forex5', true);

dragDropObj.addSource('Forex6', true);

dragDropObj.addSource('Indeses1', true);

dragDropObj.addSource('Indeses2', true);

dragDropObj.addSource('Indeses3', true);

dragDropObj.addSource('Indeses4', true);

dragDropObj.addSource('Indeses5', true);
dragDropObj.addSource('Indeses6', true);
dragDropObj.addSource('Bullion1', true);
dragDropObj.addSource('Bullion2', true);
dragDropObj.addSource('Bullion3', true);
dragDropObj.addSource('Bullion4', true);
dragDropObj.addSource('Bullion5', true);
dragDropObj.addSource('Bullion6', true);

// Javascript Target box to which Drag box make Hittest

dragDropObj.addTarget('dropBox', 'dropItems');

dragDropObj.addTarget('dropBox1', 'dropItems1');

dragDropObj.addTarget('dropBox2', 'dropItems2');

dragDropObj.init();

</script>

How to Use javascript

To make div dragable you need to define the div of which you want to drag.
for this you need to mention.

dragDropObj.addSource(<DIV ID name here>, true);

To make div Target for HitTest you need to define the div of which you want to set as target.
use function.

dragDropObj.addTarget(<Div ID target to be hit>, 'dropItems');

Go to website and click view market Dashbord

Now u can see how javascript works.

Also include the Jquery library file

drag-drop-custom.js

Tuesday, May 24, 2011

Script to find all Anchor which contains attachments, Jquery Tutorial for edit anchor tag of an ID, Edit Anchor tags exist in ID

To achive the Web Accessibility.

we use to show icons for type of attached file. This feature is not easy to achive when we have older dynamically site. where all links comes dynamic at your website.

To chive this feature I made Jquery which checks all the page's anchor tags and its link and forund those anchor have attachment of work, excel, pdf, zip.

To achieve this feature do as instruct.

paste this link for jquery liabrary file.

http://code.jquery.com/jquery-1.6.1.min.js

Add this script code in the bottom of your page before body end tag.

<script type="text/javascript">
        //
 
        $("#bottom a").each(function(i) {
            //  alert('sfd');
            var anch = $(this).attr("href");
            var i = anch.substring(anch.lastIndexOf('.') + 1);
            switch (i) {
                case 'xls':
$(this).append(" src='../images/excel_icon.png' />");
                  break;

case 'XLS':
$(this).append(" src='../images/excel_icon.png' />");
                    break; 
 
case 'jpg':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
case 'JPG':
$(this).append("  src='../images/jpg.gif' />");
                    break; 
 
case 'png':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
case 'PNG':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
case 'gif':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
 
case 'GIF':
$(this).append(" src='../images/jpg.gif' />");
                    break; 
 
case 'doc':
    $(this).append(" src='../images/word_icon.png' />");
                    break; 
 
case 'DOC':
$(this).append(" src='../images/word_icon.png' />");
                    break; 
 
case 'pdf':
$(this).append(" src='../images/pdf_icon.gif' />");
                   break; 
 
case 'PDF':
$(this).append(" src='../images/pdf_icon.gif' />");
break; 
 
case 'zip':
$(this).append(" src='../images/zip_icon.gif' />");
break; 
 
case 'ZIP':
$(this).append(" src='../images/zip_icon.gif' />");
                    break;
                default:
 
            }
        });
 
        //]]>   
    script>

We need to put script code before closing tag of body because it should run when the complete page is loaded to system.

How to customize the script:-

here you can put the class name or id name of which anchor tag you want to scan.

// for classs named bottom

  $(".bottom a").each(function(i)

// for id named bottom

$("#bottom a").each(function(i)

 here you you can update the working perform by jquery.

as you can do anything like color change adding attribute.

 
case 'doc':

$(this).append(" src='../images/word_icon.png' />");
                    break;

images to show as icon.

zip format:

Word format:

PDF Format:

Excel Format:

Image format

For live examples

https://www.centralbankofindia.co.in/site/indexcbi.aspx

If you like the post do comment on it. 
or you want any modification or any another kind of 
script you are welcome and ask for same.

I will help you...

Wednesday, May 11, 2011

Create an Image Rotator with Description (CSS/jQuery) Modified, Jquery Slideshow, Image gallery in Jquery, Jquery tutorial for Image Slideshow

Here I am providing the image rotator with few changes made by my self.
you can easily found jquery slideshow like image given below.

of which I made some changes in position by using CSS.

CSS Code

#main
{
overflow: hidden;
width: 680px;
margin: 0 auto;
background: url('../images/banner.png') no-repeat scroll right bottom #41699C;
border: 1px solid #41699C;
}
a
{
color: #fff;
}
/*--Main Image Preview--*/
.main_image
{
width: 450px;
height: 308px;
float: right;
position: relative;
overflow: hidden;
color: #fff;
}
.main_image h2
{
font-size: 2em;
font-weight: normal;
margin: 0 0 5px;
padding: 10px;
}
.main_image p
{
font-size: 1.2em;
padding: 10px;
margin: 0;
line-height: 1.6em;
}
.block small
{
padding: 0 0 0 20px;
background: url(icon_calendar.gif) no-repeat 0 center;
font-size: 1em;
}
.main_image .block small
{
margin-left: 10px;
}
.main_image .desc
{
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
}
.main_image .block
{
width: 100%;/*
background: #111;
border-top: 1px solid #000;*/
}
.main_image img
{ bottom: 0;
position: absolute;
right: 0;
}

.main_image a.collapse
{
background: url(btn_collapse.gif) no-repeat left top;
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.main_image a.show
{
background-position: left bottom;
}
.image_thumb
{
float: left;
width: 225px;
background: #41699c;
border-top: 1px solid #41699C;
}
.image_thumb img
{
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.image_thumb ul
{
margin: 0;
padding: 0;
list-style: none;
}
.image_thumb ul li
{
margin: 0;
background: #2c4769 url(../images/nav_a.jpg) repeat-x;
width: 100%;
float: left;
border-bottom: 1px solid #4d5687;
border-top: 1px solid #22252a;
}

.image_thumb ul li a
{
display:none;
}
.image_thumb ul li.hover
{
background: #2c4769;
cursor: pointer;
}
.image_thumb ul li.active
{
background: #41699c;
cursor: default;
}
html .image_thumb ul li h2
{
font-size: 11px;
margin: 5px 0;
color:#fff;
font-weight:bold;
padding: 0;
}
.image_thumb ul li div
{
float: left;
margin-left: 5px;
padding: 0;
padding-left:45px;
height:50px;
width: 170px;
}

.image_thumb ul li div.email
{
background: url(../images/email.png) no-repeat 0px 5px;
}

.image_thumb ul li div.social
{
background: url(../images/social_ico.png) no-repeat 0px 5px;
}
.image_thumb ul li div.cart
{
background: url(../images/cart.png) no-repeat 0px 5px;
}
.image_thumb ul li div.world
{
background: url(../images/world.png) no-repeat 0px 5px;
}
.image_thumb ul li div.tool
{
background: url(../images/tool.png) no-repeat 0px 5px;
}
.image_thumb ul li div.net
{
background: url(../images/net.png) no-repeat 0px 5px;
}
.image_thumb ul li p
{
display: none;
}

HTML Code

<div id="main">
/////////////////// Image Thumb Start here //////////////////
<div class="image_thumb">
<ul>
<li>

<div class="block email">
<h2>
Email Unifier</h2>
<p>
Our unique email unifier platform allows you to import all your multiple emails
and contacts in one very easy to use inbox and contact list with a single login.
You can now receive and send emails using different email accounts on gmail, hotmail,
yahoo, AOL and even your business POP3 account. You will now be able to customize
a unified contacts list with a complete contact information. You can easily add
your digital signatures, background, emoticons, cool graphics and animation to your
emails.
</p>
</div>
</li>
<li>

<div class="block social">
<h2>
Integrated Social networks</h2>
<p>
Networking is now multi-dimensional. You are just a tab away from accessing your
facebook, twitter, linkedin and your IMs without having to login separately. Our
own special networking platform is great way to keep in touch with your friends,
family, business teams, business networks and Not only that, you can also update
your status, share photos and links across all your networks with a single update.
Chat with your friends on different messengers from a single easy to use chat tool.</p>
</div>
</li>
<li>

<div class="block tool">
<h2>
Business teams and collaborative task tool</h2>
<p>
Create your multiple business/project teams and networks and assign and receive
tasks and queries. Our specially designed task management tool will assist you to
follow up on pending tasks/queries with your team. Now, everything important for
your business, project or profession can be managed from a single screen.</p>
</div>
</li>
<li>

<div class="block world">
<h2>
My world</h2>
<p>
Create your own web world with great features designed to simplify your life. You
can manage your due bills, your maintenance logs, your documents and photo albums,
your notes, your contacts, your important tasks and daily planner from a single
interface. Now, your world is closer together than ever before.</p>
</div>
</li>
<li>

<div class="block cart">
<h2>
Shopping, Classifieds and jobs</h2>
<p>
Now, everything you may need is here with our unique and simple one screen interface.
How about shopping when you get a short break from emails and networking, while
still keeping in touch! You can look for a suitable job or a candidate and a product
or service you want or want to offer in our free classifieds and jobs section. We
will just gently update you when you have suitable match for your requirements without
cluttering up your inbox.</p>
</div>
</li>
<li>

<div class="block net">
<h2>
Business Networking</h2>
<p>
An individual is the most basic unit of any business, as a business professional,
as a consumer, or even as a business owner. Reach out to the world through our innovative
business networking platform.<br />
<br />
Register your business in our business directory and create your business catalog
and classifieds</p>
</div>
</li>
</ul>
</div>

/////////////////// Image Thumb Ends here //////////////////

<div class="main_image">

<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h2>
Email Unifier</h2>
<p>
Our unique email unifier platform allows you to import all your multiple emails
and contacts in one very easy to use inbox and contact list with a single login.
You can now receive and send emails using different email accounts on gmail, hotmail,
yahoo, AOL and even your business POP3 account. You will now be able to customize
a unified contacts list with a complete contact information. You can easily add
your digital signatures, background, emoticons, cool graphics and animation to your
emails.
</p>
</div>
</div>
</div>
</div>

Script Section

Also as given jquery slideshow is working after you clicking on it.
But by using my script you can run it by a set time interval itself.

for this u just need to add script at ur page.

////////////// For auto RUN on 5 second ////////////////////
<script type="text/javascript">

function now() {
j = i;
i = i + 1;
if (i > 5) {
i = 0;
}
// alert(i);
var nxt_li;
$(".image_thumb ul").find("li").eq(j).removeClass('active');
nxt_li = $(".image_thumb ul").find("li").eq(i).addClass("active");
//alert(nxt_li);

// $(nxt_li).addClass('active');
var imgAlt = $(nxt_li).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(nxt_li).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(nxt_li).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
-

//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginTop: "0" }, 250);
$(".main_image img").attr({ src: imgTitle, alt: imgAlt });

});
$nxt_li.addClass("active");

$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists

return false;

}

setInterval(now, 5000); //////////// can change interval
</script>

Pages