need help with some jquery/js/jsp functionality..
I have a collapsible table script:
(function($){
$.fn.extend({
setupCollapstable: function(options) {
var defaults = {
displayStyle: "Image",
autoCheckbox: true,
toggleMinus: "/resource/images/collapse_close.gif",
togglePlus: "/resource/images/collapse_open.gif"
};
var options = $.extend(defaults, options);
var toggleMinus = options.toggleMinus
var togglePlus = options.togglePlus
return this.each(function() {
//Creating a reference to the object
var obj = $(this);
//Break out the individual tbody elements
var rowGroups = $('tbody', obj);
//Loop through every tbody to setup collapsable and click events
$.each( rowGroups, function( intIndex, objValue ){
parentRow = $('th:first-child', objValue);
childCount = parentRow.parent().siblings().length;
if (childCount != 0) {
//console.log ("ParentRow: " + parentRow + " - ChildCount is: " + childCount);
parentRow.prepend('<img src="' + togglePlus + '" alt="collapse this section" />');
parentRow.parent().siblings().fadeOut('fast');
$('img', parentRow).addClass('clickable').click(function(e) {
e.preventDefault();
var toggleSrc = $(this).attr('src');
if ( toggleSrc == toggleMinus ) {
$(this).attr('src', togglePlus).parents('tr').siblings().fadeOut('fast');
} else{
$(this).attr('src', toggleMinus).parents('tr').siblings().fadeIn('fast');
};
});
var parentCheckbox = $(':checkbox', parentRow.siblings())
var childCheckboxes = $(':checkbox', parentRow.parent().siblings());
parentCheckbox.click(function(e){
var checked_status = parentCheckbox.attr('checked')?1:0;
childCheckboxes.each(function(){
this.checked = checked_status;
});
});
} else {
parentRow.addClass("indented");
}
});
//console.dir (objValue);
});
}
});
})(jQuery);
From my JSP I call it as such....
<script type="text/javascript" src="/resource/js/jquery.collapstable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table.collapstable').setupCollapstable();
});
</script>
usage:
<table class="collapstable NoTableBorder">
when I click on the image icon the table properly collapses and expands, however I want it to be initially expanded if a certain checkbox is checked (on the JSP).
so I would have an onclick="showOrHide()" function for that checkbox input which would collapse or expand the table.
i've attached an image to for a visual representation, the collpase table is the "+/-" icon (next to the bold VISA header) while the checkbox which decides if it should be expanded for shown is the "active" checkbox..
any help with this would be amazing...
You can add a condition just before the collapse / expand function call
<script type="text/javascript">
$(document).ready(function(){
if (checkboxname.checked){
// Set flags to show the table expanded
}else{
// Set flags to show the table collapsed
}
$('table.collapstable').setupCollapstable();
});
</script>
Related
Hy, I have a problem with my JavaScript that I use it for the content of a table. My function is for users when they right click on a table row appears a context menu where they can choose what they want to do. The problem is that right click doesn't work any more when I go to the next pages in the table (my page load with 10 records in the table).
My script:
<script type='text/javascript'>
$(window).load(function(){
(function ($, window) {
$.fn.contextMenu = function (settings) {
return this.each(function () {
// Open context menu
$(this).on("contextmenu", function (e) {
// return native menu if pressing control
if (e.ctrlKey) return;
//open menu
var $menu = $(settings.menuSelector)
.data("invokedOn", $(e.target))
.show()
.css({
position: "absolute",
left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
top: getMenuPosition(e.clientY, 'height', 'scrollTop')
})
.off('click')
.on('click', 'a', function (e) {
$menu.hide();
var $invokedOn = $menu.data("invokedOn");
var $selectedMenu = $(e.target);
var $selectedFileId = $menu.data("invokedOn").find('.datatable_fixed_column').attr('id');
settings.menuSelected.call(this, $invokedOn, $selectedMenu, $selectedFileId);
});
return false;
});
//make sure menu closes on any click
$('body').click(function () {
$(settings.menuSelector).hide();
});
});
function getMenuPosition(mouse, direction, scrollDir) {
var win = $(window)[direction](),
scroll = $(window)[scrollDir](),
menu = $(settings.menuSelector)[direction](),
position = mouse + scroll;
// opening menu would pass the side of the page
if (mouse + menu > win && menu < mouse)
position -= menu;
return position;
}
};
})(jQuery, window);
$("#datatable_fixed_column td").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu, id) {
switch(selectedMenu.text()){
case 'Modificare':{
var rand = invokedOn.parent().children();
var idpost = $(rand[0]).text();
window.location.href = "organigrama_add.php?control=update&id=" + idpost;
}
break;
case 'Stergere':{
var rand = invokedOn.parent().children();
var marca = $(rand[1]).text();
if (marca == '0')
{
var idpost = $(rand[0]).text();
var departament = $(rand[5]).text();
var subdepartament = $(rand[6]).text();
var schimb = $(rand[9]).text();
var functie = $(rand[10]).text();
var msg = "Sunteti sigur ca doriti sa stergeti aceasta inregistrare?" + "\nDepartament: " + departament + "\nSubdepartament: " + subdepartament + "\nSchimb: " + schimb + "\nFunctie: " + functie;
var confirmare = confirm(msg);
if (confirmare == true)
{
window.location.href = "organigrama.php?control=delete&id=" + idpost;
}
}
else
{
var msg = "Nu se poate sterge acest post. Doar posturile libere se pot sterge.";
alert(msg);
}
}
break;
case 'Renunta':{
return false;
}
break;
}
}
});
});
</script>
And context menu used for this:
<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
<li><a tabindex="-1">Modificare</a></li>
<li><a tabindex="-1" href="#">Stergere</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="">Renunt</a></li>
</ul>
Edit: I forget to mention that the javascript is before the </body> end tag and context menu is after <body> start tag.
so basically the problem here is that the newly added rows in the table will not get the bindings from the initial load of the page. so the fix needed here is to bind the event to the main document by using this
$(document).on('contextmenu', target, function)
this will allow jquery to run the specific function to a targeted element on 'right click/contextmenu' event
I have a horizontal category bar. this is populated by php - i set a data-cat-id property on the anchor. then use a jquery click function to get this value like this:
$('.filterCat').click(function() {
alert('cat id is:'+$(this).data("cat-id"))
return false;
});
This works fine. But the horizontal bar has a function that adds list elements to a "more" sub menu when the width gets smaller than its content. using the code:
$(function() {
alignMenu();
$(window).resize(function() {
$("#horizontal").append($("#horizontal li.hideshow ul").html());
$("#horizontal li.hideshow").remove();
alignMenu();
});
function alignMenu() {
var w = 0;
var mw = $("#horizontal").width() - 150;
var i = -1;
var menuhtml = '';
jQuery.each($("#horizontal").children(), function() {
i++;
w += $(this).outerWidth(true);
if (mw < w) {
menuhtml += $('<div>').append($(this).clone()).html();
$(this).remove();
}
});
$("#horizontal").append(
'<li style="position:relative;" href="#" class="hideshow">' + 'More ' + '<span style="font-size:13px">↓</span>' + '<ul>' + menuhtml + '</ul></li>');
$("#horizontal li.hideshow ul").css("top",
$("#horizontal li.hideshow").outerHeight(true) + "px");
$("#horizontal li.hideshow").click(function() {
$(this).children("ul").toggle();
});
if (menuhtml == '') {
$("#horizontal li.hideshow").hide();
} else {
$("#horizontal li.hideshow").show();
}
}
});
This also works but now when there is a "more" button (because the content is bigger) the click function does not work anymore.
i have made a fiddle - if you click on a normal menu item it shows the alert, but if you click on a item that is places under "more" it does nothing see FIDDLE: https://jsfiddle.net/quosa60e/
For dynamically created elements .click() does not work
document.on('click','SELECTOR',function(){});
So you should use:
$(document).on('click','.filterCat',function() {
alert('cat id is:'+$(this).data("cat-id"))
return false;
});
So I have made a table table elements and functions for the pop up and the form. Appending element on clicking save button also works. However on a new popup the data from the form is appended in every previously clicked table cell no matter if the cell is full or empty.I am somehow trying to populate the cell with currently generated ID . Considering the fact that I me new at JavaScript I am totally missing something Can someone give me idea what is that. The Code
//================ADDs POPUP ON CLICK================/
$(document).ready(function () {
/*Adding the klikanje class to td*/
$('table tbody tr:not(:first) td').addClass('klikanje');
/*removing the klikanje class from the first column*/
$('table tr:first-child, table td:first-child').removeClass('klikanje');
/*removing the klikanje class from the first row*/
$('table tbody tr:first-child td').removeClass('klikanje');
/*Making random id*/
/*appending data atributs to empty td*/
$('.klikanje').click(function(){
var self = $(this);
if ($(this).is(':empty')) {
var idBase = 'clickId-';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var idNumber = getRandomInt(1, 1000000);
var clickID = idBase + idNumber
var callingID = '#' + clickID;
$(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });
/*save to td */
$('#save').click(function () {
var theName = $('input[name=name]').val();
var theLastName = $('input[name=lastname]').val();
var $fullCell = $('<p>' + theName + '' + theLastName + '</p>');
if((theLastName+theLastName).length > 0){
$(callingID).append($fullCell);
$(callingID).css('background-color', 'yellow');
}
}); /*save to td end */
} else {
alert('Already taken spot. Please pick another one!');
$(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
}
});
});//<---ADDs POPUP ON CLICK END
Full code : JsFiddle
You need to just empty the fields after saving the value because same popup html is used again and again and value once entered in the input elements will stay there until manually cleared.
Use below code.
var callingID = "";
$('.klikanje').click(function(){
var self = $(this);
if ($(this).is(':empty')) {
var idBase = 'clickId-';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var idNumber = getRandomInt(1, 1000000);
var clickID = idBase + idNumber
callingID = '#' + clickID;
$(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });
updated fiddle : https://jsfiddle.net/9zcj3ab8/27/
I don't know why this is happening but if you remove the attributes for what I think it's a bootstrap modal you get the desired behavior. I think is something related with you are referencing the modal with every cell you have clicked before, but removing the attributes it seems to work properly.
Update this in your code:
$('#save').click(function () {
var theName = $('input[name=name]').val();
var theLastName = $('input[name=lastname]').val();
var $fullCell = $('<p>' + theName + '' + theLastName + '</p>');
if((theLastName+theLastName).length > 0){
$(callingID).append($fullCell);
$(callingID).css('background-color', 'yellow');
$(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
}); /*save to td end */
am trying to use javascript for custom styled select boxes from www.gerrendesign.com/entry_images/selectboxdemo.zip
and as I have plenty entries inside one of select box I need to make but am stuck in creation of scrolling function.
As this select boxes are compatible with almost all older and new browsers. I need only suggestion or solution how to add scroll in this linked/attached files above - if select box is populated with plenty of entries (example cities, states, or exchange rates...)
Am stuck here...
Thanks for your cooperation
Ivan
THIS IS CODE:
$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select.changeMe").css('display','none');
//now, for each select box, run this function
$("select.changeMe").each(function(){
var curSel = $(this);
// get the CSS width from the original select box
var gddWidth = $(curSel).css('width');
var gddWidthL = gddWidth.slice(0,-2);
var gddWidth2 = gddWidthL - 28;
var gddWidth3 = gddWidthL - 16;
// build the new div structure
var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
//get the default selected option
var whatSelected = $(curSel).children('option:selected').text();
//write the default
var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 + 'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
// create a new array of div options from the original's options
var addItems = new Array();
$(curSel).children('option').each( function() {
var text = $(this).text();
var selVal = $(this).attr('value');
var before = '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0" style="width:' + gddWidth3 + 'px;">';
var after = '</a></li>';
addItems.push(before + text + after);
});
//hide the default from the list of options
var removeFirst = addItems.shift();
// create the end of the div selectbox and close everything off
var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
//write everything after each selectbox
var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
$(curSel).after(GDD);
//this var selects the div select box directly after each of the origials
var nGDD = $(curSel).next('div.selectME');
$(nGDD).find('li:first').addClass("first");
$(nGDD).find('li:last').addClass('last');
//handle the on click functions - push results back to old text box
$(nGDD).click( function(e) {
var myTarA = $(e.target).attr('rel');
var myTarT = $(e.target).text();
var myTar = $(e.target);
//if closed, then open
if( $(nGDD).find('li').css('display') == 'none')
{
//this next line closes any other selectboxes that might be open
$('div.selectME').find('li').css('display','none');
$(nGDD).find('li').css('display','block');
//if user clicks off of the div select box, then shut the whole thing down
$(document.window || 'body').click( function(f) {
var myTar2 = $(f.target);
if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
});
return false;
}
else
{
if (myTarA == null){
$(nGDD).find('li').css('display','none');
return false;
}
else {
//set the value of the old select box
$(curSel).val(myTarA);
//set the text of the new one
$(nGDD).find('span.gselected').text(myTarT);
$(nGDD).find('li').css('display','none');
return false;
}
}
//handle the tab index functions
}).focus( function(e) {
$(nGDD).find('li:first').addClass('currentDD');
$(nGDD).find('li:last').addClass('lastDD');
function checkKey(e){
//on keypress handle functions
function moveDown() {
var current = $(nGDD).find('.currentDD:first');
var next = $(nGDD).find('.currentDD').next();
if ($(current).is('.lastDD')){
return false;
} else {
$(next).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
function moveUp() {
var current = $(nGDD).find('.currentDD:first');
var prev = $(nGDD).find('.currentDD').prev();
if ($(current).is('.first')){
return false;
} else {
$(prev).addClass('currentDD');
$(current).removeClass('currentDD');
}
}
var curText = $(nGDD).find('.currentDD:first').text();
var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
switch (e.keyCode) {
case 40:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveDown();
return false;
break;
case 38:
$(curSel).val(curVal);
$(nGDD).find('span.gselected').text(curText);
moveUp();
return false;
break;
case 13:
$(nGDD).find('li').css('display','none');
}
}
$(document).keydown(checkKey);
}).blur( function() {
$(document).unbind('keydown');
});
});
});
You could render the list inside a div, that has either a fixed height or a max-height (depending on your cross-browser requirements). Presuming the default scroll bar is ok...
If structure is something in the direction of
<div class="select_data_container">
<ul class="select_rows">
<li>row1</li>
<li>row2</li>
</ul>
</div>
CSS-example could be
.select_data_container {overflow-y: auto; height: 200px;}
.select_rows {display:block;}
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