Shadowbox

multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

8 messages

maplesyrup

multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

(This post was updated on )

Somehow I think i deleted my whole forum question but I'm not sure how. I still have a window open with my last response and Wizzud's response via email so I'll copy that into this.

WIZZUD

Hmm....
You seem to be using framesets just to provide positioning and horizontal scrolling of inner content.
Generally, a frameset is used as the main page, in order to provide static content in one frame, that controls the dynamic content in the other frame(s). You're using each frameset page as a main site page, with no within-frameset navigation or content manipulation.
You could simplify things by replacing each frameset page with a page that has a single-cell table, containing a div for the menu and an iframe for the content. Each section (you don't need the iframe for the home or contact page - just use a div) would then consist of a parent page (containing the menu and an iframe) and a content page (loaded into the parent's iframe).
The Shadowbox code would then be loaded into each parent page, and activated from each content page (by calling parent.Shadowbox.open(), for example).

Very basic example (excluding Shadowbox):
Advertising Main Page (advertising.html)...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Advertising Main Page</title>
<style type='text/css'>
html,body,table,td {margin:0; padding:0; border:0 none; width:100%; height:100%;}
body {background-color:#000000;}
td {vertical-align:middle;}
iframe {width:100%; height:415px; margin:0; padding:0; border:0 none; background-color:#00aed8; overflow:hidden;}
#menubar {width:100%; height:50px; background:#ffffff url(images/menus/miaostberg.gif) no-repeat 0 0; text-align:right;}
#menu {padding-top:25px; padding-right:40px;}
#menu a, #menu span {margin:0 10px;}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table cellspacing='0' cellpadding='0'>
<tr>
<td>
<div id='menubar'>
<div id='menu'>
BEAUTY|FASHION|ADVERTISING
</div>
</div>
<iframe id='content' name='content' src='content_advertising.html' frameborder='0'></iframe>
</td>
</tr>
</table>
</body>
</html>

Advertising Content Page (content_advertising.html)...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Advertising Content Page</title>
<style type='text/css'>
html,body {margin:0; padding:0; border:0 none; width:100%; height:100%;}
body {background-color:#00aed8;}
#content {width:100%; height:100%; white-space:nowrap; overflow:auto;}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id='content'>
advertising content goes here, in a table, a div, as images, whatever you like
advertising content goes here advertising content goes here
advertising content goes here advertising content goes here advertising content goes here advertising
content goes here advertising content goes here advertising content goes here advertising content goes
here advertising content goes here advertising content goes here advertising content goes here
advertising content goes here advertising content goes here advertising content goes here advertising
content goes here advertising content goes here advertising content goes here advertising content goes
here advertising content goes here advertising content goes here advertising content goes here
advertising content goes here advertising content goes here advertising content goes here advertising
content goes here advertising content goes here advertising content goes here advertising content goes
here advertising content goes here advertising content goes here advertising content goes here
advertising content goes here advertising content goes here advertising content goes here advertising
content goes here advertising content goes here advertising content goes here advertising content goes
here advertising content goes here advertising content goes here advertising content goes here
advertising content goes here advertising content goes here advertising content goes here advertising
content goes here advertising content goes here advertising content goes here advertising content goes
here advertising content goes here advertising content goes here advertising content goes here
advertising content goes here advertising content goes here advertising content goes here advertising
content goes here advertising content goes here advertising content goes here advertising content goes here advertising content goes here
</div>
</body>
</html>

Note: both pages have a Doc Type; the table and its single cell provide the positioning; the iframe is constrained to the cell; the #content DIV on the content page will provide a horizontal scroll bar for overlong content (as the huge amount of text I have put in should demonstrate!).
Similar pages for the other sections - with slightly modified menus - enables navigation between main pages. Running Shadowbox in each main page means it will cover the entire browser window when activated (from the content page within the iframe).

MY RESPONSE:

After my computer having a melt down this week I'm back to the task.

I think I'm pretty much there but I don't quite understand where in the content page to place the parent.Shadowbox.open() because at this stage I can only get it to open up in the shadowbox but it is restricted to the are where the images in the scroll bar are.

I'm attaching a screenshot of my code as it won't show up correctly in the forum for whatever reason.

then after all the images I have:

</tr>
</table>

</div>
</body>
</html>

in the head I have also inclued the below because if I don't it doesn't open up in shadowbox at all just a huge picture restricted to the scrolling content area.

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

this is what i have in the iframe page:

just found part of the old post but 1/2 of it is missing so i'll just keep this open. So sorry for any confusion and apologies to the moderator. First time forum user!! sorry :(

Wizzud

Re: multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

One solution (of a number)...

In the content page (the one loaded into the iframe):

- remove the shadowbox.css and shadowbox.js files - you're not using Shadowbox in this iframe so they are redundant
- within the (currently empty) SCRIPT tags, put

var Shadowbox = parent.window.Shadowbox
  ? parent.window.Shadowbox
  : { open : function(){ return true; } };

- you don't need the rel="shadowbox" attribute in the anchors
- the anchor's onclick attribute becomes onclick="return !!Shadowbox.open(this);"

Combine literacy with curiosity and a whole world of information opens up to you

maplesyrup

Re: multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

OMG IT WORKS!!!

Thank you sooooo much. I really appreciate the time you have put into this.

maplesyrup

Re: multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

In reply to this post by Wizzud

OMG IT WORKS!!!

Thank you sooooo much. I really appreciate the time you have put into this.

Fausto

Re: multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

Ok, it works.
But if I want to show a gallery, how do i change this code?
onclick="return !!Shadowbox.open(this);"

Thanks

Wizzud

Re: multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

Assuming the constituents of the gallery are in the iframe, you need to pass the entire gallery to the parent - probably via a function that gathers all the necessary data together and in the correct format.

Combine literacy with curiosity and a whole world of information opens up to you

Fausto

Re: multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

Mmm, so difficult for me... some help? thanks..

Fausto

Re: multiple frameset pages (resubmitting accidently deleted unresolved post - sorry)

Reply Threaded

Anyone could help me?
Thanks a lot :)