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>"));
}
});
Tuesday, April 3, 2012
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>
Subscribe to:
Posts (Atom)