Posts Tagged: jquery
-
Feb 03, 2011
Comments OffGet and Set Form Element Values using jQuery
One of the most frequently asked questions about jQuery is to Get or Set values of HTML Form elements. The jQuery val() method lets you get and set values of form elements. Note: jQuery uses the val() method to both get and set values of form elements. If you pass a new value to the...
-
Feb 03, 2011
Comments OffjQuery UI 1.8.9 Released
If you are using the jQuery UI library in your applications, then an important update is that the jQuery UI team has shipped a maintenance release – jQuery UI 1.8.9 The fixes are mainly for the Accordion, Datepicker and Tabs control and for the Draggable and Sortable interactions. The DatePicket widget now has support for...
-
Nov 30, 2010
Comments OffQuick & Easy Way to Implement Drag n Share With jQuery
You must have seen the drag to share functionality on Mashable that lets visitors share the content on popular social networks intuitively. Just drag one of the images in an article and you’ll be able to share the article on your favorite social network by dropping the dragged image over its icon. Even, Nettuts has...
-
Nov 30, 2010
Comments OffCreate a Twitter AJAX Button with MooTools, jQuery, or Dojo
There’s nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience. Of course widgets like that take many hours to perfect, but it doesn’t take long for that effort to be rewarded with above-average user retention and buzz. One of the widgets I love is Twitter’s “Follow”...
-
Nov 30, 2010
Comments OffLoad JSON data with jQuery, PHP and MySQL
This post shows how to populate a select box based on the value of the another, by getting JSON data with jQuery from a PHP script that gets the data from a MySQL database. HTML Code The initial HTML code looks like this: Fruit: Apple Orange Banana Pear Variety: The set of fruit names was...
-
Nov 30, 2010
Comments OffjQuery UI DatePicker: Disable Specified Days
One project I’m currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI’s DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the need to prevent specific days from being picked. Here’s the jQuery JavaScript I...
-
Nov 30, 2010
Comments OffAll we need to begin with is the button that triggers the palette generation and a DIV container that will hold all of the DIVs my jQuery creates. The CSS .dcolor { height:40px; } .dtext { } .dwrapper { width:200px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; } These CSS classes act as containers for the text DIV I generate and the color-displaying DIV I generate. Those two DIVs are held in one wrapping DIV. The jQuery JavaScript /* when the dom is ready */ $(document).ready(function() { $(‘#get-colors’).click(function() { //my colors array var colors = new Array(); //get all elements $(‘*’).each(function() { if($(this).css(‘background-color’) && $(this).css(‘background-color’) != ‘transparent’) { colors.push($(this).css(‘background-color’)); } if($(this).css(‘color’)) { colors.push($(this).css(‘color’)); } if($(this).css(‘border-color’)) { colors.push($(this).css(‘border-color’)); } }); //remove dupes and sort colors.sort(); //create a color block for all of them jQuery.each(colors,function(it,value) { if(!$(‘div[rel=\'' + value + '\']‘).length) { //inject the wrapper var wrapper_id = ‘w’ + it; $(‘
As I continue to learn jQuery, I think it’s important that I begin by porting over scripts I’ve created using MooTools. One of those scripts is my Color Palette Generator script, which debuted on bagesh singh’s blog. For those of you that missed it, my script analyzes all of the colors on the page (minus images)...‘).appendTo(‘#colors-wrapper’); //inject the color div $(‘‘).appendTo(‘#’ + wrapper_id); //inject text div $(‘‘ + value + ‘‘).appendTo(‘#’ + wrapper_id); } }); }); }); When someone clicks the “Get Colors” button, I grab every element in the DOM and collect its color, background-color, and border-color. Once I’ve cycled through all of the elements, cycle through all of the colors and display them as DIVs inside my colors-wrapper element. You’ll note that I utilized therel attribute to prevent duplicates.">Color Palette Generator Using jQueryAs I continue to learn jQuery, I think it’s important that I begin by porting over scripts I’ve created using MooTools. One of those scripts is my Color Palette Generator script, which debuted on Eric Wendelin’s blog. For those of you that missed it, my script analyzes all of the colors on the page (minus images) and builds a palette of colors. Here it is in some jQuery goodness. The XHTML All we need to begin with is the button that triggers the palette generation and a DIV container that will hold all of the DIVs my jQuery creates. The CSS .dcolor { height:40px; } .dtext { } .dwrapper { width:200px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; } These CSS classes act as containers for the text DIV I generate and the color-displaying DIV I generate. Those two DIVs are held in one wrapping DIV. The jQuery JavaScript /* when the dom is ready */ $(document).ready(function() { $(‘#get-colors’).click(function() { //my colors array var colors = new Array(); //get all elements $(‘*’).each(function() { if($(this).css(‘background-color’) && $(this).css(‘background-color’) != ‘transparent’) { colors.push($(this).css(‘background-color’)); } if($(this).css(‘color’)) { colors.push($(this).css(‘color’)); } if($(this).css(‘border-color’)) { colors.push($(this).css(‘border-color’)); } }); //remove dupes and sort colors.sort(); //create a color block for all of them jQuery.each(colors,function(it,value) { if(!$(‘div[rel=\'' + value + '\']‘).length) { //inject the wrapper var wrapper_id = ‘w’ + it; $(‘‘).appendTo(‘#colors-wrapper’); //inject the color div $(‘‘).appendTo(‘#’ + wrapper_id); //inject text div $(‘‘ + value + ‘‘).appendTo(‘#’ + wrapper_id); } }); }); }); When someone clicks the “Get Colors” button, I grab every element in the DOM and collect its color, background-color, and border-color. Once I’ve cycled through all of the elements, cycle through all of the colors and display them as DIVs inside my colors-wrapper element. You’ll note that I utilized therel attribute to prevent duplicates.
-
Nov 19, 2010
Comments OffAjax login validation system in PHP using jQuery
Last time, I’ve showed you how to check user availability in Ajax using jQuery’s fading effect. But I’ve just shown the example without connecting the database and some people have faced problem with database connecting solution of that problem.In this post, I’ll show you how to use Ajax login system in php using jQuery and...
-
Nov 18, 2010
Comments OffjQuery plugin: word-counter for textarea
Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post,...
-
Nov 10, 2010
Comments OffExpand-collapse toggle panel (div) using jquery
In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed. View LIVE DEMO Now let’s look at the html code, <div class="msg_list">...
-
Nov 10, 2010
Comments OffTop Floating message box using jQuery
I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with...
-
Nov 08, 2010
Comments OffSleek and Smooth animated menu using jQuery
Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff in blog after long time and I came across a website, whose menu impressed me a lot. But checking it in a while, I found it it was built using mootools. Since it was...
-
Jul 02, 2010
Comments OffSexy Drop Down Menu w/ jQuery & CSS
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is...
-
Jul 02, 2010
Comments Off
-
Jul 02, 2010
Comments OffjQuery Tutorial : Horizontal Animated Menu
In this occasion,...
-
Jul 02, 2010
Comments Off38 jQuery And CSS Drop Down Multi Level Menu Solutions
Hello again,...
-
Jul 02, 2010
Comments Off
-
Mar 19, 2010
Comments OffAnimated content navigation effect using jquery
I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link,...
-
Mar 19, 2010
Comments OffTop Floating message box using jQuery
Last time,...
-
Mar 19, 2010
Comments Off