Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


 

Please wait - we are now uploading and converting your file...

 

Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

A Close Button for any sections of your Web Page

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

The web page can also contain

The web page can also contain dynamically adapted information elements, dependent upon the rendering browser or end-user location (through the use of IP address tracking and/or cookie information). http://freewebsite-templates.tumblr.com/

Can their be more than (1) x_close layer

I am wanting to add more x_close layers to my site but when converting a psd with multiple x_close layers only one of those works..and the rest work just like links?

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

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content