Develop Reference

Range slider with text box Jquery and CSS

I would like to create a range slider along with a text box. I while using the range slider, I want the ranger value automatically update in the text box and vice versa. Also, I need to change the color of slider lower part (left side of slider thumb). I am using below code to for this
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function c(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function d(a,b){return b=b||100,function(){if(!a.debouncing){var c=Array.prototype.slice.apply(arguments);a.lastReturnVal=a.apply(window,c),a.debouncing=!0}return clearTimeout(a.debounceTimeout),a.debounceTimeout=setTimeout(function(){a.debouncing=!1},b),a.lastReturnVal}}function e(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function f(a){for(var b=[],c=a.parentNode;e(c);)b.push(c),c=c.parentNode;return b}function g(a,b){function c(a){"undefined"!=typeof a.open&&(a.open=a.open?!1:!0)}var d=f(a),e=d.length,g=[],h=a[b];if(e){for(var i=0;e>i;i++)g[i]=d[i].style.cssText,d[i].style.setProperty?d[i].style.setProperty("display","block","important"):d[i].style.cssText+=";display: block !important",d[i].style.height="0",d[i].style.overflow="hidden",d[i].style.visibility="hidden",c(d[i]);h=a[b];for(var j=0;e>j;j++)d[j].style.cssText=g[j],c(d[j])}return h}function h(a,b){var c=parseFloat(a);return Number.isNaN(c)?b:c}function i(a){return a.charAt(0).toUpperCase()+a.substr(1)}function j(b,e){if(this.$window=a(window),this.$document=a(document),this.$element=a(b),this.options=a.extend({},n,e),this.polyfill=this.options.polyfill,this.orientation=this.$element[0].getAttribute("data-orientation")||this.options.orientation,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.DIMENSION=o.orientation[this.orientation].dimension,this.DIRECTION=o.orientation[this.orientation].direction,this.DIRECTION_STYLE=o.orientation[this.orientation].directionStyle,this.COORDINATE=o.orientation[this.orientation].coordinate,this.polyfill&&m)return!1;this.identifier="js-"+k+"-"+l++,this.startEvent=this.options.startEvent.join("."+this.identifier+" ")+"."+this.identifier,this.moveEvent=this.options.moveEvent.join("."+this.identifier+" ")+"."+this.identifier,this.endEvent=this.options.endEvent.join("."+this.identifier+" ")+"."+this.identifier,this.toFixed=(this.step+"").replace(".","").length-1,this.$fill=a('<div class="'+this.options.fillClass+'" />'),this.$handle=a('<div class="'+this.options.handleClass+'" />'),this.$range=a('<div class="'+this.options.rangeClass+" "+this.options[this.orientation+"Class"]+'" id="'+this.identifier+'" />').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=a.proxy(this.handleDown,this),this.handleMove=a.proxy(this.handleMove,this),this.handleEnd=a.proxy(this.handleEnd,this),this.init();var f=this;this.$window.on("resize."+this.identifier,d(function(){c(function(){f.update(!1,!1)},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+this.identifier,function(a,b){if(!b||b.origin!==f.identifier){var c=a.target.value,d=f.getPositionFromValue(c);f.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var k="rangeslider",l=0,m=b(),n={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},o={orientation:{horizontal:{dimension:"width",direction:"left",directionStyle:"left",coordinate:"x"},vertical:{dimension:"height",direction:"top",directionStyle:"bottom",coordinate:"y"}}};return j.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},j.prototype.update=function(a,b){a=a||!1,a&&(this.min=h(this.$element[0].getAttribute("min"),0),this.max=h(this.$element[0].getAttribute("max"),100),this.value=h(this.$element[0].value,Math.round(this.min+(this.max-this.min)/2)),this.step=h(this.$element[0].getAttribute("step"),1)),this.handleDimension=g(this.$handle[0],"offset"+i(this.DIMENSION)),this.rangeDimension=g(this.$range[0],"offset"+i(this.DIMENSION)),this.maxHandlePos=this.rangeDimension-this.handleDimension,this.grabPos=this.handleDimension/2,this.position=this.getPositionFromValue(this.value),this.$element[0].disabled?this.$range.addClass(this.options.disabledClass):this.$range.removeClass(this.options.disabledClass),this.setPosition(this.position,b)},j.prototype.handleDown=function(a){if(this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),!((" "+a.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var b=this.getRelativePosition(a),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=this.getPositionFromNode(this.$handle[0])-c,e="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(e),b>=d&&b<d+this.handleDimension&&(this.grabPos=b-d)}},j.prototype.handleMove=function(a){a.preventDefault();var b=this.getRelativePosition(a),c="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(c)},j.prototype.handleEnd=function(a){a.preventDefault(),this.$document.off(this.moveEvent,this.handleMove),this.$document.off(this.endEvent,this.handleEnd),this.$element.trigger("change",{origin:this.identifier}),this.onSlideEnd&&"function"==typeof this.onSlideEnd&&this.onSlideEnd(this.position,this.value)},j.prototype.cap=function(a,b,c){return b>a?b:a>c?c:a},j.prototype.setPosition=function(a,b){var c,d;void 0===b&&(b=!0),c=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),d=this.getPositionFromValue(c),this.$fill[0].style[this.DIMENSION]=d+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=d+"px",this.setValue(c),this.position=d,this.value=c,b&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(d,c)},j.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},j.prototype.getRelativePosition=function(a){var b=i(this.COORDINATE),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=0;return"undefined"!=typeof a["page"+b]?d=a["client"+b]:"undefined"!=typeof a.originalEvent["client"+b]?d=a.originalEvent["client"+b]:a.originalEvent.touches&&a.originalEvent.touches[0]&&"undefined"!=typeof a.originalEvent.touches[0]["client"+b]?d=a.originalEvent.touches[0]["client"+b]:a.currentPoint&&"undefined"!=typeof a.currentPoint[this.COORDINATE]&&(d=a.currentPoint[this.COORDINATE]),d-c},j.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=Number.isNaN(b)?0:b*this.maxHandlePos},j.prototype.getValueFromPosition=function(a){var b,c;return b=a/(this.maxHandlePos||1),c=this.step*Math.round(b*(this.max-this.min)/this.step)+this.min,Number(c.toFixed(this.toFixed))},j.prototype.setValue=function(a){(a!==this.value||""===this.$element[0].value)&&this.$element.val(a).trigger("input",{origin:this.identifier})},j.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+k),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[k]=function(b){var c=Array.prototype.slice.call(arguments,1);return this.each(function(){var d=a(this),e=d.data("plugin_"+k);e||d.data("plugin_"+k,e=new j(this,b)),"string"==typeof b&&e[b].apply(e,c)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"});
$(function(){
$('input[type="range"]').rangeslider({
polyfill:false,
onInit:function(){
},
onSlideEnd:function(position, value){
//console.log('onSlideEnd');
//console.log('position: ' + position, 'value: ' + value);
}
});
});
var $range = $(".js-range-slider"),
$input = $(".js-input"),
instance,
min = 1,
max = 1000;
$range.ionRangeSlider({
type: "single",
min: min,
max: max,
from: 500,
onStart: function (data) {
$input.prop("value", data.from);
},
onChange: function (data) {
$input.prop("value", data.from);
}
});
instance = $range.data("ionRangeSlider");
$input.on("change keyup", function () {
var val = $(this).prop("value");
// validate
if (val < min) {
val = min;
} else if (val > max) {
val = max;
}
instance.update({
from: val
});
});
html{
height:100%;
background:#42426b;
background:radial-gradient(#31314a,#42426b);
background-repeat:no-repeat;
}
body{
margin:0;
color:#444;
padding:50px;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.rangeslider,
.rangeslider__fill {
display:block;
border-radius:10px;
}
.rangeslider {
position:relative;
}
.rangeslider:after{
top:50%;
left:0;
right:0;
content:'';
width:100%;
height:5px;
margin-top:-2.5px;
border-radius:5px;
position:absolute;
background:#212131;
}
.rangeslider--horizontal{
width:100%;
height:28px;
}
.rangeslider--vertical{
width:5px;
min-height:150px;
max-height:100%;
}
.rangeslider--disabled{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
.rangeslider__fill{
position:absolute;
background:#ff637b;
}
.rangeslider--horizontal .rangeslider__fill{
top:0;
height:100%;
}
.rangeslider--vertical .rangeslider__fill{
bottom:0;
width:100%;
}
.rangeslider__handle{
top:50%;
width:28px;
height:28px;
cursor:pointer;
margin-top:-14px;
background:white;
position:absolute;
background:#ff637b;
border-radius:50%;
display:inline-block;
}
.rangeslider__handle:active{
background:#ff5a7b;
}
.rangeslider__fill,
.rangeslider__handle{
z-index:1;
}
.rangeslider--horizontal .rangeslider__fill{
top:50%;
height:5px;
margin-top:-2.5px;
}
/* Budget */
.budget-wrap{
padding:40px;
background:#292942;
box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.budget-wrap .header .title{
color:#fff;
font-size:18px;
margin-bottom:30px;
}
.budget-wrap .header .title .pull-right{
color:#ff5a84;
font-size:24px;
font-weight:400;
}
.budget-wrap .footer{
margin-top:30px;
}
.budget-wrap .footer .btn{
color:inherit;
padding:12px 24px;
border-radius:50px;
display:inline-block;
text-decoration:none;
}
.budget-wrap .footer .btn.btn-def{
color:#525263;
}
.budget-wrap .footer .btn.btn-pri{
color:#eee;
background:#ff5a84;
}
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/wordpress/wp-content/themes/insido/insido/style_sbi_mg.css" />
</head>
<body>
<div class="budget-wrap">
<div class="budget">
<div class="header">
<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
</div>
<div class="content">
<input type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
<input type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
</div>
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/anoopcr/ojLxhfp7/18/
The issue I am facing is here is the text box and range slider are not respnding each other.

You could give the slider its own ID as well as the textbox.
Then using jQuery, it is simple to attach events to each one of them.
$('#slider').on('input change',function(){
$('#textbox').val($(this).val());
});
$('#textbox').keyup(function(e){
if (e.keyCode==13) { //only activates after pressing Enter key
var val = $(this).val().replace(/\D/g,''); // check only for digits
$('#slider').val(val);
}
});
html{
height:100%;
background:#42426b;
background:radial-gradient(#31314a,#42426b);
background-repeat:no-repeat;
}
body{
margin:0;
color:#444;
padding:50px;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.rangeslider,
.rangeslider__fill {
display:block;
border-radius:10px;
}
.rangeslider {
position:relative;
}
.rangeslider:after{
top:50%;
left:0;
right:0;
content:'';
width:100%;
height:5px;
margin-top:-2.5px;
border-radius:5px;
position:absolute;
background:#212131;
}
.rangeslider--horizontal{
width:100%;
height:28px;
}
.rangeslider--vertical{
width:5px;
min-height:150px;
max-height:100%;
}
.rangeslider--disabled{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
.rangeslider__fill{
position:absolute;
background:#ff637b;
}
.rangeslider--horizontal .rangeslider__fill{
top:0;
height:100%;
}
.rangeslider--vertical .rangeslider__fill{
bottom:0;
width:100%;
}
.rangeslider__handle{
top:50%;
width:28px;
height:28px;
cursor:pointer;
margin-top:-14px;
background:white;
position:absolute;
background:#ff637b;
border-radius:50%;
display:inline-block;
}
.rangeslider__handle:active{
background:#ff5a7b;
}
.rangeslider__fill,
.rangeslider__handle{
z-index:1;
}
.rangeslider--horizontal .rangeslider__fill{
top:50%;
height:5px;
margin-top:-2.5px;
}
/* Budget */
.budget-wrap{
padding:40px;
background:#292942;
box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.budget-wrap .header .title{
color:#fff;
font-size:18px;
margin-bottom:30px;
}
.budget-wrap .header .title .pull-right{
color:#ff5a84;
font-size:24px;
font-weight:400;
}
.budget-wrap .footer{
margin-top:30px;
}
.budget-wrap .footer .btn{
color:inherit;
padding:12px 24px;
border-radius:50px;
display:inline-block;
text-decoration:none;
}
.budget-wrap .footer .btn.btn-def{
color:#525263;
}
.budget-wrap .footer .btn.btn-pri{
color:#eee;
background:#ff5a84;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<div class="budget-wrap">
<div class="budget">
<div class="header">
<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
</div>
<div class="content">
<input id="textbox" type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
<input id="slider" type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
</div>
</div>
</div>

Can't get background-image url of div and replace with jquery

I am making a lightbox, when an image wit the lightboxtrigger class is clicked it will be displayed a bigger size.
This is what I am doing:
when an image with the lightboxtrigger class is clicked I store the url into an array without all the invalid characters and then I replace I switch the src of the lightbox modal with the array.
I cant seem to get this to work, any idea why the tiny script I am using doesn't properly replace the string?
Here is my code:
<script>
$('.triggerlightbox').click(function(){
var e=$(this);
var bg = e.css("background-image");
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
$('.photogallery__viewer__image').html('<img src="' + bg + '" />');
});
</script>
.photogallery__maincontainer{ width:1300px; height:580px; ; flex:0 0 auto; display:flex; flex-flow:row; flex-wrap:wrap; justify-content:flex-start;}
.photogallery__viewer{ width:55%; height:100%; position:relative; display:flex; }
.photogallery__viewer__image{max-width:80%; height:auto; margin:auto; overflow:hidden; box-shadow:0 0 25px #111;}
.photogallery{
width:42%;
height:93%;
position:relative;
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
align-content:flex-start;
overflow:auto;
}
.photogallery__image{
background-image: url('images/20170819_194526.jpg');
background-position: center;
background-repeat: no-repeat;
background-size:contain;
max-height:20%;
min-height:20%;
flex:0 0 calc(25% - 15px);
margin-right:15px;
margin-bottom:35px;
cursor:pointer;
}
.photogallery__image:hover{
opacity:0.8;
}
.close{width:3%; cursor:pointer; color:rgba(255, 255, 255, 0.7); font-family: 'Nunito', sans-serif; flex:0 0 3%; text-align:center; display:table; font-size:25px; font-weight:600; }
.close:hover{color:rgba(255, 255, 255, 0.5);}
<div class="photogallery__maincontainer" style="">
<span style="display:none; cursor:pointer; color:rgba(255, 255, 255, 0.5); font-family: 'Nunito', sans-serif; font-size:50px; font-weight:600; position:absolute; bottom:5px; right:320px;">🠿</span>
<div class="photogallery__viewer" style="">
<img class="photogallery__viewer__image" src="images/IMG-20170610-WA0025.jpg" style="">
</div>
<div class="photogallery" style="">
<div id="last" class="photogallery__image" style="background-image: url('images/');"></div>
</div>
<span class="close" style="">X</span>
</div>

Something is likely wrong with the regex.
This should work instead:
bg = bg.split("'")[1];

I have 3 issues revolving around the styling of divs

I have 3 issues I would like help with.
Issue 1.
I have a navigation bar with numerous elements inside of it. The div with the ID shopcartbar will display the the div with ID shoppingTab once it is hovered over. I did initially set a onmouseout on the shopcartbar div but then when I tried to move the cursor on to the shoppingTab div, it would disappear. I would like to be able to keep the shoppingTab div visible whilst hovering over either of these divs and for the onmouseout to work on either of these as well, or at least be able to hover from the shopcartbar div on to the shoppingTab div to keep it visible because right now it disappears as there is a tiny gap between the two which even when I used CSS to close, didn't fix the problem. Before you read the code and say that I have set it to constantly be fixed on the page, I intentionally set it to have no onmouseout event otherwise it would vanish as soon as I moved my cursor therefore for debugging purposes, I made it appear permanently forcing me to refresh the page every time I wanted it gone.
Issue 2
When I set the height of the shoppingTab div to 100%, it only covers the span tags within it and not the 9 divs just underneath those tags, leaving the content overflowing out of the div. So I want the shoppingTab div to actually extend with ALL of the content and not just stop after the span tags. Please note: the amount of content changes so it can't be a fixed pixel height or percentage.
Issue 3
I have a cookie that just places the user's name in the topnavbar div which is placed before the shopcartbar div. When I hover over the shopcartbar div to show the shoppingTab div, it makes the persons name disappear whilst leaving the text inside the shopcartbar div. I would like the text from the topnavbar div to remain as well even when the shoppingTab div is displayed upon hover. Please note: the persons name must be placed before the shopcartbardiv.
Here is the HTML that contains everything needed to solve the 3 issues.
#charset "utf-8";
/* CSS Document */
body{ /* Applies to the <body> tag */
margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
width:100%; /* This sets the width */
height:100%; /* This sets the height */
background-color:black; /* Sets the background colour */
font-family:"Myriad Pro"; /* Sets the font family */
}
.header{ /* The header class */
width:100%;
background-color:#323232;
color:white; /* The sets the colour of the font */
}
.body{
width:100%;
height:1100px;
background-color:white;
color:black;
text-align:center; /* Determines the positioning of the text alignment */
}
.footer{
width:100%;
height:50px;
background-color:#323232;
color:white;
text-align:center;
}
div{
display: inline-block; /* Sets the display type */
float:left; /* Sets the float position */
}
#one, #two, #three, #four{
background-color:#323232;
height:90px;
color:white;
text-align:center;
font-size:25px;
}
#slider{
background-color:#ed1c24;
height:10px;
width:100px;
position: absolute; /* Sets the position to a specific type */
left: 0; /* Sets the number of pixels from the left that this object is placed */
bottom:0; /* Sets the number of pixels from the bottom that this object is placed */
}
.inside{
margin-left:30px; /* Specifies the margin from the left side */
margin-right:30px; /* Specifies the margin from the right side */
padding-top:7px; /* Specifies the padding from the top side */
pointer-events:none; /* Specifies the cursor events */
margin-top:25px; /* Specifies the margin from the top side */
}
.button{
display: inline-block;
border-radius: 4px; /* Specifies the radius of each corner */
background-color: #ed1c24;
border:none; /* Specifies the border type */
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s; /* Specifies the the interval over which an animation occurs */
cursor: pointer; /* Specifies the cursor type */
margin: 5px;
height:60px;
}
.button span{
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after{
content: '»'; /* Specifies the content of the div */
position: absolute;
opacity: 0; /* Specifies the opacity or transparency level */
top: 0; /* Specifies the distance from the top */
right: -20px; /* Specifies the distance from the right */
transition: 0.5s;
}
.button:hover span{
padding-right: 25px;
}
.button:hover span:after{
opacity: 1;
right: 0;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:block;
}
#loginScreen{
height:300px;
width:400px;
z-index:10;
background-color:white;
no-repeat; border:7px solid #cccccc;
border-radius:10px;
margin-left:35%;
margin-top:12%;
position:relative;
padding-top:10px;
font-family:"Myriad Pro";
font-size:18px;
}
.cancel{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:32px;
width:32px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
border-radius:36px;
cursor: pointer;
}
p1{
font-style: italic;
overflow: hidden;
text-align: center;
}
p1:before, p1:after{
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 40%;
}
p1:before{
right: 0.5em;
margin-left: -50%;
}
p1:after{
left: 0.5em;
margin-right: -50%;
}
#searchbar{
background:url(../images/searchbarbg.png) no-repeat scroll;
padding-left:30px;
height:24px;
width:180px;
border-radius:36px;
}
.product{
height:290px;
width:200px;
float:left;
border: 5px solid black;
border-radius:10px;
margin-left:3%;
margin-top:3%;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:5px solid #ed1c24;
}
table{
border-collapse: collapse;
}
table, td, th{
border: 0px solid black;
}
#shoppingTab{
display:none;
height:670px;
width:400px;
background-color:white;
color:black;
position:relative;
margin-top:-2px;
border-radius:10px;
color:black;
border:1px solid #323232;
padding:10px;
float:right;
z-index:50;
}
.plusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:5px 0px 0px 5px;
color:white;
cursor:pointer;
}
.minusbutton{
height:25px;
width:25px;
border:1px solid black;
background-color:#323232;
float:left;
border-radius:0px 5px 5px 0px;
color:white;
cursor:pointer;
}
.quantityBox{
height:23px;
width:25px;
border-top:1px solid black;
border-bottom:1px solid black;
background-color:white;
float:left;
text-align:center;
line-height:24px;
}
.smallProduct{
height:50px;
width:390px;
float:left;
border: 5px solid black;
border-radius:10px;
font-size:16px;
cursor:pointer;
margin-bottom:10px;
overflow:hidden;
}
.smallProduct:hover{
border:5px solid #ed1c24;
}
/* #ed1c24 is red, #323232 is grey */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="float:right; font-family:'Myriad Pro'; background-image:url(images/loginsignupbar.png); width:535.1px; height:30px">
<div onmouseover="document.getElementById('shoppingTab').style.display='block';" id="shopcartbar" style="float:right; font-size:24px; margin-top:-7px">
<img src="images/shoppingCart.png" height="30px"/> Shopping Cart (<span id="numberOfItems">0</span>)
</div>
<div id="shoppingTab">
Shopping Cart<br />
<div class="smallProduct" style="margin-top:5px" id="thmbproduct0"></div>
<div class="smallProduct" id="thmbproduct1"></div>
<div class="smallProduct" id="thmbproduct2"></div>
<div class="smallProduct" id="thmbproduct3"></div>
<div class="smallProduct" id="thmbproduct4"></div>
<div class="smallProduct" id="thmbproduct5"></div>
<div class="smallProduct" id="thmbproduct6"></div>
<div class="smallProduct" id="thmbproduct7"></div>
<div class="smallProduct" id="thmbproduct8"></div>
Total: $<span id="totalPrice">00</span>.00
</div>
<span id="topnavbar" style="float:right; font-size:24px; margin-top:5.5px">
</span>
</div>
<div style="float:right; clear:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<div id="one" class="item"><div class="inside">Home</div></div> <!-- This is just one of the buttons -->
<div id="two" class="item"><div class="inside">About Us</div></div>
<div id="three" class="item"><div class="inside">Shop</div></div>
<div id="four" class="item"><div class="inside">Contact</div></div>
</div>
</div>
</div>
<div class="body"> <!-- This is the body --><br />
<span style="font-size:50px">Welcome to the store.</span><br />
<table width="90%" style="margin-left:5%; margin-bottom:2%">
<tr>
<td style="width:20%; border-right:solid black 1px; border-bottom:solid black 1px"><b>Search Tools</b></td>
<td style="border-bottom:solid black 1px"><b>Products</b></td>
<td style="border-bottom:solid black 1px"><span style="float:right; margin-bottom:1%">Search for products... <span style="color:#666"><i>(e.g. Mirage Sedan)</i></span> <input type="text" id="searchbar" onkeyup="searchProducts(this.value)"/></span></td>
</tr>
<tr>
<td style="border-right:solid black 1px; padding-top:3%" valign="top">
<b>Sort Type:</b><br /><br />
<select id="sortType">
<option value="AtoZ">A to Z</option>
<option value="ZtoA">Z to A</option>
<option value="LowtoHigh">Price (low to high)</option>
<option value="HightoLow">Price (high to low)</option>
</select>
<br /><br /><form><b>Price range:</b><br /><br /><input id="priceRange" step="100" value="42000" min="12000" max="42000" type="range"/><div id="rangeVal">0</div><br /><br /><b>Model Type:</b><br /><br /><input type="radio" name="model"/>Car<br /><input type="radio" name="model"/>SUV</form></td>
<td colspan="2">
<div class="product" id="product0"></div>
<div class="product" id="product1"></div>
<div class="product" id="product2"></div>
<div class="product" id="product3"></div>
<div class="product" id="product4"></div>
<div class="product" id="product5"></div>
<div class="product" id="product6"></div>
<div class="product" id="product7"></div>
<div class="product" id="product8"></div>
</td>
</tr>
</table>
</div>
<div class="footer"> <!-- This is the footer -->
<br />This is the footer</span>
</div>
</div>
<div id="cover">
<div id="loginScreen">
<center id="content"><br />
<span style="font-size:45px" id="popuptitle">Welcome!</span><br />
<span id="popupdescription">Please log in or sign up.</span><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="logInMenu()"><span>Log In</span></button><br /><p1>OR</p1><br />
<button class="button" style="font-size:20px; height:45px; width:150px; margin-top:15px; margin-bottom:15px" onclick="signUpMenu()"><span>Sign Up</span></button>
</center>
<a onclick="document.getElementById('cover').style.display = 'none'" class="cancel">×</a>
</div>
</div>
Desired functionality for issue 1
<!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>Untitled Document</title>
<style>
.container{
width:960px;
margin:auto;
}
.header{
width:960px;
height:100px;
background-color:#06F;
float:left;
}
.trolley{
width:150px;
height:30px;
background-color:white;
float:right;
border-radius:10px;
color:black;
border:1px solid black;
line-height:30px;
font-family:"Calibri";
cursor: pointer;
}
.shop{
width:960px;
height:700px;
background-color:white;
float:left;
font-family:"Calibri Light";
padding:20px;
}
#shoppingTab{
display:none;
height:400px;
width:400px;
background-color:#CCC;
color:black;
position:relative;
margin-top:1px;
border-radius:10px;
color:black;
border:1px solid black;
padding-left:10px;
float:right;
}
html{
background-color:#00F;
}
.product{
height:200px;
width:150px;
float:left;
border: 1px solid black;
border-radius:10px;
margin-right:20px;
font-size:16px;
text-align:center;
cursor:pointer;
}
.product:hover{
border:1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span id="name"></span><div class="trolley" onmouseover="tabDisplay('block')" onmouseout="tabDisplay('none')"><center>Shopping Cart <span style='font-family:webdings'>¤</span> <span id="NOI" style="background-color:red; border-radius:360px; color:white; padding-left:5px;padding-right:5px">0</span></center>
<div id="shoppingTab">You have selected <span id="NOI2">0</span> items. Your total is $<span id="totalPrice">0</span><br/><span id="itemsList"></span></div>
</div>
</div>
<div class="shop" style="font-size:28px">Welcome, <span id="name2"></span>.<hr /><br/>Products<br/><hr />
<div class="product" onclick="addToCart('sunglasses', 0, 70)">Pair of sunglasses ($70)<br /><br /><span onclick="change(1)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('shoes', 1, 180)">Pair of shoes ($180)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
<div class="product" onclick="addToCart('belt', 2, 20)">A belt ($20)<br /><br /><span onclick="change(3)">Click to add to cart</span></div>
</div>
</div>
</body>
</html>
<script>
var customerName = "";
var numberOfItems = 0;
var total = 0;
var items = [];
var stat = []
for(var a = 1; a <= 3; a++){
stat[a] = false;
}
function update(){
document.getElementById("NOI").innerHTML = numberOfItems;
document.getElementById("NOI2").innerHTML = numberOfItems;
document.getElementById("totalPrice").innerHTML = total;
document.getElementById("itemsList").innerHTML = items.join("<br />");
}
function tabDisplay(displayStatus){
shoppingTab.style.display = displayStatus;
}
function addToCart(productName, productID, price){
items[productID] = productName;
total += price;
numberOfItems++;
update();
}
function removeFromCart(productName, productID, price){
items.splice(productID, 1);
total -= price;
if(stat[productID]){
numberOfItems--;
}
update();
}
function change(i){
if(stat[i] == false){
stat[i] = true;
}else{
stat[i] = false;
}
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("customer");
if (user != "") {
customerName = getCookie("customer");
document.getElementById("name").innerHTML = customerName;
alert("Welcome again, " + user + ".");
} else {
document.getElementById("name").innerHTML = "please set up an account";
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
document.getElementById("name").innerHTML = user;
}
}
}
function changeCookie(){
var user = getCookie("customer");
user = prompt("Please enter your name:","");
if (user != "" && user != null) {
setCookie("customer", user, 30);
}
document.getElementById("name").innerHTML = user;
}
checkCookie();
</script>

For issue 1, you could try a setTimeout() function in the onmouseout() function linking to the actual code (to make it disappear) with a delay (in milliseconds e.g: 500)
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
If it doesn't work, try putting both shoppingtab and shopcartbar in a single div and use onmouseover of that div to display and hide shoppingTab

.hide() is hiding too much

I want to hide the div "loginArea" and then fade in the div "newAccArea". Whenever I try to activate it, it shows the div "newAccArea" for only a moment and then hides it too. I know it sounds like an obvious solution, that I have an extra div or forgot a closing div tag, but I couldn't find any. Please help me out, thank you. Summarized Code HTML:
<div class="backarea">
<div class="loginArea">
<!--Random Stuff-->
</div>
<div class="newAccArea">
<!--More Random Stuff-->
</div>
</div>
JQuery:
$(document).ready(function(){
$('.createone').click(function(){ //".createone" is nothing you have to //worry about
$('.loginArea').hide('slow');
$('.newAccArea').fadeTo('fast',1);
});
});
**FULL CODE JUST INCASE**
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Log in box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
<ul class="cats">
<li class="listItems" id="home">Home</li>
<li class="listItems" id="dashboard">Dashboard</li>
<li class="listItems" id="contactUs">Contact Us</li>
</ul>
</div>
<div class='dropdownHome'>
<ul class="catLists">
<li class="catListItem">Event Calender</li><br>
<li class="catListItem">Bookings</li><br>
<li class="catListItem">Picture Gallery</li><br>
<li class="catListItem">Login</li><br>
<li class="catListItem">Sign Up</li>
</ul>
</div>
<div class="dropdownDashboard">
<ul class="catLists">
<li class="catListItem">Saved Info</li><br>
<li class="catListItem">Friends</li><br>
<li class="catListItem">Document</li><br>
<li class="catListItem">Profile</li><br>
<li class="catListItem">Account</li>
</ul>
</div>
<div class="dropdownContactUs">
<ul class="catLists">
<li class="catListItem">Email</li><br>
<li class="catListItem">Forum</li><br>
<li class="catListItem">Phone-numbers</li><br>
<li class="catListItem">Facebook</li><br>
<li class="catListItem">Twitter</li>
</ul>
</div><Br><Br><Br>
<h1 class="welcomeBack">Hello! Welcome back to Code Acedamy</h1>
<!--<button class="logOut">Log Out</button>-->
</div>
<div class="backarea">
<div class="loginArea">
<input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
<input type="password" class="passInput" placeholder="Password" name="passInput"<h2 class="password">Password:</h2></input>
<button class="login">Log In</button>
<p class="createacc">Don't have an account? <span class="createone">Create one.</span></p>
<p class="error">Sorry but that username or password is incorrect.</p>
</div>
<div class="newAccArea">
<h1 class="newAccText">Create New Account</h1>
<h2 class="newUsername" id="position">Username:</h2>
<input class="newUser" type="text" name="newUser" placeholder="Username" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<input class="newPass" type="password" name="newPass" placeholder="Password" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<h2 class="confNewPassword" id="position">Confirm Password:</h2>
<input class="confNewPass" type="password" name="confNewPass" placeholder="Confirm Password" id="position"></input>
<button class="createAccButt">Create Account</button>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#F0F0F0;
}
.successLog {
background-color:#8A8A8A;
height:450px;
width:700px;
z-index:1;
opacity:0;
}
/*CREATE NEW ACCOUNT AREA*/
.newAccArea {
position:relative;
bottom:500px;
opacity:0;
z-index:-5;
}
.newUsername {
position:relative;
top:80px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newUser {
position:relative;
top:60px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.newPassword {
position:relative;
top:42px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newPass {
position:relative;
top:23px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.confNewPassword {
position:relative;
bottom:50px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.confNewPass {
position:relative;
bottom:70px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.createAccButt {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:77;
left:78;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.createAccButt:hover {
background-color:#A81919;
}
.newAccText {
position:relative;
top:100px;
font-family: 'Oswald', sans-serif;
font-size:30px;
text-align:center;
color:red;
}
/*LOG IN AREA*/
.backarea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
position:relative;
top:67px;
left:230px;
position:fixed;
}
.loginArea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
}
.userInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:50px;
left:35px;
border:1px solid white;
}
.userInput:hover {
border:2px solid #60BF68;
}
.username {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:50px;
left:75px;
}
.passInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:20px;
left:35px;
border:1px solid white;
}
.passInput:hover {
border:2px solid #60BF68;
}
.password {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:80px;
left:75px;
}
.login {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:60;
left:71;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.login:hover {
background-color:#B81414;
border:1px solid black;
}
.createacc {
position:relative;
bottom:73px;
font-family: 'Roboto Condensed', sans-serif;
padding:8
}
.createone {
text-decoration:none;
color:#4548E6;
font-size:13px;
}
.createone:hover {
color:purple;
}
.error {
color:red;
font-family: 'Merriweather', serif;
font-size:10;
position:relative;
bottom:93px;
text-align:center;
opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
color:#fff;
}
.invis {
opacity:0;
}
/*HTML CLASSES*/
.header {
background-color:black;
height:50px;
border-radius:10px;
z-index:10;
}
li {
color:white;
display:inline;
width:100%
}
.cats {
padding:6px;
width:100%;
font-size:27px;
font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#96F29C;
display:inline;
position:relative;
padding-left:70px;
}
.cats .listItems:active {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#318A29;
display:inline;
position:relative;
padding-left:70px;
}
.listItems {
padding:70px;
}
.dropdownHome {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:14px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownDashboard {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:255px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownContactUs {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:507px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.catLists {
font-size:18px;
text-align:center;
position:relative;
right:20;
font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
color:black;
}
.welcomeBack {
font-family: 'Oswald', sans-serif;
color:blue;
text-align:center;
}
.logOut {
position:relative;
top:130px;
left:312px;
padding:5px;
border:none;
background-color:red;
color:white;
width:100px;
height:40px;
font-size:20px;
font-family: 'Oswald', sans-serif;
}
.logOut:hover {
background-color:#B51919;
border-top:1px solid #F7A3A3;
border-left:1px solid #F7A3A3;
}
JavaScript:
$(document).ready(function(){
$('.createone').click(function(){
$('.loginArea').hide('slow');
$('.newAccArea').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('.login').click(function(){
var userResult = $('input[name=userInput]').val();
var passResult = $('input[name=passInput]').val();
if(userResult === "CodeAcademy" && passResult === "fun-coding" || userResult === "User_Example" && passResult === "Pass_Example") {
$('.backarea').fadeOut('fast');
$('.successLog').fadeTo('fast',1);
}
else {
$('.passInput').css('border-color','red');
$('.userInput').css('border-color','red');
$('.error').fadeTo('fast',1);
$('.error').effect( "bounce",{ times: 3 },"slow" );
};
});
});
$(document).ready(function(){
$('#home').click(function(){
$('.dropdownHome').slideToggle('slow');
$('.dropdownHome').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#dashboard').click(function(){
$('.dropdownDashboard').slideToggle('slow');
$('.dropdownDashboard').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#contactUs').click(function(){
$('.dropdownContactUs').slideToggle('slow');
$('.dropdownContactUs').fadeTo('fast',1);
});
});

The reason you don't see the newAccArea is because you have it relatively positioned 500 pixels from the bottom, which ends up putting all of the content off screen, above the top of the viewport. The reason you're able to see it while the loginArea is fading out is because as long as the loginArea is still visible, the starting point of the newAccArea is lower (300 pixels lower, since the height of loginArea is 300px), so the 500 pixels from the bottom of that starting point is low enough to still see it.
You just need to set the position to what it needs to be, when loginArea isn't displayed, and you should see it fine.

You said I want to hide the div "loginArea" and then fade in the div "newAccArea". In this case, you may use a callback function to show the newAccArea div after the hiding has finished:
$(document).ready(function() {
$('.createone').click(function() {
$('.loginArea').hide('slow', function() {
// It'll fade in after hiding the .loginArea
$('.newAccArea').fadeTo('fast', 1);
});
});
});
Regarding the problem you mentioned, it should not happen according to your code. The newAccArea div should not be hidden because it's out side of the loginArea div.

How to zoom out Html element?

I am trying to create cloud tags in html.I am able to create them using ul tag and applying css on them.Following is my cloud tag image:
Now i want effects like that, when i move my mouse to any of the text(i.e any cloud tag),say "Learn java" tag it should zoom out and when i move my mouse out of it it should go back to its place. I have seen this functionality on many websites.
following is my code in HTML file :
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#java").hover(function(){
alert("You entered on java cloud tag!");
},function);
});
</script>
<title>Css Globe: tag clouds</title>
<style>
body {
margin:0;
padding:0;
background:#e1e1e1;
font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
a{color:#3c70d0;}
h1{
font-size:180%;
font-weight:normal;
margin:0 20px;
padding:1em 0;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:500px;
}
#container{
margin:0 auto;
text-align:left;
width:700px;
background:#fff;
}
#main{
float:right;
display:inline;
width:380px;
margin-left:20px;
}
#side{
float:left;
display:inline;
width:260px;
margin-left:20px;
}
#footer{
clear:both;
padding:1em 0;
margin:0 20px;
}
/* Tag cloud */
.tags ul{
margin:1em 0;
padding:.5em 10px;
text-align:center;
background:#71b5e9 url(bg_tags.gif) repeat-x;
}
.cld{
height:100px;
width:400px;
}
.tags li{
margin:0;
padding:0;
list-style:none;
display:inline;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
}
.tag1{font-size:100%;}
.tag2{font-size:120%;}
.tag3{font-size:140%;}
.tag4{font-size:160%;}
.tag5{font-size:180%;}
/* alternative layout */
.tags .alt{
text-align:left;
padding:0;
background:none;
}
.tags .alt li{
padding:2px 10px;
background:#efefef;
display:block;
}
.tags .alt .tag1,
.tags .alt .tag2,
.tags .alt .tag3,
.tags .alt .tag4,
.tags .alt .tag5{font-size:100%;}
.tags .alt .tag1{background:#7cc0f4;}
.tags .alt .tag2{background:#67abe0;}
.tags .alt .tag3{background:#4d92c7;}
.tags .alt .tag4{background:#3277ad;}
.tags .alt .tag5{background:#266ca2;}
/* // Tag cloud */
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
</script>
</head>
<body> <!--******************************************************************************-->>
<div id="container">
<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
<div id="side">
<h2>Side column (Tag Cloud)</h2>
<div class="tags">
<ul class="cld">
<li class="tag1" id="java">Learn java</li>
<li class="tag2">Find Markets</li>
<li class="tag3">sitemap</li>
<li class="tag2">Sales</li>
<li class="tag4">Gohome</li>
<li class="tag1">Movies</li>
<li class="tag1">It Jobz</li>
<li class="tag5">Gym</li>
<li class="tag2">Sea food</li>
<li class="tag1">Hospital</li>
<li class="tag3">Smart phone</li>
<li class="tag4">Pizza </li>
<li class="tag1">Aerobics</li>
<li class="tag5">Electronics</li>
<li class="tag1">Anti-Virus</li>
<li class="tag2">Travel</li>
</ul>
</div>
</div>
</div>
</body>
</html>
,So please give some solution to achive this.
Thank you in advance.

just use css3 transform scale property
.element{
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.element:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}
demo:http://jsfiddle.net/raJwX/
**
Update:
**
Demo: http://jsfiddle.net/raJwX/1/
.tags li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
-webkit-transform:scale3d(1,1,1);
-moz-transform:scale3d(1,1,1);
-transform:scale3d(1,1,1);
-webkit-transition:300ms ease-in-out all;
-moz-transition:300ms ease-in-out all;
transition:300ms ease-in-out all;
}
.tags li a{
text-decoration:none;
color:#fff;
padding:0 2px;
}
.tags li:hover{
-webkit-transform:scale3d(1.4,1.4,1.4);
-moz-transform:scale3d(1.4,1.4,1.4);
transform:scale3d(1.4,1.4,1.4);
}

This is what you want. - JS Fiddle
Add to CSS:
.tags ul li {
-moz-transition: font-size 0.2s;
-webkit-transition: font-size 0.2s;
transition: font-size 0.2s;
}
Replace jQuery with:
$(document).ready(function(){
$("#java").hover(function(){
$(this).css({'fontSize': '150%'});
}, function(){
$(this).css({'fontSize': '100%'});
});
});
Adjust sizes/timings/etc as appropriate.
Cheers.

CSS "transform" property is what you are looking for that this will help you out to achieve this.
However I just took your code and made changes in two CSS classes
.tags li a{
text-decoration:none;
display:inline-block;
-webkit-transition: all .2s ease-in-out;
color:#fff;
padding:0 2px;
}
.tags li a:hover{
color:#cff400;
-webkit-transform: scale(1.3);
}
For reference http://jsfiddle.net/yNt6X/3/
Hope you gets what you are looking for.
P.S. I have just added css for webkit browser.

Animate method can be used with best effect as used in following link
$(this).animate({width: "500px"}, 'slow');
Above method is called on mouseover and mouseout function on html element.
http://jsfiddle.net/jquerybyexample/nPeaV/

Using jQuery .css() property you can change font size to smaller which make an effect of "zoom out" but actually the font is only smaller.
Example
<script>
$(document).ready(function(){
$("#java").hover(function(){
$("#java").css('font-size', "10px");
});
});
</script>
Also, when you out of hovering "Learn Java" you can use the event onMouseOut to return the font to his normal font size.
Example
<script>
$(document).ready(function(){
$("#java").mouseout(function(){
$("#java").css('font-size', "18px"); // Assuming that normal font is 18px.
});
});
</script>
Fiddle