Spry tabbed panal-controlling content of another textbox on the page

Hi, I am trying to teach myself a bit of web design by making a simple site for my partners beauty salon.
http://www.enchantedbodies.co.uk/services.html
I have religiously avoided using anything other than html5/php/css3 as i have no clue how JS/ajax etc work...
That is untill i used the spy tabbed panal to insert some tables laying out what services she offers.
Now what she wants is that when you click on each tab as well as changing panal to give her price list etc that it will change the content of a text box in the sidebar on the left (currently just a picture) with a bit of blub about each treatment (eg waxing or eyelash tinting).
Is this possible?
My only other option is that it will have to be actually in each panal under the table (as i don't want the table jumping around from tab to tab) but i think it will be much cleaner off to the side.
Please let me know if i need to post more info to allow you to help.
Many thanks
Jim

JimOnWax wrote:
Ok.
Rethinking! Tried the site on Iexplore9 and it automatically blocked the spry scripts so considering it will probably be the same on ie 8.5 on mobile i think i will rework this not using spry. That way I don't need to work this out.
If anyone can try this site on a IE8.5 mobile and let me know if if the tabs in services work I would be very grateful.
http://www.enchantedbodies.co.uk/index.html
All the best
Jim
The blocking of the scripts occurs only when viewing the site on a local server. Once it is on a remote server IE does not block the scripts.
Now the suspense, yes Spry or no Spry?
As far as placing different content in the sidebar, have a look at the following example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style>
#sidebar {
    width: 200px;
    float: left;
#TabbedPanels1 {
    width: 300px;
    float: left;
.sidebar {
    left: 0;
    position: absolute;
</style>
</head>
<body>
<div id="sidebar">
This is the menu
</div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        Content 1
        <div class="sidebar">
          This is the sidebar content 1
      </div>
    </div>
    <div class="TabbedPanelsContent">
        Content 2
        <div class="sidebar">
          This is the sidebar content 2
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Gramps

Similar Messages

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

Hi, I'm having problems with viewing a web page created with Adobe Muse CC latest release, I followed the various guides provided by Adobe, but the problem persists. The problem especially concerns the distorted display (the contents do not fit on the pag

Hi, I'm having problems with viewing a web page created with Adobe Muse CC latest release, I followed the various guides provided by Adobe, but the problem persists. The problem especially concerns the distorted display (the contents do not fit on the page, so it suits size automatically) to a mobile web page to be displayed not on a normal browser, but in a WebView.

Hi, I'm having problems with viewing a web page created with Adobe Muse CC latest release, I followed the various guides provided by Adobe, but the problem persists. The problem especially concerns the distorted display (the contents do not fit on the page, so it suits size automatically) to a mobile web page to be displayed not on a normal browser, but in a WebView.

Error When inserting Content Query Web part onto the page

i am using share point 2010 and when i am trying to insert content query web part onto the page i am getting the following error
i checked the correlation id in the logs file but could not find anything useful in it.
please suggest why this problem occuring everytime when i try to insert content query webpart onto the page

Hi,
Check the correlation id in your logging files are the best way to investigate.
Did you check these files with "SharePoint ULS Log viewer". Maybe, that will be more easy for you to get the correlation Id.
Moreover, check the account's permissions with which you try to insert your webpart.
Regards.
Gilles Martinez
Twitter
Blog
Please mark as helpful/answer if this resolved your post

Setting focus to content area or top of the page

Hi,
I have a page with 3 columns, Left navigation (KM Document iView) in column 1 and Content Area (URL iView) column2 and there are other iViews in column 3. On click of the links in left navigation area the content is loaded in the content area. My left nav is too long, so I get scroll bar and when I click the bottom most link in the left nav, the content is uploaded in the content area. But the focus is not set to content area or top of the page.
Is there anyway to set the focus to the top of the page or to content area.
URL iView uses URL isolation method and we don't want to use embedded isolation method.
Thanks in advance.
Jayanthi

You may have switched on [http://kb.mozillazine.org/accessibility.browsewithcaret caret browsing].
You can press press F7 (on Mac: fn + F7) to toggle caret browsing on/off.
See http://kb.mozillazine.org/Scrolling_with_arrow_keys_no_longer_works

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

Spry Tabs displaying all content in IE8

Hi,
I have been looking at using the spry tabs panel to display content, it works perfectly fine in Safari and Firefox, but in explorer 8 all the panels display one underneath the other?
I have played around with the layout and am probably out of my depth...
If anyone knows a way I can fix this, otherwise I will use a simpler display.
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" />
<link href="CSS/css.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab1">
      <h1>$500 </h1>
     <p> Starter pack.</p>
      </li>
      <li class="TabbedPanelsTab" >
<h1>$900 </h1>
        <p>A bit more special.</p>
      </li>
      <li class="TabbedPanelsTab">
<h1>Custom </h1>
        <p>For something extra.</p>
      </li>
      <li class="TabbedPanelsTab">
        <h1>Design Services</h1>
        <p>content.</p>
      </li>
      </li>
    </ul>
    <div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent1">
      <div class="contentimage"><img src="images/page-design.gif" width="400" height="312" alt="example of designs" longdesc="images/page-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
<div align="center"><a href="web me.html#pageinfo"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent2">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent3">
     <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent4">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
    </div>
</div>
<div id="design">
<div class="topline"></div>
<div id="leftcoloumn">
<h1> Simple affordable website design in Auckland</h1>
     <p>As designers on Auckland's North Shore we set out to offer an affordable easy way to create special spaces etc..</p>
    </div>
<div class="centerline"></div><div id="rightcoloumn">
    <h1>Specialising in creating special spaces. </h1>
   <ol>
      <li>Create a space you'll love.</li>
      <li>Fit your budget.</li>
                         </ol>
    </div>
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
@charset "UTF-8";
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab1 h1 {
font-size: 18px;
color: #52542D;
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab h1 {
font-size: 18px;
color: #52542D;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
margin-left: 30px;
.TabbedPanelsTab {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #CCC;
overflow: visible;
.TabbedPanelsTab1 {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #666633;
overflow: visible;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #666633;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
position: relative;
bottom: 90px;
clear: both;
min-height: 430px;
height: auto;
margin-right:27px;
margin-left: 30px;
background-image: url(../images/content-box.gif);
background-repeat:no-repeat;
.TabbedPanelsContent {
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
#container #content {
width: 395px;
float: right;
margin-top: 35px;
padding-right: 20px;
#container #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent1.TabbedPanelsContentVisible #content .image {
margin-top: 27px;
#container .contentheaders {
margin-right: 8px;
#container .contentimage {
float: left;
margin-top: 35px;
padding-left: 40px;

You are probably getting a javascript error in IE8 preventing the tabs displaying properly. Use the developer tools unde F12 to find the problem line in your code. Sometimes it is just a cariable name you have used that IE does not like....

Why is Spry Tabs dropping below content out of view and back during page load.

Hello everyone, I'm having some
Spry Trouble. This is happening only in IE 7.
When the page loads, you'll notice that the tabs will
collapse before coming back to it's designated position.
This ruins the visual appeal. Again I don't know why this
happens but the tabs at the bottom of the content will quickly drop
below out of view and then jump back under the content.
Here is the URL
http://www.patrickjudson.com/weddingIndex2.php
Any ideas why this is happening?
Thanks everyone - Patrick

quote:
Originally posted by:
Newsgroup User
Webethics wrote:
> Hello everyone, I'm having some
Spry Trouble. This is happening only in
> IE 7.
> When the page loads, you'll notice that the tabs will
collapse before coming
> back to it's designated position.
> This ruins the visual appeal. Again I don't know why
this happens but the tabs
> at the bottom of the content will quickly drop below out
of view and then jump
> back under the content.
>
> Here is the URL
http://www.patrickjudson.com/weddingIndex2.php
I don't see the collapse issue on my end. About the only
visual thing going on is that the background image of the tabs
appears later than the text, but not sure that's an issue that's
particular to the Spry code on the page.
Perhaps it's related, or perhaps not, but in my IE7, I get an
error on the page. It states:
Line: 48
Char: 3
Error: Object required
Code: 0
URL:
http://www.patrickjudson.com/weddingIndex2.php
I only see HTML code at line 48 both in the source code, and
even if I pull the generated content view source from Firefox. I
checked line 48 of both of your attached JS files and neither
seemed to be an obvious issue. I even saved a local copy of the
page, and didn't get an error at all. The line of code in the HTML
does seem to be the end of the div that contains your music player,
maybe it's causing an issue in IE, not sure.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
So why is there an error in IE7 saying object required.
What does this mean, and what are the side effects?
Any idea?
Patrick

Move a spry accordian to another part of the page

I'm relatively new to dreamweaver. I've added a spry according to my page, and right now it sits at the bottom of a photo and thumbnails for a gallery. I'm trying to move the spry according up, to the upper right hand side of the page, but it just stays centered at the bottom and I can't drag it's outline box freely around. Wny help would be greatly appreciated!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Photo Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="images/TopBanner-mini.jpg" width="546" height="90"><br />                                                                                                                                                                                                                                                                                   <div class="inner_copy"><a href="http://www.greatdirectories.org/">web directories</a><a href="http://www.bestfreetemplates.info/">free CSS templates</a></div>
     <div id="navigation">
          <ul>
               <li><a href="index.html"><img src="images/but1.gif" alt="" width="120" height="26" /></a></li>
               <li><a href="index2.html"><img src="images/but2.gif" alt="" width="120" height="26" /></a></li>
               <li><a href="index2.html"><img src="images/but2.gif" alt="" width="120" height="26" /><img src="images/but3.gif" alt="" width="120" height="26" /></a></li>
               <li><a href="index2.html"><img src="images/but4.gif" alt="" width="120" height="26" /></a></li>
               <li></li>
               <li></li>
          </ul>
     </div>
     <div class="big">
          <img src="images/photobig.jpg" alt="" width="721" height="491" />
<div id="CollapsiblePanel1" class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">Cliquez ici pour des informacions</div>
          <div class="CollapsiblePanelContent">
            <p>Sabine, here you can enter any questions or directions you have for each set.</p>
            <p> </p>
            <p>A.</p>
            <p>B.</p>
            <p>C. </p>
            <p>etc.</p>
            <p> </p>
          </div>
      </div>
</div>
     <div class="content">
          <div class="preview">
               <a href="#"><img src="images/pic1.jpg" alt="" width="105" height="72" /></a>
               <a href="#"><img src="images/pic2.jpg" alt="" width="105" height="72" /></a>
               <a href="#"><img src="images/pic3.jpg" alt="" width="105" height="72" /></a>
               <a href="#"><img src="images/pic4.jpg" alt="" width="105" height="72" /></a>
               <a href="#"><img src="images/pic5.jpg" alt="" width="105" height="72" /></a>
               <a href="#"><img src="images/pic6.jpg" alt="" width="105" height="72" /></a>
               <a href="#"><img src="images/pic7.jpg" alt="" width="105" height="72" /></a>
               <a href="#"><img src="images/pic8.jpg" alt="" width="105" height="72" /></a>
               <div class="smallmenu">
                    1 <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a>                                                                                                                                                                                                                                                                                              <div class="inner_copy"><a href="http://www.bestfreetemplates.org/">free templates</a><a href="http://www.bannermoz.com/">banner templates</a></div>
               </div>
          </div>
</div>
<div id="footer">
          <ul>
               <li><a href="index.html">home</a></li>
               <li><a href="index2.html">gallery</a></li>
               <li><a href="index2.html">about me</a></li>
               <li><a href="index2.html">news</a></li>
               <li><a href="index2.html">parters</a></li>
               <li><a href="index2.html">contacts</a></li>
          </ul>
          <p>
               Copyright ©. All rights reserved. Design by <a href="http://www.bestfreetemplates.info" target="_blank" title="Best Free Templates">BFT</a>                                                                                                                                                                                                                                                <div class="inner_copy"><a href="http://www.beautifullife.info/">beautiful</a><a href="http://www.grungemagazine.com/">grunge</a></div>
          </p>
     </div>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Image liée 1</div>
    <div class="AccordionPanelContent"><a href="#"><img src="images/pic1.jpg" alt="" width="105" height="72" /></a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Image liée 2 </div>
    <div class="AccordionPanelContent"><a href="#"><img src="images/pic1.jpg" alt="" width="105" height="72" /></a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Image liée 3</div>
    <div class="AccordionPanelContent"><a href="#"><img src="images/pic1.jpg" alt="" width="105" height="72" /></a></div>
</div>
</div>
<script type="text/javascript">

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

DW isn't drag & drop like your graphics apps. You need to look at your code.
Highlight the relevant portions, Cut or Copy & Paste code to where you want it to appear in your markup.

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Image liée 1</div>
    <div class="AccordionPanelContent"><a href="#"><img src="images/pic1.jpg" alt="" width="105" height="72" /></a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Image liée 2 </div>
    <div class="AccordionPanelContent"><a href="#"><img src="images/pic1.jpg" alt="" width="105" height="72" /></a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Image liée 3</div>
    <div class="AccordionPanelContent"><a href="#"><img src="images/pic1.jpg" alt="" width="105" height="72" /></a></div>
</div>
</div>

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Showing content in another region on the same page using url

Hello Experts,
I have a page with two region, say region A and region B. Region B is a sql based report that shows rows of information about a set of files with the first column rendered as an URL for the actual file itself. On clicking this url the file content is displayed in the same window replacing the existing content. I would like for this file content to be shown in the region A, without replacing the entire window. Is this possible?. I tried assiging a static id to region A and use it in the url, however that is not working and i am still in the process of figuring this out.
thanks
Seetharaman

When you click on the link , get the URL and show the link in an iframe
Suppose your report links are rendered like(HTML code of the report)
<td[headers="FILE_LINK"]><a href="http://myurl:8080/blah/blah">Blah</a></td>*Have an onload JS which causes clicking on the file link to generate an iframe and load it inline (I would have chosen a jQuery modal dialog over an inline display)
$('td[headers="FILE_LINK"] a').each( function(){
url = $(this).attr('href');
$(this).attr('href','javascript:void(0);');
t = $(this);
$(this).click( function(e){
e.preventDefault();
t.after('<iframe src="'+url+'"> </iframe>');
});<i>Note: modify the link field selector to match your report column links</i>
As an additional comment: Showing an entire html page(or a file) inline in a report might not be visually appealing, try opening it as a modal popup.

Cool code to move a region to another spot on the page. HELP-doesn't email

I am moving a region from one place to another on a page.... putting it in the middle of a report.
I mentioned it here :
documentation on html_GetElement, and moving a regionID via javascript
Why am I doing this? I needed to see one purchase order, with the POitems in the middle of the page. So i render the purchase order (using a custom report template I built)... in that template, I Have a div called POItems. Then in a separate region, I'm getting the POitems using an APEX report region. After the page is loaded, i call a js function I wrote to move the contents of the region from whereever it is to the div where I've saved a place for that data in the middle of my larger purchase order report.
It looks GREAT!!!
Here is the function (i have it in the HTML Header of the page)
(I know, i hardcoded the regionID. I'm going to change it later to grab the id into a field and then use that field's value to make the function more generic. I'll also add parameters to specify the name of the region I wanna get, and the name of the DIV I wanna move it to, and I'll rename the function to moveRegion)
function movePOItems(){
var o = html_GetElement('R199099409321783582');
if (o){
var oDIV = getObject('POitems');
if (oDIV){
oDIV.innerHTML = o.innerHTML;
o.style.display = "none";
and I call it in the footer:
<script language="JavaScript" type="text/javascript">
movePOItems();
</script>
Now, the problem. The whole purpose for this was to PRINT and to EMAIL. Print preview looks fine (haven't printed to paper yet). Looks really great! What we are using to print is Internet Explorer's (ver 6.x) "File/Send/Page by Email". When I go to print, the POItems region shows up where it would have shown up had I not moved it then hidden it!! It's as if I never wrote the function and never called it.
I'm guessing that Outlook doesn't do the javascript calls.
Any ideas?
If you don't need to print, I hope someone can use this trick! Really, though, I hope to resolve the printing issue or I have to totally rewrite the sql query to get the items. I thought I was done w/ this task! :-(
~Darby
Versions:
Outlook 2003 SP2
IE: 6
Apex: 2.2
Oracle: 10g

thanks Tyler but I have to go with the software and versions that we have.
I am actually done w/ that task.
I wrote a pl/sql procedure to get the poItems inline and it looks really good.
It's a good lesson learned that you can't use any fancy javascript after page load, if you wanna use File\Send\Page byEmail (IE).

IF THE WEBSITE CONTENT IS OTHER THAN ENGLISH, THE PAGE SHOWS JUNK/UNKNOWN CHARACTERS.

I INTEND TO VIEW THOSE SITES HAVING PAGE CONTENTS OTHER THAN ENGLISH LANGUAGE. FOR EXAMPLE hindi.moneycontrol.com BUT FIREFOX DISPLAYS JUNK/UNKNOWN CHARACTERS ON THE PAGE INSTEAD OF SHOWING PROPER TEXT IN HINDI LANGUAGE. I TRIED CHANGING VIEW->CHARACTER CODING, BUT, NO SOLUTION.
== This happened ==
Every time Firefox opened

Do you have Indic font support and all needed fonts installed?
See [http://en.wikipedia.org/wiki/Help:Multilingual_support_%28Indic%29 Wiki: Help:Multilingual support (Indic)]

When sidebar is opend using iframe, in new tab it renders in upper left corner of the Page.

Dear Sir,
I am working on crossrider framework i have built the Text Tracker extension(add-on) using this framework when it is installed it is displayed as sidebar on webpage .Actually this sidebar is opened in iframe tag and when i open any link in new tab then this side bar does not rendered properly and shown in the upper left corner of the page ,if you have any solution then share it with me.
you can download my extension at the link below:
http:// crossrider. com/download/11879
Thanks
Abid Nawaz Marwat
''moderator dismantled the hyperlink - not appropriate to provide a direct install link here''

Sorry, this forum is for Firefox user support, not for requesting assistance with developing add-ons or for help fixing them.
Try posting here - http://forums.mozillazine.org/viewforum.php?f=19 - a forum for extension development.

When browser window cuts off content (is too small for the page) scrollbar wont scroll down to cropped content.

Hey everyone,
I'm having a new problem with Muse. This is my first Muse site, all my previous web work was HTML CSS, but I'm trying to learn the programs. However, I have a weird problem with my page... When the browser is too small - aka the window showing the site is cropping some of the content, the scroll bar appears, but wont scroll down it... I don't understand why. It seems to be happening in all browsers. Likewise, on some computers my footer is missing or invisible, not sure why, but on my computer in all browsers (firefox, chrome, safari) I don't have the problem. Any advice?
www.DanielleFeliciano.com
Also, in site properties I have the minimum height set to what would show the whole page, not sure what is going on. I've also noticed, that the scrollbar appears when the page is cropped, it just won't scroll the page..

Looks like you have your content pinned on the homepage .... or on a layer that is pinned. Probably the header layer.

FireFox opens two new tabs on one click then can not load the page properly

http://windowslivehelp.com/thread.aspx?postid=D57057A2-59C8-4131-B6EC-42F7F4780E4F#D57057A2-59C8-4131-B6EC-42F7F4780E4F
I am having trouble with the this site. It loads but keeps on trying to load. in the tab it flashes connecting ....emails and passwords not retained...connecting ...and so on.
the functionality of the page does not allow scrolling through the page it just goes back to the opening position.
this page and my hotmail page does not function as they should.
Please can someone help me?

This issue can be caused by the Facebook Toolbar extension
*https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes

Spry tabbed panal-controlling content of another textbox on the page

Similar Messages

Maybe you are looking for