Spry overlays iframe

Is there a way to keep the spry menu on top of an iframe of
swf?

The best way to make sure a submenu will be on top is to
dynamicly create an Iframe for every opening submenu(and place this
underneath the div. I'm not sure that it will cover an SWF.
I do not have any knowledge of the spry menu so I can not
give any spry specific help!

Similar Messages

Spry and Iframe event handlers

Hi,
I am trying to implement an ajax simulated file upload using
spry and iframes. With Spry's power to attach event handlers and
$$() notation for accessiblities is there a way that you can detect
when an iframe is loaded using any of spry's utilities.?

there is nothing other than the basic delay in web overlay.
I suppose the only thing to do would be to create the whole article as HTML, but I'm sure that would be over the top, it would put me off!
Alistair

Using calendar overlays - iframe overlay not showing (calendar in view)

Hello, I'm playing with calendar in Sharepoint 2013 and overlays.
I'm in the main calendar view and I don't have the "calendar in view" iframe in the calendar view.
I can see all overlays in the calendar but there is no iframe.
The goal is to a legend about what color means.
Thank you for your help.
Regards,

Hi PatLCH,
For this issue, I recommend to check the things below:
Click into the Calendars in View link and then check if the overlay calendars are to set to be visible in View. If not, check this option and then check the results.
Check if there are any custom codes in the page which will hide the “iframes”.
Access the calendar view with site administrator and check the results.
To narrow down the issue scope, I recommend to create a calendar list and then check if the same issue will occur.
Please also provide a screenshot of the calendar view.
Best regards.
Thanks
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

Spry vs iframe

Hi Everyone,
I'm rather new to Spry, just 've been experiening it for some
days.
For the web app I am worikng on I need an interface to search
user database and select one or more users for further processing
as a part of a large form - preferably without page reload.
First, I implemented it with multiple iframe-s and some
javascript and it worked relatively fast, but was tricky and hard
to maintain the code, so I decided to rewrite it with the
easy-to-code-easy-to-maintain Spry. Then I experienced a vast
decrease in terms of page loading speed.
Does anyone have an explanation why?
In the iframe-version I set up the search criteria with a
form, post it to a php script, query database, format html table
and return it to the browser into an iframe.
In the Spry version, search criteria are posted to php and
xml retreived using dataSet.setURL(...) and then spry:region
recreated with dataSet.loadData(). (first, I used non-destructive
filters but it seemed slower)
The more rows the query retreives, the quicker the
iframe-version is compared to spry. (the max rowcount I tried is
approx.600)
Also checking the memory and cpu usage, spry performs much
worse (same as Tiestosolo wrote some days ago.)
The only answer I can think of is the extra memory and cpu
needed for the construction of the xml dom for the spry dataset.
However, it would be a serious performance factor for spry limiting
its usage only for relatively small (10-50 rows) datasets.
I'm wandering if anyone can provide me with some info. Did I
screw up something?
Thanks a lot in advance.
Miklos Kovacs
Hungary

The best way to make sure a submenu will be on top is to
dynamicly create an Iframe for every opening submenu(and place this
underneath the div. I'm not sure that it will cover an SWF.
I do not have any knowledge of the spry menu so I can not
give any spry specific help!

Web Content Overlay - iFrame Width Issue

I'm adding a web content overlay in one of my articles. I've created and hosted a webpage that contains an iFrame of a Google Form.
When I select my text frame in the article, apply the Web Content Overlay option, add the URL, and load/test the folio on my iPad, the iFrame width I set in my html file isn't taking effect. The web overlay isn't displaying (and wrapping the text and form) according to the width that I specified in the html file. Testing the html file in different browsers on my desktop shows a change in width, but not so on the web content overlay frame in my article. Vertical scrolling is working just fine but I'd like to have a narrower width for the form so that a user only scrolls vertically; instead of having to scroll left/right to read more information on the form.
I've tried editing the iFrame width in the code: inside the iframe element, adding a div wrapper, defining a table width... No adjustments in the html seem to be rendering correctly on iPad.
And I'm not a huge fan of the Web Content Overlay's option of Adjusting content to fit the frame since it makes the form very small.
I'm running on CS5.5; I haven't tested the direct embed into
Any help is greatly appreciated!

Try to paste the code directly into InDesign. Sometimes it creates better results than just using a web overlay. I'm also dealing with some similar problem trying to get SoundCloud into the document.

Spry in Iframe = trouble in IE

Hi,
I have encountered a problem or bug with a Spry form.
When the form lives in an iframe, the function
Spry.Widget.SelectionDescriptor.prototype.update throws an error
message "no access" when executing this line:
this.range =
this.element.ownerDocument.selection.createRange();
This only occurs in IE. Fx and Opera have no problems with
the form.
Any ideas how to fix this. The form has to live in an Iframe.
Kind regards
Morten

It appears spry and IE dont work well together at all. I am
also having a problem with a navagaiton menu. It wont work in IE
either. Wish I could help.

Spry Menu & iframes

I am trying to debug a page that includes both a Spry menu
and an iframe:
http://gid.cdiabu.com/ptwinter06/mroulstone/resume.html
When you navigate to this resume.html page you should be able
to hover over the "portfolio" navigation link and see a sub-menu
dropdown. However, no dropdown appears on this page and this page
only. The only difference I see on this page is that it is the only
one that includes an iframe. Could this iframe somehow be
interfering with the dropdown list?
A fresh pair of eyes would be appreciated. What else am I not
seeing?
Thanks,
Gene
resume.html

On Sat, 8 Dec 2007 16:55:21 +0000 (UTC), "babong"
<[email protected]> wrote:
> When you navigate to this resume.html page you should be
able to hover over
>the "portfolio" navigation link and see a sub-menu
dropdown. However, no
>dropdown appears on this page and this page only. The
only difference I see on
>this page is that it is the only one that includes an
iframe. Could this
>iframe somehow be interfering with the dropdown list?
While there appears to be some other problem with it as well,
your
assumption is correct. The menu cannot appear over the space
reserved by
the browser to display another page in the iframe.
Gary

Embedding YouTube into Flash

Could anyone help me with embedding YouTube videos into a
Flash file. Not got a clue how to do it!!!!!!

Hi,
You can't place HTML snippets directly in Flash Catalyst.
Here are a couple of related threads that may help:
HTML as an overlay iFrame - http://forums.adobe.com/message/2442117#2442117
YouTube in Flash Catalyst - http://forums.adobe.com/message/2890324#2890324
Tanya

IWeb question and feedback

I've been testing iWeb '08 and putting it through its paces. It really does a good job if you know what you are doing. It is way more capable then the easy templates reveal. But first I have a question.
If I want to include an external javascript file with a page, how do I get iWeb to publish it with all the other data? Right now I have to manually copy it to my publish folder after every time I publish. Not a very elegant solution.
I also have one big request for the next version of iWeb. For some pages, I want to make the browser background transparent. HTML allows this but not iWeb. iWeb only offers a solid color or image. It would be so easy for Apple to include a "none" option for this field like they do the page background. Here's why this little detail is so important.
When I use HTML snippets, I can put one iWeb page within another using iframes. I also overlay iframes for various effect. I need the embedded page browser backgrounds to be transparent so when the inline frame refreshes, the browser background doesn't wipe the iframe clean each time. This is what it does without the transparent option. It makes the whole inline frame look like a refresh instead of keeping the existing objects solid, except for the specific objects I want to change. It may seem a small detail but this goes a long way to making the site look solid and professional. Using transparent iframe overlays allows me to do some pretty nifty looking pages.
Right now I have to post-process my files using a utility that does a multi-file find and replace. It is fast but it still is a hack job - not very Apple-like or elegant. What I end up doing is having every page that I want to be transparent use a certain known color code (ie. #000000) that I then search for and replace with the word "transparent". This does the trick, but again, not the way things should be with Apple software.
This change I'm requesting in iWeb is not anything unreasonable or hard to implement. One Apple tech could do this in about 5 minutes. This opens iWeb up to doing iframes elegantly and enables iWeb to do amazing things without post-processing hacks. I know Apple wants to keep things simple but this one change does not jeopardize this for beginners, yet opens things up to us who are capable. It could make complex pages simple.
Actually, I wish Apple would go even further and add a new option at the bottom next to web widgets. Call it the iFrame, or subpage, option. That way I could do inline frames without even resorting to HTML snippets. Have the details come up in the inspector too. This is more complex to add but even a more elegant solution. Newbies and simple templates could ignore this function but advanced web designers would flock to it.

You are just talking to other users here, so make sure you also put in all your requests to Apple via the Provide iWeb Feedback item in the iWeb menu.

I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
     <div class="section_w500">
        <h2>North Bali Listings</h2>
        <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
            <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
            <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
            <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
              <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                <br />
                The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
              Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
              <table width="100%">
                <tr>
                  <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
                </tr>
              </table>
              <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
                The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
              <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
            </div>
            <div class="TabbedPanelsContent">
              <p> </p>
              <table width="100%" border="0">
                <tr>
                  <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                    <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                  <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                </tr>
                <tr>
                  <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                    <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
                  <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                </tr>
                <tr>
                  <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                    Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                      Min Rental Period 25 Years, extendable to to a max of 75 years
                      (with full "Right Of Use" issued by owner)</span></td>
                  <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                    <br />
                    <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                </tr>
              </table>
              <p><br />
              </p>
              <hr width="100%" noshade="noshade" />
              <p> </p>
            </div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
            <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
        </div>
        <p> </p>
      <p>
        <h7 style="color: #C03"></h7>
      </p>
<h2></h2>
     </div>
     <div class="cleaner"></div>
    </div> 

Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

Spry Vertical Submenu Bar Appears Behind iFrame

In IE and Chrome, the Spry vertical submenu bar appears properly on every page of the website, except for the one page that has iframes.
In IE, the submenus appear behind the iFrames
In Chrome, the submenus appear in front of the iFrames but with an incomplete border
In Firefox and Safari, the submenus appear as they should (in front of the iframes and with a complete border)
I've scoured this forum and tried several fixes that seemed to work for others with slightly different conditions but didn't work for mine.
I've included my SpryMenuBarVertical.css for referece; if you can offer a fix for this particular issue, I'd be forever grateful. Thank you!
—Lisa
@charset "UTF-8"; /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT: box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed-width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-sty le-type: none; font-size: 100%; cursor: default; width: 245px; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers are same fixed width as parent; position children relative to this container */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 245px; } /* Submenus are initially off the left side of the screen (-1000em) and then, on hover, appear slightly overlapping to the right and up with a higher z-index */ ul.MenuBarVertical ul { margin: -5% 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 12em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 12em; } /******************************************************************************* DESIGN: color scheme, borders, fonts *******************************************************************************/ /* Outermost menu containers have no borders */ ul.MenuBarVertical { border-bottom: 0px solid Gray; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { border: 1px solid Gray; } /* Menu items are a mustard yellow block with padding and no text decoration */ ul.MenuBarVertical a { display: block; cursor: pointer; background-color: #E6DC8F; padding: 0.5em 1em; color: #333; text-decoration: none; border-top: 0px solid Gray; } /* Menu items that have hover or focus display with a dark green background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #275936; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a dark green background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #275936; color: #FFF; } /* Active top-level menu items display a branch */ body#home a#homeNav, body#forsale a#forsaleNav, body#clubhouse a#clubhouseNav, body#falmouth a#aboutfalmouthNav, body#faqs a#faqNav, body#directions a#directionsNav, body#calendar a#calendarNav, body#partners a#partnersNav { background-image: url(NavBranch.gif); background-repeat: no-repeat; color: #FFF; padding-left: 50px; } /* Active top-level menu items with a submenu display a branch and a white arrow */ body#aboutridgewood a#aboutridgewoodNav, body#floorplans a#floorplansNav, body#contactrealtors a#contactNav, body#videos a#videosNav { background-image: url(NavBranchArrowWhite.png); background-repeat: no-repeat; background-color: #275936; color: #FFF; padding-left: 50px; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and use a green background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(NavArrowGreen.gif); background-repeat: no-repeat; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and use a white background arrow image */ ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(NavArrowWhite.gif); background-repeat: no-repeat; } /* Current menu items that have a submenu display a branch graphic to the left and a white arrow to the right */ body#story a#aboutridgewoodNav, body#story a#storyNav, body#neighborhood a#aboutridgewoodNav, body#neighborhood a#neighborhoodNav, body#structure a#aboutridgewoodNav, body#structure a#structureNav, body#green a#aboutridgewoodNav, body#green a#greenNav, body#maplewood a#floorplansNav, body#maplewood a#maplewoodNav, body#birchwood a#floorplansNav, body#birchwood a#birchwoodNav, body#sprucewood a#floorplansNav, body#sprucewood a#sprucewoodNav, body#aspenwood a#floorplansNav, body#aspenwood a#aspenwoodNav, body#cedarwood a#floorplansNav, body#cedarwood a#cedarwoodNav, body#oakwood a#floorplansNav, body#oakwood a#oakwoodNav, body#contactrealtors a#contactNav, body#contactrealtors a#contactrealtorsNav, body#lenders a#contactNav, body#lenders a#contactlendersNav, body#owners a#contactNav, body#owners a#contactownersNav, body#videoOverview a#videosNav, body#videoOverview a#videoOverviewNav, body#videoTour a#videosNav, body#videoTour a#videoTourNav, body#videoLender a#videosNav, body#videoLender a#videoLenderNav { background-image: url(NavBranchArrowWhite.png); background-repeat: no-repeat; background-position: -1% 50%; background-color: #275936; color: #FFF; padding-left: 50px; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarVertical iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } }

Long answer = z-index
http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Nancy O.

Iframe flashing Spry Vertical menu

Hi All,
Im having an issue with the Spry Vertical Menu with flyouts.
It appears that the iframe used for the IE hack is flashing
on the screen whenever I rollover a menu item with a flyout in it.
Anyone having this same issue? Any help would be much
appriciated as I like the new Spry Widgets but I cannot have
glitches such as these... thanks
Here is my CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 82px 0px 0px 26px;
padding: 0;
list-style-type: none;
font-size: 1em;
cursor: default;
width: 14.5em;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0px 0px 0px 0px;
list-style-type: none;
font-size: 1em;
position: relative;
text-align: left;
cursor: pointer;
width: 14.5em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 8.2em;
background-color:#620808;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
text-decoration:none;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #000;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
font-size: 1em;
padding: 0.5em 0em 0.5em 2em;
color: #dfc398;
text-decoration:none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-image:url(../images/office/side_menu_rollover.jpg);
background-repeat:no-repeat;
background-position:6px 8px;
color: #FFF;
text-decoration:none;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;

ok... no sooner than I hit submit... figured it out...
If anyone comes across this, it seems just add width:0,
hieght:0 to the following css:
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
width:0px;
height:0px;
Happy coding!

Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Spry not using an IFRAME

Hi there,
I've recently bought CS3 and I'm still getting my head around
a few of the widgets, firstly the one I wanna use is the suggest
and that not in the menu toolbar in dreamwaever which is annoying
me, ive also downloaded the source files and tried to find the
right folders to put them in so dreamweaver can set up the asset
files for me each time but with no joy, anyway, I got the suggest
tool working after 4 hours but it appears in an Iframe, im sure
thats due to some crap IE issue but it has made the entire night I
spent working on it useless, the iframe appears with content
suggested nicely, apart from the fact that it pushes the entire top
half of the website down, www.localheat.co.uk have a look, all I
wanna do is make the suggest appear in a div not an iframe, ive
even tried changing it in the js file with no joy, no matter what
it still appears in an iframe and shifts the entire content of the
page down.
can anyone help me, before I scrap the spry suggest and write
it off as a bad idea.
regards,
Diego

Diegomh7 wrote:
> can anyone help me, before I scrap the spry suggest and
write it off as a bad
> idea.
Somebody might be able to help you here, but you might get a
faster
response in the dedicated Spry forum:
http://www.adobe.com/go/labs_spry_pr1_forum
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Display iFrame in Overlay

Hi all,
Im developping a webpage in which I need to display some iFrame content in the Overlay written with Javascript.
The code works perectly in IE6/7 and Firefox, but in Safari, it works only the first time the overlay comes up. if I click on "back" and repeat that action, it the overlay displays nothing. Can someone help me on this? Thank you.
Issue Environment:
PC: Thinkpad T61
Safari: 3.1.2 for Windows
OS: Windows XP Professional, SP3
Here is the code, FYR:
var loginDivWidth = 960;
var signinflow = '<table align="left" bordercolor="#000000" border="2" valign="top" width="960" height="760">'
+'<tr><td align="right"><table><tr><td align="left" style="border:1px solid #b1b1b1;">'
+'CLOSE X</td><td width="20"></td></tr></table>'
+'
<iframe name="ifrTur" id="leftTur" onload="showIfrStyle();" align="left" border="0" frameborder="0" scrolling="auto" width="950" height="760" src="http://64.211.90.9/iframe/tutorial.seam?custId=${param.selectedDeviceId}"> </iframe></td><tr></table>';
if (G("sign_div")) {
G("sign_div").style.width = 960 + 'px';
G("sign_div").style.right = 20 +'px';
G("sign_div").style.top = 22 +'px';
G("sign_div").style.display = '';
} else {
var signDiv = GC('div');
document.body.appendChild(signDiv);
signDiv.id = 'sign_div';
signDiv.align = "center";
with (signDiv.style) {
position = 'absolute';
right = 20 + 'px';
top = 22 + 'px';
width = loginDivWidth + 'px';
zIndex = 999;
background = '#FFFFFF';
border = '#999999 solid 2px';
G("sign_div").innerHTML = signinflow;
Thanks a lot in advance!

I don't know why it's not displaying properly, so I'll suggest some alternatives.
Could you use an <object> and leave the iframe for IE? Or do the whole thing with something like php?

Spry overlays iframe

Similar Messages

Maybe you are looking for