selector {
min-height:500px;
height:auto !important;
height:500px;
}
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.
Subscribe to:
Posts (Atom)
