Developpement Informatique

février 23, 2010

Dreamweaver CS3 – Spry – Drop Down Menu

Filed under: Dreamweaver — izaam01 @ 5:20

Dreamweaver CS3 SPRY Menu CSS Tutorial 1-8 Intro

Publicités

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.

CSS Dock Menu with jQuery en Yahoo! Video

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>

février 20, 2010

JW Player: Flashvars

Filed under: Lecteurs, Video — izaam01 @ 3:44

JW Player: Flashvars

Here’s a list of all flashvars the player accepts. Flashvars are variables entered in the embed HTML code to set how the player looks and functions. The setting of all these flashvars can be accessed through javascript and by plugins. For more info, see the API page.

Some of these flashvars represent a certain status: they are read-only and automatically updated by the player. Plugins and Javascripts may request through the API.

Note that you must urlencode the three glyphs ? = & inside flashvars, because of the way these flashvars are loaded into the player. The urlencoded values for these symbols are listed here:

  • ? → %3F
  • = → %3D
  • & → %26

So if, fore example, your file flashvar is at the location getplaylist.php?id=123&type=flv, you must set the file flashvar to getplaylist.php%3Fid%3D123%26type%3Dflv.

Playlist properties

To load a playlist, only a single flashvars is required:

  • playlistfile (undefined): Location of an XML playlist which will be loaded as the player starts.

The following flashvars can be set instead of playlist, and are used to create a playlist with a single item. They set various properties of the media item to load (e.g. the source file, preview image or title).

  • author (undefined): author of the video, shown in the display or playlist.
  • date (undefined): publish date of the media file. Available since 4.3.
  • description (undefined): text description of the file.
  • duration (0): duration of the file in seconds.
  • file (undefined): location of the mediafile or playlist to play.
  • image (undefined): location of a preview image; shown in display and playlist.
  • link (deprecated): This option is no longer supported as of 5.0.
  • start (0): position in seconds where playback has to start. Won’t work for regular (progressive) videos, but only for streaming (HTTP / RTMP).
  • streamer (undefined): location of an rtmp/http server instance to use for streaming. Can be an RTMP application or external PHP/ASP file. More info here.
  • tags (undefined): keywords associated with the media file. Available since 4.3.
  • title (undefined): title of the video, shown in the display or playlist.
  • provider (undefined): this is determines what type of mediafile this item is, and thus which provider the player should use for playback. By default, the type is detected by the player based upon the file extension. If there’s no suitable extension or the player detects the type wrong, it can be manually set. The following default types are supported:
    • video: progressively downloaded FLV / MP4 video, but also AAC audio.
    • sound: progressively downloaded MP3 files.
    • image: JPG/GIF/PNG images.
    • youtube: videos from Youtube.
    • http: FLV/MP4 videos played as http pseudo-streaming.
    • rtmp: FLV/MP4/MP3 files played from an RTMP server.

In addition to these default providers, the player has specific support for certain streaming servers or CDNs. A full list of mediafile types can be found on the supported filetypes page.

Layout

These flashvars control the look and layout of the player.

  • backcolor (undefined): background color of the controlbar and playlist. This is white with the default skin.
  • controlbar (bottom): position of the controlbar. Can be set to bottom, over and none.
  • dock (false): set this to true to show the dock with large buttons in the top right of the player. Available since 4.5.
  • frontcolor (undefined): color of all icons and texts in the controlbar and playlist.
  • height (400): height of the display in pixels.
  • icons (true): set this to false to hide the play button and buffering icon in the middle of the video. Available since 4.2.
  • lightcolor (undefined): color of an icon or text when you rollover it with the mouse.
  • logo.file (undefined): location of an external jpg, png or gif image which replaces the watermark image (Licensed players only)
  • logo.link (undefined): link to direct to when the watermark image is clicked on (Licensed players only)
  • logo.hide (true): When set to true, the logo will auto-hide (Licensed players only)
  • logo.position (bottom-left): The corner in which to display the logo. Can be bottom-left, bottom-right, top-left or top-right (Licensed players only)
  • playlist (none): position of the playlist. Can be set to bottom, over, right or none.
  • playlistsize (180): when below this refers to the height, when right this refers to the width of the playlist.
  • skin (undefined): location of a skin file containing the player graphics. The SVN repository contains a couple of example skins.
  • screencolor (undefined): background color of the display
  • width (280): width of the display in pixels.

