July 22, 2012

how to navigate from one tab to other by clicking on a hyperlink using jquery ui tabs

Question by Hardworker

Could any one help me on how to navigate from first tab to second tab by clicking a hyperlink in first tab using JQUERY UI tabs?

Answer by Shant

You can refer the jQuery UI Tabs documentation for your problem, its very well mentioned

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

Answer by Starx

You can switch between tabs freely by following the indexes using select method.
An example:

$("#tabs").tabs('select', 1);

Attach this snippet to the click handler of the link on the content of first tabs.

Example:

For a link like this:

<a href="some.html" id="nextTab">Go to Next Tab</a>

jQuery:

$("#nextTab").click(function() {
     $("#tabs").tabs('select', 1);
});
March 29, 2012

How to develop a Jquery plugin to find the first child that match with a selector?

Question by Ivan

I’m trying to make a Jquery plugin (findFirst()) to find the first child with a given characteristics (something in the middle of the find() and children() functions. For instance, given this markup:

<div id="start">
    <div>
        <span>Hello world</span>
        <ul class="valid-result"> ... </ul>
        <ul class="valid-result">
            <li>
                <ul class="not-a-result"> ... </ul>
            </li>
        </ul>
        <div>
            <ul class="valid-result"> ... </ul>
        </div>
    </div>
</div>

If you ask for $("#start").findFirst('ul') it should return all ul lists that I have tagged with the valid-result class, but not the ul with class not-a-result. It is, this function has to find the first elements that matches with a given selector, but not the inner elements that match this selector.

This is the first time I try to code a Jquery function, and what I’ve already read doesn’t helps me too much with this. The function I have developed is this:

jQuery.fn.findFirst = function (sel) {
    return this.map(function() {
        return $(this).children().map(function() {
            if ($(this).is(sel)) {
                return $(this);
            } else {
                return $(this).findFirst(sel);
            }
        });
    });
} 

It works in the sense it tries to return the expected result, but the format it returns the result is very rare for me. I suppose the problem is something I don’t understand about Jquery. Here you have the JFiddle where I’m testing.

EDIT

The expected result after $("#start").findFirst('ul') is a set with all UL that have the class ‘valid-result’ BUT it’s not possible to use this class because it doesn’t exist in a real case (it’s just to try to explain the result).

This is not equivalent to first(), because first returns only one element!

Answer by charlietfl

You could do something like this:

var selector='ul';

var $results= $('#start '+selector).not( selector +' '+selector);

The not() method will exclude elements that match selector but are also descendents of the same selector

Answer by Starx

You don’t need to build a plugin. use jQuery inbuilt .first() and as suggested by Mark, you can also use first selector :first

$("#yourselector ul").first();

Here is the usages in your case

$("#start").find("ul").first().css("background", "red");
   //For Short $("#start ul").first()

To use class filter, use the attribute selector

$("#start").find("ul[class=valid-result]").first().css("background", "red");
   //For Short $("#start ul[class=valid-result]").first()

Demo


Update

If you want to highlight only the outer ul’s with class valid-result then first() is not needed at all

$("#start ul[class=valid-result]").css("background", "red");

But, since the inner ul will also share the background on my example, you might have to set different background for inner ul‘s. Here is an example


Update 2

If you want to select the first level of the <ul> then

$("#start div").chilrent("ul"); //this will return the first level of ul inside the div
March 24, 2012

Rounded Corner single Dropdown menu with Hover functionality

Question by Anandhan

I’m new to jquery & javascript.. I need to create a drop-down with rounded corner that will work based on hover as shown below..

enter image description here

Answer by Starx

Give border-radius on the hover event

Using CSS

select:hover {
    border-radius: 10px;
    -webkit-border-radius: 10px; /* For safari */
    -moz-border-radius: 10px; /* For mozilla */
}

Here is an example using jQuery Snippet

$("select").hover(function() {
    $(this).css("borderRadius",10px);
});
March 14, 2012

load content when scroll over to bottom of window

Question by azarudeen ajees

I create a program for display hotels when particular location clicked .In this i want to display first 10 hotels and then user scroll to bottom it will display another 10 hotels continously it loads till hotel list ends.
I need a jquery for this project in which it has two php file.
1.The first file for load first 10 hotels.
2. second php file for load balance hotels.

thanks in advance

Answer by Starx

What you are searching for is jQuery Infinte Scroll Plugin.

February 27, 2012

How can we specify rules for jquery validation plugin by class?

Question by Zesty

The jQuery Validation plugin works great and is very easy to use:

$(".selector").validate({
})

Just by setting css classes like “required email”, the default message will be displayed.

However, I need to customize the messages. The documentation says you can specify rules using a key-value pair for elements and their corresponding messages:

$(".selector").validate({
   rules: {
     name: "required",
     email: {
       required: true,
       email: true
     }
   },
   messages: {
     name: "Please specify your name",
     email: {
       required: "We need your email address to contact you",
       email: "Your email address must be in the format of name@domain.com"
     }
   }
})

But, it is not practical to specify a rule for every form element, especially server-generated controls in ASP.NET. Is it possible to specify rules that would apply to ALL elements? Or can I use a class selector somehow?

I tried the following, but it didn’t work:

$("#frmMyForm").validate
({
    rules:
    {
        $(".required email"):
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        $(".required email"):
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

That seemed to have a syntax error – the plugin didn’t do anything. Then I tried:

$("#frmMyForm").validate
({
    rules:
    {
        ".required email":
        {
            required: true,
            email: true
        }
    },
    messages:
    {
        ".required email":
        {
            required: "Please enter your email address",
            email: "Your email address must be in the format of name@domain.com"
        }
    }
});

This didn’t have any syntax error – the plugin worked, but it ignored the rules/custom messages. Has anyone here used jQuery Validation plugin? If so, how did you apply rules/custom messages to multiple elements?

Thanks!

Answer by Sparky672

For the purposes of my example, this is the base starting code:

HTML:

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_2" />

JS:

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

Option 1) You can assign classes to your fields based on desired common rules and then assign those rules to the classes. You can also assign custom messages.

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

The .rules() method must be called after invoking .validate()

JS:

$('#myForm').validate({
    // your other plugin options
});

$('.num').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: {
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

Option 2a) You can pull out the groups of rules and combine them into common variables.

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

Option 2b) Related to 2a above but depending on your level of complexity, can separate out the rules that are common to certain groups and use .extend() to recombine them in an infinite numbers of ways.

var ruleSet_default = {
        required: true
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

var ruleSet3;
$.extend(ruleSet3, ruleSet_1, ruleSet_2); // combines sets 2 & 1 into set 3.  Defaults are included since they were already combined into sets 1 & 2 previously.

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1,
        field_4: ruleSet3
    }
});

