jQuery Forum

What would the performance considerations be between:
showHide(".showhide");
function showHide(elem){}
and
$(".showhide").showHide();
$.fn.showHide= function(){}
Thanks,
Dan.<br clear="all">
--
Daniel Eastwell
Portfolio and articles:
<a href="http://www.thoughtballoon.co.uk">http://www.thoughtballoon.co.uk</a>
Blog:
<a href="http://www.thoughtballoon.co.uk/blog">http://www.thoughtballoon.co.uk/blog</a>

Hello,
I have the following function:
// Show and fade out a feedback message
$.fn.addFeedback = function(feedbackMessage){
        var offset = $(this).offset();
        var feedbackDiv = "<div class='feedback' id='feedbackElement' style='display:none;position:absolute;left:" + offset.left  + "px;top:" + (offset.top + 0)  +"px'>

" + feedbackMessage + "

</div>";
        $("body").append(feedbackDiv);
        $('#feedbackElement').fadeIn('slow');
        setTimeout("$('#feedbackElement').fadeOut('slow', function(){$('#feedbackElement').remove();});",3000);
}<br clear="all">
How do I change this to add an optional callback function to operate once the function has completed?
Thanks,
Dan.
--
Daniel Eastwell
Portfolio and articles:
<a href="http://www.thoughtballoon.co.uk">http://www.thoughtballoon.co.uk</a>
Blog:
<a href="http://www.thoughtballoon.co.uk/blog">http://www.thoughtballoon.co.uk/blog</a>

Hi,
I'm using the datepicker widget on a site, but there may be pages
where the script is not called in the head, where there's no
datepicker needed on the page. (To save download time and to reduce
execution time)
the $(document).ready function will include a
$('.invokeBoth').datepicker( ... );
but this will be called on every page on the site - even those where
the datepicker script isn't called within the head.
How do I check that datepicker is a function?
I was thinking
if(typeof datepicker=='function'){ ... }
Is this even an intelligent way of attacking the problem of only
downloading the function when it's needed?
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog

