HTML Panel with Tabs like Sliding Panel tabs

Hi, what do I need to add/change to have HTML panels
switching with tabs that switches background image like the tabs in
sliding panels example?
Or can I modify the
sp_withTabs.js to have graphic tabs work with HTML
Panels?

Nevermind, I got it. I used the SpryTabbedPanels.js and
modified the SpryTabbedPanels.css with my graphics, size, position
and what not.
I do have one more question. I'm using HTML Panels with Fade
in and out and when loading my page I have to have default content
in the main html doc for something to display when the page loads.
Then when I click on the first button, it then loads the real
external HTML panels. Is there any way I can load my first external
HTML page right when my site loads?

Similar Messages

Dowloading HTML page with picture like the IE save as function

Hi everyone,
I would like to download a HTML page entirely ( path, pictures... ) like the IE save as function.
Is it possible ?
thanx

It is.
However doing so will be a big task. You have to write a htmlparser (I did) which checks all possible options for writing html. I based mine on the w3c standard for html 4.01. Takes a while till you get through everything. Don't ask me for it, I'm in the middle of an update to make it sure it has a bit of a descent structure.
Then you must know all attributes which can possibly contain a link to an image. Find out if this link is not an url with a protocol. Also find out if the link is not something like a cgi. And so on for more options.
You can look on the net for some parser but I didn't find one. There is of course Html Tidy but this one reads the htmlcode and makes a valid html document from it which is almost never the same as you wanted it to be. For crappy html code this can result in the removal of a lot of your elements.
http://www.w3.org/TR/html4/ for the latest version of html
http://www.w3.org/People/Raggett/tidy/ for html tidy
http://www.w3.org/TR/2002/WD-DOM-Level-3-Core-20020114/ for the latest dom structure
http://www.w3.org/TR/DOM-Level-2-HTML/ for the html dom
for the last 2 get the java language binding api.
http://xml.apache.org to download the apache implementation of the dom (no htmlparser build in), xml, sax, ...

