Sliding Panels hidden content shows on page load

Greetings,
I am working on a site for a child abuse prevention
non-profit and need some help asap!
I am using the unobtrusive sliding panels at:
Adobe
Unobtrusive Sliding Panels Example
I have two panels side by side. When the page loads, all of
the hidden content is briefly shown to the right of the panels. It
does this on the adobe sample as well.
Is there ANY way to hide this hidden content during the page
load? If so, could I get exact instructions? I am more of a
front-end person and not the best with scripting.
BTW, all of the content is static so the "Adobe Hiding Data
References During Page Load" does not work in this instance.
Thanks in advance!!

Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don

Similar Messages

Sliding panels hidden content on page load, SprySlidingPanels.js

There was a
previous
post about the issue of hidden content flashing on page load.
That issue was solved with a "hideGroup" class and an additional
line in the JS file under the addEventListener lines. My sliding
panels JS file isn't as simple and I would like to accomplish the
same thing. I'm using SprySlidingPanels.js. Can anyone help?

All you really need to do is add this to your CSS:
.SlidingPanels {
overflow: hidden;
No additional JS or CSS class required.
--== Kin ==--

All my content appears on page load - is this Spry related?

I remember having this issue when using Spry in the past. I changed the padding settings I think, and all the Accordions were open on page load - for only a second - and then closed.
I'm working with a new site, and the template seemed fine but when I populate, all tabbed-content and a scroller content appear on page load. Then snap shut. Is it related? or a similar issue... I'm pretty desperate to be posting here but I it looks like the same sort of problem I had with Spry... maybe the template has been built with some of the same technology (?)
http://bit.ly/ptaBVN
Please help!

Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don

Spry tabbed panels, all content showing on one page, please help?

Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!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>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
    <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent style1">
      <div align="center">
        <p class="style11">Welcome to DND </p>
        <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
        <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
        <p>Please visit our services page to discover all photography sessions we have available such as:</p>
        <p>Wedding Photography</p>
        <p> Engament Photos</p>
        <p>Senior Portraits </p>
        <p>Anniversary</p>
        <p>& More!!!</p>
        <p> </p>
      </div>
    </div>
    <div class="TabbedPanelsContent">
      <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
    </div>
    <div class="TabbedPanelsContent">Under Construction...</div>
    <div class="TabbedPanelsContent">Under Construction....</div>
    <div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
           <hr width="50%" align="left" />
      <p><strong>Package 1 - $500.00</strong></p>
      <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 2 - $575.00</strong></p>
      <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 3 - $700.00</strong></p>
      <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
           <hr width="50%" align="left" />
      <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
      <p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
      <p>(Custom sizes available - Custom framing available)</p>
      <p><strong>Package 1:</strong></p>
      <p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
      <p><strong>Package 2:</strong></p>
      <p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
      <p><strong>Package 3:</strong></p>
      <p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
      <p><strong>Package 4:</strong> (Basic Prints)</p>
      <p>Any 100 photos printed 4"x6" = $100.00</p>
           <hr width="50%" align="left" />
      <p><strong>Custom video:</strong>**</p>
      <p>Any 100 photos put to royalty-free music = $50.00</p>
          <hr width="50%" align="left" />
      <p><strong>Custom thank you cards for your guests:</strong>**</p>
      <p>300 cards - 4"x6" = $350.00</p>
      <p>100 cards - 4"x6" = $150.00</p>
     <hr width="50%" align="left" />
      <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
      <p>Bride & Groom Albums</p>
      <p>Parent Albums</p>
           <hr width="50%" align="left" />
      <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
    </div>
    <div class="TabbedPanelsContent style5">
      <p> Contact DND Perspective:</p>
      <p>The best way to reach us is via email .</p>
      <p>You can alternately reach us anytime at ...!</p>
    </div>
    <div class="TabbedPanelsContent">
      <div align="center">
        <p><span class="style1">About Info</span></p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">

</script>
</body>
</html>

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

Hidden submenus show as page is loading

I have a test site with hidden menus that I used the 'show/hide/ behaviour to make them appear on mouseover and disappear on mouseout. They work perfectly, but when the pages load, they appear off to the side and this has confused the client.
Any idea how I can force them to remain hidden until they are called by the mouseover?
proof site:
http://roundtablecreative.com/MIGPROOF/index.html
thanks in advance

hi Murray,
I do appreciate you always being there for my web problems, it's wonderful to have help to hand at times like this.
Yeah - the client insists on us using huge files for the page contents (so they can change the contents by uploading a replacement image). I couldn't talk them into any of the solutions I have for easily editing text on a site....*sigh*.
I don't notice the sub-menu load problem when I use a fast internet connection, but on a slower one I do....for example when I'm using FTP to upload/download and try to open the page after emptying the cache, it is noticeable.
I use the pviii snap layers as it's the only way I know to make the layers appear in the correct place - especially when the menu positioning is fliud - it changes depending on the width of your browser window.
If you have a more elegant submenu positioning solution, I'd love to use it!

Sliding Panels Problem: Content panels with different width?

I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
http://germansaezphoto.com/music/radiohead/
I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
and searched the forum but couldn't find an answer.
I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
Here is the div in the index file:
<div class="SlidingPanels" id="panelwidget">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
    <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
</div>
</div><br />
<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
    onclick="sp1.showLastPanel();">Last Panel</a>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
And here is the classes in the css:
.SlidingPanels {
     position: relative;
     float: left;
     width: 1000px;
     height: 430px;
     padding: 0px;
     border: none;
.SlidingPanelsContentGroup {
     position: relative;
     float: left;
     width: 10000px;
     margin: 0px;
     padding: 0px;
     min-height:0;
     border: none;
.SlidingPanelsContent {
     width: 645px;
     height: 430px;
     float: left;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     border: none;
In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
How do I solve this?

It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth

Possible to have two occurences of sliding panels in same location on page?

Hi, any help you guys could give me would be greatly appreciated.
I'm redesigning my portfolio page, and am trying to use the sliding panels widget for the two gallery areas. Ideally, when you click the links in the Design area on the left side navigation section, a Sliding Panels Content Group containing all the design work slides should appear on the right side of the page. When you click the links in the Illustration area, a Sliding Panels Content Group containing all the illustration work slides should replace the Design group in the exact same location on the page. Similar to links appearing in an iframe, but without having to click links and upload a page in the frame for each image.
I've managed to get the two different Content Groups to both be on the same page at the same time, like is done with the multiple examples at http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html, but no luck getting a single Content Group to appear and then be replaced by the second group by clicking one of the links to the left.
Here's the page I'm working with, with only one of the Content Groups active:
http://www.susanmeyerart.com/redesign/
eta: I'm working with Spry Pre-Release 1.6.1.

I think you can do this by using Spry Tabbed Panels as your container for the two sets of Sliding Panels. I have not tried this particular nesting before, but if you set up a test page, you can try it out.
Each set of Sliding Panels would appear as content on one of the Tabbed Panels. When each Tabbed Panel Tab is clicked, the corresponding Panel appears, holding your Sliding Panels.
This may not work, but, as they say...you don't know until you try!
Beth

Images are not showing when page load

Hello All
I am having lot of webparts on my page.
In two of them webpart i applied xslt and showing image of created by person in this
1)Announcement webpart(Wall updates)
2)Showing blog using content by query webpart(Blogs)
While page loading not able to load images in both webpart view.
But when i decreases webparts on page images rendered properly.
I think it is taking time to fetch images so timeout and showing default images.
Kindly suggest me some way to tackle and images will displayed properly
Thanks in advance
Varsha Patil

Hi,
According to this documentation from MSDN about
SharePoint Server 2010 capacity management: Software boundaries and limits:
“In SharePoint Server 2010, there are certain limits that are by design and cannot be exceeded”, “The default values for these limits were defined by testing, and represent the known
limitations of the product. Exceeding supported limits may cause unexpected results, significant decrease in performance, or other harmful effects”, “in most cases, operating at or near an established limit is not a best practice, as acceptable performance
and reliability targets are best achieved when a farm’s design provides for a reasonable balance of limits values”.
So it is not recommended to add many web parts into one page.
If there is a special need to display many web parts in one page, it is recommended to reorganize the content to minimize the number of web parts in use and customization will
be needed sometimes if the built-in web parts can’t meet the requirement.
Best regards
Patrick Liang
TechNet Community Support

Multiple elements sliding : Make initial element visible on page load?

Hi Folks,
I'm exploring sliding mulitple elements as demonstrated on this page:
http://labs.adobe.com/technologies/spry/samples/effects/multiple_slides_sample.html
My question is if there's a way to set the first (or any) of the elements to be visible when the page first loads. The example is currently set up so that you have to click on one of the buttons before you can see any of the elements.
Thanks!

Thanks for the reply. I tried your suggestion, but it doesn't appear to
work for me. Deleting the display:none attribute makes Slide 4 appear on
page load and disrupts the proper functioning of the buttons.
I would like Slide 1 to appear on page load and for the buttons to function
normally (of course).
Any other suggestions? I do appreciate your help.
Thanks!

Disclosing first tab (in a panel tab) always when a page loads up

Hi,
I am using JDeveloper 11.1.1.4 and I have a page which contains panle tab. I have configured MDS in my application. So if I close the page visiting 2nd tab, the next time if I visit the page, it opens up with the 2nd tab disclosed.
What I want is to disclose the first tab when the page loads up. Can I exclude this page from MDS or Is there any preferred way of doing this in ADF?
Regards,
V. Praveen

Hi Sudipto,
Thanks for your reply. Do you mean to say that I need a taskflow to achieve this? The reason why I am asking this is because my page is a simple page which comes under unbounded taskflow of adfc-config.xml.
Is there any other approach in achieving this?
Regards,
V. Praveen

Spry keys show on page load.

Hello,
Well...I don't know how to explain this, so I will just let
you guys see it, when a user loads the page on the browser it first
show the spry {keys} and then it relaods after a couple of seconds
with the actual data. I am using "XML Recordset Export" extension
and then using Spry Data Set to display the info. I don't know if
this is slow server or maybe not a good practice.
This is the
page...
Thanks in advance

Starting with All Panels Closed
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor option, and a -1 for the "defaultPanel" option.
Gramps

Show Progress Bar while only on Page Load.

Hi Experts,
I want to show progress bar every time when page loads.
Progress bar is coming on the page. but it is not going off after page is loaded.
Below is the code which i added for the Progress bar.
//written on Header Text of Page
<script type="text/javascript">

</script>
//written on footer text of Page
<style> #AjaxLoading{padding:5px;font-size:18px;width:200px;text-align:center;left:20%;top:20%;position:absolute;border:0px solid #666;}
</style>
<div id="AjaxLoading" style="display:none;"><br /><img src="#APP_IMAGES#progress_bar.gif" id="wait" /></div>
//called the function Execute on Page Loads
html_Submit_Progress(this);Progress bar is continuously showing on the page after page is loaded.
I want only to show only page loads.
Please help me .
Apex Version : Apex 4.1
DB Version : 10g
Regards,
Jitendra

Hide the loader element when the page has loaded. Put this in the javascript section
$(document).ready(function(){ $x_Hide('AjaxLoading'); });Or put it in the page load section
$x_Hide('AjaxLoading');Or create a dynamic action which fires on page load, select a hide action, and use a jQuery selector to target '#AjaxLoading' as an affected element.

Safari Stalls on SOME pages - loading ads?

I moved an Intel Mini from an Airport network to an ethernet connection on the same network. Safari now has issues loading SOME but not all web pages. One page with a problem is www.macrumors.com - the content on the page loads but Safari stalls, apparently trying to load all the ads.
The stall makes it impossible to use Safari, and needs to be "force quit".
Other ethernet-connected Macs have no issues.
I've done the usual troubleshooting; DNS, disabling DNS prefetching, etc. but nothing seems to resolve the issue.

I have tried all of these solutions and find that at times nothing resolves the problem with Safari stalling except for switching from wi-fi to another connection method.   This is happening on different networks(routers) and is resolved if I disable wi-fi and connect via another means.    My 6 year old OS-X on a 11 yr. MacBook pro never has any issues and is ALWAYS 3 times faster than the new Safari runs on a much more powerful machine running on the same wi-fi network.   Wish I could switch back to the older Safari.
Here is my story:
When Yosemite came out I installed it (and have applied all available patches) on my MacBook Pro,MacBook Air and 2 IPhones and now having problem with Safari stalling at 25% load progress point in webpage download at a fairly high frequency.    YOSEMITE REALLY ***** -- need to now figure out how to the MAVERICKS installed.
Meanwhile, I have another MacBook Pro - 11 Yr. old and 6 yr. old Safari and it is rock solid reliable and on average it's 3 times faster in loading (when compared to YOSEMITE when it's working that is).      As a result,   I had to download anothe r browser and as you would expect, I am not having these problems with anothe r browser.
Avoid YOSEMITE is you care an ounce about have a reliable Safari browser.
Thanks for wasting my time Apple -- now I got the hours/hours of trying to reload 4 devices with MAVERICKS.
I believe the issue has to do with using Safari via a Wi-Fi connection as when I turn on Wi-Fi on the Iphone's the problem seems to be resolved.     Unfortunately it's not an easy option to disable Wi-Fi on the MacBook Pro's/Air as it wouldn't be much fun to connect up with an ethernet cable.    It's not the Wi-Fi connection itself as it happens on all Routers in multiple locations and the 11 yr. old MB running 6 yr old Safari doesn't have the same problem.

Custom Page-Loading Animation?

I am wondering if there is a way to export a custom animation out of edge animate or after effects and use it to replace the stock loading status bar in a Muse site?
If not, maybe there is a way to add it in on the Business Catalyst end?
Ive looked everywhere and cannot find an answer or anyone even talking about it. :/

search for "preloader" - they yhave been around for years and
hundreds/thousands of tutorials all
over the web - i myself post links to preloaders in the forum
weekly:
www.kirupa.com has some
www.gotoandlearn.com
there are more if you want to google or search forum archive.
--> **Adobe Certified Expert**
--> www.mudbubble.com
--> www.keyframer.com
margietravis wrote:
> All I need is the animation that shows the page loading
until it does. The rest
> of the site is html (done in Dreamweaver) but there are
several pages with
> flash that are taking a long time to load. I don't know
why I'm having such a
> hard time finding what seems to me to be one of the most
simple/common
> animations. Can anyone point me in the right direction?
>
> Thanks.
>

I want to suppress the page loading status

Firefox shows the page loading status as a popup on the left bottom corner of the window. I want to switch off this feature, but cannot find a way to do this, it is not in the options.

''suppress page loading status, in lower left corner''
You can hide/show the add-ons bar (formerly status bar) with "Ctrl+/", which is the same as ["Alt"] > View > Toolbars > (check on/off) Add-ons bar
For more control over the add-ons bar try the "'''Status-4-Evar'''" extension (34KB)
*https://addons.mozilla.org/firefox/addon/235283/
* Status-4-Evar Addon Bar Customization<br>http://dmcritchie.mvps.org/firefox/status4evar.htm

Sliding Panels hidden content shows on page load

Similar Messages

Maybe you are looking for