HowTo : Move the Close button to the top right

classic Classic list List threaded Threaded
19 messages Options
Reply | Threaded
Open this post in threaded view
|

HowTo : Move the Close button to the top right

Wizzud
This post was updated on .
Please ensure that you select the correct js file for your version of Shadowbox!

JS : for v3.0b shadowbox.skin2.js, for v3.0rc1 shadowbox.skin2.3rc1.js (use one of these)
CSS : shadowbox.skin2.css (css is same for both versions)

Put the 2 relevant files into your Shadowbox folder (the same folder that shadowbox.js is currently in).
Include these 2 new files on your page, after your standard Shadowbox files (shadowbox.css and shadowbox.js).

All this does is move the (existing) close icon to the top right, and slide it into/out of view when needed.
You don't need to worry about whether or not a title is needed - that is taken care of.


If you want to place, for example, the word 'Close' beside the button, the simplest way (if you do not need multiple languages) is to :
- create your own graphic that includes the desired text
- replace the existing resources/close.png with your new graphic
- modify shadowbox.skin2.css to change (at least) :
     (a) the width of #sb-nav-close (to match your new graphic's width)
     (b) the padding-right of #sb-title (to accommodate your new graphic's width).
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

EricM
Works great. Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Clare
In reply to this post by Wizzud
Need this, but can't get those two files to work, I receive the following error:
Error: U.get("sb-container") is null

here's what's in the head of my doc ...

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script><link rel="stylesheet" type="text/css" href="shadowbox.skin2.css">
<script type="text/javascript" src="shadowbox.skin2.js"></script>
<script type="text/javascript"> Shadowbox.init({players:['img', 'html']}); </script>
any ideas? thanks!
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

thinkp
In reply to this post by Wizzud

I'm a total newbie (if even that), but I followed this to a T and for some reason I don't see the close.png in the upper right at all. Is there something I'm missing? Any help will do. Thanks in advance.

Here's a lint to my test page

http://tinyurl.com/SBtest
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Wizzud
You are manually including all the support files, but after running Shadowbox.init().
You are manually including the prototype adapter, when you don't have the Prototype library.
You do have the jQuery library, but it's included after the Shadowbox.init(), which means you end up with the base adapter.
You've manually included the Sizzle support file, but with jQuery you don't need it because it's already included in jQuery - so you could switch it off in the Shadowbox.init() (and not include it manually, of course!).

You also have a number of other problems with your HTML, like
- 'no-mans-land' HTML in between the HEAD and BODY elements.
- non-self-terminating LINKs and METAs
- self-terminating Anchors
- extra double-quotes
- missing double-quotes
- missing end-of-tag terminators
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

thinkp

Thank you very much Wizzud for responding. I realized I was opening myself up for criticism when I posted here. I know very little about javascript (obviously), but am trying to educate myself during the process of putting my online portfolio together. I guess I am proof of knowing only enough to be dangerous ath the moment. I'm fixing all that you brought to my attention and can't thank you enough for doing so.

I only had three questions from your feedback that still went over my head.

?- 'no-mans-land' HTML.
?- non-self-terminating LINKs and METAs
?- self-terminating Anchors


"Combine literacy with curiosity and a whole world of information opens up to you"
                                            I guess you could say the literacy part I'm trying to work on.
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Wizzud
thinkp wrote
?- 'no-mans-land' HTML.
You have HTML between </head> and <body>, and it shouldn't be there (nothing should)
thinkp wrote
?- non-self-terminating LINKs and METAs
You have an XHTML doctype, whose correct syntax for terminating a LINK or META element is /> (ie. <link ..... /> or <meta ..... />)
thinkp wrote
?- self-terminating Anchors
The correct syntax for an A element is <a .....>[optional text/element(s)]</a>, but you have several (usually the first within an LI element) that are <a ..... />
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Gerald Jenewein, TCI
In reply to this post by Wizzud
The Close-button is now at the top right, almost there where I want it: look here

But I would like to have the button covering the right-top-corner of the picture, as seen on the page of Michael.

I found the right-parameter in shadowbox.skin2.css to move the button in the horizontally correct position.
But the top-parameter there doesn't affect the button to move further up or down.

Where can I specify the vertical position of the Close-Button?
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

htcilt
Do we know if this is possible in the latest version (3.01)?
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Dragonballed
In reply to this post by Wizzud
Hi! I have try but it doesn't work... Here is my code:

<link rel="stylesheet" type="text/css" href="shadowbox.skin2.css">
<script type="text/javascript" src="shadowbox.skin2.3rc1.js"></script>
When I put it on the calling page it opens the link without SB, an d when i put it on the called page it doesn't change anything.

The 3.0rc1 version is the the 3.0.1?
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Phil_R
In reply to this post by Wizzud
The files don't work with version 3.0.1, is there any chance of getting updated files to work with this version?

Would be very much appreciated, my client really wants the close button at the top.

Phil

Edit:  I've worked it out myself a different way, I've put a linked image in the IFRAME's HTML like this:

<a href="javascript:parent.Shadowbox.close();" title="Close" id="shadowboxClose"></a>


(The ID attribute is just so I can position it in the CSS)

- Will only work with IFRAMES though of course... could maybe use just Shadowbox.close() for DIV ones.

Phil
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

flockbox
In reply to this post by Wizzud
Thank you wizzud. It worked well even for a newbie - see
http://www.pencilkit.co.uk/pages_dior/1dior.html
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

dawirick
In reply to this post by Phil_R
Phil R:

Thank you!

IFRAME reference worked like MAGIC!
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Miguel
In reply to this post by Wizzud
Does not work with the last version....

please help !!!!
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

rays
In reply to this post by Wizzud
This fix appears not to work--perhaps the skin2 files no longer work with the latest Shadowbox release? Couldn't the close button location be added to the options configuration (or defaulted to the top right, where most folks are used to seeing it?)
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Magnolia
Skin-files are not used in the latest builds (v3.0.3). To get the job done, put this script in a new or existing js-file, or just in the header of a page in which Shadowbox is applied.
function moveCloseLink(){ 
    var cb=document.getElementById('sb-nav-close'); 
    var tb=document.getElementById('sb-title'); 
    if(tb) tb.appendChild(cb); 
} 
Shadowbox.init({
        ...
        onOpen: moveCloseLink
});
In the file shadowbox.css, on line 22 add:
#sb-nav-close{background-image:url(close.png); position: absolute; top: 8px; right: 0; width:15px; height:15px; cursor:pointer;
Source: http://shadowbox-js.com/forum.html#nabble-td3004085i20|a4982060
Gil
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Gil
In reply to this post by Phil_R
Thanks for this code. You can't imagine how many times I searched for it.
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Steve
Hi there, I'm using shadowbox version 3.0.3 (base) with no js frameworks and would like to superimpose the close button inside the border. I can almost do this in css but it remains as a lower layer so the borders are covering it. It also does not respond to z-index properties or absolute positioning.

Can you help me please?
Reply | Threaded
Open this post in threaded view
|

Re: HowTo : Move the Close button to the top right

Adam Pery
In reply to this post by Gil
NICE!!
WORK!

Pay attention, that:
background-image:url(close.png);
may have different path if you put it not in shadowbox.css