jQuery click(function(event) hyperlinks won't work - javascript

I can't figure out why the hyperlinks wont work when using a jQuery click event.
I would like 1 button to work as a link
and one as a jump to in the current page.
div class="shortcat">
<i class="icon-thumbs-up"></i>Test Now
<i class="icon-picture"></i>Learn More
</div>
//--------- jQuery ---------------//
jQuery(window).load(function() {
jQuery("#loaderInner").fadeOut();
jQuery("#loader").delay(400).fadeOut("slow");
$('.teaserTitle ').stop().animate({marginTop :'330px', opacity:"1"}, 1000, 'easeOutQuint');
$('.shortcat a ').stop().animate({marginTop :'65px', opacity:"1"}, 600, 'easeOutQuint');
});
$(document).ready(function(){
$("#mainNav ul a, .logo a, .shortcat a, .notBtn a").click(function(event){
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html,body').animate({scrollTop:target_top -80}, 800);
});
//-------------Highlight the current section in the navigation bar------------//
var sections = $("section");
var navigation_links = $("#mainNav a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('#mainNav a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("active");
active_link.addClass("active");
},
offset: '35%'
});
First part is the HTML the second part is my script.js
I think the click function event is wrong.
When i remove the shortcut out of it the hyperlink will work but the jump to not anymore.
Will there be an easy fix?

here you go: this works well
http://jsfiddle.net/6g4j2/
$(document).ready(function(){
$("#mainNav ul a, .logo a, .shortcat a, .notBtn a").click(function(event){
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
if (trgt != undefined) {
event.preventDefault();
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html,body').animate({scrollTop:target_top -80}, 800);
return false;
}
});
});

most likely the function from the click event fails here
var trgt = parts[1];
for the first link, because parts will be undefined

Related

set view position by element (javascript)

Is there any easy way how to set Y position of the screen by the element?
Tried to do with scrolling but didn't make wanted effect, so maybe setting screen view position would do the trick.
have a div with string:
Function is in use with elementor (wordpress) toggle tabs which generating anchor links for tabs and they making a trick which opens exact tab by link.
<script type="text/javascript">
jQuery(document).ready(function($){
setTimeout(function(){
var current = window.location.href;
var current = current.split('#tab');
if(current.length>1) {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-title[data-tab="'+current[1]+'"]').addClass('elementor-active');
$('.elementor-tab-content').hide();
$('.elementor-tab-content[data-tab="'+current[1]+'"]').show();
}
}, 200);
$('.elementor-tab-title[data-tab]').click(function(){
var current_location = window.location.href;
current_location = current_location.split('#');
window.location = current_location[0]+'#tab'+$(this).attr('data-tab');
})
})
jQuery(document).ready(function ($) {
setTimeout(function () {
var current = window.location.href
var current = current.split('#tab')
if (current.length > 1) {
showAndScrollToTab($, current)
}
}, 200);
// change the browser url according to selected tab
$('.elementor-tab-title[data-tab]').click(function () {
var current_location = window.location.href;
current_location = current_location.split('#')
window.location = current_location[0] + '#tab' + $(this).attr('data-tab')
})
// activate tab also from anchor link in the same page
$('a').on('click', function () {
var anchorUrl = $(this).attr('href')
var anchor = anchorUrl.split('#tab')
if (anchor.length > 1) {
showAndScrollToTab($, anchor)
}
})
})
function showAndScrollToTab($, current) {
// adding class
$('.elementor-tab-title').removeClass('elementor-active')
$('.elementor-tab-title[data-tab="' + current[1] + '"]').addClass('elementor-active')
// scroll to
var customOffset = '20';
$([document.documentElement, document.body]).animate({
scrollTop: $('.elementor-tab-title[data-tab="' + current[1] + '"]').closest('.elementor-widget-container').offset().top - customOffset }, 1000)
}</script>
Html in use for toggle tab headings:
<div class="elementor-toggle-item">
<div id="elementor-tab-title-2287" class="elementor-tab-title elementor-active" data-tab="7" role="tab" aria-controls="elementor-tab-content-2287">
How to modify the function for making device screen view top is 40px to the .elementor-tab-title[data-tab="' + current[1] + '"] div? Is it possible to adjust offset from div element to top by device (mobile, tablet, desktop)?
Any other solutions are welcome how to do that!

javascript slider has a wrong size

I have a slider on that page:
http://en.expo.b24online.com/news/
The js for the silder is:
on the document ready:
$('#newsCarousel').carousel({
interval: 4000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.list-group').children().length -1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
and on the load:
var boxheight = $('#newsCarousel .carousel-inner').innerHeight();
var itemlength = $('#newsCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#newsCarousel .list-group-item').outerHeight(triggerheight);
$('.media-img').height(boxheight);
It works fine on some places, but on this website, I have the:
$('#newsCarousel .carousel-inner').innerHeight();
to be 133, and this makes all the other dimensions calculate in the load function wrong.
I couldn't find where this 133 come from and how to fix it.
Thank you for your help.
.innerHeight() method is not applicable to window and document objects; for these, use .height() instead.
eg:
$('#newsCarousel .carousel-inner').height();
Hope it will help.

jQuery + Get and Compare Element VALUE and ALT

I am trying to modify following script to do this check:
Check if input VALUE and ALT are the same.
If yes: empty VALUE
If no: keep VALUE
This is the script I am working on: (the part that i commented out, is where i tryed to figure out how to make the changes myself).
<script language="Javascript" type="text/javascript">
//<![CDATA[
jQuery.fn.placeholder = function(){
return this.each(function(){
var element = $(this)
var insertedNow =element.after("<span class='placeholder-spanbox'>"+ element.attr('alt')+ "</span>").attr("alt","").next('.placeholder-spanbox');
var leftOffset = (element.innerWidth() - element.width())/2+parseInt(element.css("border-left-width"));
var topOffset = ((element.innerHeight() - element.height())/2)+parseInt(element.css("border-top-width"));
var inputWidth = element.width();
var inputHeight = element.height();
var placeholderPos = inputHeight + topOffset + leftOffset;
insertedNow.css("padding-left",leftOffset+"px").css("padding-top",topOffset+"px").css("opacity",0.5).css("display","block").css("margin-top",-placeholderPos).css("cursor","text");
var objCSS = {'-webkit-transition':'opacity 100ms ease-in','-moz-transition':'opacity 100ms ease-in','-o-transition':'opacity 100ms ease-in','-ms-transition':'opacity 100ms ease-in','transition':'opacity 100ms ease-in','font-size':element.css('font-size'),'font-family':element.css('font-family'),'color':'#000000','font-weight':element.css('font-weight'),'width':element.css('width'),'float':element.css('float')};
insertedNow.css(objCSS);
//insertedNow.offset(element.offset());
element.bind("focus",updateSpanStatusFocus);
element.bind("keydown",updateSpanStatusKeyDown);
element.bind("keyup",updateSpanStatusKeyUp);
element.bind("blur",updateSpanStatusBlur);
insertedNow.bind("click",clickSpanBox);
var inputVal = element.attr("value");
var inputAlt = element.attr("alt");
//$(this).attr("value",+inputVal);
// if(inputVal == inputAlt){
// $(this).attr("value","123");
// }
if(element.val()!==""){
insertedNow.css({'opacity':0});
}
});
function clickSpanBox(event){
event.preventDefault();
var inputBox = $(this).prev();
inputBox.focus();
}
function updateSpanStatusFocus(event){
var $this= $(this);
if($this.val()==""){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0.3");
}
}
function updateSpanStatusKeyUp(event){
var $this= $(this);
if($this.val()==""){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0.3");
}
}
function updateSpanStatusKeyDown(event){
var $this = $(this);
if($this.val()=="" && (event.keyCode>54 || event.keyCode == 32)){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0");
}
}
function updateSpanStatusBlur(){
var $this= $(this);
$this.val(Trim($this.val()+''));
if($this.val()==""){
var spanBox = $this.next('.placeholder-spanbox');
spanBox.css("opacity","0.5");
spanBox.css("color","#000000");
}
}
}
$(document).ready(function(){
$('.spanOverlay').placeholder();
});
//]]>
</script>
And here the html markup example:
<input type='text' name="userName" class='contactInput spanOverlay' alt='* Name' value='test'></input>
Thanks for your help!!
Is this what you want?
if (element.val() == element.attr('alt')) {
element.val("");
}
there's something called .defaultValue in javascript u could use this to compare against current value
here's an example on how its done
http://www.miuaiga.com/index.cfm/2009/8/31/jQuery-form-input-defaultValue

jQuery click event

In the following code, the click event is added explicitly to the body, so that even if click outside the button say on the body the div with ID tip1 should close with a fade effect.
The problem here is that the the div closes even if we click on the div itself.
Any idea on this would help ..
$(document).ready(function(){
$('.button').getit({speed: 150, delay: 300});
});
$.fn.getit = function(options){
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
$(this).each(function(){
var $this = $(this);
var tip = $('.tip');
this.title = "";
var offset = $(this).offset();
var tLeft = offset.left;
var tTop = offset.top;
var tWidth = $this.width();
var tHeight = $this.height();
$this.click(
function() {
if($('.tip').hasClass('.active101')) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
else {
setTip(tTop, tLeft);
$('body').bind('click',function(e) {
var parentElement = "button1";
var parentElement2 = "tip1"
if( e.target.id != parentElement) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
});
$('.tip').removeClass('.inactive101').addClass('.active101');
setTimer();
}
},
function() {
if($('.tip').hasClass('.inactive101')) {
stopTimer();
tip.hide();
}
}
);
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-440)+"px";
var yTip = (top-topOffset+100)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};
<div class="main">
<a href="#" class="button" id="button1">
Click Me!
</a>
<div class="tip" id="tip1">Hello again</div>
</div>
Set the click event on your div to 'stopPropagation'
http://api.jquery.com/event.stopPropagation/
Perhaps you can bind a click event to the div itself and prevent the click event from bubbling up?
$("#div").click(function(e) {
e.stopPropagation();
});
Rick.
you should stop the event's propagation
you should check if any of the element's children are clicked (if you click a child of that element, the element would close)
you should probably be more careful with your selectors(if you intend to use this only on one element - because you are verifying with an id ('#button1' which is unique), you shouldn't bind the getit function to all the elements with class '.button')
if( e.target.id != parentElement
&& $(e.target).parents('#'+parentElement).length == 0) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
e.stopPropagation();
}
thanks for your answers. Tried with all of them and each worked. But I also found another solution to this by just adding another condition:
if (e.target.id != parentElement && e.target.id != parentElement2) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}

jqtransform form events problem

I'm a web designer with css experience, but I'm not a JS developer.
I used jqtransform to style a search form ,
the problem is it removes all events from selectors and the search button .
here is the code before jqtransform
<input id="go-search" type="button" name="btn_search" value="search" onclick="searchLocations()" />
and after applying the script, the button doesn't do any thing
I opened the page source and here how it looks like:
<button class=" jqTransformButton" type="button" name="btn_search" id="go-search"><span><span>search</span></span></button>
Please help me !
I think it’s best to put new questions in new posts …
$(function() { $("form.jqtransform").jqTransform(); $("#city").click(populateDestrict); });
when assigning functions to an event by JavaScript, you only assign the function reference. putting parentheses behind a function identifyer will execute the function.
function myFunction(x)
{
alert(x);
return 1;
}
// correct, the onload event will trigger the function
window.onload = myFunction;
// alerts "[object Event]"
// wrong
window.onload = myFunction("hello");
// this assigns "1" to the onload property*
// * - IE may execute this, but no standard compliant browser
As far as can see only buttons are affected. The script replaces your original buttons with new ones, so everything besides the id, name, type & class attributes is removed. You would have to assign the function anew when jqtransform finished its job.
// after jqtransform
// probably $("#go-search").click(searchLocations); in jQuery, but I’m not a jQuery user … thus in plain JavaScript:
var bt = document.getElementById("go-search");
if (window.addEventListener) {
bt.addEventListener("click", searchLocations, false);
}
else {
bt.attachEvent("onclick", searchLocations);
}
I would hazard a guess at using it like
$(function() {
//find all form with class jqtransform and apply the plugin
$("form.jqtransform").jqTransform();
// fix your button
$("#go-search").click(searchLocations);
});
May be late but... Faced the same issue recently. and the solution was to use this version of the jqTransform script:
NOTE: 1) Open your jqTransform file, 2)DELETE everything, 3)COPY the code bellow 4) PASTE and 5) SAVE.
VOILA!!
/*
*
* jqTransform
* by mathieu vilaplana mvilaplana#dfc-e.com
* Designer ghyslain armand garmand#dfc-e.com
*
*
* Version 1.0 25.09.08
* Version 1.1 06.08.09
* Add event click on Checkbox and Radio
* Auto calculate the size of a select element
* Can now, disabled the elements
* Correct bug in ff if click on select (overflow=hidden)
* No need any more preloading !!
*
******************************************** */
(function($){
var defaultOptions = {preloadImg:true};
var jqTransformImgPreloaded = false;
var jqTransformPreloadHoverFocusImg = function(strImgUrl) {
//guillemets to remove for ie
strImgUrl = strImgUrl.replace(/^url\((.*)\)/,'$1').replace(/^\"(.*)\"$/,'$1');
var imgHover = new Image();
imgHover.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-hover.$1');
var imgFocus = new Image();
imgFocus.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-focus.$1');
};
/***************************
Labels
***************************/
var jqTransformGetLabel = function(objfield){
var selfForm = $(objfield.get(0).form);
var oLabel = objfield.next();
if(!oLabel.is('label')) {
oLabel = objfield.prev();
if(oLabel.is('label')){
var inputname = objfield.attr('id');
if(inputname){
oLabel = selfForm.find('label[for="'+inputname+'"]');
}
}
}
if(oLabel.is('label')){return oLabel.css('cursor','pointer');}
return false;
};
/* Hide all open selects */
var jqTransformHideSelect = function(oTarget){
var ulVisible = $('.jqTransformSelectWrapper ul:visible');
ulVisible.each(function(){
var oSelect = $(this).parents(".jqTransformSelectWrapper:first").find("select").get(0);
//do not hide if click on the label object associated to the select
if( !(oTarget && oSelect.oLabel && oSelect.oLabel.get(0) == oTarget.get(0)) ){$(this).hide();}
});
};
/* Check for an external click */
var jqTransformCheckExternalClick = function(event) {
if ($(event.target).parents('.jqTransformSelectWrapper').length === 0) { jqTransformHideSelect($(event.target)); }
};
/* Apply document listener */
var jqTransformAddDocumentListener = function (){
$(document).mousedown(jqTransformCheckExternalClick);
};
/* Add a new handler for the reset action */
var jqTransformReset = function(f){
var sel;
$('.jqTransformSelectWrapper select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});});
$('a.jqTransformCheckbox, a.jqTransformRadio', f).removeClass('jqTransformChecked');
$('input:checkbox, input:radio', f).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jqTransformChecked');}});
};
/***************************
Buttons
***************************/
$.fn.jqTransInputButton = function(){
return this.each(function(){
var newBtn = $('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +' jqTransformButton"><span><span>'+ $(this).attr('value') +'</span></span>')
.hover(function(){newBtn.addClass('jqTransformButton_hover');},function(){newBtn.removeClass('jqTransformButton_hover')})
.mousedown(function(){newBtn.addClass('jqTransformButton_click')})
.mouseup(function(){newBtn.removeClass('jqTransformButton_click')})
;
$(this).replaceWith(newBtn);
});
};
/***************************
Text Fields
***************************/
$.fn.jqTransInputText = function(){
return this.each(function(){
var $input = $(this);
if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;}
$input.addClass('jqtranformdone');
var oLabel = jqTransformGetLabel($(this));
oLabel && oLabel.bind('click',function(){$input.focus();});
var inputSize=$input.width();
if($input.attr('size')){
inputSize = $input.attr('size')*10;
$input.css('width',inputSize);
}
$input.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper"><div class="jqTransformInputInner"><div></div></div></div>');
var $wrapper = $input.parent().parent().parent();
$wrapper.css("width", inputSize+10);
$input
.focus(function(){$wrapper.addClass("jqTransformInputWrapper_focus");})
.blur(function(){$wrapper.removeClass("jqTransformInputWrapper_focus");})
.hover(function(){$wrapper.addClass("jqTransformInputWrapper_hover");},function(){$wrapper.removeClass("jqTransformInputWrapper_hover");})
;
/* If this is safari we need to add an extra class */
$.browser.safari && $wrapper.addClass('jqTransformSafari');
$.browser.safari && $input.css('width',$wrapper.width()+16);
this.wrapper = $wrapper;
});
};
/***************************
Check Boxes
***************************/
$.fn.jqTransCheckBox = function(){
return this.each(function(){
if($(this).hasClass('jqTransformHidden')) {return;}
var $input = $(this);
var inputSelf = this;
//set the click on the label
var oLabel=jqTransformGetLabel($input);
oLabel && oLabel.click(function(){aLink.trigger('click');});
var aLink = $('');
//wrap and add the link
$input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(aLink);
//on change, change the class of the link
$input.change(function(){
this.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
return true;
});
// Click Handler, trigger the click and change event on the input
aLink.click(function(){
//do nothing if the original input is disabled
if($input.attr('disabled')){return false;}
//trigger the envents on the input object
$input.trigger('click').trigger("change");
return false;
});
// set the default state
this.checked && aLink.addClass('jqTransformChecked');
});
};
/***************************
Radio Buttons
***************************/
$.fn.jqTransRadio = function(){
return this.each(function(){
if($(this).hasClass('jqTransformHidden')) {return;}
var $input = $(this);
var inputSelf = this;
oLabel = jqTransformGetLabel($input);
oLabel && oLabel.click(function(){aLink.trigger('click');});
var aLink = $('');
$input.addClass('jqTransformHidden').wrap('<span class="jqTransformRadioWrapper"></span>').parent().prepend(aLink);
$input.change(function(){
inputSelf.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
return true;
});
// Click Handler
aLink.click(function(){
if($input.attr('disabled')){return false;}
$input.trigger('click').trigger('change');
// uncheck all others of same name input radio elements
$('input[name="'+$input.attr('name')+'"]',inputSelf.form).not($input).each(function(){
$(this).attr('type')=='radio' && $(this).trigger('change');
});
return false;
});
// set the default state
inputSelf.checked && aLink.addClass('jqTransformChecked');
});
};
/***************************
TextArea
***************************/
$.fn.jqTransTextarea = function(){
return this.each(function(){
var textarea = $(this);
if(textarea.hasClass('jqtransformdone')) {return;}
textarea.addClass('jqtransformdone');
oLabel = jqTransformGetLabel(textarea);
oLabel && oLabel.click(function(){textarea.focus();});
var strTable = '<table cellspacing="0" cellpadding="0" border="0" class="jqTransformTextarea">';
strTable +='<tr><td id="jqTransformTextarea-tl"></td><td id="jqTransformTextarea-tm"></td><td id="jqTransformTextarea-tr"></td></tr>';
strTable +='<tr><td id="jqTransformTextarea-ml"> </td><td id="jqTransformTextarea-mm"><div></div></td><td id="jqTransformTextarea-mr"> </td></tr>';
strTable +='<tr><td id="jqTransformTextarea-bl"></td><td id="jqTransformTextarea-bm"></td><td id="jqTransformTextarea-br"></td></tr>';
strTable +='</table>';
var oTable = $(strTable)
.insertAfter(textarea)
.hover(function(){
!oTable.hasClass('jqTransformTextarea-focus') && oTable.addClass('jqTransformTextarea-hover');
},function(){
oTable.removeClass('jqTransformTextarea-hover');
})
;
textarea
.focus(function(){oTable.removeClass('jqTransformTextarea-hover').addClass('jqTransformTextarea-focus');})
.blur(function(){oTable.removeClass('jqTransformTextarea-focus');})
.appendTo($('#jqTransformTextarea-mm div',oTable))
;
this.oTable = oTable;
if($.browser.safari){
$('#jqTransformTextarea-mm',oTable)
.addClass('jqTransformSafariTextarea')
.find('div')
.css('height',textarea.height())
.css('width',textarea.width())
;
}
});
};
/***************************
Select
***************************/
$.fn.jqTransSelect = function(){
return this.each(function(index){
var $select = $(this);
if($select.hasClass('jqTransformHidden')) {return;}
if($select.attr('multiple')) {return;}
var oLabel = jqTransformGetLabel($select);
/* First thing we do is Wrap it */
var $wrapper = $select
.addClass('jqTransformHidden')
.wrap('<div class="jqTransformSelectWrapper"></div>')
.parent()
.css({zIndex: 10-index})
;
/* Now add the html for the select */
$wrapper.prepend('<div><span></span></div><ul></ul>');
var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
/* Now we add the options */
$('option', this).each(function(i){
var oLi = $('<li>'+ $(this).html() +'</li>');
$ul.append(oLi);
});
/* Add click handler to the a */
$ul.find('a').click(function(){
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
//if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
if ($select[0].selectedIndex != $(this).attr('index')) { $select[0].selectedIndex = $(this).attr('index'); $select.change(); }
//Redundent code
//$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the default */
$('a:eq('+ this.selectedIndex +')', $ul).click();
$('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
this.oLabel = oLabel;
/* Apply the click handler to the Open */
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
.click(function(){
//Check if box is already open to still allow toggle, but close all other selects
if( $ul.css('display') == 'none' ) {jqTransformHideSelect();}
if($select.attr('disabled')){return false;}
$ul.slideToggle('fast', function(){
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({scrollTop: offSet});
});
return false;
})
;
// Set the new width
var iSelectWidth = $select.outerWidth();
var oSpan = $('span:first',$wrapper);
var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
$wrapper.css('width',newWidth);
$ul.css('width',newWidth-2);
oSpan.css({width:iSelectWidth});
// Calculate the height if necessary, less elements that the default height
//show the ul to calculate the block, if ul is not displayed li height value is 0
$ul.css({display:'block',visibility:'hidden'});
var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
(iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
$ul.css({display:'none',visibility:'visible'});
});
};
$.fn.jqTransform = function(options){
var opt = $.extend({},defaultOptions,options);
/* each form */
return this.each(function(){
var selfForm = $(this);
if(selfForm.hasClass('jqtransformdone')) {return;}
selfForm.addClass('jqtransformdone');
$('input:submit, input:reset, input[type="button"]', this).jqTransInputButton();
$('input:text, input:password', this).jqTransInputText();
$('input:checkbox', this).jqTransCheckBox();
$('input:radio', this).jqTransRadio();
$('textarea', this).jqTransTextarea();
if( $('select', this).jqTransSelect().length > 0 ){jqTransformAddDocumentListener();}
selfForm.bind('reset',function(){var action = function(){jqTransformReset(this);}; window.setTimeout(action, 10);});
//preloading dont needed anymore since normal, focus and hover image are the same one
/*if(opt.preloadImg && !jqTransformImgPreloaded){
jqTransformImgPreloaded = true;
var oInputText = $('input:text:first', selfForm);
if(oInputText.length > 0){
//pour ie on eleve les ""
var strWrapperImgUrl = oInputText.get(0).wrapper.css('background-image');
jqTransformPreloadHoverFocusImg(strWrapperImgUrl);
var strInnerImgUrl = $('div.jqTransformInputInner',$(oInputText.get(0).wrapper)).css('background-image');
jqTransformPreloadHoverFocusImg(strInnerImgUrl);
}
var oTextarea = $('textarea',selfForm);
if(oTextarea.length > 0){
var oTable = oTextarea.get(0).oTable;
$('td',oTable).each(function(){
var strImgBack = $(this).css('background-image');
jqTransformPreloadHoverFocusImg(strImgBack);
});
}
}*/
}); /* End Form each */
};/* End the Plugin */
})(jQuery);
You could also get the same here: http://pastebin.com/Q1pYMKZ2

Categories