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!

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

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 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!

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

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/

Spry, iFrames and IE

Thanks for looking at this. Your feedback is appreciated it.
Here are the facts:
1) My page uses an iframe (I know they suck but without going
into details, I'm stuck with it).
2) The page in the iframe contains Spry validation text boxes
and other form elements.
3) If I submit the page without the iframe, all works great
(i.e. the fields validate).
4) If I submit the form with the iframe, the fields do not
validate in IE7 without MULTIPLE REFRESHES/RELOADS OF THE FRAME. In
other words, you can submit the form without filling in the
appropriate input boxes.
Yes, it sounds strange. This behavior does not occur in
FireFox.
Here are the appropriate links:
Interior Form (the
one in the iframe)
Full
Page with iframe
Go ahead and click in a few of the input boxes to clear the
content and then try submitting the form. Blanks are not allowed
and you should see exclamation marks for blanks. Try it first in
FireFox and then try it IE.
Again, the only way I can get it to eventually work in IE is
to reload/refresh the iframe content (right click > refresh) a
few times.
Thanks for any insight.
Cheers.
NOTE: The validation problem only occurs with input boxes.
Checkboxes and selects seem to work fine in both browsers.

This might help http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and this http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml
Gramps

Spry Accordion with iFrames

I have a Spry Accordion which I'm using on the same page as an iFrame setup. I want to link the AccordionPanelTab to an iFrame link.
In order to get the iFrame to work I need to link like this:
<a href="iframepage.php" onclick="return changeIframeSrc('iframe', this.href);" target="iframe">
This works for links within AccordionPanelContent but not if I link the AccordionPanelTab.
I can get the AccordionPanelTab to link by
<a href="iframepage.php" onclick="window.location=this.href;return false;">
but not within the iFrame. Is there a way of combining these two to make them work or another way of making the AccordionPanelTab link?
Many thanks.

Have a look at the following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<p>Open by Panel Index:
<a href="#" onclick="Accordion1.openPanel(0); return false;">0</a> |
<a href="#" onclick="Accordion1.openPanel(1); return false;">1</a> |
<a href="#" onclick="Accordion1.openPanel(2); return false;">2</a> |
<a href="#" onclick="Accordion1.openPanel(3); return false;">3</a>
</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 3</div>
    <div class="AccordionPanelContent">Content 3</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 4</div>
    <div class="AccordionPanelContent">Content 4</div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Copy and paste into a test document making sure that the links are correct. Test in your favourite browser.

Spry Menu and iframe

Hi, I want to link my spry menu to my iframe, so when I click on something on my menu, a different page will show up on the iframe, can someone please explain to me how to do this? Thanks

Here some other links, maybe you prefer words instead of a video:
Examples
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
http://craigsworks.com/projects/simpletip/
http://calebjacob.com/tooltipster/
http://www.solutions4website.com/Extensions/nova_dropdown_menu.aspx
Tutorials:
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
http://try.jquery.com/
http://learn.jquery.com/
https://tutsplus.com/course/30-days-to-learn-jquery/
http://www.w3schools.com/jquery/

Spry iFrame Hack Problem - Resize Submenus

I'm trying to resize the submenus on the Spry Menu Bar
different sizes. It seems that when I make one submenu smaller than
the rest an iFrame sticks out of the side (with the width of the
rest of the submenus NOT the one I just resized). It of course
cannot be seen on FireFox but can be seen on IE. Any tips?

I see that you have fixed it.
Gramps

Iframes and spry widget issue

