A Close Button for Any Sections of your Web Page
You can use psd2css Online to convert your Photoshop files to dynamic web pages. Here is a video tutorial to show you how to draw close buttons without writing any code so your users can close various parts of your content. Examples might be an announcement or advertising dialog that you want to display when your users arrive at your site, but allow them to close the dialog by clicking on a 'close' button.
http://psd2cssonline.com/tutorials/close/index.html
http://psd2cssonline.com/tutorials/close/close.psd
Question
Hey, i thought this was great and did it on my website, but the pop up window closes to quickly. Is there a way to extend the amount of time the window is open when you click on the link?
use setTimeout
Hi -
Sure. If you convert the example PSD file for the close tutorial, and then edit by hand the psd2css.js file. Find the section that starts '/* Here we take care of any _close layers...'. Change that section like this adding a setTimeout:
/* Here we take care of any _close layers you have made */
$("#Layer-5").click(function(){
setTimeout( '$("#Layer-5").parent().hide("slow")', 2000 );
});
Change the number 2000 to whatever delay you want. The number is 1000ths of a second so 2000 is a 2 second delay.
--
Shaun
Direction of opening window
Hi guys,
This is the thread that most closely relates to my question. The layer that opens once triggered opens from the top left corner, at what to me at least, seems like a 45 degree angle. How, if possible, do I tell the window to open at say, a 90 degree angle 'opening' from the right towards the left? Can this be done? My js abilties let me down I'm afraid :)
Many thanks,
Surfingsmurf
Hi surfingsmurf - What you're
Hi surfingsmurf -
What you're asking for are the various flavors of animation available from jQuery.
This example is a really old example of psd2css Online generated code. You can find a section right in the index.php for this example (it will be in the psd2css.js file in a current conversion from psd2css Online) that looks like this:
// This is code to handle the t_menu menu $("#Layer-3").hide().addClass("allMenus"); $("#Layer-2").click(function(e){ e.preventDefault(); $(".allMenus").hide("slow"); $("#Layer-3").show("slow"); // Remove the following 2 lines if you don't want this menu to dissappear // automatically. Change how long the menu stays visible by changing // the 4000 to another number of milliseconds clearTimeout( timerId ); timerId = setTimeout( '$("#Layer-3").hide("slow")', 4000 ); });You can change all those "slow" parameters to other things that jQuery accepts. And if you add jQuery UI to your site there are even more. Here are all the docs for that:
http://docs.jquery.com/Effects
http://jqueryui.com/docs/Effects/Methods
Thanks
--
Shaun