Internet explorer 11 is opening multiple blank tab like a recursive tab(worm like attack on browser

Hi Kindly be of help, my company systems just upgrades to Internet Explorer 11, after the upgrades all the Internet explorer 11 on all the systems are opening multiple tabs of blank pages with an error messages prompt,This has disrupt our working environment
that we have to use Google chrome instead.
kindly assist in providing lasting solution to this issue as our company web apps depends on Internet explorer to run

Hi,
What are the error messages?
Have you tried resetting internet explorer options?
To find out what is running while this issue occurs, you can caputure with process monitor and then upload the result you saved.
Thanks!
Andy Altmann
TechNet Community Support

Sliding panel inside tabbed panel - onclick both

I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
OK I have another scenario as well....
You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.

Try this and adapt to your needs:
<!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 type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanels {
   position: relative;
   width: 200px;
   height: 200px;
   padding: 0px;
.SlidingPanelsContentGroup {
   position: relative;
   height:600px;
   margin: 0px;
   padding: 0px;
.SlidingPanelsContent {
   width: 100%;
   height: 400px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
</style>
</head>
<body>
<a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Contenu 1
      <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>
    </div>
    <div class="TabbedPanelsContent">Contenu 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
Spry.Utils.addLoadListener(function() {
        Spry.$$("#trigger1").addEventListener('click', function() {
            TabbedPanels1.showPanel(0);
            sp1.showPanel(2);
        }, false);
        Spry.$$("#trigger2").addEventListener('click', function() {
            //TabbedPanels1.showPanel(0);
            sp1.showPanel(0);
        }, false);
</script>
</body>
</html>
You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
Xav

Two sliding panels/w tabs widgets on the same page?

I would like to use two of the same widget (Sliding Panels/w
tabs) on the same page.
How can I get two instances to function independently and not
break each other....?
I edited the sp_withTabs.js file by duplicating the first
section below copying it, modifying it, and then pasting it below
as the second section:
// Turn the slidingPanel region into a real sliding panel
widget.
Spry.$$("#slidingPanel").addClassName("SlidingPanels");
Spry.$$("#slidingPanel >
div").addClassName("SlidingPanelsContentGroup");
Spry.$$("#slidingPanel .SlidingPanelsContentGroup >
div").addClassName("SlidingPanelsContent");
sp2 = new Spry.Widget.SlidingPanels('slidingPanel');
// Turn the slidingPanel2 region into a real sliding panel
widget.
Spry.$$("#slidingPanel2").addClassName("SlidingPanels");
Spry.$$("#slidingPanel2 >
div").addClassName("SlidingPanelsContentGroup");
Spry.$$("#slidingPanel2 .SlidingPanelsContentGroup >
div").addClassName("SlidingPanelsContent");
sp2 = new Spry.Widget.SlidingPanels('slidingPanel2');
This actually gets the second instance to function properly,
but now the first instance is "frozen".

Chapman, i know its been a while
but where on the JS file is the part you changed?
I cant find that in mine
check out my page:
http://www.pupr.edu/department/industrial/students.asp
Im trying to do that same thing, but a sliding panel inside another one.
The one inside isnt being recognized as a slliding panel, im thinking its the same problem you were having.
If you need me to copy the .js file let me know!
This is working with the Spry Sliding Panels Widget

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

Spry Sliding Panel Widget Template

I have inserted the Spry Tabs and Accordion widgets and
adjusted using CSS. Can I do the same with a Spry Sliding Panel
Widget?, if so where can I access a sliding panel widget to
adjust?.
I have found a tutorial to create a Spry Sliding Panel Widget
inserting code, but my code experience is zero.
Thanks

Also copy the required Javascript file and CSS file to the
correct location..
in the <head></head> of the page u will see
<script src=""> go to the location of the src.. copy and
paste the files to your new location in the same folder, or change
the src to match the new location of the file. Do the same for the
CSS wich is included at the <link href=

Sliding panels from data - single panel

I would like to use the spry sliding panels from data widget
with only 1 panel at a time. The sample has two at a time.
Most of the code makes sense, but every modification I try
breaks the next/previous navigation.

I modified the code from the example for you, so now it works
with just one panel visible.
Changes are:
set the width of the wigdet en
slidingpanel class to 250 instead of 500.
var numberOfPanelsPerView = 1
remove all the
spry:if="{ds_RowNumber} % 2 == 0" attributes
change
onclick="sp1.showPanel('p{prevStartIndex}') to
onclick="sp1.showPreviousPanel()
change
onclick="sp1.showPanel('p{nextStartIndex}') to
onclick="sp1.showNextPanel()
This all leads to the following 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"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Sliding Panels Sample</title>
<script type="text/javascript"
src="../../widgets/slidingpanels/SprySlidingPanels.js"></script>
<script src="../../includes/xpath.js"
type="text/javascript"></script>
<script src="../../includes/SpryData.js"
type="text/javascript"></script>
<style type="text/css">

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

</script>
</head>
<body>
<h3>Building a Sliding Panels widget with Spry
Data</h3>
<p>This sample creates a Sliding Panels widget by using
Spry Data to build the repeating markup. In this sample the content
panels are generated dynamically and the photo in each panel comes
from Spry Data. The text is static, which is just there for
example.</p>
<p>The content panel is generated in a Spry:repeat
region. An important thing in the panel widget is that each panel
should have a unique ID. This ID is generated with a Spry data
reference. Using the same method, the Panel links are generated the
same way, using the same data values. This ensures that the panel
links and IDs match up correctly. In this sample, the visible
window is twice as wide as the content panel. This allows for 2
panels to show at once. The links, therefore, need to show only
every other panel number. This will allow the panel to move by 2
content panels each time. To do this, a spry:if is used to only
display the even number panel numbers.</p>
<p>Note: Since this sample depends on Spry Data for the
content and markup, it will not degrade when JavaScript is turned
off. This sample shows how to construct this widget with Data.
Determine if this method fits your needs with degredation and
accessibility in mind. Also, this sample is more complicated only
because we are showing 2 panels at once and there are differing
lengths of text in the panels.</p>
<p>Page: <span spry:region="ds1"
spry:repeatchildren="ds1"> <a href="#"
onclick="sp1.showPanel('p{viewStartIndex}'); return
false;">{viewNumber}</a> </span></p>
<div class="widget">
<div id="apDiv1" class="SlidingPanels"
spry:region="ds1">
<div class="SlidingPanelsContainer">
<div id="p{ds_RowNumber}" class="SlidingPanelsContent"
spry:repeat="ds1">
<div class="content"> <img
src="../../demos/products/{boximage}" width="75" height="56"
hspace="5" vspace="5" align="left" alt="Sample Images from Spry
Data." />
<p>{desc}</p>
</div>
<div class="panelnav left"><a href="#"
onclick="sp1.showPreviousPanel(); return
false;"><<
Previous</a> <a
href="#" onclick="sp1.showNextPanel(); return false;">Next
>></a></div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("apDiv1");
</script>
</div>
</div>
</body>
</html>

How do i style an inactive navigation for sliding panel?

How can i style my navigation when they are not active(for example i would like to style my "previous" navigation arrow in a specific manner when there is no previous content to show)

With great difficulty. We must first determine the current panel and then, if the current panel is 0 then the previous button has to be changed and if the current panel matches the total number of panels, the next button has to be changed.
The following is a complete document that will work. Make sure you have all of the support (read JS) files in the allocated directory.
<!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>Sliding Panels Example.</title>
<script src="SpryAssets/SprySlidingPanels.js" language="javascript" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanelsContentGroup {min-height:0;}
.disabled {color:#F00;}
</style>
<script>
function slideNextPanel() {
     sp1.showNextPanel();
     var currentPanel = getCurrentPanel();
     var panelCount = sp1.getContentPanelsCount()-1;
     if (currentPanel==panelCount) {
          Spry.$$("a#nextPanel").addClassName("disabled");
     } else {
          Spry.$$("a#previousPanel").removeClassName("disabled");
function slidePreviousPanel() {
     sp1.showPreviousPanel();
     var currentPanel = getCurrentPanel();
     if (currentPanel==0) {
          Spry.$$("a#previousPanel").addClassName("disabled");
     } else {
          Spry.$$("a#nextPanel").removeClassName("disabled");
function getCurrentPanel() {
     var className = 'SlidingPanelsContent'; //change the className that is on all your content panels..
     var panelCount = sp1.getContentPanelsCount();//get panel length
     var current = sp1.getCurrentPanel(); //get current panel
     var group = sp1.getContentGroup(); //get our group
     var panelNumber = 0;
     if(group.hasChildNodes()){
          var j = 0;
          for(var i = 0, l = group.childNodes.length; i < l; i ++){
               if(group.childNodes[i].className && group.childNodes[i].className.search(new RegExp("\\b" + className + "\\b")) != -1){ // if it has SlidingPanelsContent class we found the correct node.
                    if(group.childNodes[i] == current){ // if it matches our current panel, we have a number
                         panelNumber = j;
                         return panelNumber;
                    j++; //increase our panelcounter
</script>
</head>
<body>
<a href="#" id="previousPanel" onclick="slidePreviousPanel();">Previous Panel</a> |
<a href="#" id="nextPanel" onclick="slideNextPanel()">Next Panel</a> |
<div id="panelwidget" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">Panel 1</div>
    <div class="SlidingPanelsContent" id="p2">Panel 2</div>
    <div class="SlidingPanelsContent" id="p3">Panel 3</div>
    <div class="SlidingPanelsContent" id="p4">Panel 4</div>
    <div class="SlidingPanelsContent" id="p5">Panel 5</div>
    <div class="SlidingPanelsContent" id="p6">Panel 6</div>
</div>
</div>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
</body>
</html>
Gramps

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? Thanks

solaris23 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

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

Multiple Sliding Panels

How do you set the default panel for the Multiple Sliding
Panels example?
Sample:
Spry
Multiple elements sliding

How do you set the default panel for the Multiple Sliding
Panels example?
Sample:
Spry
Multiple elements sliding

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks Rick

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

Spry sliding panels with tab

Maybe I'm missing something but I've been stuck on this for a
long time. In one example of the spry sliding panel with tab there
are <li> elements for the menu like this...
<ul class="slidingTabPanel">
<li><a href="#" id="about" class="tabActive"
title="about"></a></li>
<li><a href="#" id="contact" class="tab"
title="contact"></a></li>
</ul>
and they should link to...
<div id="aboutPanel" class="p1"></div>
<div id="contactPanel" class="p2"></div>
with contents in each of those DIV
I just can't seem to get the buttons to do anything, how are
the <li> calling the panels?

Actually, I figured it out. I had to edit the sp_withTabs.js
file with the IDs as well, that's whats calling the CSS class.
My problem now is that everything is all good with 4 tabs,
but when I try to add another tab, no matter what path I set for
the background image state it always shows the image of the fourth
tab and not a new image.

Sliding panels with tabs

Hello again,
Is there some way to change the orientation of tabs to bottom
in this example: Sliding panels with tabs?
that's all folks,
morpheto

You need to look at the code in the load handler of this JS
file:
http://labs.adobe.com/technologies/spry/home_assets/spry_home.js
If you add a tab, you need to add it to the list of items to
select in this statement:
Spry.$$("#nutshell, #widgets, #data,
#effects").addEventListener("click", function(){
switchTab(this.id); return false; }, false);
--== Kin ==--

HTML Panel with Tabs like Sliding Panel tabs

Similar Messages

Maybe you are looking for