PLEASE HELP!
I am building a website for my company using Dreamweaver for the very first time. I have a spry accordian menu on my page (that probably has nothing to do with my issue).
Next I added an iframe in the page to hold a vertical spry menu (since it will appear in other pages and I only want to edit it once. The menu was working fine until I did this.
Now that I embedded it in the iframe it is opening behind other things on the page. What can I do? Code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Arkansas Bankers Association</title>

<style type="text/css">
</style>
<link href="Dec28.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<style type="text/css">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

</head>
<body onload="MM_preloadImages('Images/HeaderHover_Files/images/aboutus_hover.png','Images/Head erHover_Files/images/education_hover.png','Images/HeaderHover_Files/images/banking_hover.p ng','Images/HeaderHover_Files/images/government_hover.png','Images/HeaderHover_Files/image s/products_hover.png','Images/HeaderHover_Files/images/partnership_hover.png','Images/Head erHover_Files/images/fraudcenter_hover.png','Images/HeaderHover_Files/images/consumer_hove r.png','Images/HeaderHover_Files/images/home_hover.png','Images/HeaderHover_Files/images/c ontactus_hover.png','Images/HeaderHover_Files/images/sitemap_hover.png','Images/Header_htm landimages/images/home_hover.png','Images/Header_htmlandimages/images/contactus_hover.png' ,'Images/Header_htmlandimages/images/sitemap_hover.png')">
<div id="wrapper">
<div id="header">
    <div align="center" "top">
     
<table id="Table_01" width="980" height="81" border="0" cellpadding="0" cellspacing="0" bgcolor="#2B4E74" >
<tr>
<td rowspan="2">
   <img src="Images/header_and_search/images/logo.png" alt="" width="597" height="81" border="0"></td>
<td>
   <img src="Images/header_and_search/images/home.png" alt="" width="250" height="33" border="0"></td>
<td>
   <img src="Images/header_and_search/images/contact-us.png" alt="" width="65" height="33" border="0"></td>
<td>
   <img src="Images/header_and_search/images/site-up'.png" alt="" width="68" height="33" border="0"></td>
</tr>
<tr>
<td colspan="3" valign="middle" background="Images/header_and_search/images/search-box.png" border="0"><form name="form1" method="post" action="">
    <label>
          <input name="search" type="text" id="search" value="Search by Keyword(s)" size="35">
    </label>
    <label></label>
              <label>
              <input name="submit2" type="image" id="submit2" src="Images/header_and_search/images/arrow.png" border="0" align="bottom">
          </label>
     </form> </td>
</tr>
</table>

    <a href="www.arkbankers.org/aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Images/HeaderHover_Files/images/aboutus_hover.png ',1)"><img src="Images/HeaderFiles/images/aboutus.png" name="Image21" width="76" height="37" border="0" id="Image21" /></a><a href="education_training.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Images/HeaderHover_Files/images/education_hover.p ng',1)"><img src="Images/HeaderFiles/images/education.png" name="Image22" width="133" height="37" border="0" id="Image22" /></a><a href="www.arkbankers.org/banking_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','Images/HeaderHover_Files/images/banking_hover.png ',1)"><img src="Images/HeaderFiles/images/banking.png" name="Image23" width="99" height="37" border="0" id="Image23" /></a><a href="www.arkbankers.org/government_relations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','Images/HeaderHover_Files/images/government_hover. png',1)"><img src="Images/HeaderFiles/images/government.png" name="Image24" width="141" height="37" border="0" id="Image24" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','Images/HeaderHover_Files/images/products_hover.pn g',1)"><img src="Images/HeaderFiles/images/products.png" name="Image25" width="130" height="37" border="0" id="Image25" /></a><a href="www.arkbankers.org/partnership_opportunities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','Images/HeaderHover_Files/images/partnership_hover .png',1)"><img src="Images/HeaderFiles/images/partnership.png" name="Image26" width="158" height="37" border="0" id="Image26" /></a><a href="www.arkbankers.org/fraud_center.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','Images/HeaderHover_Files/images/fraudcenter_hover .png',1)"><img src="Images/HeaderFiles/images/fraudcenter.png" name="Image27" width="94" height="37" border="0" id="Image27" /></a><a href="www.arkbankers.org/consumer_connection.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','Images/HeaderHover_Files/images/consumer_hover.pn g',1)"><img src="Images/HeaderFiles/images/consumer.png" name="Image28" width="149" height="37" border="0" id="Image28" /></a></div>
</div>
</div>
<div id="body">

<table width="860" height="auto" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
   <td width="3" rowspan="3" valign="top">       </td>
<td height="53" colspan="4" valign="top">
<div align="center"><img src="Images/education_images/education_top.png" alt="Education and Training" width="805" height="150" /></div>
</td>
<td width="29" rowspan="2" valign="top"><table width="20" border="0" cellspacing="5" cellpadding="2">
<tr>
    <td> </td>