Hi,
I've got a very simple tab interface which works perfectly, except in Safari.
The click event is carried out, then the link is followed even with
return false in the click event function. I've simplified everything
to the following code, but the tabs are still treated as in-page
anchors rather than simple click handles.
(normally, of course, the tabs() would initialise by hiding the
non-current months and would toggle a 'hidden' class on months you
clicked on, etc. It's just an alert to illustrate)
$(document).ready(function() {
    tabs("#calendar .navigation");
});
function tabs(nav){
    $(nav + " li a").click(function(){
        alert('hello');
        return false;
    });
}
<div id="calendar">
<div class="navigation">
    <ul>
        <li><a href="#jan" >Jan</a></li>
        <li class="current"><a href="#feb" >Feb</a></li>
        <li><a href="#mar" >Mar</a></li>
        <li><a href="#apr" >Apr</a></li>
        <li><a href="#may" >May</a></li>
        <li><a href="#jun" >Jun</a></li>
        <li><a href="#jul" >Jul</a></li>
        <li><a href="#aug" >Aug</a></li>
        <li><a href="#sep" >Sep</a></li>
        <li><a href="#oct" >Oct</a></li>
        <li><a href="#nov" >Nov</a></li>
        <li><a href="#dec" >Dec</a></li>
    </ul>
</div>
<div class="month" id="jan">
<h2>January</h2>
</div>
...
<div class="month" id="dec">
<h2>December</h2>
</div>
</div>
Thanks,
Dan.
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog

Hi,
I'm doing an order form for a bookstore. The order form has over 500
items in it, so jquery runs slowly.
There is no way I can change the number of items, it's a given and a
piece of business 'logic'.
The jquery I have comprises four simple functions to add
increment/decrement buttons to the order form to increase quantities,
and a jquery addClass call to add pajama/zebra stripes to the table.
There are two quantity fields (again for business reasons), so that's
over a 1000 items.
http://test2.danieleastwell.co.uk/test2/master_order_test.html
The problem is it causes a 'script hanging' error IE7 on, I'm
guessing, slower machines (not mine), and takes ~10secs in Firefox2
(with firebug/validation tools) to load.
Is there any way I can optimize this to load any more quickly, or do I
need to give up on scripting to add the items and their functionality?
Many thanks,
Dan.
$(document).ready(function() {
    addPlusMinus("td input[@name=paid_qty][@type=text]");
    addPlusMinus("td input[@name=free_qty][@type=text]");
    increment("#order_form img.increment");
    decrement("#order_form img.decrement");
    $("table.summarytable tr:even").addClass("odd");
    
});
function addPlusMinus(input_text){
    $(input_text).each( function(){
        $(this).after("<img src='images/buttons/button_minus.gif' alt='-'
class=\"decrement\" /><img src='images/buttons/button_plus.gif'
alt='+' class=\"increment\" />");
    });
}
    
function increment(image_button) {
    $(image_button).bind("click", function() {
        qty_field = $(this).parent("td").find("input[@type=text]");
        var numValue = $(qty_field).val();
        numValue++;
        $(qty_field).val(numValue);
    });
}            
function decrement(image_button) {
    $(image_button).bind("click", function() {
        qty_field = $(this).parent("td").find("input[@type=text]");
        var numValue = $(qty_field).val();
        if (numValue > 0 ) {
        numValue--;
        }
        $(qty_field).val(numValue);
    });
}    
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog

I know I can use parents to get the ancestors of my input, but this
will get all forms on the page
$(#myInput).parents("form");
How do I find the one the form is in?
var formItsIn = checkAncestors(theSearchBox, "form");
function checkAncestors(theItem, requiredAncestor){
    var theparent = theItem.parentNode.nodeName.toLower();
    if(theparent == requiredAncestor){
        return theparent;
    }else{
        checkAncestors(theparent, requiredAncestor);
    }
}
my code above seems a bit much to me, and it's not jquery!
Cheers,
Dan.
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

How can I change this:
<h2>text</h2>
<h2>other text</h2>
to this:
<h2><a href="#">text</a></h2>
<h3><a href="#">other text</a></h3>
Thanks,
Dan.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Using the file below, I'm trying to work out why elements on my page
that are acting as event 'handles', do not fire the click event (i.e.
alert("Hello"); ) when tabbed into and the return/enter button
pressed.
The first paragraph can have focus and be 'clicked' with the keyboard,
but no alert fires. The second paragraph's <a> element gets focus next
when tabbed into and will cause the alert when return is pressed. The
third tab element, <a> in blockquote, doesn't cause the alert to
popup, as is expected.
Can anyone explain to me why the first paragraph won't work as an
event 'handle' when using the keyboard and click(function)? Is there
another way of assigning an event to an element that's not an <a> when
using the keyboard (not keyup, etc, because it should be the return
key that fires the event, not 'any' key).
Many thanks for your help,
Dan.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Click test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="content-language" content="en-gb" />
    <script type="text/javascript"
src="../../_functions/js/libraries/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("p").click( function() { alert("Hello"); } );
        });
    </script>
</head>
<body>
    
        <p tabindex="1">Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt.

        
        

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore <a href="/">magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?</a>

        
        <blockquote>Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore <a href="/">magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur?</a></blockquote>
        
</body>
</html>
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