End Result:

  • field_1 will be a required number no less than 3.

  • field_2 will just be a required number.

  • field_3 will be a required number no greater than 99.

  • field_4 will be a required number between 3 and 99.

Answer by Starx

jQuery.validator.addClassRules(); will attach the validation to class, but there is no option for messages, it will use the general error messages.

If you want that to work then, you should refactor the rules like this

$.validator.addMethod(
     "newEmail", //name of a virtual validator
     $.validator.methods.email, //use the actual email validator
     "Random message of email"
);

//Now you can use the addClassRules and give a custom error message as well.
$.validator.addClassRules(
   "email", //your class name
   { newEmail: true }
 );
August 30, 2010

Preloader with JQuery OR Advanced Page Load Behavior with jQuery Progress Bar

Question by Junaid Saeed

We have a jQuery Progress Bar. Is there a way we can have the progress bar displaying the loading of an HTML page which has PHP, CSS & JavaScript and all in it?

Like a preloader and when the page has been downloaded and rendered fully then display it.

If not with progress bar can we make a preloader with jQuery?

Answer by Starx

Once.. I tried to create this, but It was not pretty. I listed all the things I need to have on a page and increased the progress bar One by one as it was loaded. It was very tremendously long chain. Here is a sample of what I did.

$.getScript('js/lib/ui.js',function() { //Load the Jquery UI
    //Call back function after the loading is complete

    $("#progressinfo").html("Loading Widgets ..."); //Give the information 

    $.getScript('js/lib/widget.js',function() { // Load the jquery ui Widget
    //Call back function after the loading is complete

        $("#progressinfo").html("Loading Widgets: Progress Bar ..."); // Inform

        $.getScript('js/lib/widgets/progressbar.js',function() { // Finally load the Jquery UI progressbar
            //Call back function after the loading is complete

            $("#progressbar").progressbar({ value: 5 }); // change the value of the UI informing the total amount of loadding completion                                             
            $("#progressinfo").html("Loading Widgets: some script ..."); //Inform of another script

            $.getScript('somescript.js',function() { // Load another script
            //Call back function after the loading is complete

               $("#progressbar").progressbar({ value: 6 }); // change the value of the UI informing the total amount of loadding

            });
        });
    });    
});
August 1, 2010

Do you know a jQuery plugin for video file upload?

Question by Morteza M.

I need a jQuery plugin for uploading video files. it should generate some pictures out of movie as it is uploading ( not after the file uploaded ). Do you know such a plugin? if there is no plugin with this feature, can you suggest me some tutorials or articles about doing such a thing?

Answer by Nick Craver

You can’t (as of this answer) do this in JavaScript, it’s forbidden from touching the file like this (for hopefully obvious security reasons). You can find a flash based solution, maybe, but video editing is still a very intensive thing. For thumbnails, you’re best off doing this server-side.

Your comment dismisses this because it’s “time and resource consuming”…trust me, you doing this server-side correctly and returning a few KB in thumbnails is far faster than flash opening and playing with a video to get thumbnails (then uploading those too). Also consider it from a security standpoint, it’s consistent and prevents your uploader from sending fake thumbnails that don’t match the video at all.

Answer by Starx

In My Opinion you cannot find a uploading plugins based on its extension. Like Document uploader, Image uploader, video uploader, game uploader, sql uploader. This is not a genuine question, instead you can a uploader script to upload all these. And what you decide to do, or how you decide to present the uploaded file, its up to you.

Here is a plugin, for all in one purpose

Uploadify

http://www.uploadify.com/

However here are some links which can help

http://blog.amnuts.com/2007/06/22/create-a-random-thumbnail-of-a-video-file/

http://forum.coppermine-gallery.net/index.php?topic=38774.0

http://www.webmasterworld.com/forum88/1371.htm

July 1, 2010

Looking for jQuery carousel

Question by Mike

Looking for jQuery carousel script that can do the following or similar I can tweak.

Go from this

imgur.com/hj9GL.gif

to this on rollover/hover (also rotate slowly on its own)

imgur.com/L2XFp.gif

Can anyone point me in the right direction? Thanks!

Answer by Starx

Create the carousel based on <div> rather than <img> because you can use background property in <div> and you can easily change it hover.

This is a much simpler approach to what you want to accomplish.

...

Please fill the form - I will response as fast as I can!