</tr>
</table>
<br />
</td>
<td width="144" rowspan="2" valign="top"><img src="Images/Ads/ababannerad.jpg" width="140" height="325" /><br />
    <br />
    <img src="Images/Ads/Link_LiveEvents2010_CoverPic.jpg" width="144" height="186" /><br />
    <br />
    <img src="Images/Ads/SponsorshipBrochure2010_Link.gif" width="144" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top" background="Images/bg_department_details.png"><table width="771" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
              <td width="135" valign="top">
              
            
            
            <iframe src="EducationMenu.html" width="145" height="auto" frameborder="0" scrolling="no"> </iframe>
            <br />
            <br />
                          <br /></td>
            <td width="616" valign="top"><div align="left">
              
              <div id="Accordion1" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">ABA LIVE EVENTS</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Live.png" width="150" height="110" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in a variety of formats to make   training as convenient, timely and cost effective as possible.<br />
                    <a href="educ_liveevents.html">View All Live Events</a> <a href="educ_liveevents.html"><img src="Images/more_arrow.png" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">ABA WEBINAR LIBRARY</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinar_Library.png" width="150" height="124" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in<br />
                    a variety of formats to make   training as convenient, timely and cost effective as possible. We   encourage you to explore all the training options available to you.<br />
                    <a href="Jan5_2.html">View Webinar Library <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /><br />
                      </a><br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">COMPUTER BASED IN-HOUSE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/ComputerBasedInHouse.png" width="150" height="110" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in a variety of formats to make   training as convenient, timely and cost effective as possible. <br />
                    <a href="Jan5_2.html">View Computer Based In-House Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">WEBINARS & PODCASTS</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinars_Podcasts.png" width="150" height="110" align="left" /><br />
                    A webinar is an enhanced telephone seminar. The audio portion is delivered by speaker phone. You may also view a corresponding PowerPoint presentation by PC.
                    &A. You will receive a PIN, materials and instructions prior to the seminar.<br />
                    <a href="Jan5_2.html">View Webinars & Podcasts <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">SELF-PACED ONLINE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/SelfPacedOnline2.png" width="150" height="104" align="left" /><br />
                    ABA eLearning includes over 60 courses and 200 hours of training in the retail,   small business, personal trust, compliance, and
                    management development areas.<br />
            <br />
            <strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001">Register/Enroll/Take   a Demo - </a></strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001" target="_rpbrowser"><strong>Take the Demo   Now</strong></a><strong> </strong> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
            <a href="Education/ABA_eLearning_Price_and_Credit_List%20Jan_10.xls" target="_rpexternal">Brochure & Pricing</a> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
            <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">INSTRUCTOR LED ONLINE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/InstructorLedOnline2.png" width="150" height="110" align="left" /><br />
                    Your instructor posts weekly assignments which includes a reading (either textbook or online) and   homework is submitted through the discussion board or via email. You complete each at your convenience   and take a weekly quiz.   Exams (proctored midterms and/or   finals) are all taken online. Your instructor is available to provide   feedback and answer questions. <a href="Jan5_2.html">View Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>ANNUAL CONVENTION</strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Convention.png" width="160" height="106" align="left" /><br />
                    New Rules, New Opportunities, New Banking Environment<br />
                    <br />
                    <strong>121st Annual Arkansas Bankers Association Convention & Tradeshow</strong><br />
The Peabody Hotel & Statehouse Convention Center, Little Rock, Arkansas<br />
May 4-6, 2011 - <strong><em>Brochure Coming Soon!</em></strong><br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>BANK MANAGEMENT SEMINAR</strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/BankManagementSeminar.png" width="124" height="106" align="left" />Open to our Bank Members, Associate Members and non-members, this annual event will be held at Hilton Branson Convention Center in Branson, Missouri.<br />
                    <br />
                    <strong>2011 Bank Management Seminar</strong><br />
Hilton Branson Convention Center, Branson, Missouri.<br />
August 4-6, 2011<br />
<br />
</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>E<strong>MERGING LEADERS LEADERSHIP CONFERENCE</strong></strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/LeadershipConference.png" width="160" height="106" align="left" />Make plans to join us for the 2011 conference in order to network with your peers, further your education and leadership skills, and accelerate your banking career!<br />
                      <br />
                          <strong>2011 ELS Leadership Conference</strong><br />
                      Doubletree Hotel and Robinson Center, Little Rock, Arkansas<br />
                      July 21-22, 2011<br />
                    <br />
                  </div>
                </div>
              </div>
              <br />
              <br />

              <div align="left"></div>
                <p align="left""top"> </p>
                <p> </p>
              </div></td>
          </tr>
          </table>
          
          <script type="text/javascript">

</script>
          <br />        </td>
    </tr>
</table>
<p> </p>
</div>

</div>
<div id="footer">
<table width="800" border="0" align="center" cellpadding="2" cellspacing="5">
    <tr>
      <td>Footer Contents Here</td>
    </tr>
</table>
<br />
</div>
</body>
</html>

I frame should not be used in this situation because its contents are not in the same flow as the main document.
You are far better off using serverside includes as per following article http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps

Spry vs iframe

Similar Messages

Maybe you are looking for