I have a function
function closeSubModules(subModules){
    for(var i=0; i < subModules.length; i++){
        theElement = subModules[i];    
        $(theElement).hide();
    }    
}
one of the subModules[i] I've passed this function in an array is
"#faq li ul" and hides all the sub-modules
e.g.
<div id="faq">
<ul>
<li>
<ul> <!-- hide this -->
....
</ul>
</li>
</ul>
I've another function that toggles the hidden submodules onclick of
another element on the page.
If the submodule has a list inside it (e.g. as bullet points within
some text) these get hidden by closeSubModules() but don't get shown
by the toggle function (that only targets the "#faq li ul" level and
no deeper).
I've added this to my toggle function,
$(theItems).children("ul").show();
but that is a bit of a hack and only goes one level deep, and won't
show nested lists within any text in the module.
Any thoughts?
Thanks,
Dan.
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hello,
I'm trying to select every odd item in a list, but not the first two items.
I've tried using the nth-child selector, which is fine at picking out
the nth-child, but I can't get the 2n+2 child to be selected:
    stripes("#search-results div:odd"); // is ok
    stripes("#search-results div:nth-child(2)"); // works
but
    stripes("#search-results div:nth-child(2n+2)"); // doesn't.
Am I missing something about the CSS3 selector syntax?
Thanks,
Dan.
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi,
I've got a function:
function closeNav(navName, navHandler, navList){
    $(navList).hide("slow",function(){
        $(navName).addClass("external-nav-on");
        $(navHandler).addClass("closed");
    });
    $(navHandler).toggle(function(){
        $(navHandler).removeClass("closed");
        $(navList).fadeIn("slow");
    },function(){
        $(navList).fadeOut("slow",function(){
            $(navHandler).addClass("closed");
        });
    });
}
called from within another function from a function call.
prepareNav("#external-nav", "#external-nav h2", "#external-nav ul");
function prepareNav(navName, navHandler, navList) {
    closeNav(navName, navHandler, navList);
}
The function fades out (closes) the nav, and puts an alternative
background and styling on the header of the nav, on loading the page
and on click to close/open the nav.
The nav is a header with a series of nested lists as follows:
<div id="external-nav"> <!-- class="external-nav-on" javascript enabled -->
    <h2>Nav Title</h2> <!-- class="closed" on closed -->
        <ul>
            <li class="section-1"><h3>Section one</h3>
                <ul>
                    <li>
                        <h4>Sub Section 1</h4>
                        <ul>
                            <li><a href="#">Item 1</a></li>    
                            <li><a href="#">Item 2</a></li>    
                            <li><a href="#">Item 2</a></li>    
                            <li><a href="#">Item 3</a></li>    
                            <li><a href="#">Item 4</a></li>        
                        </ul>
                    </li>    
