This is how to put a placeholder on input type text using simple javascript.
<input type="text" name="FullName" id="Fullname" value="Name" onblur="if(this.value == ''){this.value = 'Name'}" onfocus="if(this.value == 'Name'){this.value = ''}" onclick="this.value==''">
Wednesday, December 12, 2012
Monday, December 10, 2012
no domain in a string url
This is how to display a string url without its domain name.
var thisUrl="http://domain.com/directory/subdirectory/file.name"
var noDomainUrl = thisUrl.replace(/https?:\/\/[^\/]+/i, "");
alert(noDomainUrl);
var thisUrl="http://domain.com/directory/subdirectory/file.name"
var noDomainUrl = thisUrl.replace(/https?:\/\/[^\/]+/i, "");
alert(noDomainUrl);
Tuesday, November 27, 2012
jQuery back to top script
This is an example how to make a back to top button using html and jQuery.
html
<h2 class="backToTop">back-to-top</h2>
<h2 class="backToTopFix">back-to-top</h2>
css
.backToTopFix{
position:fixed;
top:5px;
display:none;
}
jQuery
// get the distance from .stop to top
var checkIfTop = jQuery(".stop").offset().top;
// if window top is greater than or equal to checkIfTop condition
if(jQuery(window).scrollTop()>=checkIfTop){
jQuery(".backToTop").hide();
jQuery(".backToTopFix").show();
}
else{
jQuery(".backToTop").show();
jQuery(".backToTopFix").hide();
}
});
html
<h2 class="backToTop">back-to-top</h2>
<h2 class="backToTopFix">back-to-top</h2>
css
.backToTopFix{
position:fixed;
top:5px;
display:none;
}
jQuery
// get the distance from .stop to top
var checkIfTop = jQuery(".stop").offset().top;
checkIfTopjQuery(window).scroll(function() {
// if window top is greater than or equal to checkIfTop condition
if(jQuery(window).scrollTop()>=checkIfTop){
jQuery(".backToTop").hide();
jQuery(".backToTopFix").show();
}
else{
jQuery(".backToTop").show();
jQuery(".backToTopFix").hide();
}
});
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!..
Friday, May 4, 2012
customizing google translate in your website
This is my way of customizing the google translate in a website.
<style type="text/css">
/* to hide the toolbar and tooltip - START */
.goog-tooltip {
display: none !important;
}
.goog-tooltip:hover {
display: none !important;
}
.goog-text-highlight {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.goog-te-banner-frame{
display:none !important;
}
body{
top:0 !important;
}
.skiptranslate{
height:30px;
overflow:hidden;
}
/* to hide the toolbar and tooltip - END */
</style>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', gaTrack: true
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<style type="text/css">
/* to hide the toolbar and tooltip - START */
.goog-tooltip {
display: none !important;
}
.goog-tooltip:hover {
display: none !important;
}
.goog-text-highlight {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.goog-te-banner-frame{
display:none !important;
}
body{
top:0 !important;
}
.skiptranslate{
height:30px;
overflow:hidden;
}
/* to hide the toolbar and tooltip - END */
</style>
<!-- script for the google translate -->
<script type="text/javascript">function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en', gaTrack: true
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- display the drop down of all languaes -->
<div id="google_translate_element"></div>
Tuesday, April 3, 2012
jQuery wrap each char in except tags
This is how to wrap characters with html tag excluding the present html tags.
$("div").children().andSelf().contents().each(function(){
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
}
});
$("div").children().andSelf().contents().each(function(){
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(\w)/g, "<span>$&</span>"));
}
});
Wednesday, March 28, 2012
jQuery Validate Email Address
This is how to validate an email address.
html:
<form method="post">
<input type="text" id="email"/>
<input type="submit" val="submit" id="submit">
</form>
jQuery:
<script type="text/javascript">
jQuery('#submit').click(function() {
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal=jQuery('#email').val();
if(!emailReg.test(emailaddressVal)||emailaddressVal=='') {
alert('invalid');
return false;
}
else{
alert('valid');
return false;
}
});
</script>
Hope this will help!..
html:
<form method="post">
<input type="text" id="email"/>
<input type="submit" val="submit" id="submit">
</form>
jQuery:
<script type="text/javascript">
jQuery('#submit').click(function() {
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal=jQuery('#email').val();
if(!emailReg.test(emailaddressVal)||emailaddressVal=='') {
alert('invalid');
return false;
}
else{
alert('valid');
return false;
}
});
</script>
Hope this will help!..
Sunday, March 25, 2012
disable contact number detection on ipad
Add this meta tag to disable the website's contact number detection in ipad.
<meta name = "format-detection" content = "telephone=no" />
Hope this will help!.
Monday, March 19, 2012
business catalyst blog post list with image
This is a code on how to get the image of your blog post description put it in the bloglist.
jQuery(".blog-post").each(function(){
var thisUrl=window.location.href;
var splitThisUrl=thisUrl.split(".com/");
var uri=jQuery(this).find(".post-body a").attr("href");
var imgUrl=splitThisUrl[0]+".com"+uri;
jQuery(this).find(".imgCont").load(imgUrl+" .post-body img:eq(0)");
});
How to use:
In the Blog Post List Layout put a div that will serve as the container of the image. In this example I named it .imgCont.
jQuery(".blog-post").each(function(){
var thisUrl=window.location.href;
var splitThisUrl=thisUrl.split(".com/");
var uri=jQuery(this).find(".post-body a").attr("href");
var imgUrl=splitThisUrl[0]+".com"+uri;
jQuery(this).find(".imgCont").load(imgUrl+" .post-body img:eq(0)");
});
How to use:
In the Blog Post List Layout put a div that will serve as the container of the image. In this example I named it .imgCont.
Tuesday, March 6, 2012
ie css hack
In hacking ie css please use the following
/*------ IE6 ------ */
*html /*class or id*/{
padding-left:10px;
}
/*------ IE7 ------ */
*+html /*class or id*/{
padding-left:10px;
}
/*------ IE8 ------ */
/*class or id*/{
padding-left:10px \0/;
}
/*------ IE9 ------ */
:root /*class or id*/{
margin-left:-20px;
}
/*------ IE6 ------ */
*html /*class or id*/{
padding-left:10px;
}
/*------ IE7 ------ */
*+html /*class or id*/{
padding-left:10px;
}
/*------ IE8 ------ */
/*class or id*/{
padding-left:10px \0/;
}
/*------ IE9 ------ */
:root /*class or id*/{
margin-left:-20px;
}
Sunday, March 4, 2012
google plus one and add to circles button
This is for adding a +1 button and counter in your blog post or page.
<!-- +1 button with counter -->
<g:plusone width="500" count="true" annotation="bubble"></g:plusone>
<g:plus href="https://plus.google.com/{profile id}" rel="author" width="170" height="69" theme="dark"></g:plus>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
How to use:
Finding you profile ID:
https://plus.google.com/11443741220123456789/
Your profile ID are the numbers in your url if you will click profile.
Hope this will help!!
<!-- +1 button with counter -->
<g:plusone width="500" count="true" annotation="bubble"></g:plusone>
<!-- add to circle -->
For adding add to circle button just put this code.<g:plus href="https://plus.google.com/{profile id}" rel="author" width="170" height="69" theme="dark"></g:plus>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
How to use:
Finding you profile ID:
https://plus.google.com/11443741220123456789/
Your profile ID are the numbers in your url if you will click profile.
Hope this will help!!
Thursday, March 1, 2012
jQuery shuffle plugin for banner rotator
This is a useful plug in in which allows you to shuffle the banner images if you wat to show it randomly.
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
How to use:
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
How to use:
<script>
$(document).ready(function() {
/*put this on top or before your rotator*/
$('.slideshow img').shuffle(); $('.slideshow').cycle({ fx: 'fade' }); }); </script>
Tuesday, February 21, 2012
jQuery checkbox act like a radio button
This is a simple code to make your checkbox act like a radio button. Try this simple code and find out.
jQuery('.chck').click(function(){
jQuery('.chck:checked').not(this).removeAttr('checked');
});
How to Use:
html
<input type='checkbox' name='mygroup1' value='1' class='unique'>
<input type='checkbox' name='mygroup2' value='2' class='unique'>
<input type='checkbox' name='mygroup3' value='3' class='unique'>
jQuery
$('input.unique').click(function() {
$('input.unique:checked').not(this).removeAttr('checked');
});
jQuery('.chck').click(function(){
jQuery('.chck:checked').not(this).removeAttr('checked');
});
How to Use:
html
<input type='checkbox' name='mygroup1' value='1' class='unique'>
<input type='checkbox' name='mygroup2' value='2' class='unique'>
<input type='checkbox' name='mygroup3' value='3' class='unique'>
jQuery
$('input.unique').click(function() {
$('input.unique:checked').not(this).removeAttr('checked');
});
Friday, February 17, 2012
jQuery bold specific number of word
function boldWord(name,num){
var x=jQuery(name).text();
var splitx=x.split(" ");
var new1="";
var old="";
for(var y=0; y<num;y++){
old+=splitx[y]+" ";
new1+="<b>"+splitx[y]+"</b> ";
}
var finalCont=jQuery(name).html().replace(old,new1);
jQuery(name).html(finalCont);
}
boldWord("class or id",3)
jQuery limit word plugin
This is a jquery plug in that limits the number words to display depending on how many words you want to display.
(function($){
$.fn.limitWord= function(options){
var defaults={
/* by default */
words:5
}
var options=$.extend(defaults,options);
return this.each(function(){
var paragraph=$(this).text();
var splitSpace = paragraph.split(" ");
var holder = options.words;
var newTexts='';
for(var i=0;i<holder;i++){
newTexts += splitSpace[i]+' ';
}
$(this).html(newTexts);
});
}
})(jQuery);
How to use:
jQuery("class or id here").limitWord({
words:5 /* please specify the number of words to be displayed */
});
(function($){
$.fn.limitWord= function(options){
var defaults={
/* by default */
words:5
}
var options=$.extend(defaults,options);
return this.each(function(){
var paragraph=$(this).text();
var splitSpace = paragraph.split(" ");
var holder = options.words;
var newTexts='';
for(var i=0;i<holder;i++){
newTexts += splitSpace[i]+' ';
}
$(this).html(newTexts);
});
}
})(jQuery);
How to use:
jQuery("class or id here").limitWord({
words:5 /* please specify the number of words to be displayed */
});
Thursday, February 16, 2012
business catalyst generic secure zone redirect
Generic secure zone in BC doesn't support redirect to other pages. So here's a solution for your problem.
How to use this function:
var pathName= window.location.pathname;
var splitThis = pathName.split("?");
if(splitThis [0]=="/Default.aspx"){
window.location=(url);
}
}
Hope this will help.
How to use this function:
/*
Put this after
//<![CDATA[
//]]>
*/
function genericRedirect(url){var pathName= window.location.pathname;
var splitThis = pathName.split("?");
if(splitThis [0]=="/Default.aspx"){
window.location=(url);
}
}
/*
Then call or use the function with your landing page's url or link.
*/
genericRedirect("/your url here!!");Hope this will help.
Wednesday, February 15, 2012
jQuery display url and redirect functions
My own redirect function and get or display site's url. This is to simplify your code by using functions.
function redirectURL(url){
window.location.href=url;
}
How to use:
jQuery(document).ready(function(){
if(condition){
redirectURL("http://www.google.com");
}
else{
redirectURL("http://www.yahoo.com");
});
function getURL(){
return window.location.href;
}
How to use:
jQuery(document).ready(function(){
var siteURL=getURL();
alert(siteURL);
});
function redirectURL(url){
window.location.href=url;
}
How to use:
jQuery(document).ready(function(){
if(condition){
redirectURL("http://www.google.com");
}
else{
redirectURL("http://www.yahoo.com");
});
function getURL(){
return window.location.href;
}
How to use:
jQuery(document).ready(function(){
var siteURL=getURL();
alert(siteURL);
});
Thursday, February 9, 2012
how to make jQuery plug in with options
This is sample on how to make a jquery plugin with option. This is a multi step plugin and it is very useful in forms. Hope this will help!..
(function($){
$.fn.rPrevNext = function(options){
// the default options
var defaults = {
autoNavigation:true,
prevCaption:'prev',
nextCaption:'next',
navImage:false,
prevImage:'',
nextImage:'',
pageContainer:'pageCont',
pageOf:false,
pagination:false
}
// to override the defaults of each option
var options = $.extend(defaults, options);
return this.each(function(){
// declaration of variables
var cont = $(this);
var pages = $(this).children();
var pagef = cont.children().first();
var pagel = cont.children().last();
//if TRUE - enable auto navigation , if FALSE - manually put the navigation
//put a class prevP and nextP in your buttons.
if(options.autoNavigation){
//set the navigation either pure text/image
if(options.navImage){
//if TRUE - image
cont.append('<a href="javascript:void(0);" class="prevP"><img src="'+ options.prevImage +'"/></a> <a href="javascript:void(0);" class="nextP"><img src="'+ options.nextImage +'"/></a>');
}
else{
//if false - text
cont.append('<a href="javascript:void(0);" class="prevP">'+ options.prevCaption +'</a> <a href="javascript:void(0);" class="nextP">'+ options.nextCaption +'</a>');
}
}
//if TRUE - display example "Page 1 of 5"
//if FALSE - manually put a <div>,<span>or etc.. and put a class="pageCounter", this will display your current page number
//if FALSE - manually put a <div>,<span>or etc.. and put a class="pageLength", this will count the number of pages you have
if(options.pageOf){
cont.after('<div class="pageCont">Page <span class="pageCounter"></span> of <span class="pageLength"></span>.</div>');
}
//if TRUE - automatically display pagination after container
//if FALSE - manually put a <div> and class it with pagi
if(options.pagination){
cont.after('<div class="pagi"></div>');
var x=pages.length;
for(var y=1; y<=x;y++){
jQuery(".pagi").append('<a href="javascript:void(0);" class="'+y+'">'+y+'</a>');
}
}
else{
var x=pages.length;
for(var y=1; y<=x;y++){
jQuery(".pagi").append('<span><a href="javascript:void(0);" rel="'+y+'">'+y+'</a></span>');
}
}
// set the page containers class
pages.each(function(){
$(this).addClass(''+ options.pageContainer +'').css("display","none");
});
// onload functions, css or any codes
cont.ready(function(){
$(".current").css("display","block");
cont.css("clear","both");
showFirstPage();
navShowHide();
pageNumber();
$(".pagi a").first().addClass("oncurr");
});
// set onclick for previous
$("a.prevP").click(function(){
$(".current").hide();
$(".current").prev("div").addClass("current").show();
$(".current").eq(1).removeClass("current");
navShowHide();
pageNumber();
addCurr();
});
// set onclick for next
$("a.nextP").click(function(){
$(".current").hide();
$(".current").next("div").addClass("current").show();
$(".current").eq(0).removeClass("current");
navShowHide();
pageNumber();
addCurr();
});
// set onclick for the pagination numbers
$(".pagi a").click(function(){
var z=jQuery(this).attr("rel");
var disPlay=pages.eq(z-1);
$(".pagi a").removeClass("oncurr");
$(this).addClass("oncurr");
pages.removeClass("current").css("display","none");
disPlay.addClass("current").css("display","block");
navShowHide();
pageNumber();
});
// -----R-------------------N------ //
// -----E------FUNCTIONS----E------ //
// -----Y-------------------IL----- //
// for the navigation(next/previous) either show or hide
function navShowHide(){
var isFirst=pagef.hasClass("current");
if(isFirst){
$(".prevP").css("display","none");
}
else{
$(".prevP").show();
}
var isLast=pagel.hasClass("current");
if(isLast){
$(".nextP").css("display","none");
}
else{
$(".nextP").show();
}
}
// to show the first page of the multi-step
function showFirstPage(){
pagef.addClass("current").css("display","block");
}
// to display the current page number(must be inside class="pageCounter")
//and the total number of pages (must be inside class="pageLength")
function pageNumber(){
var pageL=pages.length;
pages.each(function(a,b){
var found =jQuery(this).hasClass("current");
jQuery(".pageLength").text(pageL);
if(found){
jQuery(".pageCounter").text(a+1);
}
});
}
// add class oncurr to the pagination
function addCurr(){
pages.each(function(x,y){
var curr=$(this).hasClass("current");
if(curr){
jQuery(".pagi a").removeClass("oncurr");
jQuery(".pagi a").eq(x).addClass("oncurr");
}
});
}
});
};
})(jQuery);
/*
* NOTE:Don't put any comma(,) after the last option because
* it is considered as an error in IE. Therefore leave it
* blank.
*
* Default setting of the plug-in
* autoNavigation:true,
* prevCaption:'prev',
* nextCaption:'next',
* navImage:false,
* prevImage:'',
* nextImage:'',
* pageContainer:'pageCont',
* pageOf:false,
* pagination:false
*
* How to use this plugin.
* Example:
* jQuery("#container").rPrevNext({
* autoNavigation:true,
* prevCaption:'PREV',
* nextCaption:'NEXT',
* navImage:false,
* pageContainer:'box',
* prevImage:'images/btnPrevious.png',
* nextImage:'images/btnNext.png'
* pageOf:true,
* pagination:true
* });
*/
(function($){
$.fn.rPrevNext = function(options){
// the default options
var defaults = {
autoNavigation:true,
prevCaption:'prev',
nextCaption:'next',
navImage:false,
prevImage:'',
nextImage:'',
pageContainer:'pageCont',
pageOf:false,
pagination:false
}
// to override the defaults of each option
var options = $.extend(defaults, options);
return this.each(function(){
// declaration of variables
var cont = $(this);
var pages = $(this).children();
var pagef = cont.children().first();
var pagel = cont.children().last();
//if TRUE - enable auto navigation , if FALSE - manually put the navigation
//put a class prevP and nextP in your buttons.
if(options.autoNavigation){
//set the navigation either pure text/image
if(options.navImage){
//if TRUE - image
cont.append('<a href="javascript:void(0);" class="prevP"><img src="'+ options.prevImage +'"/></a> <a href="javascript:void(0);" class="nextP"><img src="'+ options.nextImage +'"/></a>');
}
else{
//if false - text
cont.append('<a href="javascript:void(0);" class="prevP">'+ options.prevCaption +'</a> <a href="javascript:void(0);" class="nextP">'+ options.nextCaption +'</a>');
}
}
//if TRUE - display example "Page 1 of 5"
//if FALSE - manually put a <div>,<span>or etc.. and put a class="pageCounter", this will display your current page number
//if FALSE - manually put a <div>,<span>or etc.. and put a class="pageLength", this will count the number of pages you have
if(options.pageOf){
cont.after('<div class="pageCont">Page <span class="pageCounter"></span> of <span class="pageLength"></span>.</div>');
}
//if TRUE - automatically display pagination after container
//if FALSE - manually put a <div> and class it with pagi
if(options.pagination){
cont.after('<div class="pagi"></div>');
var x=pages.length;
for(var y=1; y<=x;y++){
jQuery(".pagi").append('<a href="javascript:void(0);" class="'+y+'">'+y+'</a>');
}
}
else{
var x=pages.length;
for(var y=1; y<=x;y++){
jQuery(".pagi").append('<span><a href="javascript:void(0);" rel="'+y+'">'+y+'</a></span>');
}
}
// set the page containers class
pages.each(function(){
$(this).addClass(''+ options.pageContainer +'').css("display","none");
});
// onload functions, css or any codes
cont.ready(function(){
$(".current").css("display","block");
cont.css("clear","both");
showFirstPage();
navShowHide();
pageNumber();
$(".pagi a").first().addClass("oncurr");
});
// set onclick for previous
$("a.prevP").click(function(){
$(".current").hide();
$(".current").prev("div").addClass("current").show();
$(".current").eq(1).removeClass("current");
navShowHide();
pageNumber();
addCurr();
});
// set onclick for next
$("a.nextP").click(function(){
$(".current").hide();
$(".current").next("div").addClass("current").show();
$(".current").eq(0).removeClass("current");
navShowHide();
pageNumber();
addCurr();
});
// set onclick for the pagination numbers
$(".pagi a").click(function(){
var z=jQuery(this).attr("rel");
var disPlay=pages.eq(z-1);
$(".pagi a").removeClass("oncurr");
$(this).addClass("oncurr");
pages.removeClass("current").css("display","none");
disPlay.addClass("current").css("display","block");
navShowHide();
pageNumber();
});
// -----R-------------------N------ //
// -----E------FUNCTIONS----E------ //
// -----Y-------------------IL----- //
// for the navigation(next/previous) either show or hide
function navShowHide(){
var isFirst=pagef.hasClass("current");
if(isFirst){
$(".prevP").css("display","none");
}
else{
$(".prevP").show();
}
var isLast=pagel.hasClass("current");
if(isLast){
$(".nextP").css("display","none");
}
else{
$(".nextP").show();
}
}
// to show the first page of the multi-step
function showFirstPage(){
pagef.addClass("current").css("display","block");
}
// to display the current page number(must be inside class="pageCounter")
//and the total number of pages (must be inside class="pageLength")
function pageNumber(){
var pageL=pages.length;
pages.each(function(a,b){
var found =jQuery(this).hasClass("current");
jQuery(".pageLength").text(pageL);
if(found){
jQuery(".pageCounter").text(a+1);
}
});
}
// add class oncurr to the pagination
function addCurr(){
pages.each(function(x,y){
var curr=$(this).hasClass("current");
if(curr){
jQuery(".pagi a").removeClass("oncurr");
jQuery(".pagi a").eq(x).addClass("oncurr");
}
});
}
});
};
})(jQuery);
/*
* NOTE:Don't put any comma(,) after the last option because
* it is considered as an error in IE. Therefore leave it
* blank.
*
* Default setting of the plug-in
* autoNavigation:true,
* prevCaption:'prev',
* nextCaption:'next',
* navImage:false,
* prevImage:'',
* nextImage:'',
* pageContainer:'pageCont',
* pageOf:false,
* pagination:false
*
* How to use this plugin.
* Example:
* jQuery("#container").rPrevNext({
* autoNavigation:true,
* prevCaption:'PREV',
* nextCaption:'NEXT',
* navImage:false,
* pageContainer:'box',
* prevImage:'images/btnPrevious.png',
* nextImage:'images/btnNext.png'
* pageOf:true,
* pagination:true
* });
*/
Wednesday, February 8, 2012
javascript open new window
<a href="javascript:void(0);" onclick="window.open('url','windowName','menubar=0,resizable=1,width=350,height=250');">text here</a>
Thursday, February 2, 2012
Wordpress Error and Solutions
Unable to create directory /wp-content/uploads/2009/09. Is its parent directory writable by the server? - wordpress error
Solutions:
1. Change the directory permission to 777. Apply this to its subdirectories or files so that it will become editable or writable.
2. In Media, check if its "Store uploads in this folder" is “wp-content/uploads“.
3.Also try to add define(‘UPLOADS’, ‘wp-content/new_folder’); after require_once(ABSPATH.’wp-settings.php’); in your wp-config.php file.
Solutions:
1. Change the directory permission to 777. Apply this to its subdirectories or files so that it will become editable or writable.
2. In Media, check if its "Store uploads in this folder" is “wp-content/uploads“.
3.Also try to add define(‘UPLOADS’, ‘wp-content/new_folder’); after require_once(ABSPATH.’wp-settings.php’); in your wp-config.php file.
Thursday, January 26, 2012
Tuesday, January 10, 2012
Love this Quote
Don't set compensation as a goal. Find work you like,
and the compensation will follow.
and the compensation will follow.
Subscribe to:
Posts (Atom)