There are some situations where you need to change the content display dynamically. Like, you have to change font color and background color of your text or you have to make image bright. You can do these things by applying styles dynamically through javascript.
Here I gave you a solution to fulfill such type of requirement by using jQuery functions. We are using jQuery mouseover() function to highlight text or image on your webpage whenever we place mouse on it.
Below is the code to make text or image highlight whenever we place mouse on it.
<html>
<head>
<title>highlight the text and image dynamically using jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#parent').mouseover(function() {
$('#child1').css({
'background-color': 'green',
'font-weight': 'bold',
'color': 'red'
});
$('#child2').css({
'background-color': 'cyan',
'font-weight': 'bold',
'color': 'blue'
});
$('#img1').css({
'opacity':1.0
});
});
$('#parent').mouseout(function() {
$('#child1').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#child2').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#img1').css({
'opacity': 0.4
});
});
});
</script>
</head>
<body>
<div id="parent">
<div id="child1">this text from first child</div>
<div id="child2">this text from second child</div>
<img src="img1.jpg" id="img1" style="opacity:0.4" />
</div>
</body>
</html>
Here we have two <div> tags whose id's are child1, child2 and one <img> tag whose id is img1 with in parent <div> tag whose id is "parent".
We are applying jQuery mouseover() function to the parent <div> tag by using $('#parent').mouseover(function() { }. Within this function we are applying our required properties to different elements.
$('#child1').css({
'background-color': 'green',
'font-weight': 'bold',
'color': 'red'
});
$('#child2').css({
'background-color': 'cyan',
'font-weight': 'bold',
'color': 'blue'
});
will change the font color and background color of our two <div> tags to our required colors whenever we place mouse on it.
$('#img1').css({
'opacity':1.0
});
will make the image bright whenever we place the mouse on it.
Here we are also using the jQuery mouseout() function to roll back the changes of our elements.
$('#parent').mouseout(function() {
$('#child1').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#child2').css({
'background-color': 'white',
'font-weight': 'normal',
'color': 'black'
});
$('#img1').css({
'opacity': 0.4
});
});
will change the text font color, background color to black, white and will make the image blurred whenever mouse out from the content.
Showing posts with label JQuery example. Show all posts
Showing posts with label JQuery example. Show all posts
Tuesday, 15 January 2013
Apply CSS styles using jQuery
Here I am explaing how to apply CSS styles using jQuery. It is simple to apply styles using jQuery.
<html>
<head>
<title>This is jquery example for applying bold and italic for given elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').addClass('boldtext');
$('#pid').addClass('italictext');
});
</script>
<style type="text/css">
.boldtext
{
font-weight:bold;
}
.italictext
{
font-style:italic;
}
</style>
</head>
<body>
<p>This is jquery example to make text as bold by applying class name to 'p' element itself</p>
<p id="pid">
This is jquery example to make text as italic by applying class name to 'p' id
</p>
</body>
</html>
In the above code we have two <p> tags. We make the these <p> tags text bold and italic bys using jQuery as given below.
$('p').addClass('boldtext');
$('#pid').addClass('italictext');
In the first line we make the all <p> tags text bold by applying "boldtext" CSS class to $('p'). $('p') means we are accessing all <p> tags.
In the second line we make the HTML tag texts whose id is "pid" as italic by applying "italictext" CSS class to $('#pid'). $('#pid') means we are accesing the HTML tags whose id is "pid".
Place all above HTML code in a HTML file and open it in any browser. You can find that all text in bold and only second line is in italic because we did all <p> tags text in bold by using $('p').addClass('boldtext') and we apply the italic style to second <p> tag only by using $('#pid').addClass('italictext').
Some times you have to apply different styles to alternative elements. For example, if you have some div tags and you need to apply different styles to alternative elements. For this type of requirement jQuery provides good solution as shown below.
<html>
<head>
<title>This is jquery example for applying the styles for alternative elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:odd').addClass('boldtext');
$('div:even').addClass('italictext');
$('p:eq(2)').addClass('italicbold');
});
</script>
<style type="text/css">
.boldtext
{
font-weight:bold;
}
.italictext
{
font-style:italic;
}
.italicbold
{
font-weight:bold;
font-weight:bold;
}
</style>
</head>
<body>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
</body>
</html>
As shown above, we apply the different styles for alternative div tags by using below jQuery code.
$('div:odd').addClass('boldtext');
$('div:even').addClass('italictext');
$('div:odd').addClass('boldtext') means "boldtext" CSS class added to odd number div tags.
$('div:even').addClass('italictext') means "italictext" CSS class added to even number div tags.
The above HTML code also includes one more functionality. That is $('p:eq(2)').addClass('italicbold'). $('p:eq(2)') represents the 3rd <p> tag element of all <p> tags in the HTML code. "eq" is the jQuery function, it will take index of the elements. In jQuery index starts from 0. Here we are making 3rd <p> tag text as italic and bold by applying "italicbold" CSS class to it.
<html>
<head>
<title>This is jquery example for applying bold and italic for given elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').addClass('boldtext');
$('#pid').addClass('italictext');
});
</script>
<style type="text/css">
.boldtext
{
font-weight:bold;
}
.italictext
{
font-style:italic;
}
</style>
</head>
<body>
<p>This is jquery example to make text as bold by applying class name to 'p' element itself</p>
<p id="pid">
This is jquery example to make text as italic by applying class name to 'p' id
</p>
</body>
</html>
In the above code we have two <p> tags. We make the these <p> tags text bold and italic bys using jQuery as given below.
$('p').addClass('boldtext');
$('#pid').addClass('italictext');
In the first line we make the all <p> tags text bold by applying "boldtext" CSS class to $('p'). $('p') means we are accessing all <p> tags.
In the second line we make the HTML tag texts whose id is "pid" as italic by applying "italictext" CSS class to $('#pid'). $('#pid') means we are accesing the HTML tags whose id is "pid".
Place all above HTML code in a HTML file and open it in any browser. You can find that all text in bold and only second line is in italic because we did all <p> tags text in bold by using $('p').addClass('boldtext') and we apply the italic style to second <p> tag only by using $('#pid').addClass('italictext').
Some times you have to apply different styles to alternative elements. For example, if you have some div tags and you need to apply different styles to alternative elements. For this type of requirement jQuery provides good solution as shown below.
<html>
<head>
<title>This is jquery example for applying the styles for alternative elements</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div:odd').addClass('boldtext');
$('div:even').addClass('italictext');
$('p:eq(2)').addClass('italicbold');
});
</script>
<style type="text/css">
.boldtext
{
font-weight:bold;
}
.italictext
{
font-style:italic;
}
.italicbold
{
font-weight:bold;
font-weight:bold;
}
</style>
</head>
<body>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<div>This is jquery example to make odd div tags bold and even div tags italic by applying two class names to 'div' element itself</div>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
<p>This is jquery example to make 3rd 'p' tag text as bold and italic</p>
</body>
</html>
As shown above, we apply the different styles for alternative div tags by using below jQuery code.
$('div:odd').addClass('boldtext');
$('div:even').addClass('italictext');
$('div:odd').addClass('boldtext') means "boldtext" CSS class added to odd number div tags.
$('div:even').addClass('italictext') means "italictext" CSS class added to even number div tags.
The above HTML code also includes one more functionality. That is $('p:eq(2)').addClass('italicbold'). $('p:eq(2)') represents the 3rd <p> tag element of all <p> tags in the HTML code. "eq" is the jQuery function, it will take index of the elements. In jQuery index starts from 0. Here we are making 3rd <p> tag text as italic and bold by applying "italicbold" CSS class to it.
Tuesday, 27 November 2012
ASP.NET TextBox Watermark Effect using jQuery
This
short article demonstrates how to create a watermark effect on your
TextBox and display instructions to users, without taking up screen
space.
Note
that for demonstration purposes, I have included jQuery code in the
same page. Ideally, these resources should be created in separate
folders for maintainability.
Let us quickly jump to the solution and see how we can create a watermark effect on your TextBox using client-side code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>TextBox WaterMark</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style type="text/css">
.water
{
font-family: Tahoma, Arial, sans-serif;
color:gray;
}
</style>
<script type="text/javascript">
$(function() {
$(".water").each(function() {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
$(".water").focus(function() {
$tb = $(this);
if ($tb.val() == this.title) {
$tb.val("");
$tb.removeClass("water");
}
});
$(".water").blur(function() {
$tb = $(this);
if ($.trim($tb.val()) == "") {
$tb.val(this.title);
$tb.addClass("water");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="smallDiv">
<h2>TextBox Watermark Demonstration</h2> <br />
<asp:TextBox ID="txtFNm" class="water" Text="Type your First Name"
Tooltip="Type your First Name" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtLNm" class="water" Text="Type your Last Name"
Tooltip="Type your Last Name" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<br /><br />
Tip: Click on the TextBox to start typing. The watermark
text disappears.
</div>
</form>
</body>
</html>
The
code shown above adds the “watermark” behavior to controls marked with
the ‘class=water’ attribute. When the user loads the page, a watermarked
textbox displays a message to the user. As soon as the watermarked
textbox receives focus and the user types some text, the watermark goes
away. This technique is a great space saver as you can use it to provide
instructions to the user, without using extra controls that take up
valuable space on your form.
The ‘Tooltip’ attribute applied to the textbox is crucial to this
example. The ‘Tooltip’ gets rendered as ‘title’. Observe the code, as we
use this ‘title’ property to compare it to the textbox value and remove
the watermark css, when the textbox control gains focus
$(".water").focus(function() {
$tb = $(this);
if ($tb.val() == this.title) {
$tb.val("");
$tb.removeClass("water");
}
});
Similarly
when the user moves focus to a different control without entering a
value in the textbox, we add the watermark css again.
$(".water").blur(function() {
$tb = $(this);
if ($.trim($tb.val()) == "") {
$tb.val(this.title);
$tb.addClass("water");
}
});
The water class declared in Demos.css looks like this:
.water
{
font-family: Tahoma, Arial, sans-serif;
font-size:75%;
color:gray;
}
When the page loads for the first time, the watermark is visible as shown here:
When
the user enters the First/Last Name and submits the form, the watermark
behavior is no more needed to be displayed. This is achieved by
comparing the ‘title’ with the ‘value’ of the textbox. If the ‘value’
does not match the ‘title’, this indicates that the user has entered
some value in the textboxes and submitted the form. So in this case we
remove the watermark appearance.
$(".water").each(function() {
$tb = $(this);
if ($tb.val() != this.title) {
$tb.removeClass("water");
}
});
After the user enters the details and submits the form, the result is similar to the one shown here, without the watermark:
Thanks
to Arnold Matusz for sharing the tip about the tooltip property. The
code has been tested on IE 7, IE 8, Firefox 3, Chrome 2, Safari 4
browsers
Thursday, 22 March 2012
Jquery videos Tutorials, Resources, Tips And Tricks: Ultimate Collection
55 Jquery Tutorials, Resources, Tips And Tricks: Ultimate Collection
If for whatever reason you don’t know jQuery, it is a “write less, do more” JavaScript library. It has many Ajax and JavaScript features to allow you enhance semantic coding and user experience.From jQuery homepage – “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”
jQuery definitely is one of the biggest trends coming in up-to-date designs and the best of all, everything is done without countless code lines. Keeping in mind such aspects I created hopefully pretty complete collection of jQuery sites, tip and trick articles, video screencasts, tutorials, cheat sheets and lot’s more. Took a while to compile and research was really solid. Enjoy as always!
Getting Started
1.7 reasons why you really should learn jQuery
2. jQuery Crash Course
Introduction to Jquery, further reading and basics.
Huge Tutorial Series From Beginner To Intermediate User, Tips And Tricks
3. jQuery for Absolute Beginners: The Complete Series : Video Tutorials
Over the course of about a month, ThemeForest released fifteen video tutorials that teach you EXACTLY how to use the jQuery library. You’ll start by downloading the library and eventually work our way up to creating an AJAX style-switcher. Beautiful learning and resource!
4. 10 jQuery Tutorials for Designers by WebDesignerWall
This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.
5.4 Jquery Easy Tips And Tricks Tutorial
6.jQuery Essentials Presentation at MinneWebCon (102 pages)
Very well written jquery essentials presentation. Really worth the time.
7.12 Useful and Handy jQuery Tips and Tricks
8.Improve your jQuery – 25 excellent tips
Great tips, even some intermediate users could now know few of these.
9.Build An Incredible Login Form With jQuery
In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.
Demo
10.Create a Photo Admin Site Using PHP and jQuery : ScreenCast
11.Building a jQuery-Powered Tag-Cloud
12.WordPress Sidebar Turned Apple-Flashy Using jQuery UI
This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.
13.How to Load In and Animate Content with jQuery
Demo
14.Create a Slick Tabbed Content Area using CSS & jQuery
Demo
15.Styling Buttons and Toolbars with the jQuery UI CSS Framework
Coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.
Demo
16.jQuery Slideshows With the Cycle Plugin
The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.
Demo
17. InnerFade with JQuery
InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings.
Demo
18.Creating a Dynamic Poll with jQuery and PHP
Demo
19.Setting Equal Heights with jQuery
Demo
20.jQuery Tools: Scrollable
Scroll your HTML with eye candy
Demo
21.jQuery Tools: Tooltips
Demo
22.jQuery Tools: Overlay
Yet another, beautiful image displaying way – similar to popular Lightbox, but this one seems to be more elegant.
Demo
23.jQuery Tools: Expose
Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Works like a charm if you want to stand out.
Demo
24.Create an amazing music player using mouse gestures & hotkeys in jQuery: Screencast
Demo
25.Create an Amazon Books Widget with jQuery and XML
26.Creating a “Filterable” Portfolio with jQuery
This tutorial will show you how to make portfolio “filtering by category” a little more interesting with just a little bit of jQuery.
Demo
27. jQuery Hover Sub Tag Cloud
28. How To Build Quick and Simple AJAX Forms with JSON Responses
Demo
29. Simple jQuery Spy Effect
jQuery Spy Effect scrolls the list in a beautiful way.
30. Slider Gallery Tutorial: Screencast
A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.
Demo
31. Semantic Blockquotes with jQuery
Blockquotes can really assist in making your text visually appealing. Jack Franklin gives us a great tutorial on how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.
32. Jcrop – the jQuery Image Cropping Plugin
Demo
33. Horizontal Scrolling Menu made with CSS and jQuery
Demo
34. jQuery Sequential List Tutorial
This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.
Demo
35. How easy to create a slide tabbed box using jQuery
36. How to Mimic the iGoogle Interface
This tutorial will be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!
Demo
37. jGrowl
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.
38. Creating accessible charts using canvas and jQuery
Demo
39. jQuery and Google Maps Tutorial
This tutorial will walk you through how to get started using jQuery inside the Google Maps environment.
40. How To Create An Amazing jQuery Style Switcher
his tutorial will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.
Demo
41. How-To: Reddit-style Voting With PHP, MySQL And jQuery
This tutorial will show you how to create a voting system similar to Reddit with jQuery, PHP and MySQL.
Demo
42. Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery
This tutorial will explain how to use jQuery to select and style PDFs, PPT, images, and external links all differently using jQuery and CSS.
Further Reading, Advanced Tips and Tutorial Sites
43.Official Jquery Tutorial Directory
As first add is obvious, but on their official website you can find many tutorials related to mastering Your Jquery skills even in several different languages.
44.LearningJquery
Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. They have tutorials for all skill levels, and each entry is categorized by level of difficulty.
45.15 Days Of jQuery
Examples and tutorials to help you learn JQuery – it hasn’t been updated for a while, but still a lot of useful articles you’ll find there.
46.jQuery for Designers
Learn how easy it is to apply web interaction using jQuery – beautiful tutorials and website, if you still can’t find what you need, you can even request a tutorial.
47.Ultimate Jquery List
jQuery Ajax tutorials to jQuery UI examples, you’ve found the ultimate list of tutorials and plugins for jQuery! Everything from Ajax file uploaders to RSS feed plugins, all on one of the longest pages you’ll ever scroll.
48. Bassistance
This blog is about programming (with focus on web applications and JavaScript), music and other stuff the author happens to write about. It’s also the home of several jQuery plugins.
49. Remi Sharp’s Blog
Site with several good tips and articles related to jquery, also the same man behind useful tutorial site – jQueryForDesigners I showcased above.
Online jQuery Cheat Sheets
50.VisualJquery 1.2.6
An online cheat sheet and visual reference to Jquery, where you can find Jquery functions well explained, updated to jQuery 1.2.6. version. While playing with Jquery, this website seems to be a very useful place to visit.
51.jQuery 1.2 cheatsheet wallpaper
The size of wallpaper is 1280×960, two color variations.
52.jQuery 1.2 Cheat Sheet (*pdf file)
53. ColorCharge Jquery CheatSheet
54. UsejQuery
I got great addition to the list from mustardamus – UsejQuery website is inspirational website showcasing all jQuery based sites and regularly updating. Also there’s blog ThisBlog.UsejQuery with several jQuery tutorials You should check out.
55. jQuery User Interface
I don’t know how I missed this one too, but now here it is, many effects you’ll find here already been premade for you with great support.jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.
Well, good luck in your learning process and feel free to add another great tutorials, links, tips, tricks and related sites.
Subscribe to:
Posts
(
Atom
)