All posts tagged JQuery for beginner

How to bind an event in jquery after content load dynamically

by the coder on May 29, 2010 in JQuery for beginner with 2 Comments

Today i face a problem while i am developing a client management system for one of my US client. The problem is that when i press button it call a php page . And the content load by jquery ajax call.
In that content there is a delete button. But the delete button event is not fire when i press button. Then i contact with one of my friend for this solution . He told me that i have to bind the method in the content after load the content. I search in my site , but didn’t able to get a better solution.
Al last after experimenting the code i am able to solve the problem. So that i think that this solution will help you to solve your problem .

View Demo:

The java script code is


 <script type="text/javascript">

  $(function()
  {
	

 $("#Search").click(function(){
	
$("#load").html(' <input type="button"  id="delete" value="Search" />');
		 
$("#delete").click(function(){

alert(this.id);
});
		  
});

 }); 
 </script>

The html code is


<div id="content">
 <input name="Search" type="submit" class="submit block" id="Search" value="Search" />
<div id="load"></div>

If you have any question then please inform us. We try to help. Hope this tutorial will help you.

How do you get the current value from a select list

by the coder on May 29, 2010 in JQuery for beginner with No comments

Today i am developing a client management system where i fall a problem, i am not able to get the current select list values. I search on google but visiting many site i am not get good solution. At last i got the solution in one blog . So that i think to share this problem solution with you. This problem is search by many people in google by “How do you get the current value from a select list?”

To get the current value is very simple using val().

$('#selectList').val();

View Demo:

$('#selectList :selected').text()

I will create the demo and code below. This would be how to set a select multiple to an array called, “foo”.

      var foo = [];

      $('#multiple :selected').each(function(i, selected){

          foo[i] = $(selected).text();

      });

jQuery.noConflict – Resolving conflicts with other javascript libraries that use $() function

by the coder on April 24, 2010 in help, jQuery, JQuery for beginner with No comments

One of the reasons that make a software popular is its extensions and plugins. jQuery has plenty of plugins that do almost anything you want, from simple button hide to full blown galleries. Plugins let non developers easily add functionality they need to their websites and there are times when one might include more than one javascript library such as prototype.js, YUI or mootools with jQuery. They all use $ as their main function name. Including second library might brake the behavior of the first one. To resolve such cases jQuery introduces .noConflict() method.

When you call .noConflict() jQuery will return $() to it’s previous owner and you will need to use jQuery() instead of shorthand $() function.

.noConflict() usage example (From jQuery Docs site)

    <html>
    <head>
    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>
    jQuery.noConflict();
    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
    jQuery("div").hide();
    });
    // Use Prototype with $(...), etc.
    $('someid').hide();
    </script>
    </head>
    <body></body>
    </html>

You can also use the following code snippets to still use $() in your code, but with one drawback, you will not have access to your other library’s $() method.

 // Method 1
    jQuery(document).ready(function($){
    $("div").hide();
    });

    // Method 2
    (function($) {
    /* some code that uses $ */
    })(jQuery);

TIP:
Don’t forget that you can always assign jQuery to any other variable name to use it as your shorthand: var $_ = jQuery;
Original source : http://jquery-howto.blogspot.com/search/label/beginner

Build a Simple Image Slideshow with jQuery Cycle

by the coder on April 23, 2010 in image slideshow, jQuery with No comments

Image slideshows are a popular method of displaying numerous sequential photographs in web design.

By making use of the handy Cycle plugin for jQuery, we can easily create a slideshow of our own, complete with previous and next navigation controls.

Not a master of Javascript? Don’t worry, the Cycle plugin makes it a breeze to add slideshow functionality to your site, with only a few lines of code required to get things up and running.

Bellow is the screen shot of the slide show.

You can see a demo of the site.
http://line25.com/wp-content/uploads/2010/slideshow/demo/demo.html
This slide show article is  Written by Chris Spooner from http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle. Thanks Chris Spooner for his article.
For more details of the slide show you can visit this link.http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

There you can got help how to make the arrow from psd and other coding.