Wednesday, November 14, 2012
WP "You should update your .htaccess now"
If other permalink setting is not working except the default, change the .htaccess file permission to editable.
Thursday, September 20, 2012
jQuery numbers only on textbox
For input[type="text"] number only!
jQuery(".button").keydown(function(event) { if ( event.keyCode == 46 || event.keyCode == 8 ||
event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39)){ return;// let it happen, don't do anything } else { if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) &&
(event.keyCode < 96 || event.keyCode > 105 )) { event.preventDefault(); } } });
Friday, September 7, 2012
jQuery simple accordion
This is a tutorial on how to make a simple accordion.
jQuery
jQuery(".className ul").not(":first").hide();
jQuery(".className>li>a").hover(function(){
var hasUl=jQuery(this).next("ul").html();
if(hasUl!=null){
if(!jQuery(this).next("ul").is(":visible")){
jQuery(".className ul").slideUp("slow");
jQuery(this).next("ul").slideDown("slow");
}
}
});
html
<ul class="className">
<li>
<a href="#">level 1</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
</ul>
</li>
<li>
<a href="#">level 1</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
</ul>
</li>
<li>
<a href="#">level 1</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
</ul>
</li>
</ul>
Hope it will help!!!
(i made this one)
jQuery
jQuery(".className ul").not(":first").hide();
jQuery(".className>li>a").hover(function(){
var hasUl=jQuery(this).next("ul").html();
if(hasUl!=null){
if(!jQuery(this).next("ul").is(":visible")){
jQuery(".className ul").slideUp("slow");
jQuery(this).next("ul").slideDown("slow");
}
}
});
html
<ul class="className">
<li>
<a href="#">level 1</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
</ul>
</li>
<li>
<a href="#">level 1</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
</ul>
</li>
<li>
<a href="#">level 1</a>
<ul>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
</ul>
</li>
</ul>
Hope it will help!!!
(i made this one)
jQuery(".ver3 ul").not(":first").hide(); jQuery(".ver3>li>a").hover(function(){ var hasUl=jQuery(this).next("ul").html(); if(hasUl!=null){ if(!jQuery(this).next("ul").is(":visible")){ jQuery(".ver3 ul").slideUp("slow"); jQuery(this).next("ul").slideDown("slow"); } } });
jQuery(".ver3 ul").not(":first").hide(); jQuery(".ver3>li>a").hover(function(){ var hasUl=jQuery(this).next("ul").html(); if(hasUl!=null){ if(!jQuery(this).next("ul").is(":visible")){ jQuery(".ver3 ul").slideUp("slow"); jQuery(this).next("ul").slideDown("slow"); } } });
jQuery(".ver3 ul").not(":first").hide(); jQuery(".ver3>li>a").hover(function(){ var hasUl=jQuery(this).next("ul").html(); if(hasUl!=null){ if(!jQuery(this).next("ul").is(":visible")){ jQuery(".ver3 ul").slideUp("slow"); jQuery(this).next("ul").slideDown("slow"); } } });
Wednesday, September 5, 2012
jQuery falling letters plugin
Falling letter jQuery plugin.
plug in:
(function($){
$.fn.fallLetters = function(options){
// the default options
var defaults = {
minFont:14, // minimum font size to be displayed(in pixel)
maxFont:20, // maximum font size to be displayed(in pixel)
minSpeed:2000, // should be larger than the maxspeed, 1000 = 1 sec
maxSpeed:1000, // the smaller the amount the faster it fall, 1000 = 1 sec
fading:true // fading while falling effect
}
// to override the defaults of each option
var options = $.extend(defaults, options);
return this.each(function(){
// declaration of variables
var cont=$(this);
var contWidth=($(this).width())-50;
var contHeight=($(this).height())+150;
// container's CSS
cont.css({"position":"relative","overflow":"hidden"});
// wrap the letters with span
cont.children().andSelf().contents().each(function(){
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
}
});
// onload random span left and font
reset();
cont.find("span").each(function(){
$(this).css({"left":randomLeft(),"fontSize":randomFont(),"position":"absolute"});
});
// loops every 2 mins
setInterval(function(){
cont.find("span").each(function(){
$(this).animate({"top":contHeight+"px","opacity":ifFallAndFade()},randomSpeed(),function(){
var Left=randomLeft();
$(this).css({"left":Left,"fontSize":randomFont()});
reset();
});
});
},100);
// fading while falling
function ifFallAndFade(){
if(options.fading){
return 0;
}
else{
return 1;
}
}
// randomize left css of each character
function randomLeft() {
var maxLeft= contWidth;
var left= Math.floor(Math.random() * maxLeft + 1) + 'px';
return left;
}
// randomize the time of each character
function randomSpeed(){
var speed=Math.floor(Math.random() * options.minSpeed + options.maxSpeed);
return speed;
}
// randomized the font size of each character
function randomFont() {
var fontSize= Math.floor(Math.random() * options.maxFont + options.minFont) + 'px';
return fontSize;
}
// reset or back to top, -100px so that it will be hidden
function reset(){
cont.find("span").css({"top":"-100px","opacity":"1"});
}
});
};
})(jQuery);
script:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#cont").fallLetters({
minFont:10,
maxFont:24,
minSpeed:3000,
maxSpeed:1500,
fading:true
});
});
</script>
html:
<div id="cont">ABCDEFGHIJKLMNopqrstuvwxyz1234567890</div>
Hope this will help!..
(i made this one)
plug in:
(function($){
$.fn.fallLetters = function(options){
// the default options
var defaults = {
minFont:14, // minimum font size to be displayed(in pixel)
maxFont:20, // maximum font size to be displayed(in pixel)
minSpeed:2000, // should be larger than the maxspeed, 1000 = 1 sec
maxSpeed:1000, // the smaller the amount the faster it fall, 1000 = 1 sec
fading:true // fading while falling effect
}
// to override the defaults of each option
var options = $.extend(defaults, options);
return this.each(function(){
// declaration of variables
var cont=$(this);
var contWidth=($(this).width())-50;
var contHeight=($(this).height())+150;
// container's CSS
cont.css({"position":"relative","overflow":"hidden"});
// wrap the letters with span
cont.children().andSelf().contents().each(function(){
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
}
});
// onload random span left and font
reset();
cont.find("span").each(function(){
$(this).css({"left":randomLeft(),"fontSize":randomFont(),"position":"absolute"});
});
// loops every 2 mins
setInterval(function(){
cont.find("span").each(function(){
$(this).animate({"top":contHeight+"px","opacity":ifFallAndFade()},randomSpeed(),function(){
var Left=randomLeft();
$(this).css({"left":Left,"fontSize":randomFont()});
reset();
});
});
},100);
// fading while falling
function ifFallAndFade(){
if(options.fading){
return 0;
}
else{
return 1;
}
}
// randomize left css of each character
function randomLeft() {
var maxLeft= contWidth;
var left= Math.floor(Math.random() * maxLeft + 1) + 'px';
return left;
}
// randomize the time of each character
function randomSpeed(){
var speed=Math.floor(Math.random() * options.minSpeed + options.maxSpeed);
return speed;
}
// randomized the font size of each character
function randomFont() {
var fontSize= Math.floor(Math.random() * options.maxFont + options.minFont) + 'px';
return fontSize;
}
// reset or back to top, -100px so that it will be hidden
function reset(){
cont.find("span").css({"top":"-100px","opacity":"1"});
}
});
};
})(jQuery);
script:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#cont").fallLetters({
minFont:10,
maxFont:24,
minSpeed:3000,
maxSpeed:1500,
fading:true
});
});
</script>
html:
<div id="cont">ABCDEFGHIJKLMNopqrstuvwxyz1234567890</div>
Hope this will help!..
(i made this one)
simple jQuery rotator
This is a simple jQuery rotator for banners.
jQuery:
<script type="text/javascript">
jQuery(function(){
setInterval("rotate()",3000);
});
function rotate(){
var a=jQuery("#con div.current");
var b=a.next();
if(b.length==0)
b=jQuery("#con div:first");
a.removeClass("current").addClass("prev");
b.css({opacity:0.0}).addClass("current").animate({opacity:1.0},1000,
function(){
a.removeClass("prev");
});
setTimeout(function(){
},1500);
}
</script>
css:
<style type="text/css">
#con img{min-width:500px;min-height:200px;width:100%;position:relative;}
#con div{z-index:0;position:absolute;width:500px;height:200px;}
#con div.prev{z-index:1;}
#con div.current{z-index:2;}
</style>
html:
<div id="con">
<div><img src="image1.jpg"></div>
<div><img src="image2.jpg"></div>
<div><img src="image3.jpg"></div>
<div><img src="image4.jpg"></div>
<div><img src="image5.jpg"></div>
</div>
jQuery:
<script type="text/javascript">
jQuery(function(){
setInterval("rotate()",3000);
});
function rotate(){
var a=jQuery("#con div.current");
var b=a.next();
if(b.length==0)
b=jQuery("#con div:first");
a.removeClass("current").addClass("prev");
b.css({opacity:0.0}).addClass("current").animate({opacity:1.0},1000,
function(){
a.removeClass("prev");
});
setTimeout(function(){
},1500);
}
</script>
css:
<style type="text/css">
#con img{min-width:500px;min-height:200px;width:100%;position:relative;}
#con div{z-index:0;position:absolute;width:500px;height:200px;}
#con div.prev{z-index:1;}
#con div.current{z-index:2;}
</style>
html:
<div id="con">
<div><img src="image1.jpg"></div>
<div><img src="image2.jpg"></div>
<div><img src="image3.jpg"></div>
<div><img src="image4.jpg"></div>
<div><img src="image5.jpg"></div>
</div>
Thursday, August 9, 2012
Thursday, June 28, 2012
jQuery input file change layout
This jQuery plug in is used to modify the style of you input file layout.
html:
<div id="cont">
<input type="file" class="fileUpload">
</div>
jQuery:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".fileUpload").fileUploadChange({
image:'images/browseImg2.jpg'
});
});
</script>
This is the jquery plug in.
(function($){
$.fn.fileUploadChange = function(options){
// the default options
var defaults = {
image:'images/browseImg.jpg'
}
// to override the defaults of each option
var options = $.extend(defaults, options);
return this.each(function(){
// hides the input file
var x=$(this);
$(this).css({"position":"absolute","top":"-100px"});
// add the dummy input text and button image
$(this).after("<input type='text' class='dummyInputText' readonly='readonly'><img class='dummyButton' src='"+options.image+"'>");
// triggers the input file when the dummies are clicked
$(".dummyInputText, .dummyButton").live("click",function(){
$(".fileUpload").trigger("click");
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
if($.browser.msie || $.browser.chrome){
getIEvalue();
}
else{
getValue();
}
});
// this function gets the value of input file and displays in the dummy
function getValue(){
setInterval(function(){
var value=$(".fileUpload").val();
$(".dummyInputText").val(value);
},100);
}
// this function gets the value of input file and displays in the dummy IE or CHROME
function getIEvalue(){
setInterval(function(){
var value=$(".fileUpload").val();
value=value.replace(/[/\\*]/g, "/");
var xvalue=value.split("/");
var l=xvalue.length;
var ievalue=xvalue[l-1];
$(".dummyInputText").val(ievalue);
},100);
}
});
};
})(jQuery);
Hope this will help!..
html:
<div id="cont">
<input type="file" class="fileUpload">
</div>
jQuery:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".fileUpload").fileUploadChange({
image:'images/browseImg2.jpg'
});
});
</script>
This is the jquery plug in.
(function($){
$.fn.fileUploadChange = function(options){
// the default options
var defaults = {
image:'images/browseImg.jpg'
}
// to override the defaults of each option
var options = $.extend(defaults, options);
return this.each(function(){
// hides the input file
var x=$(this);
$(this).css({"position":"absolute","top":"-100px"});
// add the dummy input text and button image
$(this).after("<input type='text' class='dummyInputText' readonly='readonly'><img class='dummyButton' src='"+options.image+"'>");
// triggers the input file when the dummies are clicked
$(".dummyInputText, .dummyButton").live("click",function(){
$(".fileUpload").trigger("click");
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
if($.browser.msie || $.browser.chrome){
getIEvalue();
}
else{
getValue();
}
});
// this function gets the value of input file and displays in the dummy
function getValue(){
setInterval(function(){
var value=$(".fileUpload").val();
$(".dummyInputText").val(value);
},100);
}
// this function gets the value of input file and displays in the dummy IE or CHROME
function getIEvalue(){
setInterval(function(){
var value=$(".fileUpload").val();
value=value.replace(/[/\\*]/g, "/");
var xvalue=value.split("/");
var l=xvalue.length;
var ievalue=xvalue[l-1];
$(".dummyInputText").val(ievalue);
},100);
}
});
};
})(jQuery);
Hope this will help!..
Subscribe to:
Posts (Atom)