The four color flashvars must be entered using hexadecimal values, as is common for web colors (e.g. FFCC00 for bright yellow). They are not supported by bitmap skins.

Behavior

These flashvars control the playback behavior of the player.

  • autostart (false): Automatically start the player on load.
  • bufferlength (1): Number of seconds of the file that has to be loaded before starting. Set this to a low value to enable instant-start and to a high value to get less mid-stream buffering.
  • displayclick (deprecated): This option is no longer supported as of 5.0.
  • displaytitle (false): Set this to true to print the title of a video in the display. (Currently not implemented)
  • fullscreen (false): Fullscreen state of the player. This is a read-only flashvar, useful for plugins. Available since 4.4.
  • item (0): PlaylistItem that should start to play. Use this to start the player with a specific item selected.
  • linktarget (_blank): Browser frame where link from the display are opened in. Some possibilities are ‘_self’ (same frame) or ‘_blank’ (new browser window).
  • mute (false): Mute all sounds on startup. This can be overridden by a user’s cookie, which stores the user’s last muting state.
  • playerready (undefined): Javascript callback when the player has completed its setup.
  • repeat (none): Set to list to play the entire playlist once, to always to continously play the song/video/playlist and to single to continue repeating the selected file in a playlist.
  • shuffle (false): Randomly choose which playlist item to play.
  • smoothing (true): This sets the smoothing of videos, so you won’t see blocks when a video is upscaled. Set this to false to get performance improvements with old computers / big files. Available since 4.4.
  • stretching (uniform): Defines how to resize images in the display. Can be none (no stretching), exactfit (disproportionate), uniform (stretch with black borders) or fill (uniform, but completely fill the display).
  • volume (90): Startup volume of the player. Can be 0 to 100. The user’s last volume setting is saved in a cookie and overrides this flashvar.

API

These flashvars relate to the API of the player:

  • debug (undefined): Set this to either arthropod, console or trace to let the player log events. Available since 4.5. Also saved as cookie since 4.6. More info in the plugins documentation.
  • plugins (undefined): This is a comma-separated list of swf plugins to load (e.g. yousearch,viral). Each plugin has a unique ID and resides at plugins.longtailvideo.com. Go to the LongTailVideo AddOns section to see all available plugins.
  • client (deprecated): This flashvar has been deprecated, as of 5.0
  • id (deprecated): This flashvar has been deprecated, as of 5.0
  • version (deprecated): This flashvar has been deprecated, as of 5.0

The former flashvars, client, id and version are sent as parameters with every event the player broadcasts.

Config XML

All of the above flashvars can also be listed in an XML file and then fed to the player with a single flashvars:

  • config (undefined): location of a XML file with flashvars. Useful for short embed codes or CDN stream redirecting. Here’s an example:
<config>
   <image>files/bunny.jpg</image>
   <repeat>true</repeat>
   <backcolor>333333</backcolor>
   <volume>40</volume>
   <playlist>right</playlist>
   <playlist.size>150</playlist.size>
   <controlbar>over</controlbar>
</config>

Flashvars set in the embed code will overwrite those in the config XML.

février 19, 2010

Réorganiser en Javascript

Filed under: Video — izaam01 @ 7:21

Tutoriel Vidéo : Réorganiser en Javascript
envoyé par Grafikart. – Découvrez les dernières tendances en vidéo.

Liens PHP

Filed under: PHP — izaam01 @ 6:12
http://book.cakephp.org/ Welcome to The Cookbook

si un DIV fait un retour à la ligne

Filed under: CSS — izaam01 @ 5:20

Remplace par un <span>

« Newer PostsOlder Posts »

Propulsé par WordPress.com.