Show/Hide multiple DIVs with Select using jQuery


Today ill discuss Show/Hide multiple DIVs with Select using jQuery. Bellow a complete example about that

<script type=”text/javascript”>
$(document).ready(function(){
$(‘.box’).hide();
$(‘#dropdown’).change(function() {
$(‘.box’).hide();
$(‘#div’ + $(this).val()).show();
});
});
</script>
<form>
<select id=”dropdown” name=”dropdown”>
<option value=”0″>Choose</option>
<option value=”area1″>DIV Area 1</option>
<option value=”area2″>DIV Area 2</option>
<option value=”area3″>DIV Area 3</option>
</select>
</form>
<div id=”divarea1″>DIV Area 1</div>
<div id=”divarea2″>DIV Area 2</div>
<div id=”divarea3″>DIV Area 3</div>

Advertisements

Random password generator with JavaScript


In JavaScript To generate password use the following function.

function generatePW()
{
var i=0;
var s="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_?/:(){}[]0123456789";
var pw="";
var c=(Math.random() * 3)+9;
for (i=0; i<c; i++)
{
pw+=s.charAt(Math.random() * 72);
}
return(pw);}

Here the JavaScript function Math.random() generates a random number from 0 to 1 (actually just less than 1). So the code:
var c=(Math.random() * 3)+9; will generate a number between 9 to just less than 12.

OpenCart open source E-commerce solution


OpenCart is an open source PHP-based online shopping cart system. A robust e-commerce solution for Internet merchants with the ability to create their own online business and participate in e-commerce at a minimal cost.

OpenCart is designed feature rich, easy to use, search engine friendly and with a visually appealing interface.

Download link here

How to make jQuery work on the same page with Mootools and or Prototype?


Recently i have faced thats problem on my project. Several of my pages use both JQuery and Protoype. Also i have used Mootools some pages. JQuery this appears to be causing problems, because both libraries define a function named ‘$’.

JQuery provides a function noConflict() which relinquishes control of $ to other libraries that may be using it. So it seems like I need to go through all my pages that look like this:

src=”js/mootools.js”

src=”js/prototype.js”
src=”js/jquery.js”

and change them to look like this:

src=”js/mootools.js”

src=”js/prototype.js”
src=”/obp/js/jquery.js”
jQuery.noConflict();
var $j = jQuery;

I should then be able to use ‘$’ for Prototype and ‘$j’ (or ‘jQuery’) for JQuery. I’m not entirely happy about duplicating these 2 lines of code in every relevant page, and expect that at some point somebody is likely to forget to add them to a new page. I’d prefer to be able to do the following

  • Create a file jquery-noconflict.js which “includes” jquery.js and the 2 lines of code shown above
  • Import jquery-noconflict.js (instead of jquery.js) in all my JSP/HTML pages

An alternate solution is simply to add the 2 lines of code above to jquery.js directly, but if I do that I’ll need to remember to do it every time I upgrade JQuery.