Developpement Informatique

février 23, 2010

CSS liens

Filed under: CSS — izaam01 @ 11:41

http://www.zonecss.fr/style_css/feuille_css_moz_border_radius.html

Publicités

Generate Random Passwords in PHP

Filed under: PHP — izaam01 @ 10:00

Here is a function I wrote to generate a random string in PHP. It is probably most useful for generating passwords. You can specify the length of the resulting string, as well as what characters are allowed. The default length is eight and the default character set is alphanumeric.

view sourceprint?
<?php
function random_string($length = 8, $chars = null) {
if( empty($chars) ) $chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
while( strlen($s)

jquery validate form input if certain check boxes are checked

Filed under: JQuery — izaam01 @ 9:36

Assuming that you are using the jQuery validation plugin, you could set/clear the class of each of the controls in the required/not required sections based on the checkbox that was clicked.

$(document).ready( function() { $(‘form’).validate(); } );

function init_validation(divName)
{
$(‘div#’ + divName).find(‘input’).addClass( ‘required’ );
$(‘div#inputs’).children(‘div:not(#’ + divName + ‘)’)
.find(‘input’)
.removeClass( ‘required’ );
}
HTML:

New Account

Delete Account

New Software

JQuery Selectors

Filed under: JQuery — izaam01 @ 7:38

Changer la couleur de tous des

$(« p »).css(« color », « red »);

Changer la couleur du premier

$(« p:eq(0) »).css(« color », « red »);

Changer la couleur d’un

$(« p#first »).css(« color », « red »);

Selection les sans id
$(« span:not([@id]) »).css(« color », « red »);

Selection de tous les

contenant une balise
$(« p:has(span) »).css(« color », « red »);

Selection de tous les à l’intérieur d’un

$(« span »).parent(‘p’).css(« color », « red »);

Tous les

$(« div »).css(« border », »9px solid red »);

Finds every element (including head, body, etc).
$(« * »).css(« border », »3px solid red »);

Une balise bien precis

$(document).ready(function(){
$(« input[id][name$=’man’] »).val(« only this one »);
});

FORM
$(‘:input’)
$(‘:text’)
Using this psuedo-selector like $(‘:text’) is equivalent to $(‘*:text’) which is a very slow selector. It’s
recommended to do $(‘input:text’).

$(‘:password’)
$(‘:radio’)
$(‘:checkbox’)
$(‘:submit’)
// so it won’t submit
$(« form »).submit(function () { return false; });
$(‘:image’)
$(‘:reset’)
$(‘:button’)
$(‘:file’)
$(‘:hidden’)

Compter le nombre d’élémentsdans un formulaire
var allInputs = $(« :input »);
var formChildren = $(« form > * »);
$(« #messages »).text(« Found  » + allInputs.length +  » inputs and the form has  » +
formChildren.length +  » children. »);

***

one
two
three

Setting a form value with jQuery
You can set the form values with jQuery using the same val() function but passing it a new value instead. Using the same example forms above, you’d do this for the text input and select box:

$(‘#foo’).val(‘this is some example text’);
$(‘#bar’).val(‘3’);
OR
$(‘[name=foo]’).val(‘this is some example text’);
$(‘[name=bar]’).val(‘3’);

Using the above for a radio button will change the actual value of the radio button rather than changing the one that is selected. To change the radio button that is selected you’d do this:

$(‘input[name= »baz »]’)[0].checked = true;
[0] would set the first one checked, [1] would set the second one checked and so on

Dreamweaver CS3 – Spry – Drop Down Menu

Filed under: Dreamweaver — izaam01 @ 5:20

Dreamweaver CS3 SPRY Menu CSS Tutorial 1-8 Intro

Update Multiple Rows With Different Values and a Single SQL Query

Filed under: MYSQL — izaam01 @ 5:17
April 30th, 2009 12:22 pm / Posted in SQL by Karl

Sometimes you may need to update multiple rows of data in a table. This is no problem a lot of the time, as the fields to update may all need to be changed to the same value, in which case you might run a query like the following.

1
UPDATE mytable SET myfield = ‘value’ WHERE other_field = ‘other_value’;

But what about if you want to update multiple rows but you need the field set to a different value for each row? For example, maybe you have a table of categories with a field to store their display order. How would you update the display order field for each category when the order changes? Most often you will see people just run multiple queries. For example, if you are using PHP you might think to do something like this:

1
2
3
4
foreach ($display_order as $id => $ordinal) {
    $sql = « UPDATE categories SET display_order = $ordinal WHERE id = $id »;
    mysql_query($sql);
}

Of course this will work fine, but queries in loops make me start to sweat nervously. It’s all to easy to start hammering the database with a crazy number of queries. Fortunately there is a better way! The SQL is a little more complex, but it is possible to achieve the same result using only one query. The syntax is as follows.

1
2
3
4
5
6
7
UPDATE mytable
    SET myfield = CASE other_field
        WHEN 1 THEN ‘value’
        WHEN 2 THEN ‘value’
        WHEN 3 THEN ‘value’
    END
WHERE id IN (1,2,3)

Mapping this to the categories example, we get the following query.

1
2
3
4
5
6
7
UPDATE categories
    SET display_order = CASE id
        WHEN 1 THEN 3
        WHEN 2 THEN 4
        WHEN 3 THEN 5
    END
WHERE id IN (1,2,3)

This is fairly simple to understand. Rather than setting a field to a particular value, a CASE operator is used to determine which of a set of values is used based on a given condition, in this case if the value of the id field matches the specified id.

The WHERE clause is not needed as such in that it doesn’t affect the logic of the query, but it does improve performance by ensuring that the logic is only applied to the smallest number of rows possible. In this example only 3 rows are being updated, and the WHERE clause ensures that only those 3 rows are tested. Without it the every row in the table would be tested (unnecessarily, since they will never match).

What about when you need to update multiple fields? This is easily done just by adding another CASE block.

1
2
3
4
5
6
7
8
9
10
11
12
UPDATE categories
    SET display_order = CASE id
        WHEN 1 THEN 3
        WHEN 2 THEN 4
        WHEN 3 THEN 5
    END,
    title = CASE id
        WHEN 1 THEN ‘New Title 1’
        WHEN 2 THEN ‘New Title 2’
        WHEN 3 THEN ‘New Title 3’
    END
WHERE id IN (1,2,3)

Now this is all well and good, but the real beauty of this comes when the technique is combined with a scripting language such as PHP in order to build these queries dynamically. Let’s examine one technique for doing this, using the category ordering example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// An array containing the category ids as keys and the new positions as values
$display_order = array(
    1 => 4,
    2 => 1,
    3 => 2,
    4 => 3,
    5 => 9,
    6 => 5,
    7 => 8,
    8 => 9
);

$ids = implode(‘,’, array_keys($display_order));
$sql = « UPDATE categories SET display_order = CASE id « ;
foreach ($display_order as $id => $ordinal) {
    $sql .= sprintf(« WHEN %d THEN %d « , $id, $ordinal);
}
$sql .= « END WHERE id IN ($ids) »;
echo $sql;

Now in this particular example, only 8 rows are being updated, but 7 queries have been trimed, which is not insignificant. Apply this technique to a situation where hundreds or thousands of rows have to be updated and you can imagine the benefits it will have.

css menu maker

Filed under: CSS — izaam01 @ 2:57

http://www.youtube.com/watch?v=9pkqVKkVz90

How to create Pure CSS Drop Down Menu with PureCSSMenu.com

How to create dreamweaver drop down menu

CSS Dock Menu with jQuery

http://www.jquerytactics.com The CSS dock menu jQuery plugin allows you to create a really cool menu animation similar to Mac OSX Leopard.

février 22, 2010

jQuery Sortable Lists With Drag Drop Handle

Filed under: JQuery — izaam01 @ 1:07

this post has been extended in the new Extending the jQuery Sortable With Ajax & MYSQL post

I’ve recently made use of a drag / drop style list that will remember the order of the list. If you use the standard jQuery sortable items, you’ll get the two following problems:

  1. You won’t be able to click on any items in the sortable list you have
  2. You’ll probably want an update of the order of the list after every change.

I did find a solution to the problem over at Scott Sauyet’s site, but I needed a little more… The following example will do both, it uses the handle and update options on the .sortable item. By adding these simple items you can produce a pretty advanced sortable list. You could even add AJAX into that update command and automatically update your database with the new values every time you change then removing the need to refresh, and that’s very web 2.0.

DEMO AND SOURCE HAVE MOVED TO THE NEW POST

I’ve ‘enhanced’ it ever so slightly by adding in some styles for the list items and handles.

First we’ll look at the CSS:

<style> 
  #test-list { list-style: none; padding: 0; margin: 0 40px; } 
  #test-list li { margin: 0 0 10px 0; background: #eaf3fa; padding: 15px; } 
  #test-list .handle { float: left; margin-right: 10px; cursor: move; } 
  #test-log { padding: 5px; border: 1px solid #ccc; } 
</style>

Then we need to include jQuery and the jQuery UI

<script type="text/javascript" src="{ latest jquery release }"></script> 
<script type="text/javascript" src="{ ui core }"></script> 
<script type="text/javascript" src="{ ui sortable }"></script> 

We then tell the document to automatically handle the list when it’s ready

<script type="text/javascript">// When the document is ready set up our sortable with it's inherant function(s) 
$(document).ready(function() { 
  $("#test-list").sortable({ 
    handle : '.handle', 
    update : function () { 
      $("input#test-log").val($('#test-list').sortable('serialize')); 
    } 
  }); 
}); 
</script>

Now to build the HTML:

<ul id="test-list"> 
    <li id="listItem_1"> 
    <img src="arrows.png" alt="move" /> 
      Item 1 with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a> 
    </li> 
    <li id="listItem_2"> 
      <img src="arrow.png" alt="move" /> 
      Item 2 
    </li> 
    <li id="listItem_3"> 
      <img src="arrow.png" alt="move" /> 
      Item 3 
    </li> 
    <li id="listItem_4"> 
      <img src="arrow.png" alt="move" /> 
      Item 4 
      <p>Perhaps you want to add a form in here?</p> 
      <p>Text:<br /><input type="text" /></p> 
      <p>And a textarea<br /><textarea></textarea></p> 
    </li> 
</ul> 
<label for="test-log"><strong>Resultant order of list</strong></label> 
<input type="text" size="70" id="test-log" />

One important thing to remember, that might have you stumbling is that you HAVE to name the list items as such id=“item_1” that underscore and number will define the elements in the array past out to the text box.

Experiment, enjoy.

Extending the jQuery Sortable With Ajax & MYSQL

Filed under: JQuery — izaam01 @ 1:06

I’ve had a lot of response to the jQuery sortable list post I wrote a while back, and a lot of them ask how to send the results to a database. I’ve often said the best thing to do would be to update it by AJAX, but I’ve never really explained how. So here it is!

There was a bug a few people noticed with the new jQuery UI a short while ago that stopped the update callback working. That bug has since been rectified and all is kosher again. I have since updated the example to the latest jQuery and UI downloads. The examples and downloads have also been updated accordingly.

Step one: Create the page with the sortable, and the CSS

(described on my previous post) We have however altered it slightly, so here is the updated code (without any css, the css is in the sourcecode)
Include your javascript files, you’ll need jQuery and the jQuery UI files (sortable)

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script> 
<link rel='stylesheet' href='styles.css' type='text/css' media='all' />

Then you’ll need to create your Javascript function. We’re going to listen for the list to be updated, then call the php page, pass it the new order by GET and update the #info div with whatever the PHP file prints out:

<script type="text/javascript"> 
// When the document is ready set up our sortable with it's inherant function(s) 
$(document).ready(function() { 
  $("#test-list").sortable({ 
    handle : '.handle', 
    update : function () { 
      var order = $('#test-list').sortable('serialize'); 
      $("#info").load("process-sortable.php?"+order); 
    } 
  }); 
}); 
</script>

Now here’s the HTML to output the list etc. etc:

<pre> 
    <div id="info">Waiting for update</div> 
</pre> 
<ul id="test-list"> 
  <li id="listItem_1"> 
    <img src="arrow.png" alt="move" width="16" height="16" /> 
    <strong>Item 1 </strong>with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a> 
  </li> 
  <li id="listItem_2"> 
    <img src="arrow.png" alt="move" width="16" height="16" /> 
    <strong>Item 2</strong> 
  </li> 
  <li id="listItem_3"> 
    <img src="arrow.png" alt="move" width="16" height="16" /> 
    <strong>Item 3</strong> 
  </li> 
  <li id="listItem_4"> 
    <img src="arrow.png" alt="move" width="16" height="16" /> 
    <strong>Item 4</strong> 
  </li> 
</ul> 
<form action="process-sortable.php" method="post" name="sortables"> 
  <input type="hidden" name="test-log" id="test-log" /> 
</form>

Step two: Create the PHP to handle the serialized list jQuery has created

The PHP page will simply take the url it’s been handed and pick out the items from the array. You can then manipulate your database with the new values, or just format however you want. The code could look like this:

&lt;?php 
/* This is where you would inject your sql into the database 
but we're just going to format it and send it back 
*/ 
foreach ($_GET['listItem'] as $position => $item) : 
  $sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item"; 
endforeach; 
print_r ($sql); 
?&gt;

You could then happily run each sql statement.

As always, I’d love the feedback, it’s great for improving the example etc. Enjoy!

février 21, 2010

Create Overlay Lightbox For Your Website Free With jQuery

Filed under: JQuery — izaam01 @ 5:49

http://www.2webvideo.com/video-production

Free jQuery For Overlay Dialog Box With Delayed Opening, Free HTML

If you stay in this page for some time and watch the following paragraph you’ll find that the portion inside the dotted boundary turns opaque with a reddish background color, and at the same time a dialog box opens up in the middle.

Example of Overlay Dialog Box

This is an example of jQuery overlay dialog box with delayed opening. The delay is set at 7 seconds which can be altered easily. The dialog box opens atop a red overlay background, all of which can be changed in the code that appears at the bottom. You can also set the dialog box to open or not to open by clicking anywhere on the webpage.

To see the overlay effect again, simply refresh this page.

Note: The above is done with iframe tag. To see how this works in an entire page, click here.]

The dialog box urges you to subscribe for 2WebVideo’s newsletter by giving your email ID in the form provided therein. If you do not want to subscribe you can hit the close button and the dialog box closes.

When using this technique many websites do not provide the close button thereby rather forcibly making the visitors to part with their email ID for subscription. This is so because except one, there is no other way to close the dialog box.

And that one way is to hit the Esc button on the keyboard which many viewers may not be able to guess if not specifically told.

If however you change the statement ‘closeOnClick: false’ to ‘closeOnClick: true’ (see the HTML code below), the dialog box can be closed by clicking anywhere on the page.

Whether or not the close option is provided, this delayed opening of an overlay dialog box is very popular among webmasters. The reasons are not far to seek.

Unlike the disturbing popup or the benign pop-under that can be easily dismissed or prevented, an overlay dialog box unfailingly arrests the attention of a viewer and is thus more successful for the purpose it is used.

The other reason is of course the sophistication of the technique, and one that catches eye no matter how indifferent or distracted a viewer is while surfing a webpage.

What is great about the whole thing is that the jQuery script used to design this overlay dialog box is available absolutely free. In this example the dialog box opens immediately upon loading of the webpage.

We have incorporated a delay event in the script (appearing toward the end of the HTML code, highlighted in blue color) that makes the overlay dialog box appear after a time gap. You can change this time to whatever you want.

You can also change the opacity, color, and speed of the overlay on which the dialog box appears. Feel free to copy the HTML code for your use.

If you are interested in more overlay designs, do look at the following video articles:

  1. How To Create Overlay Lightbox With jQuery Fancy-Zoom
  2. How To Create An Overlay Lightbox In Your Webpage

HTML Code

The HTML is easy and simple to use. The code below is complete and can be used for your needs. The script that calls the overlay to action is given just before the closing </body> tag. The main parameters in that code is highlighted for easy understanding. Feel free to copy the code for your use.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
	<title>jQuery Overlay Dialog Box With Delayed Opening</title>

	<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>	

</head>

<body>

<center><div style="font-family: lucida grande,tahoma,verdana,arial,sans-serif;width:500px;">
<h1>Example of Overlay Dialog Box</h1>
<p align=justify>This is an example of jQuery overlay dialog box with delayed opening. The delay is set at 7 seconds which can be altered easily. The dialog box opens atop a red overlay background, all of which can be changed in the code that appears at the bottom. You can also set the dialog box to open or not to open by clicking anywhere on the webpage.</p>
<p align=justify>To see the overlay effect again, simply refresh this page.</p>
</div></center>

<style>

#facebox {

	/* overlay is hidden before loading */
	display:none;

	/* standard decorations */
	width:400px;
	border:10px solid #666;

	/* for modern browsers use semi-transparent color on the border. nice! */
	border:10px solid rgba(82, 82, 82, 0.698);

	/* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

#facebox div {
	padding:10px;
	border:1px solid #3B5998;
	background-color:#fff;
	font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}

#facebox h2 {
	margin:-11px;
	margin-bottom:0px;
	color:#fff;
	background-color:#6D84B4;
	padding:5px 10px;
	border:1px solid #3B5998;
	font-size:20px;
}

</style>

<!--[if IE]>
   <style>
   .facebox {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333);
       zoom: 1;
    }
    </style>
<![endif]-->

<!-- facebook dialog -->
<div>

	<div>
		<h2>Subscribe To 2WebVideo Newsletter</h2>

		<p>Web professional? Remain updated with top tips and tricks every week. Invaluable info', guaranteed!</p>

		<!-- Begin Signup Form -->

		<form action="" method="post" target="_blank">
			<p>Your Email Address:<br />
			<input value="" style="margin-right: 5px;width: 60%;float: left;z-index: 999;">
			<input value="Subscribe" style="display: block;">
			</p>
		</form>

		<!--End Signup-->

		<p><button> Close This Box!</button></p>
	</div>

</div>

<script>

$(document).ready(function() {

// select the overlay element - and "make it an overlay"
$("#facebox").overlay({

	// custom top position
	top: 10,

	// some expose tweaks suitable for facebox-looking dialogs
	expose: {

		// you might also consider a "transparent" color for the mask
		color: '#F00',

		// load mask
		loadSpeed: 1000,

		// decide transparency
		opacity: 0.5
	},

	// disable this for modal dialog-type of overlays
	closeOnClick: false,

	// we want to use the programming API
	api: true

// load it after delay
})

var ol = $("#facebox").overlay({api: true});
  // wait 7 seconds, then load the overlay
  setTimeout(function() {
    ol.load();
  }, 7000);

});
</script>

</body>
Older Posts »

Créez un site Web ou un blog gratuitement sur WordPress.com.