Sliding panel horizontal scrollbar problem
Issue: This is about horizontal sliding panels.
I want to restrict the height on the sliding panel to say,
200px. Some of the panel content is longer than that. So I want a
scrollbar to appear vertically (overflow:auto). It does this.
However, when the panel with the scrollbar slides off to the left,
its scrollbar remains present at the leftmost part of the window...
where the new content panel is.
Is there any way to prevent this from happening, and allow
the content that needs the scrollbars to have it?
thank you
Hi jratlantic,
So it appears that you changed the default setting for
overflow on the .SlidingPanelsContent rule:
.SlidingPanelsContent {
width: 547px;
height: 100px;
overflow:auto;
Instead of putting it on the .SlidingPanelsContent, try
putting it on:
.SlidingPanelsCurrentPanel {
overflow:auto;
And see if that makes a difference. That will ensure that
only the panel that is currently showing, and not animating, has
scrollbars.
--== Kin ==--
Similar Messages
-
TOC horizontal scrollbar problem
Dear all experts,
In my java help, TOC's horizontal scrollbar is set in the middle whenever it first shows up and the "plus" signs on the left of the tree icons cannot be seen initially. How can I fix the scrollbar to the left?Dear all experts,
In my java help, TOC's horizontal scrollbar is set in the middle whenever it first shows up and the "plus" signs on the left of the tree icons cannot be seen initially. How can I fix the scrollbar to the left? -
Jtable Horizontal ScrollBar problem
Hi,
I am having a Jtabel inside a JscrollPanel with horizontal and vertical scrollpane.
My table model contains say 20 columns.But i am showing only 10 columns hiding the other 10.when i click on the table header i will show the rest of 10.so now the total columns are 20.but when i scroll thehorizantal bar to the see the other 10 coulmns the header for the latest 10 coulmns is not showing properly.
Is there anybody to help me to sort out this problem.
Thanks in advance.
sreeHi,
how ican saw Scrollbar with out Jtable.AUTO_RESIZR_OFF.That i already did.That not the actual problem.any how i solved this problem finally.It is something with TableHeaderRenderer..Any how thanks for ur help.
sree -
JTable horizontal scrollbars problems.
When I create JTable component with colons that width more than ScrollPane object one, no horizontal bar is created and all colomns shrank so i can't view what is written in cells.
If somebody know why horizontal bar is not created?
Some problem with ScrollPane or I need do some trics?
Thanx:))JPanel contentPane;
XYLayout xYLayout1 = new XYLayout();
JScrollPane jScrollPane1 = new JScrollPane();
String[] cols = {"Name", "Type", "Weignt", "Height", "EyaColor", "EyaSkin"};
String[][] rows = {{"dklfgjfghjfdjfghj","dkffghjfghjfgjjjd","dkffghjfghjfgjjjd,h,ffgdf","dfgdlhjklhjkhjlfgdfg","dfghjlhjlhjkhgjkdfg","dfghdfhgjklhjkgfkgfhjhdfgh"},
{"dklfgjfghjfdjfghj","dkffghjfghjfgjjjd","dfgffgdf","dfgdfgdfg","dfgdfg","dfghdfhdfgh"},
{"dklfgjfghjfdjfghj","dkffghjfghjfgjjjd","dfgffgdf","dfgdfgdfg","dfgdfg","dfghdfhdfgh"},
JTable jTable1 = new JTable(rows,cols);
//setIconImage(Toolkit.getDefaultToolkit().createImage(TestTableFrame.class.getResource("[Your Icon]")));
contentPane = (JPanel) this.getContentPane();
contentPane.setLayout(xYLayout1);
this.setSize(new Dimension(639, 339));
this.setTitle("Test Table");
contentPane.add(jScrollPane1, new XYConstraints(21, 29, 570, 279));
jScrollPane1.getViewport().add(jTable1, null); -
Spry Sliding Panels not working in IE7
I just created page with sliding panels horizontally and
works fine on safari FF and opera but in IE7 just not working
properly. The slides are expanding outside the page and i cant fix
that. Is that normal for IE?
the link is :
http://ironspiderart.com/Pages/mentshirts/mentshirts.html
Thank youThanks for your help :] I ended up realizing that a huge
bloated js navbar wasn't all that great of an idea anyway, so I
scrapped it and used a CSS-based one instead...much cleaner and
works better (no preloading! woohoo.) It looks like the problem was
probably an amalgamation of many things, but it's resolved now.
quote:
IE doesn't seem to like the PNG images you are using
understatement of the decade. -
Sliding Panels - Problems Scrolling Horizontal in Safari
I have adjusted the CSS in order to make the Sliding Panels widget scroll horizontal using the float: left;
It is working fine in Firefox but no matter what I do it does not scroll horizontal in Safari, it continues to scroll verticle. It seems as if it is just not responding to the float in the style.
What am I doing wrong?
Here is the URL to the page I'm working on.
www.wyndetryst.com/testportfolio/portfolio.htmlIt works fine in my safari. Do the examples work in safari? (Example 2: http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html )
Did you also change the rest of the setting or just the float:left. As it needs width changes as well as seen in the example. -
Problem with Accordion Widget INSIDE Sliding Panel Widget
Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish -
Horizontal Sliding Panels flicker IE
Hello
I'm using the horizontal Sliding Panel to slide some Images
and text. It works fine with Safari on Mac, but with IE and Firefox
on Windows the animation isn't very smooth (the problem concerns
only the image, the text-sliding works fine). With the vertical
Sliding Panels I don't have this problem...
Can anyone help me? Thankssolaris23 wrote:
> Hello Danilo
>
> Horizontal:
http://www.miomedia.ch/test/SprySlidingPanels.html
> Vertical:
http://www.miomedia.ch/test/SprySlidingPanels2.html
>
> Look on the image in the horizontal slide, the animation
flickers on the left
> and right image-borders.
> In the vertical slide the animation is much smoother.
This probably has to do with the rendering of the moved
elements on the page and IE redrawing portions of the images at a
time during the slide. I'd suspect that the issue actually exists
in the vertical slide as well, but is minimized due to the angled
top and bottom of the images, but that's just a suspicion, not a
known fact. It seems that if I look closely enough at the animation
in Firefox it seems to be doing something similar, but it is indeed
a good bit smoother than IE.
> I'm using transparent png images, I've also tried with
jpg, with different
> duration time, different fps... but still the same
problem....
That would have been my suggestion too. A quick local copy of
your page and it seems that making the duration 1000 milliseconds
seems to help with moving left to right, but moving right to left
still has a little bit of flicker.
I tried making the images smaller and it seemed to be
lessened, so perhaps it's IE and the larger images rendering. You
might also try making the vertical lines of the screenshot to be a
bit less vertical, or perhaps add a shadow or glow to the image to
soften the hard vertical edge.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
Edit JS on spry sliding panels widget to fix auto panel height problem
Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you help me do these fixes on the js? ( any one you know how to or think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
<script>
// The following function - setPanelNavigation() - assumes the following
// 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
// 2. The Previous Panel button has an ID of previousPanel
// 3. The Next Panel button has an ID of nextPanel
// 4. SpryDOMUtils.js has been linked
function setPanelNavigation() {
var current = sp1.getCurrentPanel(); // Get the current panel
var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
var panelNumber=1; // Give a value to the first panel number
Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
if (node.id==current.id){ // The current panel now receives a number
if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
panelNumber++; // Go to next panel after incrementing the count
Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
Anyone, please help. Thank you.wait my bad, the link to my page is:
http://www.pupr.edu/department/industrial/students.asp
** no s on department -
Safari 4 problems - HTMLDataSet/Sliding Panels
Hi,
I've been building a fairly basic photo gallery site and was having no problems with the site until I downloaded and installed Safari 4. For some reason the detailRegions are not loading properly in Safari 4. I have thumbnails in the sliding panels that load fine but the larger versions of the photos no longer appear in Safari below the sliding panels and on the right sidebar the paypal buttons no longer appear either. IE and FF seem to be working fine still. Any help would be greatly appreciated. I'm very new to this so please bear with me if I have any glaring mistakes. THANKS!!!
<!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>Flowers</title>
<link href="mainStyles.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1 { padding-top: 30px; }
#mainContent { zoom: 1; padding-top: 15px; }
div.mainContent { overflow:hidden; word-wrap: break-word;}
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SprySlidingPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">var ds1 = new Spry.Data.HTMLDataSet(null, "gallery", {columnNames: ['Thumbnail', 'PictureTitle', 'PictureResolution1', 'Price1', 'Button1', 'PictureResolution2', 'Price2', 'Button2', 'HiRes_Id',], rowSelector: "div.galleryItem", dataSelector: "p"});</script>
</head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
<a href="index.html"><img src="images/dmlogo.jpg" width="400" height="100" alt="Eye Focus Photography" /></a></div>
<!-- end #header -->
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html">Home</a></li>
<li><a href="animals.php">Animals</a></li>
<li><a href="barns.php">Barns</a></li>
<li><a href="cities.php" class="MenuBarItemSubmenu">Cities</a>
<ul>
<li><a href="washingtondc.php">Washington DC</a></li>
<li><a href="nyc.php">New York City</a></li>
</ul>
</li>
<li><a href="fireworks.php">Fireworks</a></li>
<li><a href="flowers.php" class="selected">Flowers</a></li>
<li><a href="lighthouses.php">Lighthouses</a></li>
<li><a href="misc.php">Miscellaneous</a></li>
<li><a href="national_parks.php">National Parks</a></li>
<li><a href="plants.php">Plants</a></li>
<li><a href="waterfalls.php">Waterfalls</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<div id="detailArea1" spry:detailregion="ds1">
<div class="detailText">
<h1>{PictureTitle}</h1>
<p>{PictureResolution1}</p>
<p>{Price1}</p>
<p>{Button1}</p>
<p>{PictureResolution2}</p>
<p>{Price2}</p>
<p>{Button2}</p>
<br class="clearfloat"/>
</div>
</div>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<div id="slidingGallery" class="SlidingPanels" tabindex="0" spry:region="ds1">
<div id="galleryContentGroup" class="SlidingPanelsContentGroup">
<div id="panelContents" class="SlidingPanelsContent" spry:repeat="ds1" spry:setrow="ds1">
<div class="galleryItem">
<p class="thumbnail">{Thumbnail}</p>
<p class="pictureTitle">{PictureTitle}</p>
</div>
</div>
</div>
</div>
<p id="panelNav" class="fltlft">
<a href="#" id="firstPanel" onclick="sp.showFirstPanel(); return false;">First</a>
<a href="#" id="previousPanel" onclick="sp.showPreviousPanel(); return false;">Previous</a>
<a href="#" id="nextPanel" onclick="sp.showNextPanel(); return false;">Next</a>
<a href="#" id="lastPanel" onclick="sp.showLastPanel(); return false;">Last</a>
</p>
<div id="detailArea2" spry:detailregion="ds1">
<div class="detailImg">
<img src="images/flowers/{HiRes_Id}" alt="{PictureTitle}" /><br class="clearfloat"/>
</div>
</div>
<div id="gallery">
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/3454_thumb.jpg"><img src="images/flowers/3454_thumb.jpg" alt="Daisy" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Daisy</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397389"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5111872"/>
<input type="hidden" name="item_name" value="Daisy"/>
<input type="hidden" name="custom" value="3454_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">3454_wm.jpg</p>
</div>
<div class="galleryItem">
<p class="thumbnail"> <a href="images/flowers/6586_thumb.jpg"><img src="images/flowers/6586_thumb.jpg" alt="Sun Orchid" width="145" height="97" class="thumbnail" /> </a> </p>
<p class="pictureTitle">Sun Orchid</p>
<p class="pictureResolution">Resolution: 900x600</p>
<p class="picturePrice">Price: $1.00</p>
<p class="button">
<span><form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397419"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_900.jpg"/>
<input type="hidden" name="amount" value="1.00"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureResolution">Resolution: 2048x1365</p>
<p class="picturePrice">Price: $5.00</p>
<p class="button">
<span><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick"/>
<input type="hidden" name="hosted_button_id" value="5397432"/>
<input type="hidden" name="item_name" value="Sun Orchid"/>
<input type="hidden" name="custom" value="6586_2048.jpg"/>
<input type="hidden" name="amount" value="5.00"/>
<input type="hidden" name="option_name_1" value="flowers"/>
<input type="hidden" name="return" value=""/>
<input type="hidden" name="lc" value="MY"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="bn" value="PP-BuyNowBF"/>
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"/>
</form></span>
</p>
<p class="pictureHires">6586_wm.jpg</p>
</div>
</div>
<br class="clearfloat"/>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p><!-- <span class="fltrt">ADD SOMETHING ELSE HERE</span>-->© 2009</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var sp = new Spry.Widget.SlidingPanels("slidingGallery");
Spry.$$(".thumbnail a").removeAttribute("href");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>It doesn't work correctly in Firefox either,
If you check out generated code, you will see that the data ins't selected correctly, or that maybe your HTML is correctly.
For example.. type this in the url bar of your browser; javascript:alert(ds1.getData()[0]['HiRes_Id']); and you will see it alerts <span></span>.
So i would suggest to recheck your rowSelectors and validate your page for HTML errors.
Related documentation:
http://labs.adobe.com/technologies/spry/samples/htmldataset/RowAndDataSelectorSamples.html -
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 -
Probleme with an unwanted horizontal scrollbar
Hi
Link of reference : http://www.episodesoft.com/demo/index_fr.html
I'm having a little difficulty with the horizontal scrollbar, i dont want it to appear since the website is designed for 1024x768 up to 2000, so obviously everything is adjusting itself depending of your viewscreen, So does the flash ( the menu and header ).
However it is the flash that cause the scrolling on the right but not on the left ??? the browser automatiquely adjust the left portion of the flash and is not creating a scrollbar for that, however i cannot find a way so it manage the right portion the same way it do the right one.
It is weird because before the header was not in flash but still 2000px and i didn't have that probleme with the CSS.
For the flash there is no CSS but here is the code. Feel free to view the source of the webpage itself
Any idea ?
Thanks a lot !
<div id="layer1" style="position:absolute; top:-10px; left:50%; margin-left:-1000px; width:2000px; height:580px; z-index:2">
<table width="950" border="0" align="center" >
<tr>
<td align="center" valign="middle">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="2000" height="580">
<param name="movie" value="Video/Menu.swf" />
<param name="wmode" value="transparent">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="embed" value="wmode="transparent"" />
<param name="selectable" value="false" />
<param name="border" value="0" />
<param name="embed" value="border="0"" />
<object type="application/x-shockwave-flash" data="Video/Menu.swf" width="2000" height="580">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="embed" value="wmode="transparent"" />
<param name="selectable" value="false" />
<param name="border" value="0" />
<param name="embed" value="border="0"" />
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</object>
</object>
</td>
</tr>
</table>
</div>Herm oook.
I just tryed to remove the margin-left:-1000px; however when i do that, the flash start in center of the viewscreen or will no longer auto center itself.
The flash is in his own div and that div is above another div ( the content ).... so as long i put a background color in this one, it will cover all the website or the right side if i make one going from transparent to 100% on the right.
Here is the whole code to help you
<!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>Logiciel Épisode</title>
<style type="text/css">
#bottom {
background-repeat:no-repeat;
background-position: bottom;
background-image: url(images/barre_bottom.png);
height: 5px;
#headinner {
background-position: center top;
margin-top: 0px;
margin-bottom: 0px;
background-color: #F5F6F7;
background-repeat: no-repeat;
height: 95px;
background-image: url(images/HeaderFR.png);
body {
background-color: #ffffff;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-image: url(images/fond.png);
text-align: center;
background-position: bottom;
background-repeat: no-repeat;
#Copyright {
text-align: center;
margin-bottom: 1px;
margin-top: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
#layer2 #Layer2 tr td p {
text-align: center;
font-size: 36px;
margin-top: 100px;
<!-- margin-left: 30px;
-->;
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<!--<div id="headinner">
INACTIVE HEADER
</div> -->
<div id="layer1" style="position:absolute; top:-10px; margin-left:-1000px; left:50%; width:2000x; height:580px; z-index:2">
<table width="950" border="0" align="center" >
<tr>
<td align="center" valign="middle">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="2000" height="580">
<param name="movie" value="Video/Menu.swf" />
<param name="wmode" value="transparent">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="embed" value="wmode="transparent"" />
<param name="selectable" value="false" />
<param name="border" value="0" />
<param name="embed" value="border="0"" />
<object type="application/x-shockwave-flash" data="Video/Menu.swf" width="2000" height="580">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="embed" value="wmode="transparent"" />
<param name="selectable" value="false" />
<param name="border" value="0" />
<param name="embed" value="border="0"" />
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</object>
</object>
</td>
</tr>
</table>
</div>
<div id="layer2" style="margin-top:100px" >
<table border="0" align="center" id="Layer2" name="Layer2">
<tr>
<td background="images/accueil_fond.png" width="1035" height="485" aling="right" ><img src="images/accueil2_4.png" width="950" height="485" align="left" valign="middle"/></a></td>
</tr>
</table>
</div>
<div id="bottom">
</div>
<p id="Copyright">© 2010 - Logiciel Episode Inc.</p>
<table width="10" border="0" align="center">
<tr>
<td align="center" valign="middle"><a href="index_us.html" target="_self">English</a></td>
<td align="center" valign="middle"><a href="index_fr.html" target="_self">Francais</a></td>
<!--
<td align="center" valign="middle"><p><a href="index_us.html" target="_self"><img src="images/Drapeau_US.png" width="25" height="15" border="0" align="absmiddle" /></a></p></td>
<td align="center" valign="middle"><a href="index_fr.html" target="_self"><img src="images/Drapeau_fr.png" width="25" height="15" border="0" align="absmiddle" /></a></td>
--> </tr>
</table>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html> -
Hi,
I'm using the sliding panels on my website, but I'm getting
an error when I use a vertical scrollbar.
To the right of the sliding panels I have an image, and when
I press the up and down arrows, the hidden sliding panels are
visible under the image!
Any ideas?
Lukequote:
Originally posted by:
Donald Booth
Hi Spry Users,
We are pleased that you are using Spry!
When posting issues for help, please help us help you.
Providing a URL is the quickest way
for the Spry team, and our valued forum community, to help you with
your page.
Code samples are also great if you
can't provide a URL.
And of course, having the latest code
is always a good idea. Use the latest download if possible.
Questions posted without urls/code inevitably take more back
and forth to get figured out.
And now that this forum has been up for a year and a half, we
have a good record of fixes previously given. Search the forums and
see if your question has been solved already.
Thanks for reading. Now, how can we help you?
The Spry Team
^ else we cant Identify the problem -
Horizontal Sliding Panels with 100% width
Hi,
Im trying to use horizontal sliding panels with a width of 100% for an expandable website. So far i got it working with the vertical sliding panles where if i increase the width of the site the sliding panels width increases as well, but how do i get them to float left and slide horizontally, if i change the slidingpanelscontentgroup width it messe up. so far here is the css:
.SlidingPanelsP {
width: 100%;
position: relative;
height: 300px;
padding: 0px;
border: none;
.SlidingPanelsContentGroupP {
width: 100%;
position: relative;
margin: 0px;
padding: 0px;
min-height:0;
border: none;
.SlidingPanelsContentP {
float: left;
width: 100%;
height: 300px;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
.SlidingPanelsAnimatingP * {
overflow: hidden !important;
.SlidingPanelsCurrentPanelP {
Thanks in advanceHad a hard time find the solution, but this seem to work in major browsers, except Opera which does not like the 33.33% width apparently and shows a bit of next panel. You may be able to play with margin or padding to correct this behavior.
You have to know the number of panels and make the calculation of the SlidingPanelsContent class width accordingly. Here's my test page and code for you:
<!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>Document sans nom</title>
<script language="javascript" type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<style>
#slidingPanel_1 {
height: 200px;
.SlidingPanelsContentGroup {
width: 300%;
.SlidingPanelsContent {
height: 200px;
float: left;
width: 33.33%;
#content1 { background: yellow; }
#content2 { background: red; }
#content3 { background: green; }
</style>
</head>
<body>
<a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
<a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
<a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
<div id="slidingPanel_1" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div id="content1" class="SlidingPanelsContent">The Content 1</div>
<div id="content2" class="SlidingPanelsContent">The Content 2</div>
<div id="content3" class="SlidingPanelsContent">The Content 3</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
</script>
</body>
</html> -
Spry Sliding Panel Problem - Repost
Hi hope you can help.
My Spry Sliding panel is appearing over my floats in IE, fine
in Firefox.
I previously posted but it is in fact not working.
Test
page here
Sliding
Panels CSS Here
Any ideas?
Is this a spry problem or my CSS?
Thanks.
Richquote:
Originally posted by:
kinblas
If you're getting a "Spry is undefined" error, it probably
means that the browser is not finding the JS files you included at
the top of your HTML file. Make sure the path to your JS files are
correct ... you can do this by trying to load the JS files directly
in the URL field at the top of your browser.
--== Kin ==--
if u look at the code.. u will seee:
<link href="SprySlidingPanels.js" rel="stylesheet"
type="text/javascript"/>
it should be
<script src="SprySlidingPanels.js"
type="text/javascript"></script>
Maybe you are looking for
-
Letter of credit/payment guarantee
my customer is giving letter of credit, can somebody enlighten me to how to configure letter of credit. please tell me configuration of letter of credit, and how to compensate the sales order with documentary payments if possible can somebody send me
-
Create navigation cue points in a FLV file using Media Encoder CC
When I export a FLV file with Navigation cue points created in Media Encoder CC (by loading a cue points XML file), upon examining the file I see that the cue points are recorded as Event type cue points in the metadata at the top of the file. When I
-
LOL, great bug with faces-config.xml
Ok, its third time that I reinstall these stuff called JDeveloper. Im tired of this! Unfortunately I cant work with Eclipse cauz it doesnt works with OC4J embed.... Image as follows shows these freakin' bug... LOL http://img154.imageshack.us/img154/6
-
TOC - First 2 characters missing
I have Robohelp 8 running locally. I use a word template for printed documentation in word format. In the TOC the first 2 characters are missing i.e. my first topic is Introduction so in the TOC, it shows : troduction........ The rest appears fine
-
I cannot connect to the internet on my iMac through my wireless router. I think I screwed up the settings and need to reset them. I know the router is working because I can access the internet on my Dell laptop which is located right next to my Mac.