[... Plus six more list items each with a single list and item in them...]
</ul>
</li>
</ul>
</div>
This works fine in IE7/Firefox, but takes > 10 seconds with poor/no
animation in IE6, and causes artefacts to remain on screen in Safari,
which disappear/go back to normal when moused over.
Any ideas why this is happening? My work around is to sniff for IE6
and Safari and give them a simple show()/hide(), with no animation.
Thanks,
Dan.
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi again,
following up my previous post where I was trying to bind a function to a submit event, I'm now trying to pass values from the function that returns a function to the bound submit event.<br clear="all">
I've a number of forms on a page, that perform a variety of functions, some similar. I'm trying to create a custom function that posts a checkbox variable, but within the context of the function that returns a function, I can't pass the variables across.
If I put an alert(formName); etc, in the postCheckbox function, it confirms the values are being passed across, but alert(document.formName.tagName); , for example, gives 'undefined'.
Why does the function not abstract out in this case?
Many thanks,
Dan.
$(document).ready(function(){
    initialiseForm("#PollX");
    initialiseForm("#PollY");
    initialiseForm("#RateX");
});
function initialiseForm(formId) {
     $(formId).bind('submit', getPost(formId));
}
function getPost(formId) {
     return function() {
         switch(formId){
            case "#PollX":
                postCheckbox("PollX", "PollXGroup", "div#PollXDiv", "
PollXresults.php?PollXRadio=")
                return false;
            break;
            case "#PollY":
                //do something else
                return false;
            break;
            case "#RateX":
                // do more things
                postCheckbox("RateX", "RateXGroup", "div#RateXDiv", "RateXresults.php?RateXRadio=")
                return false;
            break;
            default:
                return false;
            }   
     };
}
function postCheckbox(formName, radioGroupName, replacementBlock, postURL){
    for (var i=0; i < document.formName.radioGroupName.length; i++) {
        if (document.formName.radioGroupName[i].checked){
            var radioValue = document.formName.radioGroupName[i].value;
        }
    }
    if(radioValue){   
        $(replacementBlock).load(postURL + radioValue).fadeIn("slow");
    }
}
--
Daniel Eastwell
Portfolio and articles:
<a href="http://www.thoughtballoon.co.uk">
http://www.thoughtballoon.co.uk</a>
Blog:
<a href="http://www.thoughtballoon.co.uk/blog">http://www.thoughtballoon.co.uk/blog</a>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

I've fixed my own problem with a hack of a kind. which is a bit disappointing as I'm not sure what was causing it. I changed the values called to be 'form#fPollX', in order to pass that straight to the $() jQuery function and stripped the id value off the end. In order to pass that value to the function, the function's declared in the bind(), so it's a local variable.
Terrible I'm sure - if that's bad practice, I'd love to know why.
Cheers,
Dan.
$(document).ready(function(){
    initialiseForm("form#fPollX");
    initialiseForm("form#fPollY");
});
function initialiseForm(formID) {
    if (!document.getElementById) return false;
    var theForm = formID.split("#")[1];
    if(document.getElementById(theForm)){
        $(formID).bind("submit", function post() {
           switch(formName){
           case "fPollX":
            alert('hello X ' + formName);
            return false;
            break;
           case "fPollY":
            alert('hello Y ' + formName);
            return false;
            break;
           default:
            return false;
          }   
        });
    }
}<br clear="all">
--
Daniel Eastwell
Portfolio and articles:
<a href="http://www.thoughtballoon.co.uk">
http://www.thoughtballoon.co.uk</a>
Blog:
<a href="http://www.thoughtballoon.co.uk/blog">http://www.thoughtballoon.co.uk/blog</a>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Hi all,
I've just started using jquery, and as you can tell from my blog, very close to just having started javascript, but I'm determined to do things properly.
I've written a post function that, for the sake of argument, pops an alert when you submit a form.
$(document).ready(function(){
    initialiseForm();
});
function initialiseForm() {
$("form#fPollX").bind("submit", post());
}
function post() {<br clear="all"> alert('hello');
 return false;
}
This works fine. Now I want to abstract it out so that any form can (for this version anyway) return its own message, based (currently) on a switch in post(). Either or neither form or both may be on the page.
So now I've tried:
$(document).ready(function(){
    initialiseForm("fPollX");
    initialiseForm("fPollY");
});
function initialiseForm(formID) {
    if (!document.getElementById) return false;
    if(document.getElementById(formID)){
        theForm = "form#" + formID;
        $(theForm).bind("submit", post(formID));
    }
}
function post(formName) {
    switch(formName){
    case "fPollX":
        alert('hello X ' + formName);
        return false;
    break;
    case "fPollY":
        alert('hello Y ' + formName);
        return false;
    break;
    default:
        return false;
    }   
}
The problem with this, I think is the fact I'm trying to 'bind' a function to a variable using the $( ) function. In this case, the post() function isn't called, it just runs (
e.g. alerting "hello X fPollX") the correct case, if the form is on the page).
The question here is either: how do I bind a function to a submit event, if I don't know exactly what the form's going to be called in the function?
Many thanks in advance for your help,
All the best,
Dan.
--
Daniel Eastwell
Portfolio and articles:
<a href="http://www.thoughtballoon.co.uk">http://www.thoughtballoon.co.uk</a>
Blog:
<a href="http://www.thoughtballoon.co.uk/blog">http://www.thoughtballoon.co.uk/blog</a>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/