One of my web projects required the implementation of a dynamic HTML popup. Taking all the possible requirements in mind I have implemented a very cool (in my opinion) DHTML popup encapsulated in a javascript object model named ALPopup (AL stands for Ahmad Lafi).
You can create ALPopups with both fixed and percent width and height. The popup can also be resized and repositioned when linked to the browser resize and scroll events. It is also tested on IE7 and Firefox 2.
Find following a live demo for ALPopup.
You may also download the sample here.
Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
Monday, October 29, 2007
Sunday, April 22, 2007
DHTML Color and Opacity Picker
I have once faced a situation where I had to implement a DHTML color picker with ability to select both color and opacity. I searched the Internet for samples, articles, and tutorials to help me start with this task, I found too many color pickers, some of them were free, others were commercial, and many of them came with good tutorials, but unfortunately, I didn't find any picker with opacity selection feature. So I decided to go on with the implementation myself and build it from scratch.
I will not describe every detail here; I would rather show all the features and explain how to use the picker in your HTML page.
The color and opacity picker will be shown on your page as a floating IFRAME with absolute positioning adjacent to the triggering element, which is the element that should be clicked in order to open the picker. See the picture below:
Adding the Color and Opacity Picker to Your HTML Page
To add the color and opacity picker to your page, you need the following files to reside within the same directory level:
• uc_ColorPicker.htm
• sok.gif
• scancel.gif
• opcty_haft.gif
• opcty_bg.gif
• niceearth2.gif
You may download these files from the following link:
http://www.kanimani.com/3/Color_And_Opacity_Picker_Sample.zip
We will start by adding the color and opacity picker IFRAME to your page, see the line below:
<iframe id="frmColPick" src="uc_colorpicker.htm" style="display: none"></iframe>
Place it anywhere in your page within the body tags. Note that the IFRAME has "display:none" CSS attribute so it will not be visible by default.
As you can see from the picture above, I have placed two examples for different usages of the color picker. The first example will write two values in the available text boxes, one for the chosen HTML color, and the other for the chosen opacity. The opacity is denoted by a number from 0 to 100 where 0 is completely transparent, and 100 is completely opaque. See the code below:
<input id="txtColor" name="txtColor" type="text" readonly="readonly" /> <input
id="txtOpacity" name="txtOpacity" type="text" readonly="readonly" /> <input
id="btnShow" type="button" onclick="document.getElementById('frmColPick').contentWindow.AttachPicker('txtColor','txtOpacity','btnShow')"
value="Show Opacity And Color Picker" />
The code above shows two read-only INPUT elements and a button. When clicking the button, the color and opacity picker will be attached to that button and shown adjacent to it. The "AttachPicker" method of the color picker IFRAME accepts three arguments, the first one is the id for the INPUT element that will receive the color value, the second one is the INPUT element id that will receive the opacity value, and the third argument is the id of the element that will have the picker shown adjacent to it.
Note that you may set initial values for the picker by assigning initial values to the INPUT elements.
The second example shows how the targeted text box CSS attributes can be modified according to the selected opacity and color. See the code below:
<div style="cursor:pointer" onclick="document.getElementById('frmColPick').contentWindow.AttachPicker('hidColor','hidOpacity','txtColor2')"><input type="hidden" id="hidColor" name="hidColor" onchange="document.getElementById('txtColor2').style.backgroundColor=this.value" value="#E0C0C0" /> <input type="hidden" id="hidOpacity" name="hidOpacity" onchange="document.getElementById('txtColor2').value='Opacity: '+this.value" value="34" /> <input id="txtColor2" name="txtColor" type="text" readonly="readonly" style="background-color:#E0C0C0" /> <img src="color_picker.gif" /> </div>
I have placed all the elements within a DIV and attached the picker to it. The container DIV will call the "AttachPicker" method on the click event. As you can see I have replaced the two INPUT text elements with INPUT hidden elements. I have also implemented the "onchange" event of the hidden fields to carry out any action upon color and opacity selection.
Here in this example upon color and opacity selection I modify the text box background color and set its value to the selected opacity. Remember always to implement the "onchange" event when you want to customize the action taken after color and opacity selection. Doing so will allow you to design the picker user interface on your page the way you like.
This picker should work smoothly on IE7 and Firefox 2. Enjoy it!
I will not describe every detail here; I would rather show all the features and explain how to use the picker in your HTML page.
The color and opacity picker will be shown on your page as a floating IFRAME with absolute positioning adjacent to the triggering element, which is the element that should be clicked in order to open the picker. See the picture below:
Adding the Color and Opacity Picker to Your HTML Page
To add the color and opacity picker to your page, you need the following files to reside within the same directory level:
• uc_ColorPicker.htm
• sok.gif
• scancel.gif
• opcty_haft.gif
• opcty_bg.gif
• niceearth2.gif
You may download these files from the following link:
http://www.kanimani.com/3/Color_And_Opacity_Picker_Sample.zip
We will start by adding the color and opacity picker IFRAME to your page, see the line below:
<iframe id="frmColPick" src="uc_colorpicker.htm" style="display: none"></iframe>
Place it anywhere in your page within the body tags. Note that the IFRAME has "display:none" CSS attribute so it will not be visible by default.
As you can see from the picture above, I have placed two examples for different usages of the color picker. The first example will write two values in the available text boxes, one for the chosen HTML color, and the other for the chosen opacity. The opacity is denoted by a number from 0 to 100 where 0 is completely transparent, and 100 is completely opaque. See the code below:
<input id="txtColor" name="txtColor" type="text" readonly="readonly" /> <input
id="txtOpacity" name="txtOpacity" type="text" readonly="readonly" /> <input
id="btnShow" type="button" onclick="document.getElementById('frmColPick').contentWindow.AttachPicker('txtColor','txtOpacity','btnShow')"
value="Show Opacity And Color Picker" />
The code above shows two read-only INPUT elements and a button. When clicking the button, the color and opacity picker will be attached to that button and shown adjacent to it. The "AttachPicker" method of the color picker IFRAME accepts three arguments, the first one is the id for the INPUT element that will receive the color value, the second one is the INPUT element id that will receive the opacity value, and the third argument is the id of the element that will have the picker shown adjacent to it.
Note that you may set initial values for the picker by assigning initial values to the INPUT elements.
The second example shows how the targeted text box CSS attributes can be modified according to the selected opacity and color. See the code below:
<div style="cursor:pointer" onclick="document.getElementById('frmColPick').contentWindow.AttachPicker('hidColor','hidOpacity','txtColor2')"><input type="hidden" id="hidColor" name="hidColor" onchange="document.getElementById('txtColor2').style.backgroundColor=this.value" value="#E0C0C0" /> <input type="hidden" id="hidOpacity" name="hidOpacity" onchange="document.getElementById('txtColor2').value='Opacity: '+this.value" value="34" /> <input id="txtColor2" name="txtColor" type="text" readonly="readonly" style="background-color:#E0C0C0" /> <img src="color_picker.gif" /> </div>
I have placed all the elements within a DIV and attached the picker to it. The container DIV will call the "AttachPicker" method on the click event. As you can see I have replaced the two INPUT text elements with INPUT hidden elements. I have also implemented the "onchange" event of the hidden fields to carry out any action upon color and opacity selection.
Here in this example upon color and opacity selection I modify the text box background color and set its value to the selected opacity. Remember always to implement the "onchange" event when you want to customize the action taken after color and opacity selection. Doing so will allow you to design the picker user interface on your page the way you like.
This picker should work smoothly on IE7 and Firefox 2. Enjoy it!
Thursday, March 15, 2007
DHTML Auto Resizing List
I really had very tough time selecting a name for this post... Why? Because I am writing here about a very special type of dynamic lists.
This list increases/decreases the number of its rows to best fit the browser height. If the list has a small number of rows, they will all be visible within the browser view. But if you resized the browser until the list cannot fit anymore within the view, some rows from the list tail will disappear and a link of 3 dots (. . .) will appear in place of the last row to tell us that not all of the rows are shown.
Clicking on a row will fire a message box showing the content of that row, you may replace the javascript that shows the message box with any scripting you want. Also clicking the 3 dots indicator will fire another message box that you can replace with some script to show a new window with all the rows visible, or just disabling the resizing functionality.
The sample should work fine with IE7 and FireFox 2.0, let me know if you had any problems running it on your browser.
View it online
Download it:
http://www.kanimani.com/1/auto-resize.zip
This list increases/decreases the number of its rows to best fit the browser height. If the list has a small number of rows, they will all be visible within the browser view. But if you resized the browser until the list cannot fit anymore within the view, some rows from the list tail will disappear and a link of 3 dots (. . .) will appear in place of the last row to tell us that not all of the rows are shown.
Clicking on a row will fire a message box showing the content of that row, you may replace the javascript that shows the message box with any scripting you want. Also clicking the 3 dots indicator will fire another message box that you can replace with some script to show a new window with all the rows visible, or just disabling the resizing functionality.
The sample should work fine with IE7 and FireFox 2.0, let me know if you had any problems running it on your browser.
View it online
Download it:
http://www.kanimani.com/1/auto-resize.zip
Subscribe to:
Posts (Atom)
