Search Results

Search found 668 results on 27 pages for 'addclass'.

Page 3/27 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Get the parent id..

    - by tixrus
    I have a bunch of elements like the following: <div class="droppableP" id="s-NSW" style="width:78px; height:63px; position: absolute; top: 223px; left: 532px;"> </div> They all have class droppableP but different id's obviously and I would like to factor the code in this script I am hacking on. The original script just has a specific selector for each of one of these divs, but the code is all alike except for the id it does things to, which is either the id of the parent or another div with a name that's related to it. Here is the original code specifically for this div: $("#s-NSW > .sensible").droppable( { accept : "#i-NSW", tolerance : 'intersect', activeClass : 'droppable-active', hoverClass : 'droppable-hover', drop : function() { $('#s-NSW').addClass('s-NSW'); $('#s-NSW').addClass('encastrada'); //can't move any more.. $('#i-NSW').remove(); $('#s-NSW').animate( { opacity: 0.25 },200, 'linear'); checkWin(); } }); Here is how I would like to factor so the same code can do all of them and I will eventually do chaining as well and maybe get rid of the inline styles but here is my first go: $(".droppableP > .sensible").droppable( { accept : "#i" + $(this).parent().attr('id').substring(2), tolerance : 'intersect', activeClass : 'droppable-active', hoverClass : 'droppable-hover', drop : function() { $(this).parent().addClass($(this).parent().attr('id')); $(this).parent().addClass('encastrada'); $("#i" + ($this).parent().attr('id').substring(2)).remove(); $(this).parent().animate( { opacity: 0.25 },200, 'linear'); checkWin(); } }); The error I get is $(this).parent().attr("id") is undefined Many thanks. I have browsed related questions the one I understand that's closest to mine, turns out they didn't need parent function at all. I'm kind of a noob so please don't yell at me too hard if this is a stupid question.

    Read the article

  • How can I change the text in a <span></span> element using jQuery?

    - by Eric Reynolds
    I have a span element as follows: <span id="download">Download</span>. This element is controlled by a few radio buttons. Basically, what I want to do is have 1 button to download the item selected by the radio buttons, but am looking to make it a little more "flashy" by changing the text inside the <span> to say more specifically what they are downloading. The span is the downloading button, and I have it animated so that the span calls slideUp(), then should change the text, then return by slideDown().Here is the code I am using that does not want to work. $("input[name=method]").change(function() { if($("input[name=method]").val() == 'installer') { $('#download').slideUp(500); $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"}); $('#download').text("Download"); $('#download').addClass("downloadRequest").addClass("styling").css({"cursor":"pointer"}); $('#download').slideDown(500); } else if($("input[name=method]").val() == 'url') { $('#download').slideUp(500); $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"}); $('#download').text("Download From Vendor Website"); $('#download').addClass("styling").addClass("downloadRequest").css({"cursor":"pointer"}); $('#download').slideDown(500); } }); I changed the code a bit to be more readable so I know that it doesn't have the short code that jQuery so eloquently allows. Everything in the code works, with the exception of the changing of the text inside the span. I'm sure its a simple solution that I am just overlooking. Any help is appreciated, Eric R.

    Read the article

  • jQuery Collapse (with cookies), default open instead of closed?

    - by Christian
    Hi. I've got a jQuery snippet which basically allows a user to toggle a div, open or closed - their preference is saved in a cookie. (function($) { $.fn.extend({ collapse: function(options) { var defaults = { inactive : "inactive", active : "active", head : ".trigger", group : ".wrap-me-up", speed : 300, cookie : "collapse" }; // Set a cookie counter so we dont get name collisions var op = $.extend(defaults, options); cookie_counter = 0; return this.each(function() { // Increment cookie name counter cookie_counter++; var obj = $(this), sections = obj.find(op.head).addClass(op.inactive), panel = obj.find(op.group).hide(), l = sections.length, cookie = op.cookie + "_" + cookie_counter; // Look for existing cookies for (c=0;c<=l;c++) { var cvalue = $.cookie(cookie + c); if ( cvalue == 'open' + c ) { panel.eq(c).show(); panel.eq(c).prev().removeClass(op.inactive).addClass(op.active); }; }; sections.click(function(e) { e.preventDefault(); var num = sections.index(this); var cookieName = cookie + num; var ul = $(this).next(op.group); // If item is open, slide up if($(this).hasClass(op.active)) { ul.slideUp(op.speed); $(this).removeClass(op.active).addClass(op.inactive); $.cookie(cookieName, null, { path: '/', expires: 10 }); return } // Else slide down ul.slideDown(op.speed); $(this).addClass(op.active).removeClass(op.inactive); var cookieValue = 'open' + num; $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); }); }); } }); })(jQuery); Demo: http://christianbullock.com/demo/ I'm just wondering how I can display the list open as default, and have the div collapse when the header is clicked? Many thanks. Christian.

    Read the article

  • jQuery tabs - multiple sets on on page

    - by Jonny Wood
    This is kind of a follow on from a previous question I posted but I've not been able to get it to work.. I'm trying to use multiple sets of tabs (jQuery) on one page. This is the code I had for one set of tabs which works great: $('div.tabs div.tab').hide(); $('div.tabs div:first').show(); $('div.tabs ul.htabs li:first a').addClass('current'); $('div.tabs ul.htabs li a').click(function(){ $('div.tabs ul.htabs li a').removeClass('current'); $(this).addClass('current'); var currentTab = $(this).attr('href'); $('div.tabs div.tab').hide(); $(currentTab).show(); return false; }); To use more than one set on the page I assigned #id's to each tab-set and tried to impliment this with: $.each(['#tabs-1', '#tabs-2', '#tabs-3' ], function(id) { $(id + 'div.tab').hide(); $(id + 'div:first').show(); $(id + 'ul.htabs li:first a').addClass('current'); $(id + 'ul.htabs li a').click(function(){ $(id + 'ul.htabs li a').removeClass('current'); $(this).addClass('current'); var currentTab = $(this).attr('href'); $(id + 'div.tab').hide(); $(currentTab).show(); return false; }); }); Obviously I'm doing something wrong here but as a jQuery newcomer I'm stumped!

    Read the article

  • Accomplishing This Style of Drop-Down Menus in jQuery

    - by Maxim Z.
    I was browsing the web and found this site. I noticed how the nav bar drop-down works, and I want to implement something similar on my website. Afer going into the source code of the page, I found that those drop-down areas are contained in divs with class fOut. It turns out that this is being done with MooTools. Here is the script itself (referenced in the original page after the Mootools script itself): window.addEvent('domready', function() { $("primaryNav").getChildren("li").addEvents({ "mouseenter": function(){ $(this).addClass("hover").getChildren("a").addClass("hover"); }, "mouseleave": function(){ $(this).removeClass("hover").getChildren("a").removeClass("hover"); } }); $$(".fOut").each(function(el,i){ var ifr = $(document.createElement("iframe")); ifr.className = "ieBgIframe"; ifr.frameBorder = "0"; ifr.src="about:blank"; ifr.injectInside(el); var p = el.getParent(); p.addClass("hover"); var h = el.getSize().size.y; p.removeClass("hover"); ifr.height=h; }); $$(".olderVersionsToggle").addEvents({ "click": function(e){ var event = new Event(e); event.stop(); var p = $(this).getParent().getNext(); if(p.hasClass("open")){ p.removeClass("open"); $(this).setText("Show previous versions..."); } else{ p.addClass("open"); $(this).setText("Hide previous versions..."); } return false; } }); }); My Question(s) I have two questions about this code. How does it work? I don't quite understand what it's doing, with the iframes and all. How can this be implemented in jQuery?

    Read the article

  • Contact Form + jQuery validationengine

    - by BigMad
    I created this contact form, inserting jQuery fadeLabel and validationEngine to beautify the form the file index.php / .html (I have not yet figured out which of the two versions put it) scripts are index: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="/js/backtop.js"></script> <script src="/js/fadeLabel.js"></script> <script> $(document).ready(function () { $('form .fadeLabel').fadeLabel(); }); </script> <script src="/js/validationEngine-it.js"></script> <script src="/js/validationEngine.js"></script> <script> $(document).ready(function(){ $("#form_box").validationEngine({ ajaxSubmit: true, ajaxSubmitFile: "contact.php", ajaxSubmitMessage: "Thank you, We will contact you soon !", success : false, failure : function() {} }) }); </script> <script src="/js/contactform.js"></script> however this is the part of the form's code <p id="form_success" class="success hide"><strong>Grazie!</strong> Il tuo messaggio è stato inviato con successo.</p> <form id="form_box"> <fieldset> <p><label for="name">Nome*</label><input type="text" id="name" name="name" class="validate[required] fadeLabel" value=""/></p> <p><label for="email">E-mail*</label><input type="email" id="email" name="email" class="validate[required,custom[email]] fadeLabel" value=""/></p> <p><label for="website">Sito web</label><input type="url" id="website" name="website" class="fadeLabel" value=""/></p> <p><label for="message">Messaggio*</label><textarea id="message" name="message" class="validate[required] fadeLabel" cols="30" rows="10" value=""></textarea></p> </fieldset> <p id="form_submit" class="submit"><button class="send">Invia</button> *Campi obbligatori</p> <p id="form_send" class="send hide">Invio in corso&hellip;</p> <p id="form_error" class="submit error hide"><button class="send">Invia</button> Si prega di correggere l'errore e re-inviarlo.</p> </form> This is the contact.php where it receives the data and sends 2 emails (one for me with the data and a thank you to those who contacted me) contact.php: <?php //include variables $my_email = "[email protected]"; $my_site = "adrianogenovese.com"; session_start(); $name = $_POST['name']; $email = $_POST['email']; $website = $_POST['website']; $message = $_POST['message']; $ip = $_SERVER['REMOTE_ADDR']; //beginning to email me $to = $my_email; $sbj = "Richiesta Informazioni - $my_site"; $msg = " <html> ... //the body of the email to me ... </html> "; $from = $email; $headers = 'MIME-Version: 1.0' . "\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n"; $headers .= "From: $from"; mail($to,$sbj,$msg,$headers); //email sent to me //beginning of the email recipient $toClient = $email; $msgClient = " <html> ... //the body of the email recipient ... </html> "; $fromClient = $my_email; $sbjClient = "Grazie $name per aver contattato $my_site "; $headersClient = 'MIME-Version: 1.0' . "\r\n"; $headersClient .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; $headersClient .= "From: $fromClient"; mail($toClient,$sbjClient,$msgClient,$headersClient); //mail inviata al cliente //order confirmation email //Reset error session_destroy(); exit; ?> this is the contact form jscript contactform.js: $(document).ready(function() { $(".send").click(function(){ $("#form_send").removeClass('hide'); $("#form_submit").addClass('hide'); $("#form_error").addClass('hide'); var name = $("#name").val(); var email = $("#email").val(); var website = $("#website").val(); var message = $("#message").val(); if (name == "" || email == "" ) { $("#form_send").addClass('hide'); $("#form_error").removeClass('hide'); } else { $.ajax({ type: "POST", url: "contatti/contact.php", data: "name=" + name + "&email=" + email + "&message=" + message + "&website=" + website, dataType: "html", success: function(msg) { $("#form_send").addClass('hide').delay(3000).fadeOut(3000); $("#form_success").removeClass('hide'); $("#form_box").addClass('hide').slideUp(2000).fadeOut(); }, error: function() { alert("An unexpected error occurred..."); } }); } }); //end form });//end Dom The jQuery seem to work very well, I wanted to make sure that the page is not of the form updated or go to another page (the only thing that works for now) compensation reflected in the following problems: I always leave the alert of contactform.js Does not send any mail, it to me to recipient I can not do the work properly. delay () .fadeOut / fadeIn and. SlideUp (). FadeOut () so that the sending of this email appears for 3 seconds "$ (" # form_send "). addClass ('hide')" before you do anything else then the form disappears up using some second type slideUp "$ (" # form_box "). addClass ('hide')" by displaying just the "$ (" # form_success "). removeClass ('hide')" in the address bar also appears the form data (e.g. ../index.php?name=test&email=example%40mail.com&website=&message=helloworld)

    Read the article

  • Help with Nicedit - removeFormat function

    - by Franck
    Hello, I'm trying to get around Nicedit, and especially the "removeFormat" function. The problem is I cannot find the "removeFormat" method source code in the code below. The JS syntax looks strange to me. Can someone help me ? /* NicEdit - Micro Inline WYSIWYG * Copyright 2007-2008 Brian Kirchoff * * NicEdit is distributed under the terms of the MIT license * For more information visit http://nicedit.com/ * Do not remove this copyright message */ var bkExtend = function(){ var A = arguments; if (A.length == 1) { A = [this, A[0]] } for (var B in A[1]) { A[0][B] = A[1][B] } return A[0] }; function bkClass(){ } bkClass.prototype.construct = function(){ }; bkClass.extend = function(C){ var A = function(){ if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments) } }; var B = new this(bkClass); bkExtend(B, C); A.prototype = B; A.extend = this.extend; return A }; var bkElement = bkClass.extend({ construct: function(B, A){ if (typeof(B) == "string") { B = (A || document).createElement(B) } B = $BK(B); return B }, appendTo: function(A){ A.appendChild(this); return this }, appendBefore: function(A){ A.parentNode.insertBefore(this, A); return this }, addEvent: function(B, A){ bkLib.addEvent(this, B, A); return this }, setContent: function(A){ this.innerHTML = A; return this }, pos: function(){ var C = curtop = 0; var B = obj = this; if (obj.offsetParent) { do { C += obj.offsetLeft; curtop += obj.offsetTop } while (obj = obj.offsetParent) } var A = (!window.opera) ? parseInt(this.getStyle("border-width") || this.style.border) || 0 : 0; return [C + A, curtop + A + this.offsetHeight] }, noSelect: function(){ bkLib.noSelect(this); return this }, parentTag: function(A){ var B = this; do { if (B && B.nodeName && B.nodeName.toUpperCase() == A) { return B } B = B.parentNode } while (B); return false }, hasClass: function(A){ return this.className.match(new RegExp("(\s|^)nicEdit-" + A + "(\s|$)")) }, addClass: function(A){ if (!this.hasClass(A)) { this.className += " nicEdit-" + A } return this }, removeClass: function(A){ if (this.hasClass(A)) { this.className = this.className.replace(new RegExp("(\s|^)nicEdit-" + A + "(\s|$)"), " ") } return this }, setStyle: function(A){ var B = this.style; for (var C in A) { switch (C) { case "float": B.cssFloat = B.styleFloat = A[C]; break; case "opacity": B.opacity = A[C]; B.filter = "alpha(opacity=" + Math.round(A[C] * 100) + ")"; break; case "className": this.className = A[C]; break; default: B[C] = A[C] } } return this }, getStyle: function(A, C){ var B = (!C) ? document.defaultView : C; if (this.nodeType == 1) { return (B && B.getComputedStyle) ? B.getComputedStyle(this, null).getPropertyValue(A) : this.currentStyle[bkLib.camelize(A)] } }, remove: function(){ this.parentNode.removeChild(this); return this }, setAttributes: function(A){ for (var B in A) { this[B] = A[B] } return this } }); var bkLib = { isMSIE: (navigator.appVersion.indexOf("MSIE") != -1), addEvent: function(C, B, A){ (C.addEventListener) ? C.addEventListener(B, A, false) : C.attachEvent("on" + B, A) }, toArray: function(C){ var B = C.length, A = new Array(B); while (B--) { A[B] = C[B] } return A }, noSelect: function(B){ if (B.setAttribute && B.nodeName.toLowerCase() != "input" && B.nodeName.toLowerCase() != "textarea") { B.setAttribute("unselectable", "on") } for (var A = 0; A < B.childNodes.length; A++) { bkLib.noSelect(B.childNodes[A]) } }, camelize: function(A){ return A.replace(/-(.)/g, function(B, C){ return C.toUpperCase() }) }, inArray: function(A, B){ return (bkLib.search(A, B) != null) }, search: function(A, C){ for (var B = 0; B < A.length; B++) { if (A[B] == C) { return B } } return null }, cancelEvent: function(A){ A = A || window.event; if (A.preventDefault && A.stopPropagation) { A.preventDefault(); A.stopPropagation() } return false }, domLoad: [], domLoaded: function(){ if (arguments.callee.done) { return } arguments.callee.done = true; for (i = 0; i < bkLib.domLoad.length; i++) { bkLib.domLoadi } }, onDomLoaded: function(A){ this.domLoad.push(A); if (document.addEventListener) { document.addEventListener("DOMContentLoaded", bkLib.domLoaded, null) } else { if (bkLib.isMSIE) { document.write(".nicEdit-main p { margin: 0; }<\/script"); $BK("__ie_onload").onreadystatechange = function(){ if (this.readyState == "complete") { bkLib.domLoaded() } } } } window.onload = bkLib.domLoaded } }; function $BK(A){ if (typeof(A) == "string") { A = document.getElementById(A) } return (A && !A.appendTo) ? bkExtend(A, bkElement.prototype) : A } var bkEvent = { addEvent: function(A, B){ if (B) { this.eventList = this.eventList || {}; this.eventList[A] = this.eventList[A] || []; this.eventList[A].push(B) } return this }, fireEvent: function(){ var A = bkLib.toArray(arguments), C = A.shift(); if (this.eventList && this.eventList[C]) { for (var B = 0; B < this.eventList[C].length; B++) { this.eventList[C][B].apply(this, A) } } } }; function __(A){ return A } Function.prototype.closure = function(){ var A = this, B = bkLib.toArray(arguments), C = B.shift(); return function(){ if (typeof(bkLib) != "undefined") { return A.apply(C, B.concat(bkLib.toArray(arguments))) } } }; Function.prototype.closureListener = function(){ var A = this, C = bkLib.toArray(arguments), B = C.shift(); return function(E){ E = E || window.event; if (E.target) { var D = E.target } else { var D = E.srcElement } return A.apply(B, [E, D].concat(C)) } }; var nicEditorConfig = bkClass.extend({ buttons: { 'bold': { name: _('Mettre en gras'), command: 'Bold', tags: ['B', 'STRONG'], css: { 'font-weight': 'bold' }, key: 'b' }, 'italic': { name: _('Mettre en italique'), command: 'Italic', tags: ['EM', 'I'], css: { 'font-style': 'italic' }, key: 'i' }, 'underline': { name: _('Souligner'), command: 'Underline', tags: ['U'], css: { 'text-decoration': 'underline' }, key: 'u' }, 'left': { name: _('Aligné à gauche'), command: 'justifyleft', noActive: true }, 'center': { name: _('Centré'), command: 'justifycenter', noActive: true }, 'right': { name: _('Aligné à droite'), command: 'justifyright', noActive: true }, 'justify': { name: _('Justifié'), command: 'justifyfull', noActive: true }, 'ol': { name: _('Liste non ordonnée'), command: 'insertorderedlist', tags: ['OL'] }, 'ul': { name: _('Liste non ordonnée'), command: 'insertunorderedlist', tags: ['UL'] }, 'subscript': { name: _('Placer en indice'), command: 'subscript', tags: ['SUB'] }, 'superscript': { name: _('Placer en exposant'), command: 'superscript', tags: ['SUP'] }, 'strikethrough': { name: _('Barrer le texte'), command: 'strikeThrough', css: { 'text-decoration': 'line-through' } }, 'removeformat': { name: _('Supprimer la mise en forme'), command: 'removeformat', noActive: true }, 'indent': { name: _('Indenter'), command: 'indent', noActive: true }, 'outdent': { name: _('Remove Indent'), command: 'outdent', noActive: true }, 'hr': { name: _('Ligne horizontale'), command: 'insertHorizontalRule', noActive: true } }, iconsPath: 'http://js.nicedit.com/nicEditIcons-latest.gif', buttonList: ['save', 'bold', 'italic', 'underline', 'left', 'center', 'right', 'justify', 'ol', 'ul', 'fontSize', 'fontFamily', 'fontFormat', 'indent', 'outdent', 'image', 'upload', 'link', 'unlink', 'forecolor', 'bgcolor'], iconList: { "xhtml": 1, "bgcolor": 2, "forecolor": 3, "bold": 4, "center": 5, "hr": 6, "indent": 7, "italic": 8, "justify": 9, "left": 10, "ol": 11, "outdent": 12, "removeformat": 13, "right": 14, "save": 25, "strikethrough": 16, "subscript": 17, "superscript": 18, "ul": 19, "underline": 20, "image": 21, "link": 22, "unlink": 23, "close": 24, "arrow": 26, "upload": 27, "question":2 } }); ; var nicEditors = { nicPlugins: [], editors: [], registerPlugin: function(B, A){ this.nicPlugins.push({ p: B, o: A }) }, allTextAreas: function(C){ var A = document.getElementsByTagName("textarea"); for (var B = 0; B < A.length; B++) { nicEditors.editors.push(new nicEditor(C).panelInstance(A[B])) } return nicEditors.editors }, findEditor: function(C){ var B = nicEditors.editors; for (var A = 0; A < B.length; A++) { if (B[A].instanceById(C)) { return B[A].instanceById(C) } } } }; var nicEditor = bkClass.extend({ construct: function(C){ this.options = new nicEditorConfig(); bkExtend(this.options, C); this.nicInstances = new Array(); this.loadedPlugins = new Array(); var A = nicEditors.nicPlugins; for (var B = 0; B < A.length; B++) { this.loadedPlugins.push(new A[B].p(this, A[B].o)) } nicEditors.editors.push(this); bkLib.addEvent(document.body, "mousedown", this.selectCheck.closureListener(this)) }, panelInstance: function(B, C){ B = this.checkReplace($BK(B)); var A = new bkElement("DIV").setStyle({ width: (parseInt(B.getStyle("width")) || B.clientWidth) + "px" }).appendBefore(B); this.setPanel(A); return this.addInstance(B, C) }, checkReplace: function(B){ var A = nicEditors.findEditor(B); if (A) { A.removeInstance(B); A.removePanel() } return B }, addInstance: function(B, C){ B = this.checkReplace($BK(B)); if (B.contentEditable || !!window.opera) { var A = new nicEditorInstance(B, C, this) } else { var A = new nicEditorIFrameInstance(B, C, this) } this.nicInstances.push(A); return this }, removeInstance: function(C){ C = $BK(C); var B = this.nicInstances; for (var A = 0; A < B.length; A++) { if (B[A].e == C) { B[A].remove(); this.nicInstances.splice(A, 1) } } }, removePanel: function(A){ if (this.nicPanel) { this.nicPanel.remove(); this.nicPanel = null } }, instanceById: function(C){ C = $BK(C); var B = this.nicInstances; for (var A = 0; A < B.length; A++) { if (B[A].e == C) { return B[A] } } }, setPanel: function(A){ this.nicPanel = new nicEditorPanel($BK(A), this.options, this); this.fireEvent("panel", this.nicPanel); return this }, nicCommand: function(B, A){ if (this.selectedInstance) { this.selectedInstance.nicCommand(B, A) } }, getIcon: function(D, A){ var C = this.options.iconList[D]; var B = (A.iconFiles) ? A.iconFiles[D] : ""; return { backgroundImage: "url('" + ((C) ? this.options.iconsPath : B) + "')", backgroundPosition: ((C) ? ((C - 1) * -18) : 0) + "px 0px" } }, selectCheck: function(C, A){ var B = false; do { if (A.className && A.className.indexOf("nicEdit") != -1) { return false } } while (A = A.parentNode); this.fireEvent("blur", this.selectedInstance, A); this.lastSelectedInstance = this.selectedInstance; this.selectedInstance = null; return false } }); nicEditor = nicEditor.extend(bkEvent); var nicEditorInstance = bkClass.extend({ isSelected: false, construct: function(G, D, C){ this.ne = C; this.elm = this.e = G; this.options = D || {}; newX = parseInt(G.getStyle("width")) || G.clientWidth; newY = parseInt(G.getStyle("height")) || G.clientHeight; this.initialHeight = newY - 8; var H = (G.nodeName.toLowerCase() == "textarea"); if (H || this.options.hasPanel) { var B = (bkLib.isMSIE && !((typeof document.body.style.maxHeight != "undefined") && document.compatMode == "CSS1Compat")); var E = { width: newX + "px", border: "1px solid #ccc", borderTop: 0, overflowY: "auto", overflowX: "hidden" }; E[(B) ? "height" : "maxHeight"] = (this.ne.options.maxHeight) ? this.ne.options.maxHeight + "px" : null; this.editorContain = new bkElement("DIV").setStyle(E).appendBefore(G); var A = new bkElement("DIV").setStyle({ width: (newX - 8) + "px", margin: "4px", minHeight: newY + "px" }).addClass("main").appendTo(this.editorContain); G.setStyle({ display: "none" }); A.innerHTML = G.innerHTML; if (H) { A.setContent(G.value); this.copyElm = G; var F = G.parentTag("FORM"); if (F) { bkLib.addEvent(F, "submit", this.saveContent.closure(this)) } } A.setStyle((B) ? { height: newY + "px" } : { overflow: "hidden" }); this.elm = A } this.ne.addEvent("blur", this.blur.closure(this)); this.init(); this.blur() }, init: function(){ this.elm.setAttribute("contentEditable", "true"); if (this.getContent() == "") { this.setContent("") } this.instanceDoc = document.defaultView; this.elm.addEvent("mousedown", this.selected.closureListener(this)).addEvent("keypress", this.keyDown.closureListener(this)).addEvent("focus", this.selected.closure(this)).addEvent("blur", this.blur.closure(this)).addEvent("keyup", this.selected.closure(this)); this.elm.addEvent("resizestart",function(){return false}); this.elm.addEvent("dragstart",function(){return false}); this.ne.fireEvent("add", this); }, remove: function(){ this.saveContent(); if (this.copyElm || this.options.hasPanel) { this.editorContain.remove(); this.e.setStyle({ display: "block" }); this.ne.removePanel() } this.disable(); this.ne.fireEvent("remove", this) }, disable: function(){ this.elm.setAttribute("contentEditable", "false") }, getSel: function(){ return (window.getSelection) ? window.getSelection() : document.selection }, getRng: function(){ var A = this.getSel(); if (!A) { return null } return (A.rangeCount 0) ? A.getRangeAt(0) : A.createRange() }, selRng: function(A, B){ if (window.getSelection) { B.removeAllRanges(); B.addRange(A) } else { A.select() } }, selElm: function(){ var C = this.getRng(); if (C.startContainer) { var D = C.startContainer; if (C.cloneContents().childNodes.length == 1) { for (var B = 0; B < D.childNodes.length; B++) { var A = D.childNodes[B].ownerDocument.createRange(); A.selectNode(D.childNodes[B]); if (C.compareBoundaryPoints(Range.START_TO_START, A) != 1 && C.compareBoundaryPoints(Range.END_TO_END, A) != -1) { return $BK(D.childNodes[B]) } } } return $BK(D) } else { return $BK((this.getSel().type == "Control") ? C.item(0) : C.parentElement()) } }, saveRng: function(){ this.savedRange = this.getRng(); this.savedSel = this.getSel() }, restoreRng: function(){ if (this.savedRange) { this.selRng(this.savedRange, this.savedSel) } }, keyDown: function(B, A){ if (B.ctrlKey) { this.ne.fireEvent("key", this, B) } }, selected: function(C, A){ if (!A) { A = this.selElm() } if (!C.ctrlKey) { var B = this.ne.selectedInstance; if (B != this) { if (B) { this.ne.fireEvent("blur", B, A) } this.ne.selectedInstance = this; this.ne.fireEvent("focus", B, A) } this.ne.fireEvent("selected", B, A); this.isFocused = true; this.elm.addClass("selected") } return false }, blur: function(){ this.isFocused = false; this.elm.removeClass("selected") }, saveContent: function(){ if (this.copyElm || this.options.hasPanel) { this.ne.fireEvent("save", this); (this.copyElm) ? this.copyElm.value = this.getContent() : this.e.innerHTML = this.getContent() } }, getElm: function(){ return this.elm }, getContent: function(){ this.content = this.getElm().innerHTML; this.ne.fireEvent("get", this); return this.content }, setContent: function(A){ this.content = A; this.ne.fireEvent("set", this); this.elm.innerHTML = this.content }, nicCommand: function(B, A){ document.execCommand(B, false, A) } }); var nicEditorIFrameInstance = nicEditorInstance.extend({ savedStyles: [], init: function(){ var B = this.elm.innerHTML.replace(/^\s+|\s+$/g, ""); this.elm.innerHTML = ""; (!B) ? B = "" : B; this.initialContent = B; this.elmFrame = new bkElement("iframe").setAttributes({ src: "javascript:;", frameBorder: 0, allowTransparency: "true", scrolling: "no" }).setStyle({ height: "100px", width: "100%" }).addClass("frame").appendTo(this.elm); if (this.copyElm) { this.elmFrame.setStyle({ width: (this.elm.offsetWidth - 4) + "px" }) } var A = ["font-size", "font-family", "font-weight", "color"]; for (itm in A) { this.savedStyles[bkLib.camelize(itm)] = this.elm.getStyle(itm) } setTimeout(this.initFrame.closure(this), 50) }, disable: function(){ this.elm.innerHTML = this.getContent() }, initFrame: function(){ var B = $BK(this.elmFrame.contentWindow.document); B.designMode = "on"; B.open(); var A = this.ne.options.externalCSS; B.write("" + ((A) ? '' : "") + '' + this.initialContent + ""); B.close(); this.frameDoc = B; this.frameWin = $BK(this.elmFrame.contentWindow); this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles); this.instanceDoc = this.frameWin.document.defaultView; this.heightUpdate(); this.frameDoc.addEvent("mousedown", this.selected.closureListener(this)).addEvent("keyup", this.heightUpdate.closureListener(this)).addEvent("keydown", this.keyDown.closureListener(this)).addEvent("keyup", this.selected.closure(this)); this.ne.fireEvent("add", this) }, getElm: function(){ return this.frameContent }, setContent: function(A){ this.content = A; this.ne.fireEvent("set", this); this.frameContent.innerHTML = this.content; this.heightUpdate() }, getSel: function(){ return (this.frameWin) ? this.frameWin.getSelection() : this.frameDoc.selection }, heightUpdate: function(){ this.elmFrame.style.height = Math.max(this.frameContent.offsetHeight, this.initialHeight) + "px" }, nicCommand: function(B, A){ this.frameDoc.execCommand(B, false, A); setTimeout(this.heightUpdate.closure(this), 100) } }); var nicEditorPanel = bkClass.extend({ construct: function(E, B, A){ this.elm = E; this.options = B; this.ne = A; this.panelButtons = new Array(); this.buttonList = bkExtend([], this.ne.options.buttonList); this.panelContain = new bkElement("DIV").setStyle({ overflow: "hidden", width: "100%", border: "1px solid #cccccc", backgroundColor: "#efefef" }).addClass("panelContain"); this.panelElm = new bkElement("DIV").setStyle({ margin: "2px", marginTop: "0px", zoom: 1, overflow: "hidden" }).addClass("panel").appendTo(this.panelContain); this.panelContain.appendTo(E); var C = this.ne.options; var D = C.buttons; for (button in D) { this.addButton(button, C, true) } this.reorder(); E.noSelect() }, addButton: function(buttonName, options, noOrder){ var button = options.buttons[buttonName]; var type = (button.type) ? eval("(typeof(" + button.type + ') == "undefined") ? null : ' + button.type + ";") : nicEditorButton; var hasButton = bkLib.inArray(this.buttonList, buttonName); if (type && (hasButton || this.ne.options.fullPanel)) { this.panelButtons.push(new type(this.panelElm, buttonName, options, this.ne)); if (!hasButton) { this.buttonList.push(buttonName) } } }, findButton: function(B){ for (var A = 0; A < this.panelButtons.length; A++) { if (this.panelButtons[A].name == B) { return this.panelButtons[A] } } }, reorder: function(){ var C = this.buttonList; for (var B = 0; B < C.length; B++) { var A = this.findButton(C[B]); if (A) { this.panelElm.appendChild(A.margin) } } }, remove: function(){ this.elm.remove() } }); var nicEditorButton = bkClass.extend({ construct: function(D, A, C, B){ this.options = C.buttons[A]; this.name = A; this.ne = B; this.elm = D; this.margin = new bkElement("DIV").setStyle({ "float": "left", marginTop: "2px" }).appendTo(D); this.contain = new bkElement("DIV").setStyle({ width: "20px", height: "20px" }).addClass("buttonContain").appendTo(this.margin); this.border = new bkElement("DIV").setStyle({ backgroundColor: "#efefef", border: "1px solid #efefef" }).appendTo(this.contain); this.button = new bkElement("DIV").setStyle({ width: "18px", height: "18px", overflow: "hidden", zoom: 1, cursor: "pointer" }).addClass("button").setStyle(this.ne.getIcon(A, C)).appendTo(this.border); this.button.addEvent("mouseover", this.hoverOn.closure(this)).addEvent("mouseout", this.hoverOff.closure(this)).addEvent("mousedown", this.mouseClick.closure(this)).noSelect(); if (!window.opera) { this.button.onmousedown = this.button.onclick = bkLib.cancelEvent } B.addEvent("selected", this.enable.closure(this)).addEvent("blur", this.disable.closure(this)).addEvent("key", this.key.closure(this)); this.disable(); this.init() }, init: function(){ }, hide: function(){ this.contain.setStyle({ display: "none" }) }, updateState: function(){ if (this.isDisabled) { this.setBg() } else { if (this.isHover) { this.setBg("hover") } else { if (this.isActive) { this.setBg("active") } else { this.setBg() } } } }, setBg: function(A){ switch (A) { case "hover": var B = { border: "1px solid #666", backgroundColor: "#ddd" }; break; case "active": var B = { border: "1px solid #666", backgroundColor: "#ccc" }; break; default: var B = { border: "1px solid #efefef", backgroundColor: "#efefef" } } this.border.setStyle(B).addClass("button-" + A) }, checkNodes: function(A){ var B = A; do { if (this.options.tags && bkLib.inArray(this.options.tags, B.nodeName)) { this.activate(); return true } } while (B = B.parentNode && B.className != "nicEdit"); B = $BK(A); while (B.nodeType == 3) { B = $BK(B.parentNode) } if (this.options.css) { for (itm in this.options.css) { if (B.getStyle(itm, this.ne.selectedInstance.instanceDoc) == this.options.css[itm]) { this.activate(); return true } } } this.deactivate(); return false }, activate: function(){ if (!this.isDisabled) { this.isActive = true; this.updateState(); this.ne.fireEvent("buttonActivate", this) } }, deactivate: function(){ this.isActive = false; this.updateState(); if (!this.isDisabled) { th

    Read the article

  • Custom styled select box

    - by Ivan
    Hi to all 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'); }); }); });

    Read the article

  • Jquery Randomizing within Categories

    - by David Chase
    Hi, so here is my question in a situation if you will. i have 6 items in div classes which correspond to 3 categories something like this class ="boat" class ="car" class ="bike" class ="blueboat" class ="redcar" class ="greenbike" so is there a jquery/javascript approach with .addClass where when someone clicks on the button "Randomize" it addClass .mine to each one of the 3 categories ie blueboat.mine and redcar.mine and bike.mine but not boat or car or greenbike because they are in the same category? or another situation rather than .addClass use a jquery/javascript so when "Randomize" is clicked to randomly show 3 out of 6 items one in each category of boat,car,bike and hide the rest blueboat,redcar,greenbike. in this situation all 6 items are on the page when document is ready but with the randomize only 3 are left one from each category. please let me know if anyone has any ideas or needs further clarification any help is greatly appreciated. thank you -david

    Read the article

  • Search multiple datepicker on same grid

    - by DHF
    I'm using multiple datepicker on same grid and I face the problem to get a proper result. I used 3 datepicker in 1 grid. Only the first datepicker (Order Date)is able to output proper result while the other 2 datepicker (Start Date & End Date) are not able to generate proper result. There is no problem with the query, so could you find out what's going on here? Thanks in advance! php wrapper <?php ob_start(); require_once 'config.php'; // include the jqGrid Class require_once "php/jqGrid.php"; // include the PDO driver class require_once "php/jqGridPdo.php"; // include the datepicker require_once "php/jqCalendar.php"; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); // Create the jqGrid instance $grid = new jqGridRender($conn); // Write the SQL Query $grid->SelectCommand = "SELECT c.CompanyID, c.CompanyCode, c.CompanyName, c.Area, o.OrderCode, o.Date, m.maID ,m.System, m.Status, m.StartDate, m.EndDate, m.Type FROM company c, orders o, maintenance_agreement m WHERE c.CompanyID = o.CompanyID AND o.OrderID = m.OrderID "; // Set the table to where you update the data $grid->table = 'maintenance_agreement'; // set the ouput format to json $grid->dataType = 'json'; // Let the grid create the model $grid->setPrimaryKeyId('maID'); // Let the grid create the model $grid->setColModel(); // Set the url from where we obtain the data $grid->setUrl('grouping_ma_details.php'); // Set grid caption using the option caption $grid->setGridOptions(array( "sortable"=>true, "rownumbers"=>true, "caption"=>"Group by Maintenance Agreement", "rowNum"=>20, "height"=>'auto', "width"=>1300, "sortname"=>"maID", "hoverrows"=>true, "rowList"=>array(10,20,50), "footerrow"=>false, "userDataOnFooter"=>false, "grouping"=>true, "groupingView"=>array( "groupField" => array('CompanyName'), "groupColumnShow" => array(true), //show or hide area column "groupText" =>array('<b> Company Name: {0}</b>',), "groupDataSorted" => true, "groupSummary" => array(true) ) )); if(isset($_SESSION['login_admin'])) { $grid->addCol(array( "name"=>"Action", "formatter"=>"actions", "editable"=>false, "sortable"=>false, "resizable"=>false, "fixed"=>true, "width"=>60, "formatoptions"=>array("keys"=>true), "search"=>false ), "first"); } // Change some property of the field(s) $grid->setColProperty("CompanyID", array("label"=>"ID","hidden"=>true,"width"=>30,"editable"=>false,"editoptions"=>array("readonly"=>"readonly"))); $grid->setColProperty("CompanyName", array("label"=>"Company Name","hidden"=>true,"editable"=>false,"width"=>150,"align"=>"center","fixed"=>true)); $grid->setColProperty("CompanyCode", array("label"=>"Company Code","hidden"=>true,"width"=>50,"align"=>"center")); $grid->setColProperty("OrderCode", array("label"=>"Order Code","width"=>110,"editable"=>false,"align"=>"center","fixed"=>true)); $grid->setColProperty("maID", array("hidden"=>true)); $grid->setColProperty("System", array("width"=>150,"fixed"=>true,"align"=>"center")); $grid->setColProperty("Type", array("width"=>280,"fixed"=>true)); $grid->setColProperty("Status", array("width"=>70,"align"=>"center","edittype"=>"select","editoptions"=>array("value"=>"Yes:Yes;No:No"),"fixed"=>true)); $grid->setSelect('System', "SELECT DISTINCT System, System AS System FROM master_ma_system ORDER BY System", false, true, true, array(""=>"All")); $grid->setSelect('Type', "SELECT DISTINCT Type, Type AS Type FROM master_ma_type ORDER BY Type", false, true, true, array(""=>"All")); $grid->setColProperty("StartDate", array("label"=>"Start Date","width"=>120,"align"=>"center","fixed"=>true, "formatter"=>"date", "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y") )); // this is only in this case since the orderdate is set as date time $grid->setUserTime("d M Y"); $grid->setUserDate("d M Y"); $grid->setDatepicker("StartDate",array("buttonOnly"=>false)); $grid->datearray = array('StartDate'); $grid->setColProperty("EndDate", array("label"=>"End Date","width"=>120,"align"=>"center","fixed"=>true, "formatter"=>"date", "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y") )); // this is only in this case since the orderdate is set as date time $grid->setUserTime("d M Y"); $grid->setUserDate("d M Y"); $grid->setDatepicker("EndDate",array("buttonOnly"=>false)); $grid->datearray = array('EndDate'); $grid->setColProperty("Date", array("label"=>"Order Date","width"=>100,"editable"=>false,"align"=>"center","fixed"=>true, "formatter"=>"date", "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y") )); // this is only in this case since the orderdate is set as date time $grid->setUserTime("d M Y"); $grid->setUserDate("d M Y"); $grid->setDatepicker("Date",array("buttonOnly"=>false)); $grid->datearray = array('Date'); // This command is executed after edit $maID = jqGridUtils::GetParam('maID'); $Status = jqGridUtils::GetParam('Status'); $StartDate = jqGridUtils::GetParam('StartDate'); $EndDate = jqGridUtils::GetParam('EndDate'); $Type = jqGridUtils::GetParam('Type'); // This command is executed immediatley after edit occur. $grid->setAfterCrudAction('edit', "UPDATE maintenance_agreement SET m.Status=?, m.StartDate=?, m.EndDate=?, m.Type=? WHERE m.maID=?", array($Status,$StartDate,$EndDate,$Type,$maID)); $selectorder = <<<ORDER function(rowid, selected) { if(rowid != null) { jQuery("#detail").jqGrid('setGridParam',{postData:{CompanyID:rowid}}); jQuery("#detail").trigger("reloadGrid"); // Enable CRUD buttons in navigator when a row is selected jQuery("#add_detail").removeClass("ui-state-disabled"); jQuery("#edit_detail").removeClass("ui-state-disabled"); jQuery("#del_detail").removeClass("ui-state-disabled"); } } ORDER; // We should clear the grid data on second grid on sorting, paging, etc. $cleargrid = <<<CLEAR function(rowid, selected) { // clear the grid data and footer data jQuery("#detail").jqGrid('clearGridData',true); // Disable CRUD buttons in navigator when a row is not selected jQuery("#add_detail").addClass("ui-state-disabled"); jQuery("#edit_detail").addClass("ui-state-disabled"); jQuery("#del_detail").addClass("ui-state-disabled"); } CLEAR; $grid->setGridEvent('onSelectRow', $selectorder); $grid->setGridEvent('onSortCol', $cleargrid); $grid->setGridEvent('onPaging', $cleargrid); $grid->setColProperty("Area", array("width"=>100,"hidden"=>false,"editable"=>false,"fixed"=>true)); $grid->setColProperty("HeadCount", array("label"=>"Head Count","align"=>"center", "width"=>100,"hidden"=>false,"fixed"=>true)); $grid->setSelect('Area', "SELECT DISTINCT AreaName, AreaName AS Area FROM master_area ORDER BY AreaName", false, true, true, array(""=>"All")); $grid->setSelect('CompanyName', "SELECT DISTINCT CompanyName, CompanyName AS CompanyName FROM company ORDER BY CompanyName", false, true, true, array(""=>"All")); $custom = <<<CUSTOM jQuery("#getselected").click(function(){ var selr = jQuery('#grid').jqGrid('getGridParam','selrow'); if(selr) { window.open('http://www.smartouch-cdms.com/order.php?CompanyID='+selr); } else alert("No selected row"); return false; }); CUSTOM; $grid->setJSCode($custom); // Enable toolbar searching $grid->toolbarfilter = true; $grid->setFilterOptions(array("stringResult"=>true,"searchOnEnter"=>false,"defaultSearch"=>"cn")); // Enable navigator $grid->navigator = true; // disable the delete operation programatically for that table $grid->del = false; // we need to write some custom code when we are in delete mode. // get the grid operation parameter to see if we are in delete mode // jqGrid sends the "oper" parameter to identify the needed action $deloper = $_POST['oper']; // det the company id $cid = $_POST['CompanyID']; // if the operation is del and the companyid is set if($deloper == 'del' && isset($cid) ) { // the two tables are linked via CompanyID, so let try to delete the records in both tables try { jqGridDB::beginTransaction($conn); $comp = jqGridDB::prepare($conn, "DELETE FROM company WHERE CompanyID= ?", array($cid)); $cont = jqGridDB::prepare($conn,"DELETE FROM contact WHERE CompanyID = ?", array($cid)); jqGridDB::execute($comp); jqGridDB::execute($cont); jqGridDB::commit($conn); } catch(Exception $e) { jqGridDB::rollBack($conn); echo $e->getMessage(); } } // Enable only deleting if(isset($_SESSION['login_admin'])) { $grid->setNavOptions('navigator', array("pdf"=>true, "excel"=>true,"add"=>false,"edit"=>true,"del"=>false,"view"=>true, "search"=>true)); } else $grid->setNavOptions('navigator', array("pdf"=>true, "excel"=>true,"add"=>false,"edit"=>false,"del"=>false,"view"=>true, "search"=>true)); // In order to enable the more complex search we should set multipleGroup option // Also we need show query roo $grid->setNavOptions('search', array( "multipleGroup"=>false, "showQuery"=>true )); // Set different filename $grid->exportfile = 'Company.xls'; // Close the dialog after editing $grid->setNavOptions('edit',array("closeAfterEdit"=>true,"editCaption"=>"Update Company","bSubmit"=>"Update","dataheight"=>"auto")); $grid->setNavOptions('add',array("closeAfterAdd"=>true,"addCaption"=>"Add New Company","bSubmit"=>"Update","dataheight"=>"auto")); $grid->setNavOptions('view',array("Caption"=>"View Company","dataheight"=>"auto","width"=>"1100")); ob_end_clean(); //solve TCPDF error // Enjoy $grid->renderGrid('#grid','#pager',true, null, null, true,true); $conn = null; ?> javascript code jQuery(document).ready(function ($) { jQuery('#grid').jqGrid({ "width": 1300, "hoverrows": true, "viewrecords": true, "jsonReader": { "repeatitems": false, "subgrid": { "repeatitems": false } }, "xmlReader": { "repeatitems": false, "subgrid": { "repeatitems": false } }, "gridview": true, "url": "session_ma_details.php", "editurl": "session_ma_details.php", "cellurl": "session_ma_details.php", "sortable": true, "rownumbers": true, "caption": "Group by Maintenance Agreement", "rowNum": 20, "height": "auto", "sortname": "maID", "rowList": [10, 20, 50], "footerrow": false, "userDataOnFooter": false, "grouping": true, "groupingView": { "groupField": ["CompanyName"], "groupColumnShow": [false], "groupText": ["<b> Company Name: {0}</b>"], "groupDataSorted": true, "groupSummary": [true] }, "onSelectRow": function (rowid, selected) { if (rowid != null) { jQuery("#detail").jqGrid('setGridParam', { postData: { CompanyID: rowid } }); jQuery("#detail").trigger("reloadGrid"); // Enable CRUD buttons in navigator when a row is selected jQuery("#add_detail").removeClass("ui-state-disabled"); jQuery("#edit_detail").removeClass("ui-state-disabled"); jQuery("#del_detail").removeClass("ui-state-disabled"); } }, "onSortCol": function (rowid, selected) { // clear the grid data and footer data jQuery("#detail").jqGrid('clearGridData', true); // Disable CRUD buttons in navigator when a row is not selected jQuery("#add_detail").addClass("ui-state-disabled"); jQuery("#edit_detail").addClass("ui-state-disabled"); jQuery("#del_detail").addClass("ui-state-disabled"); }, "onPaging": function (rowid, selected) { // clear the grid data and footer data jQuery("#detail").jqGrid('clearGridData', true); // Disable CRUD buttons in navigator when a row is not selected jQuery("#add_detail").addClass("ui-state-disabled"); jQuery("#edit_detail").addClass("ui-state-disabled"); jQuery("#del_detail").addClass("ui-state-disabled"); }, "datatype": "json", "colModel": [ { "name": "Action", "formatter": "actions", "editable": false, "sortable": false, "resizable": false, "fixed": true, "width": 60, "formatoptions": { "keys": true }, "search": false }, { "name": "CompanyID", "index": "CompanyID", "sorttype": "int", "label": "ID", "hidden": true, "width": 30, "editable": false, "editoptions": { "readonly": "readonly" } }, { "name": "CompanyCode", "index": "CompanyCode", "sorttype": "string", "label": "Company Code", "hidden": true, "width": 50, "align": "center", "editable": true }, { "name": "CompanyName", "index": "CompanyName", "sorttype": "string", "label": "Company Name", "hidden": true, "editable": false, "width": 150, "align": "center", "fixed": true, "edittype": "select", "editoptions": { "value": "Aquatex Industries:Aquatex Industries;Benithem Sdn Bhd:Benithem Sdn Bhd;Daily Bakery Sdn Bhd:Daily Bakery Sdn Bhd;Eurocor Asia Sdn Bhd:Eurocor Asia Sdn Bhd;Evergrown Technology:Evergrown Technology;Goldpar Precision:Goldpar Precision;MicroSun Technologies Asia:MicroSun Technologies Asia;NCI Industries Sdn Bhd:NCI Industries Sdn Bhd;PHHP Marketing:PHHP Marketing;Smart Touch Technology:Smart Touch Technology;THOSCO Treatech:THOSCO Treatech;YHL Trading (Johor) Sdn Bhd:YHL Trading (Johor) Sdn Bhd;Zenxin Agri-Organic Food:Zenxin Agri-Organic Food", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Aquatex Industries:Aquatex Industries;Benithem Sdn Bhd:Benithem Sdn Bhd;Daily Bakery Sdn Bhd:Daily Bakery Sdn Bhd;Eurocor Asia Sdn Bhd:Eurocor Asia Sdn Bhd;Evergrown Technology:Evergrown Technology;Goldpar Precision:Goldpar Precision;MicroSun Technologies Asia:MicroSun Technologies Asia;NCI Industries Sdn Bhd:NCI Industries Sdn Bhd;PHHP Marketing:PHHP Marketing;Smart Touch Technology:Smart Touch Technology;THOSCO Treatech:THOSCO Treatech;YHL Trading (Johor) Sdn Bhd:YHL Trading (Johor) Sdn Bhd;Zenxin Agri-Organic Food:Zenxin Agri-Organic Food", "separator": ":", "delimiter": ";" } }, { "name": "Area", "index": "Area", "sorttype": "string", "width": 100, "hidden": true, "editable": false, "fixed": true, "edittype": "select", "editoptions": { "value": "Cemerlang:Cemerlang;Danga Bay:Danga Bay;Kulai:Kulai;Larkin:Larkin;Masai:Masai;Nusa Cemerlang:Nusa Cemerlang;Nusajaya:Nusajaya;Pasir Gudang:Pasir Gudang;Pekan Nenas:Pekan Nenas;Permas Jaya:Permas Jaya;Pontian:Pontian;Pulai:Pulai;Senai:Senai;Skudai:Skudai;Taman Gaya:Taman Gaya;Taman Johor Jaya:Taman Johor Jaya;Taman Molek:Taman Molek;Taman Pelangi:Taman Pelangi;Taman Sentosa:Taman Sentosa;Tebrau 4:Tebrau 4;Ulu Tiram:Ulu Tiram", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Cemerlang:Cemerlang;Danga Bay:Danga Bay;Kulai:Kulai;Larkin:Larkin;Masai:Masai;Nusa Cemerlang:Nusa Cemerlang;Nusajaya:Nusajaya;Pasir Gudang:Pasir Gudang;Pekan Nenas:Pekan Nenas;Permas Jaya:Permas Jaya;Pontian:Pontian;Pulai:Pulai;Senai:Senai;Skudai:Skudai;Taman Gaya:Taman Gaya;Taman Johor Jaya:Taman Johor Jaya;Taman Molek:Taman Molek;Taman Pelangi:Taman Pelangi;Taman Sentosa:Taman Sentosa;Tebrau 4:Tebrau 4;Ulu Tiram:Ulu Tiram", "separator": ":", "delimiter": ";" } }, { "name": "OrderCode", "index": "OrderCode", "sorttype": "string", "label": "Order No.", "width": 110, "editable": false, "align": "center", "fixed": true }, { "name": "Date", "index": "Date", "sorttype": "date", "label": "Order Date", "width": 100, "editable": false, "align": "center", "fixed": true, "formatter": "date", "formatoptions": { "srcformat": "Y-m-d H:i:s", "newformat": "d M Y" }, "editoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "searchoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } } }, { "name": "maID", "index": "maID", "sorttype": "int", "key": true, "hidden": true, "editable": true }, { "name": "System", "index": "System", "sorttype": "string", "width": 150, "fixed": true, "align": "center", "edittype": "select", "editoptions": { "value": "Payroll:Payroll;TMS:TMS;TMS & Payroll:TMS & Payroll", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Payroll:Payroll;TMS:TMS;TMS & Payroll:TMS & Payroll", "separator": ":", "delimiter": ";" }, "editable": true }, { "name": "Status", "index": "Status", "sorttype": "string", "width": 70, "align": "center", "edittype": "select", "editoptions": { "value": "Yes:Yes;No:No" }, "fixed": true, "editable": true }, { "name": "StartDate", "index": "StartDate", "sorttype": "date", "label": "Start Date", "width": 120, "align": "center", "fixed": true, "formatter": "date", "formatoptions": { "srcformat": "Y-m-d H:i:s", "newformat": "d M Y" }, "editoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "searchoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "editable": true }, { "name": "EndDate", "index": "EndDate", "sorttype": "date", "label": "End Date", "width": 120, "align": "center", "fixed": true, "formatter": "date", "formatoptions": { "srcformat": "Y-m-d H:i:s", "newformat": "d M Y" }, "editoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "searchoptions": { "dataInit": function(el) { setTimeout(function() { if (jQuery.ui) { if (jQuery.ui.datepicker) { jQuery(el).datepicker({ "disabled": false, "dateFormat": "dd M yy" }); jQuery('.ui-datepicker').css({ 'font-size': '75%' }); } } }, 100); } }, "editable": true }, { "name": "Type", "index": "Type", "sorttype": "string", "width": 530, "fixed": true, "edittype": "select", "editoptions": { "value": "Comprehensive MA:Comprehensive MA;FOC service, 20% spare part discount:FOC service, 20% spare part discount;Standard Package, FOC 1 time service, 20% spare part discount:Standard Package, FOC 1 time service, 20% spare part discount;Standard Package, FOC 2 time service, 20% spare part discount:Standard Package, FOC 2 time service, 20% spare part discount;Standard Package, FOC 3 time service, 20% spare part discount:Standard Package, FOC 3 time service, 20% spare part discount;Standard Package, FOC 4 time service, 20% spare part discount:Standard Package, FOC 4 time service, 20% spare part discount;Standard Package, FOC 6 time service, 20% spare part discount:Standard Package, FOC 6 time service, 20% spare part discount;Standard Package, no free:Standard Package, no free", "separator": ":", "delimiter": ";" }, "stype": "select", "searchoptions": { "value": ":All;Comprehensive MA:Comprehensive MA;FOC service, 20% spare part discount:FOC service, 20% spare part discount;Standard Package, FOC 1 time service, 20% spare part discount:Standard Package, FOC 1 time service, 20% spare part discount;Standard Package, FOC 2 time service, 20% spare part discount:Standard Package, FOC 2 time service, 20% spare part discount;Standard Package, FOC 3 time service, 20% spare part discount:Standard Package, FOC 3 time service, 20% spare part discount;Standard Package, FOC 4 time service, 20% spare part discount:Standard Package, FOC 4 time service, 20% spare part discount;Standard Package, FOC 6 time service, 20% spare part discount:Standard Package, FOC 6 time service, 20% spare part discount;Standard Package, no free:Standard Package, no free", "separator": ":", "delimiter": ";" }, "editable": true } ], "postData": { "oper": "grid" }, "prmNames": { "page": "page", "rows": "rows", "sort": "sidx", "order": "sord", "search": "_search", "nd": "nd", "id": "maID", "filter": "filters", "searchField": "searchField", "searchOper": "searchOper", "searchString": "searchString", "oper": "oper", "query": "grid", "addoper": "add", "editoper": "edit", "deloper": "del", "excel": "excel", "subgrid": "subgrid", "totalrows": "totalrows", "autocomplete": "autocmpl" }, "loadError": function(xhr, status, err) { try { jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap, '<div class="ui-state-error">' + xhr.responseText + '</div>', jQuery.jgrid.edit.bClose, { buttonalign: 'right' } ); } catch(e) { alert(xhr.responseText); } }, "pager": "#pager" }); jQuery('#grid').jqGrid('navGrid', '#pager', { "edit": true, "add": false, "del": false, "search": true, "refresh": true, "view": true, "excel": true, "pdf": true, "csv": false, "columns": false }, { "drag": true, "resize": true, "closeOnEscape": true, "dataheight": "auto", "errorTextFormat": function (r) { return r.responseText; }, "closeAfterEdit": true, "editCaption": "Update Company", "bSubmit": "Update" }, { "drag": true, "resize": true, "closeOnEscape": true, "dataheight": "auto", "errorTextFormat": function (r) { return r.responseText; }, "closeAfterAdd": true, "addCaption": "Add New Company", "bSubmit": "Update" }, { "errorTextFormat": function (r) { return r.responseText; } }, { "drag": true, "closeAfterSearch": true, "multipleSearch": true }, { "drag": true, "resize": true, "closeOnEscape": true, "dataheight": "auto", "Caption": "View Company", "width": "1100" } ); jQuery('#grid').jqGrid('navButtonAdd', '#pager', { id: 'pager_excel', caption: '', title: 'Export To Excel', onClickButton: function (e) { try { jQuery("#grid").jqGrid('excelExport', { tag: 'excel', url: 'session_ma_details.php' }); } catch (e) { window.location = 'session_ma_details.php?oper=excel'; } }, buttonicon: 'ui-icon-newwin' }); jQuery('#grid').jqGrid('navButtonAdd', '#pager', { id: 'pager_pdf', caption: '', title: 'Export To Pdf', onClickButton: function (e) { try { jQuery("#grid").jqGrid('excelExport', { tag: 'pdf', url: 'session_ma_details.php' }); } catch (e) { window.location = 'session_ma_details.php?oper=pdf'; } }, buttonicon: 'ui-icon-print' }); jQuery('#grid').jqGrid('filterToolbar', { "stringResult": true, "searchOnEnter": false, "defaultSearch": "cn" }); jQuery("#getselected").click(function () { var selr = jQuery('#grid').jqGrid('getGridParam', 'selrow'); if (selr) { window.open('http://www.smartouch-cdms.com/order.php?CompanyID=' + selr); } else alert("No selected row"); return false; }); });

    Read the article

  • How to group rules in jquery

    - by Daniele
    Hi I've got a simple question. I've this code below, i use ajax three times in very similiar ways the only things that change are the data passed and the id of the target. Is there a way to group these instructions in a simple one? Thx D. $('#fld_email').focusout(function() { var request_email = $(this).val(); $.ajax({type:"GET", url: "autocomplete.asp", data: "fld=firstname&email="+request_email, beforeSend: function(){$('#fld_firstname').addClass('ac_loading');}, success: function(msg){$('#fld_firstname').val(msg);$('#fld_firstname').removeClass('ac_loading'); } }); $.ajax({type:"GET", url: "autocomplete.asp", data: "fld=lastname&email="+request_email, beforeSend: function(){$('#fld_lastname').addClass('ac_loading');}, success: function(msg){$('#fld_lastname').val(msg);$('#fld_lastname').removeClass('ac_loading');} }); $.ajax({type:"GET", url: "autocomplete.asp", data: "fld=phone&email="+request_email, beforeSend: function(){$('#fld_phone').addClass('ac_loading');}, success: function(msg){$('#fld_phone').val(msg);$('#fld_phone').removeClass('ac_loading');} }); } );

    Read the article

  • Cannot see the variable In my own JQuery plugin's function.

    - by qinHaiXiang
    I am writing one of my own JQuery plugin. And I got some strange which make me confused. I am using JQuery UI datepicker with my plugin. ;(function($){ var newMW = 1, mwZIndex = 0; // IgtoMW contructor Igtomw = function(elem , options){ var activePanel, lastPanel, daysWithRecords, sliding; // used to check the animation below is executed to the end. // used to access the plugin's default configuration this.opts = $.extend({}, $.fn.igtomw.defaults, options); // intial the model window this.intialMW(); }; $.extend(Igtomw.prototype, { // intial model window intialMW : function(){ this.sliding = false; //this.daysWithRecords = []; this.igtoMW = $('<div />',{'id':'igto'+newMW,'class':'igtoMW',}) .css({'z-index':mwZIndex}) // make it in front of all exist model window; .appendTo('body') .draggable({ containment: 'parent' , handle: '.dragHandle' , distance: 5 }); //var igtoWrapper = igtoMW.append($('<div />',{'class':'igtoWrapper'})); this.igtoWrapper = $('<div />',{'class':'igtoWrapper'}).appendTo(this.igtoMW); this.igtoOpacityBody = $('<div />',{'class':'igtoOpacityBody'}).appendTo(this.igtoMW); //var igtoHeaderInfo = igtoWrapper.append($('<div />',{'class':'igtoHeaderInfo dragHandle'})); this.igtoHeaderInfo = $('<div />',{'class':'igtoHeaderInfo dragHandle'}) .appendTo(this.igtoWrapper); this.igtoQuickNavigation = $('<div />',{'class':'igtoQuickNavigation'}) .css({'color':'#fff'}) .appendTo(this.igtoWrapper); this.igtoContentSlider = $('<div />',{'class':'igtoContentSlider'}) .appendTo(this.igtoWrapper); this.igtoQuickMenu = $('<div />',{'class':'igtoQuickMenu'}) .appendTo(this.igtoWrapper); this.igtoFooter = $('<div />',{'class':'igtoFooter dragHandle'}) .appendTo(this.igtoWrapper); // append to igtoHeaderInfo this.headTitle = this.igtoHeaderInfo.append($('<div />',{'class':'headTitle'})); // append to igtoQuickNavigation this.igQuickNav = $('<div />', {'class':'igQuickNav'}) .html('??') .appendTo(this.igtoQuickNavigation); // append to igtoContentSlider this.igInnerPanelTopMenu = $('<div />',{'class':'igInnerPanelTopMenu'}) .appendTo(this.igtoContentSlider); this.igInnerPanelTopMenu.append('<div class="igInnerPanelButtonPreWrapper"><a href="" class="igInnerPanelButton Pre" action="" style="background-image:url(images/igto/igInnerPanelTopMenu.bt.bg.png);"></a></div>'); this.igInnerPanelTopMenu.append('<div class="igInnerPanelSearch"><input type="text" name="igInnerSearch" /><a href="" class="igInnerSearch">??</a></div>' ); this.igInnerPanelTopMenu.append('<div class="igInnerPanelButtonNextWrapper"><a href="" class="igInnerPanelButton Next" action="sm" style="background-image:url(images/igto/igInnerPanelTopMenu.bt.bg.png); background-position:-272px"></a></div>' ); this.igInnerPanelBottomMenu = $('<div />',{'class':'igInnerPanelBottomMenu'}) .appendTo(this.igtoContentSlider); this.icWrapper = $('<div />',{'class':'icWrapper','id':'igto'+newMW+'Panel'}) .appendTo(this.igtoContentSlider); this.icWrapperCotentPre = $('<div class="slider pre"></div>').appendTo(this.icWrapper); this.icWrapperCotentShow = $('<div class="slider firstShow "></div>').appendTo(this.icWrapper); this.icWrapperCotentnext = $('<div class="slider next"></div>').appendTo(this.icWrapper); this.initialPanel(); this.initialQuickMenus(); console.log(this.leftPad(9)); newMW++; mwZIndex++; this.igtoMW.bind('mousedown',function(){ var $this = $(this); //alert($this.css('z-index') + ' '+mwZIndex); if( parseInt($this.css('z-index')) === (mwZIndex-1) ) return; $this.css({'z-index':mwZIndex}); mwZIndex++; //alert(mwZIndex); }); }, initialPanel : function(){ this.defaultPanelNum = this.opts.initialPanel; this.activePanel = this.defaultPanelNum; this.lastPanel = this.defaultPanelNum; this.defaultPanel = this.loadPanelContents(this.defaultPanelNum); $(this.defaultPanel).appendTo(this.icWrapperCotentShow); }, initialQuickMenus : function(){ // store the current element var obj = this; var defaultQM = this.opts.initialQuickMenu; var strMenu = ''; var marginFirstEle = '8'; $.each(defaultQM,function(key,value){ //alert(key+':'+value); if(marginFirstEle === '8'){ strMenu += '<a href="" class="btPanel" panel="'+key+'" style="margin-left: 8px;" >'+value+'</a>'; marginFirstEle = '4'; } else{ strMenu += '<a href="" class="btPanel" panel="'+key+'" style="margin-left: 4px;" >'+value+'</a>'; } }); // append to igtoQuickMenu this.igtoQMenu = $(strMenu).appendTo(this.igtoQuickMenu); this.igtoQMenu.bind('click',function(event){ event.preventDefault(); var element = $(this); if(element.is('.active')){ return; } else{ $(obj.igtoQMenu).removeClass('active'); element.addClass('active'); } var d = new Date(); var year = d.getFullYear(); var month = obj.leftPad( d.getMonth() ); var inst = null; if( obj.sliding === false){ console.log(obj.lastPanel); var currentPanelNum = parseInt(element.attr('panel')); obj.checkAvailability(); obj.getDays(year,month,inst,currentPanelNum); obj.slidePanel(currentPanelNum); obj.activePanel = currentPanelNum; console.log(obj.activePanel); obj.lastPanel = obj.activePanel; obj.icWrapper.find('input').val(obj.activePanel); } }); }, initialLoginPanel : function(){ var obj = this; this.igPanelLogin = $('<div />',{'class':"igPanelLogin"}); this.igEnterName = $('<div />',{'class':"igEnterName"}).appendTo(this.igPanelLogin); this.igInput = $('<input type="text" name="name" value="???" />').appendTo(this.igEnterName); this.igtoLoginBtWrap = $('<div />',{'class':"igButtons"}).appendTo(this.igPanelLogin); this.igtoLoginBt = $('<a href="" class="igtoLoginBt" action="OK" >??</a>\ <a href="" class="igtoLoginBt" action="CANCEL" >??</a>\ <a href="" class="igtoLoginBt" action="ADD" >????</a>').appendTo(this.igtoLoginBtWrap); this.igtoLoginBt.bind('click',function(event){ event.preventDefault(); var elem = $(this); var action = elem.attr('action'); var userName = obj.igInput.val(); obj.loadRootMenu(); }); return this.igPanelLogin; }, initialWatchHistory : function(){ var obj = this; // for thirt part plugin used if(this.sliding === false){ this.watchHistory = $('<div />',{'class':'igInnerPanelSlider'}).append($('<div />',{'class':'igInnerPanel_pre'}).addClass('igInnerPanel')) .append($('<div />',{'class':'igInnerPanel'}).datepicker({ dateFormat: 'yy-mm-dd',defaultDate: '2010-12-01' ,showWeek: true,firstDay: 1, //beforeShow:setDateStatistics(), onChangeMonthYear:function(year, month, inst) { var panelNum = 1; month = obj.leftPad(month); obj.getDays(year,month,inst,panelNum); } , beforeShowDay: obj.checkAvailability, onSelect: function(dateText, inst) { obj.checkAvailability(); } }).append($('<div />',{'class':'extraMenu'})) ) .append($('<div />',{'class':'igInnerPanel_next'}).addClass('igInnerPanel')); return this.watchHistory; } }, loadPanelContents : function(panelNum){ switch(panelNum){ case 1: alert('inside loadPanelContents') return this.initialWatchHistory(); break; case 2: return this.initialWatchHistory(); break; case 3: return this.initialWatchHistory(); break; case 4: return this.initialWatchHistory(); break; case 5: return this.initialLoginPanel(); break; } }, loadRootMenu : function(){ var obj = this; var mainMenuPanel = $('<div />',{'class':'igRootMenu'}); var currentMWId = this.igtoMW.attr('id'); this.activePanel = 0; $('#'+currentMWId+'Panel .pre'). queue(function(next){ $(this). html(mainMenuPanel). addClass('panelShow'). removeClass('pre'). attr('panelNum',0); next(); }). queue(function(next){ $('<div style="width:0;" class="slider pre"></div>'). prependTo('#'+currentMWId+'Panel').animate({width:348}, function(){ $('#'+currentMWId+'Panel .slider:last').remove() $('#'+currentMWId+'Panel .slider:last').replaceWith('<div class="slider next"></div>'); $('.btMenu').remove(); // remove bottom quick menu obj.sliding = false; $(this).removeAttr('style'); }); $('.igtoQuickMenu .active').removeClass('active'); next(); }); }, slidePanel : function(currentPanelNum){ var currentMWId = this.igtoMW.attr('id'); var obj = this; //alert(obj.loadPanelContents(currentPanelNum)); if( this.activePanel > currentPanelNum){ $('#'+currentMWId+'Panel .pre'). queue(function(next){ alert('inside slidePanel') //var initialDate = getPanelDateStatus(panelNum); //console.log('intial day in bigger panel '+initialDate) $(this). html(obj.loadPanelContents(currentPanelNum)). addClass('panelShow'). removeClass('pre'). attr('panelNum',currentPanelNum); $('#'+currentMWId+'Panel .next').remove(); next(); }). queue(function(next){ $('<div style="width:0;" class="slider pre"></div>'). prependTo('#'+currentMWId+'Panel').animate({width:348}, function(){ //$('#igto1Panel .slider:last').find(setPanel(currentPanelNum)).datepicker('destroy'); $('#'+currentMWId+'Panel .slider:last').empty().removeClass('panelShow').addClass('next').removeAttr('panelNum'); $('#'+currentMWId+'Panel .slider:last').replaceWith('<div class="slider next"></div>') obj.sliding = false;console.log('inuse inside animation: '+obj.sliding); $(this).removeAttr('style'); }); next(); }); } else{ ///// current panel num smaller than next $('#'+currentMWId+'Panel .next'). queue(function(next){ $(this). html(obj.loadPanelContents(currentPanelNum)). addClass('panelShow'). removeClass('next'). attr('panelNum',currentPanelNum); $('<div class="slider next">empty</div>').appendTo('#'+currentMWId+'Panel'); next(); }). queue(function(next){ $('#'+currentMWId+'Panel .pre').animate({width:0}, function(){ $(this).remove(); //$('#igto1Panel .slider:first').find(setPanel(currentPanelNum)).datepicker('destroy'); $('#'+currentMWId+'Panel .slider:first').empty().removeClass('panelShow').addClass('pre').removeAttr('panelNum').removeAttr('style'); $('#'+currentMWId+'Panel .slider:first').replaceWith('<div class="slider pre"></div>') obj.sliding = false; console.log('inuse inside animation: '+obj.sliding); }); next(); }); } }, getDays : function(year,month,inst,panelNum){ var obj = this; // depand on the mysql qurey condition var table_of_record = 'moviewh';//getTable(panelNum); var date_of_record = 'watching_date';//getTableDateCol(panelNum); var date_to_find = year+'-'+month; var node_of_xml_date_list = 'whDateRecords';//getXMLDateNode(panelNum); var user_id = '1';//getLoginUserId(); //var daysWithRecords = []; // empty array before asigning this.daysWithRecords.length = 0; $.ajax({ type: "GET", url: "include/get.date.list.process.php", data:({ table_of_record : table_of_record,date_of_record:date_of_record,date_to_find:date_to_find,user_id:user_id,node_of_xml_date_list:node_of_xml_date_list }), dataType: "json", cache: false, // force broser don't cache the xml file async: false, // using this option to prevent datepicker refresh ??NO success:function(data){ // had no date records if(data === null) return; obj.daysWithRecords = data; } }); //setPanelDateStatus(year,month,panelNum); console.log('call from getdays() ' + this.daysWithRecords); }, checkAvailability : function(availableDays) { // var i; var checkdate = $.datepicker.formatDate('yy-mm-dd', availableDays); //console.log( checkdate); // for(var i = 0; i < this.daysWithRecords.length; i++) { // // if(this.daysWithRecords[i] == checkdate){ // // return [true, "available"]; // } // } //console.log('inside check availablility '+ this.daysWithRecords); //return [true, "available"]; console.log(typeof this.daysWithRecords) for(i in this.daysWithRecords){ //if(this.daysWithRecords[i] == checkdate){ console.log(typeof this.daysWithRecords[i]); //return [true, "available"]; //} } return [true, "available"]; //return [false, ""]; }, leftPad : function(num) { return (num < 10) ? '0' + num : num; } }); $.fn.igtomw = function(options){ // Merge options passed in with global defaults var opt = $.extend({}, $.fn.igtomw.defaults , options); return this.each(function() { new Igtomw(this,opt); }); }; $.fn.igtomw.defaults = { // 0:mainMenu 1:whatchHistor 2:requestHistory 3:userManager // 4:shoppingCart 5:loginPanel initialPanel : 5, // default panel is LoginPanel initialQuickMenu : {'1':'whatchHIstory','2':'????','3':'????','4':'????'} // defalut quick menu }; })(jQuery); usage: $('.openMW').click(function(event){ event.preventDefault(); $('<div class="">').igtomw(); }) HTML code: <div id="taskBarAndStartMenu"> <div class="taskBarAndStartMenuM"> <a href="" class="openMW" >??IGTO</a> </div> <div class="taskBarAndStartMenuO"></div> </div> In my work flow: when I click the "whatchHistory" button, my plugin would load a panel with JQuery UI datepicker applied which days had been set to be availabled or not. I am using the function "getDays()" to get the available days list and stored the data inside daysWithRecords, and final the UI datepicker's function "beforeShowDay()" called the function "checkAvailability()" to set the days. the variable "daysWithRecords" was declared inside Igtomw = function(elem , options) and was initialized inside the function getDays() I am using the function "initialWatchHistory()" to initialization and render the JQuery UI datepicker in the web. My problem is the function "checkAvailability()" cannot see the variable "daysWithRecords".The firebug prompts me that "daysWithRecords" is "undefined". this is the first time I write my first plugin. So .... Thank you very much for any help!!

    Read the article

  • Package Manager Console For More Than Managing Packages

    - by Steve Michelotti
    Like most developers, I prefer to not have to pick up the mouse if I don’t have to. I use the Executor launcher for almost everything so it’s extremely rare for me to ever click the “Start” button in Windows. I also use shortcuts keys when I can so I don’t have to pick up the mouse. By now most people know that the Package Manager Console that comes with NuGet is PowerShell embedded inside of Visual Studio. It is based on its PowerConsole predecessor which was the first (that I’m aware of) to embed PowerShell inside of Visual Studio and give access to the Visual Studio automation DTE object. It does this through an inherent $dte variable that is automatically available and ready for use. This variable is also available inside of the NuGet Package Manager console. Adding a new class file to a Visual Studio project is one of those mundane tasks that should be easier. First I have to pick up the mouse. Then I have to right-click where I want it file to go and select “Add –> New Item…” or “Add –> Class…”   If you know the Ctrl+Shift+A shortcut, then you can avoid the mouse for adding a new item but you have to manually assign a shortcut for adding a new class. At this point it pops up a dialog just so I can enter the name of the class I want. Since this is one of the most common tasks developers do, I figure there has to be an easier way and a way that avoids picking up the mouse and popping up dialogs. This is where your embedded PowerShell prompt in Visual Studio comes in. The first thing you should do is to assign a keyboard shortcut so that you can get a PowerShell prompt (i.e., the Package Manager console) quickly without ever picking up the mouse. I assign “Ctrl+P, Ctrl+M” because “P + M” stands for “Package Manager” so it is easy to remember:   At this point I can type this command to add a new class: PM> $dte.ItemOperations.AddNewItem("Code\Class", "Foo.cs") which will result in the class being added: At this point I’ve satisfied my original goal of not having to pick up a mouse and not having the “Add New Item” dialog pop up. However, having to remember that $dte method call is not very user-friendly at all. The best thing to do is to make this a re-usable function that always loads when Visual Studio starts up. There is a $profile variable that you can use to figure out where that location is for your machine: PM> $profile C:\Users\steve.michelotti\Documents\WindowsPowerShell\NuGet_profile.ps1 If the NuGet_profile.ps1 file does not already exist, you can just create it yourself and place it in the directory. Now you can put a function inside like this: 1: function addClass($className) 2: { 3: if ($className.EndsWith(".cs") -eq $false) { 4: $className = $className + ".cs" 5: } 6: 7: $dte.ItemOperations.AddNewItem("Code\Class", $className) 8: } Since it’s in the NuGet_profile.ps1 file, this function will automatically always be available for me after starting Visual Studio. Now I can simply do this: PM> addClass Foo At this point, we have a *very* nice developer experience. All I did to add a new class was: “Ctrl-P, Ctrl-M”, then “addClass Foo”. No mouse, no pop up dialogs, no complex commands to remember. In fact, PowerShell gives you auto-completion as well. If I type “addc” followed by [TAB], then intellisense pops up: You can see my custom function appear in intellisense above. Now I can type the next letter “c” and [TAB] to auto-complete the command. And if that’s still too many key strokes for you, then you can create your own PowerShell custom alias for your function like this: PM> Set-Alias addc addClass PM> addc Foo While all this is very useful, I did run into some issues which prompted me to make even further customization. This command will add the new class file to the current active directory. Depending on your context, this may not be what you want. For example, by convention all view model objects go in the “Models” folder in an MVC project. So if the current document is in the Controllers folder, it will add your class to that folder which is not what you want. You want it to always add it to the “Models” folder if you are adding a new model in an MVC project. For this situation, I added a new function called “addModel” which looks like this: 1: function addModel($className) 2: { 3: if ($className.EndsWith(".cs") -eq $false) { 4: $className = $className + ".cs" 5: } 6: 7: $modelsDir = $dte.ActiveSolutionProjects[0].UniqueName.Replace(".csproj", "") + "\Models" 8: $dte.Windows.Item([EnvDTE.Constants]::vsWindowKindSolutionExplorer).Activate() 9: $dte.ActiveWindow.Object.GetItem($modelsDir).Select([EnvDTE.vsUISelectionType]::vsUISelectionTypeSelect) 10: $dte.ItemOperations.AddNewItem("Code\Class", $className) 11: } First I figure out the path to the Models directory on line #7. Then I activate the Solution Explorer window on line #8. Then I make sure the Models directory is selected so that my context is correct when I add the new class and it will be added to the Models directory as desired. These are just a couple of examples for things you can do with the PowerShell prompt that you have available in the Package Manager console. As developers we spend so much time in Visual Studio, why would you not customize it so that you can work in whatever way you want to work?! The next time you’re not happy about the way Visual Studio makes you do a particular task – automate it! The sky is the limit.

    Read the article

  • Highlighting rows and columns in an HTML table using JQuery

    - by nikolaosk
    A friend of mine was seeking some help regarding HTML tables and JQuery. I have decided to write a few posts demonstrating the various techniques I used with JQuery to achieve the desired functionality. ?here are other posts in my blog regarding JQuery.You can find them all here.I have received some comments from visitors of this blog that are "complaining" about the length of the blog posts. I will not write lengthy posts anymore...I mean I will try not to do so..We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions. 1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application.2) Add a web form, default.aspx page to the application.3) Add a table from the HTML controls tab control (from the Toolbox) on the default.aspx page4) Now we need to download the JQuery library. Please visit the http://jquery.com/ and download the minified version.5) We will add a stylesheet to the application (Style.css)5) Obviously at some point we need to reference the JQuery library and the external stylesheet. In the head section ? add the following lines.   <link href="Style.css" rel="stylesheet" type="text/css" />       <script src="jquery-1_8_2_min.js" type="text/javascript"></script> 6) Now we need to highlight the rows when the user hovers over them.7) First we need to type the HTML markup<body>    <form id="form1" runat="server">    <div>        <h1>Liverpool Legends</h1>        <table style="width: 50%;" border="1" cellpadding="10" cellspacing ="10">            <thead>                <tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>            </thead>            <tbody>            <tr>                <td>Alan Hansen</td>                <td>Graeme Souness</td>                <td>Ian Rush</td>            </tr>            <tr>                <td>Alan Kennedy</td>                <td>Steven Gerrard</td>                <td>Michael Owen</td>            </tr>            <tr>                <td>Jamie Garragher</td>                <td>Kenny Dalglish</td>                <td>Robbie Fowler</td>            </tr>            <tr>                <td>Rob Jones</td>                <td>Xabi Alonso</td>                <td>Dirk Kuyt</td>            </tr>                </tbody>        </table>            </div>    </form></body>8) Now we need to write the simple rules in the style.css file.body{background-color:#eaeaea;}.hover { background-color:#42709b; color:#ff6a00;} 8) Inside the head section we also write the simple JQuery code.  <script type="text/javascript"> $(document).ready(function() { $('tr').hover( function() { $(this).find('td').addClass('hover'); }, function() { $(this).find('td').removeClass('hover'); } ); }); </script>9) Run your application and see the row changing background color and text color every time the user hovers over it. Let me explain how this functionality is achieved.We have the .hover style rule in the style.css file that contains some properties that define the background color value and the color value when the mouse will be hovered on the row.In the JQuery code we do attach the hover() event to the tr elements.The function that is called when the hovering takes place, we search for the td element and through the addClass function we apply the styles defined in the .hover class rule in the style.css file.I remove the .hover rule styles with the removeClass function. Now let's say that we want to highlight only alternate rows of the table.We need to add another rule in the style.css.alternate { background-color:#42709b; color:#ff6a00;} The JQuery code (comment out the previous JQuery code) follows  <script type="text/javascript">        $(document).ready(function() {                     $('table tr:odd').addClass('alternate');        });    </script>  When I run my application through VS I see the following result You can do that with columns as well. You can highlight alternate columns as well.The JQuery code (comment out the previous JQuery code) follows  <script type="text/javascript">        $(document).ready(function() {                      $('td:nth-child(odd)').addClass('alternate');        });    </script>  In this script I use the nth-child() method in the JQuery code.This method retrieves all the elements that are nth children of their parent.Have a look at the picture below to see the resultsYou can also change color to each individual cell when hovered on.The JQuery code (comment out the previous JQuery code) follows    <script type="text/javascript">        $(document).ready(function() {          $('td').hover(                  function() {                 $(this).addClass('hover');               },                function() {                    $(this).removeClass('hover');                }                );        });    </script> Have a look at the picture below to see the results. Hope it helps!!!

    Read the article

  • jQuery event not working after load

    - by Shina
    $(document).ready(function(){ $(function() { $('a.ajaxload').live('click', function(e) { var url = $(this).attr('href'); $('#desktopcontainer').load(url); // load the html response into a DOM element e.preventDefault(); // stop the browser from following the link }); }); $(function() { $(".accordion .accordion-tabs .tab").each(function(){ $(this).click(function(){ if ($(this).hasClass('tab')){ $(this).removeClass('tab'); $(this).addClass('active'); }else{ $(this).removeClass('active'); $(this).addClass('tab'); } $(this).next().slideToggle('slow'); return false; }); }); }); }); My tab works fine but after I click the "a.ajaxload" to add a content to the page, then my tab doesn't respond anymore. Can anyone please tell me where the problem is? Thank you in advance.

    Read the article

  • PHP Form - Empty input enter this text - Validation

    - by James Skelton
    No doubt very simple question for someone with php knowledge. I have a form with a datepicker, all is fine when a user has selected a date the email is send with: Date: 2012 04 10 But i would like if the user has skipped this and left blank (as i have not made this required) to send as: Date: Not Entered (<-- Or something) Instead at the minute of course it reads: Date: Form input <input type="text" class="form-control" id="datepicker" name="datepicker" size="50" value="Date Of Wedding" /> This is the validator $(document).ready(function(){ //validation contact form $('#submit').click(function(event){ event.preventDefault(); var fname = $('#name').val(); var validInput = new RegExp(/^[a-zA-Z0-9\s]+$/); var email = $('#email').val(); var validEmail = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/); var message = $('#message').val(); if(fname==''){ showError('<div class="alert alert-danger">Please enter your name.</div>', $('#name')); $('#name').addClass('required'); return;} if(!validInput.test(fname)){ showError('<div class="alert alert-danger">Please enter a valid name.</div>', $('#name')); $('#name').addClass('required'); return;} if(email==''){ showError('<div class="alert alert-danger">Please enter an email address.</div>', $('#email')); $('#email').addClass('required'); return;} if(!validEmail.test(email)){ showError('<div class="alert alert-danger">Please enter a valid email.</div>', $('#email')); $('#email').addClass('required'); return;} if(message==''){ showError('<div class="alert alert-danger">Please enter a message.</div>', $('#message')); $('#message').addClass('required'); return;} // setup some local variables var request; var form = $(this).closest('form'); // serialize the data in the form var serializedData = form.serialize(); // fire off the request to /contact.php request = $.ajax({ url: "contact.php", type: "post", data: serializedData }); // callback handler that will be called on success request.done(function (response, textStatus, jqXHR){ $('.contactWrap').show( 'slow' ).fadeIn("slow").html(' <div class="alert alert-success centered"><h3>Thank you! Your message has been sent.</h3></div> '); }); // callback handler that will be called on failure request.fail(function (jqXHR, textStatus, errorThrown){ // log the error to the console console.error( "The following error occured: "+ textStatus, errorThrown ); }); }); //remove 'required' class and hide error $('input, textarea').keyup( function(event){ if($(this).hasClass('required')){ $(this).removeClass('required'); $('.error').hide("slow").fadeOut("slow"); } }); // show error showError = function (error, target){ $('.error').removeClass('hidden').show("slow").fadeIn("slow").html(error); $('.error').data('target', target); $(target).focus(); console.log(target); console.log(error); return; } });

    Read the article

  • Getting jQuery slideshow animation to stop on click

    - by hollyb
    I have a slide show built with jQuery that pauses on hover. It has a group of thumbnails sitting on top of the image that advances the image when clicked, otherwise the slideshow just auto-rotates through all the images. There is also a +/- to expand and contract a caption related to each image. I want to have the slideshow's automatic advancing to stop if one of the thumbnails is clicked, or the +/-. Basically, just stop whenever a user clicks anywhere within the gallery (div class=".homeImg"). I'm having a major brain fart in getting this working properly and could use some advice. Here's the jQuery: $(document).ready(function() { $(".main_image .desc").show(); //Show image info $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity //Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); // * Adds a class 'last' to the last li to let the rotator know when to return to the first $(".image_thumb ul li:last").addClass('last'); $(".image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block if ($(this).is(".active")) { //If it's already active, then… return false; // Don't click through } else { //Animate $(".main_image img").animate({ opacity: 0}, 800 ); $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 800, function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 250 ); }); } $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists $(this).addClass('active'); //add class of 'active' on this list only return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); //Toggle teaser $("a.collapse").click(function(){ $(".main_image .block").slideToggle(); $("a.collapse").toggleClass("show"); return false; // added to remove # browser jump }); // If we are hovering over the image area, pause the clickNext function pauseClickNext = false; $(".homeImg").hover( function () { pauseClickNext = true; }, function () { pauseClickNext = false; } ); // Define function to click the next li var clickNext = function(){ if(!pauseClickNext) { /// find the next li after .active var $next_li = $("li.active").next("li"); if($("li.active").hasClass("last") ){ $(".image_thumb ul li:first").trigger("click"); } else { $next_li.trigger("click"); } } }; // Time between image transition setInterval(clickNext, 6000); });

    Read the article

  • Jquery toggle functions

    - by ozsenegal
    I've a code to sort table using Jquery.I use toggle function to alternate clicks,and toggle beetween 'ascend' and 'descend' sort.Once you click header's table it should sort it contents. However,there's a bug: I click once,it sorts,then when i click again,nothing happens.I need to click again (second time) to execute the second function,and sort again. Toggle should switch functions with single clicks,not double,am i right? Here is the code: firstRow.toggle(function() { $(this).find("th:first").removeClass("ascendFirst").addClass("descendFirst"); $(this).find("th:not(first)").removeClass("ascend").addClass("descend"); sorted = $.makeArray($("td:eq(0)", "tr")).sort().reverse(); sorted2 = $.makeArray($("td:eq(1)", "tr")).sort().reverse(); sorted3 = $.makeArray($("td:eq(2)", "tr")).sort().reverse(); for (var i = 0; i < sorted.length; i++) { $("td", "tr:eq(" + (i + 1) + ")").remove(); $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted[i]).text())); $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted2[i]).text())); $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted3[i]).text())); } }, function() { $(this).find("th:first").removeClass("descendFirst").addClass("ascendFirst"); $(this).find("th:not(first)").removeClass("descend").addClass("ascend"); sorted = $.makeArray($("td:eq(0)", "tr")).sort(); sorted2 = $.makeArray($("td:eq(1)", "tr")).sort(); sorted3 = $.makeArray($("td:eq(2)", "tr")).sort(); for (var i = 0; i < sorted.length; i++) { $("td", "tr:eq(" + (i + 1) + ")").remove(); $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted[i]).text())); $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted2[i]).text())); $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted3[i]).text())); } });

    Read the article

  • jq div display script webkit issues

    - by Tom
    $(document).ready(function() { $('#chekboxes a').click(function(e) { $('.visible').removeClass('visible').addClass('invisible'); var thediv = $(this).attr('href'); $(thediv).removeClass('invisible').addClass('visible'); }) }); This simple bit of jq works in FF and not in Chrome and Safari. Despite googling widely, I cannot tell whether there's a way to make it work in Safari and Chrome or not. Does anyone know a fix or what is wrong ? Thanks, Tom

    Read the article

  • using '.each' method: how do I get the indexes of multiple ordered lists to each begin at [0]?

    - by shecky
    I've got multiple divs, each with an ordered list (various lengths). I'm using jquery to add a class to each list item according to its index (for the purpose of columnizing portions of each list). What I have so far ... <script type="text/javascript"> /* Objective: columnize list items from a single ul or ol in a pre-determined number of columns 1. get the index of each list item 2. assign column class according to li's index */ $(document).ready(function() { $('ol li').each(function(index){ // assign class according to li's index ... index = li number -1: 1-6 = 0-5; 7-12 = 6-11, etc. if ( index <= 5 ) { $(this).addClass('column-1'); } if ( index > 5 && index < 12 ) { $(this).addClass('column-2'); } if ( index > 11 ) { $(this).addClass('column-3'); } // add another class to the first list item in each column $('ol li').filter(function(index) { return index != 0 && index % 6 == 0; }).addClass('reset'); }); // closes li .each func }); // closes doc.ready.func </script> ... succeeds if there's only one list; when there are additional lists, the last column class ('column-3') is added to all remaining list items on the page. In other words, the script is presently indexing continuously through all subsequent lists/list items, rather than being re-set to [0] for each ordered list. Can someone please show me the proper method/syntax to correct/amend this, so that the script addresses/indexes each ordered list anew? many thanks in advance. shecky p.s. the markup is pretty straight-up: <div class="tertiary"> <h1>header</h1> <ol> <li><a href="#" title="a link">a link</a></li> <li><a href="#" title="a link">a link</a></li> <li><a href="#" title="a link">a link</a></li> </ol> </div><!-- END div class="tertiary" -->

    Read the article

  • I have a bunch of images being shown on click via JQuery - any easy way to animate this?

    - by Cenk
    This is the (quite simple) JS code I'm using: $(document).ready(function() { $(".button-list .next").click(function() { project = $(this).parents().filter(".projektweb").eq(0); currentimg = project.find(".images-list li.current"); nextimg = currentimg.next(); firstimg = project.find(".images-list li:first"); currentimg.removeClass("current"); if (nextimg.is("li")) nextimg.addClass("current"); else firstimg.addClass("current"); return false; }); $(".button-list .prev").click(function() { project = $(this).parents().filter(".projektweb").eq(0); currentimg = project.find(".images-list li.current"); previmg = currentimg.prev(); lastimg = project.find(".images-list li:last"); currentimg.removeClass("current"); if (previmg.is("li")) previmg.addClass("current"); else lastimg.addClass("current"); return false; }); }); And this is how the HTML code for the image list looks like: <ul class="images-list"> <li class="current"><img src="img/1.jpg" alt="" /></li> <li><img src="img/1b.jpg" alt="" /></li> </ul> <ul class="button-list"> <li><a class="button prev" href="#">?</a></li> <li><a class="button next" href="#">?</a></li></ul> The CSS: .images-list { height: 460px; list-style-type:none; float:left; width: 460px; overflow:hidden; position:relative; } .images-list img { height: 460px; width: 460px; display:block; } .images-list li { display:none; } .images-list li.current { display:block; } What I'd like to do is animate the images as they come and go - right now they just appear, which is OK but a bit more eye-candy would be nice. Can anyone help me out here? It it even possible to do it this way? Thanks!!

    Read the article

  • How to remove class Conditionally ?

    - by Wazdesign
    $("li").hoverIntent({ sensitivity: 3, interval: 200, over: addOver, timeout: 500, out: removeOver }); function addOver(){ $(this).addClass('over').children('a:first').addClass('active');} function removeOver(){ $(this).removeClass('over').children('a:first').removeClass('active');} alert ('version 2 menu'); }); On mouseout I want to remove class of " li a" if it already dont have class. I want to remove the class of the children.

    Read the article

  • .live event doesnt work till second click

    - by ChampionChris
    I have 2 list on a page that are linked. When I drag a li element from list 1 to list 2 the live events on list 1 don't work on the first click only second click. Below is the code that adds the li (obj) to list 2. function AddToDropBox(obj) { $(obj).children(".handle").animate({ width: "20px" }).children("strong").fadeOut(); $(obj).children("span:not(.track,.play,.handle,:has(.btn-edit))").fadeOut('fast'); $(obj).children(".play").css("margin-right", "8px"); $(obj).css({ "opacity": "0.0", "width": "284px" }).animate({ opacity: "1.0" }); if ($(".sidebar-drop-box ul").children(".admin-song").length > 0) { $(".dropTitle").fadeOut("fast"); $(".sidebar-drop-box ul.admin-song-list").css("min-height", "0"); } if (typeof SetLinks == 'function') { SetLinks(); } //CBG Changes adds media ID to hidden field //checks id there is a value in field then adds comma if(document.getElementById("ctl00_cphBody_hfRemoveMedia").value==""||document.getElementById("ctl00_cphBody_hfRemoveMedia").value==null) { document.getElementById("ctl00_cphBody_hfRemoveMedia").value=(obj).attr("mediaid"); } else { var localMediaIDs=document.getElementById("ctl00_cphBody_hfRemoveMedia").value; document.getElementById("ctl00_cphBody_hfRemoveMedia").value=localMediaIDs+", "+(obj).attr("mediaid"); } // alert("hfid: "+document.getElementById("ctl00_cphBody_hfRemoveMedia").value); //END CBG Modifications } this is one of the live() events that dont fire until the second click after the drag. This live() event is in a document.ready function(). // Live for deleting. $(".btn-del").live("click", function(e) { DeleteItem(this); $(this).removeClass("btn-del").addClass("btn-add").parents("li").removeClass("alt").addClass("removed"); var oldTxt = $(this).parents("li").find(".status").text(); $(this).parents("li").find(".status").text("Removed").attr("oldstat", oldTxt); $("#timeHolder input[type=hidden]").val(($("#timeHolder input[type=hidden]").val() * 1) - ($(this).parents("li").find(".time").attr("length") * 1)); CalculateAggregates(); isDirty = false; }); EDIT @dreaton.. Im new to jquery and javascript so thanks for the last tip... Im not sure what you mean about cache the query's. ... the delegete feature is giving me this Microsoft JScript runtime error: Object doesn't support this property or method this is the way I have the code $('#ulPlaylist').delegate('.btn-del', 'click', function (e) { DeleteItem(this); $(this).removeClass("btn-del").addClass("btn-add").parents("li").removeClass("alt").addClass("removed"); var oldTxt = $(this).parents("li").find(".status").text(); $(this).parents("li").find(".status").text("Removed").attr("oldstat", oldTxt); $("#timeHolder input[type=hidden]").val(($("#timeHolder input[type=hidden]").val() * 1) - ($(this).parents("li").find(".time").attr("length") * 1)); CalculateAggregates(); isDirty = false; });

    Read the article

  • Get previous object in selectors chain

    - by Idsa
    I have the following jQuery calls chain: $(someSelector).nextUntil(".specialClass").addClass(classBasedSomeSelectorObject) I need to addClass that's value is based on the object which was returned by someSelector. Is there any way to implement it?

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >