Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver
I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?
<!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>LEAP 2 GROW</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #090909;
background-image: url(k2-mountain-1280x800-1.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
.twoColFixLtHdr #container {
width: 1200px;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
padding: 0;
margin-top: 10px;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #8CC543;
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
background-color: #25A8E0;
margin-top: 40px;
height: 400px;
.twoColFixLtHdr #mainContent {
margin-right: 0;
margin-bottom: 0px;
margin-left: 248px;
border: 1px solid #8CC543;
margin-top: 40px;
text-align: center;
background-position: center center;
color: #8CC543;
font-family: "Century Gothic";
font-size: medium;
text-transform: none;
height: 400px;
background-image: url(k2-faded.jpg);
.twoColFixLtHdr #footer {
padding: 0;
text-align: left;
font-family: "Century Gothic";
text-transform: uppercase;
color: #25A8E0;
letter-spacing: 5px;
font-size: small;
word-spacing: normal;
display: block;
margin-left: 0px;
margin-top: 10px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #25A8E0;
text-decoration: none;
a:hover {
color: #8CC543;
text-decoration: none;
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
//-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: xx-small; color: #EEEEEE; }
a:visited {
text-decoration: none;
color: #25A8E0;
a:active {
text-decoration: none;
.style3 {
color: #FFFFFF;
font-weight: bold;
.style4 {color: #FFFFFF}
-->
</style>
<style type="text/css">
<!--
.style5 {font-size: x-large}
h1 {
font-size: medium;
color: #25A8E0;
.style6 {color: #444444}
.style8 {color: #444444; font-weight: bold; }
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
<!-- end #header --></h1>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="volunteer.html">VOLUNTEER</a> </li>
<li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
<li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
</ul>
</div>
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="mission.html">mission/overview</a></li>
<li><a href="ourteam.html">OUR team</a></li>
</ul>
</li>
<li><a href="problem.html">THE PROBLEM</a></li>
<li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
<ul>
<li><a href="solution.overview.html">overview</a></li>
<li><a href="solution.structure.html">structure</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
<ul>
<li><a href="parentcollege.html">parent college</a></li>
<li><a href="mentor.html">MENTOR program</a></li>
<li><a href="farming.html">urban farming</a></li>
<li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
<ul>
<li><a href="location.fulton.html">fulton county ga</a></li>
<li><a href="location.haiti.html">haiti</a></li>
<li><a href="location.tribe.html">native american tribe</a></li>
</ul>
</li>
<li><a href="news.html">NEWS|RESOURCES</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li><a href="#">DONATE</a></li>
</ul>
</div>
<div class="style3" id="mainContent">
<div align="left" class="style4">
<p class="style5">MENTOR PROGRAM</p>
<div id="TabbedPanels2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
<li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
<li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
<li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
<li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
<li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<blockquote>
<p><em>“Those who have the ability, have the responsibility”</em></p>
<p><u>Avenue of attention:</u> <strong> MENTOR PROGRAM</strong> <br />
Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
<p>Two levels of involvement: </p>
<ol>
<li>High School Academic Mentors</li>
<li>Community-Leader Mentors</li>
</ol>
<p><u>Program title:</u> <strong>Talent 2 Kids</strong> </p>
<p><u>Why Program Important</u><strong>:</strong> </p>
<ol>
<ul>
<li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
<li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
<li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
</ul>
</blockquote>
</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
<div class="TabbedPanelsContent">Content 5</div>
<div class="TabbedPanelsContent">Content 6</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
<p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
<tr>
<td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
<td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
<td><div align="center"><a href="farming.html">urban farming</a></div></td>
<td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
</tr>
</table>
<p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
//-->
</script>
</body>
</html>
Similar Messages
-
Ajax / Java script error, conflict in my page.
Hello;
I'm writting a simple slideshow for my web site. I'm trying to use dynamic html / ajax to accomplish this but I am getting an error in my code, and it seems to be conflicting with my navigation as well. The navigation is written in Java as well. So what I'm going to do is post my pages code from my java in the head to the java page that runs the slideshow and the css file. Maybe someone else can see where my problem is. It will work once this problem is figured out...
Here is my code:
Main page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="../style.css" rel="stylesheet" type="text/css">
<link href="slideStyles.css" rel="stylesheet" type="text/css" media="screen" />
<script src="slideControls.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.jpg");
about_over = newImage("images/about-over.jpg");
services_over = newImage("images/services-over.jpg");
projects_over = newImage("images/projects-over.jpg");
contact_over = newImage("images/contact-over.jpg");
preloadFlag = true;
// -->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();" class="mainBody">
<center>
<div id="wrapper">
<div id="mainHeader">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left" valign="top"><img src="../images/logo.jpg" alt="" width="296" height="120" /></td>
<td width="50%" align="right" valign="top"><img src="../images/projectHead.gif" alt="" width="393" height="120" /></td>
</tr>
</table>
</div>
<div id="mainSpacer"></div>
<div id="navBar" align="center">
<a href="../index.html"
onmouseover="window.status='home'; changeImages('home', 'images/home-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('home', 'images/home.jpg'); return true;"
onmousedown="changeImages('home', 'images/home-over.jpg'); return true;"
onmouseup="changeImages('home', 'images/home-over.jpg'); return true;" style="margin-right:15px;">
<img name="home" src="../images/home.jpg" width="68" height="26" border="0" alt="Home"></a>
<a href="../about.html"
onmouseover="window.status='about'; changeImages('about', 'images/about-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('about', 'images/about.jpg'); return true;"
onmousedown="changeImages('about', 'images/about-over.jpg'); return true;"
onmouseup="changeImages('about', 'images/about-over.jpg'); return true;" style="margin-right:9px;">
<img name="about" src="../images/about.jpg" width="87" height="26" border="0" alt="About Us"></a>
<a href="../project.html"
onmouseover="window.status='projects'; changeImages('projects', 'images/projects.jpg'); return true;"
onmouseout="window.status=''; changeImages('projects', 'images/projects-over.jpg'); return true;"
onmousedown="changeImages('projects', 'images/projects.jpg'); return true;"
onmouseup="changeImages('projects', 'images/projects.jpg'); return true;" style="margin-right:15px;">
<img name="projects" src="../images/projects-over.jpg" width="83" height="26" border="0" alt="projects"></a>
<a href="../service.html"
onmouseover="window.status='services'; changeImages('services', 'images/services-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('services', 'images/services.jpg'); return true;"
onmousedown="changeImages('services', 'images/services-over.jpg'); return true;"
onmouseup="changeImages('services', 'images/services-over.jpg'); return true;" style="margin-right:10px;">
<img name="services" src="../images/services.jpg" width="84" height="26" border="0" alt="Services"></a>
<a href="../contact.asp"
onmouseover="window.status='contact us'; changeImages('contact_us', 'images/contact-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('contact_us', 'images/contact.jpg'); return true;"
onmousedown="changeImages('contact_us', 'images/contact-over.jpg'); return true;"
onmouseup="changeImages('contact_us', 'images/contact-over.jpg'); return true;">
<img name="contact_us" src="../images/contact.jpg" width="101" height="26" border="0" alt="contact us"></a>
</div>
<div id="mainBody">
<div id="cover"> </div>
<div id="slide" onclick="hideSlide()">
<span class="slideControl">Click To Close⊗</span>
<div id="photoSlide">Loading</div>
</div>
<div id="photoAlbum">
<img src="lighting/photo0.jpg" alt="Testing" onclick="showSlide(this);"/>
<img src="lighting/photo1.jpg" alt="" onclick="showSlide(this);"/>
<img src="lighting/photo2.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo3.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo4.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo5.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo6.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo7.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo8.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo9.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo10.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo11.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo12.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo13.jpg" alt="" border="0" onclick="showSlide(this);"/>
</div>
</div>
<div id="footerSpace"></div>
<div id="mainFooter">
<div id="footerLeft">© 2010 Conway Brothers</div>
<div id="mainFooterRight"><a href="../index.html">Home</a> | <a href="../about.html">About Us</a> | <a href="../project.html">Projects</a> | <a href="../service.html">Services</a> | <a href="../contact.asp">Contact Us</a></div>
</div>
</div><br />
<br />
<br />
</center>
</body>
</html>
This is the slideControls.js file:
function findLivePageWidth() {
if (window.innerWidth)
return window.innerWidth;
if (document.body.clientWidth)
return document.body.clientWidth;
return (null); }
function initSlides() {
objectSlide=document.getElementById('slide');
objectCover=document.getElementById('cover');
objectPhotoSlide=document.getElementById('photoSlide'); }
function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src="'+ evt.src +'" id="largePhoto" alt="Large Photo" border="0"/>';
objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>';
objectLargePhoto=document.getElementById('largePhoto');
livePageWidth = findLivePageWidth();
newLeft = ((livePageWidth/2)-8) - (200);
objectSlide.style.left = newLeft + 'px';
objectSlide.style.display = 'block';
objectCover.style.display = 'block'; }
function hideSlide() {
objectSlide.style.display = 'none';
objectCover.style.display = 'none'; }
window.onload=initSlides;
this is the css file:
#slide {
position:absolute;
z-index: 1000;
display: none;
top: 100px;
text-align:right;
padding:0px 8px 8px 8px;
background-color:#fff;
cursor: pointer;
font:"Arial Black", Gadget, sans-serif;
font-weight:bold;
font-size:10px;
#cover {
position:absolute;
width:100%;
height:100%;
z-index:100;
display: none;
background-color:#000;
opacity: .75;
filter:progid:DXImageTransform.
Microsoft.BasicImage(opacity=.75);
top:0px;
left:0px;
#photoAlbum {
position:relative;
z-index:0;
width: 400px;
#photoAlbum img {
width: 20%;
border: 2px solid red;
margin:8px;
vertical-align: top;
.slideControl {
color: red;
the error is in the slideControl.js file on line 13.
the error:
objectPhotoSlide is undefined line 13
that would be this code:
objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>';
then there is the issue of interfearing with the operation of my nav.
Can anyone help me out.. I think I've been looking at this to long.
Thank you.Hello;
I'm writting a simple slideshow for my web site. I'm trying to use dynamic html / ajax to accomplish this but I am getting an error in my code, and it seems to be conflicting with my navigation as well. The navigation is written in Java as well. So what I'm going to do is post my pages code from my java in the head to the java page that runs the slideshow and the css file. Maybe someone else can see where my problem is. It will work once this problem is figured out...
Here is my code:
Main page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="../style.css" rel="stylesheet" type="text/css">
<link href="slideStyles.css" rel="stylesheet" type="text/css" media="screen" />
<script src="slideControls.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.jpg");
about_over = newImage("images/about-over.jpg");
services_over = newImage("images/services-over.jpg");
projects_over = newImage("images/projects-over.jpg");
contact_over = newImage("images/contact-over.jpg");
preloadFlag = true;
// -->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();" class="mainBody">
<center>
<div id="wrapper">
<div id="mainHeader">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left" valign="top"><img src="../images/logo.jpg" alt="" width="296" height="120" /></td>
<td width="50%" align="right" valign="top"><img src="../images/projectHead.gif" alt="" width="393" height="120" /></td>
</tr>
</table>
</div>
<div id="mainSpacer"></div>
<div id="navBar" align="center">
<a href="../index.html"
onmouseover="window.status='home'; changeImages('home', 'images/home-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('home', 'images/home.jpg'); return true;"
onmousedown="changeImages('home', 'images/home-over.jpg'); return true;"
onmouseup="changeImages('home', 'images/home-over.jpg'); return true;" style="margin-right:15px;">
<img name="home" src="../images/home.jpg" width="68" height="26" border="0" alt="Home"></a>
<a href="../about.html"
onmouseover="window.status='about'; changeImages('about', 'images/about-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('about', 'images/about.jpg'); return true;"
onmousedown="changeImages('about', 'images/about-over.jpg'); return true;"
onmouseup="changeImages('about', 'images/about-over.jpg'); return true;" style="margin-right:9px;">
<img name="about" src="../images/about.jpg" width="87" height="26" border="0" alt="About Us"></a>
<a href="../project.html"
onmouseover="window.status='projects'; changeImages('projects', 'images/projects.jpg'); return true;"
onmouseout="window.status=''; changeImages('projects', 'images/projects-over.jpg'); return true;"
onmousedown="changeImages('projects', 'images/projects.jpg'); return true;"
onmouseup="changeImages('projects', 'images/projects.jpg'); return true;" style="margin-right:15px;">
<img name="projects" src="../images/projects-over.jpg" width="83" height="26" border="0" alt="projects"></a>
<a href="../service.html"
onmouseover="window.status='services'; changeImages('services', 'images/services-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('services', 'images/services.jpg'); return true;"
onmousedown="changeImages('services', 'images/services-over.jpg'); return true;"
onmouseup="changeImages('services', 'images/services-over.jpg'); return true;" style="margin-right:10px;">
<img name="services" src="../images/services.jpg" width="84" height="26" border="0" alt="Services"></a>
<a href="../contact.asp"
onmouseover="window.status='contact us'; changeImages('contact_us', 'images/contact-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('contact_us', 'images/contact.jpg'); return true;"
onmousedown="changeImages('contact_us', 'images/contact-over.jpg'); return true;"
onmouseup="changeImages('contact_us', 'images/contact-over.jpg'); return true;">
<img name="contact_us" src="../images/contact.jpg" width="101" height="26" border="0" alt="contact us"></a>
</div>
<div id="mainBody">
<div id="cover"> </div>
<div id="slide" onclick="hideSlide()">
<span class="slideControl">Click To Close⊗</span>
<div id="photoSlide">Loading</div>
</div>
<div id="photoAlbum">
<img src="lighting/photo0.jpg" alt="Testing" onclick="showSlide(this);"/>
<img src="lighting/photo1.jpg" alt="" onclick="showSlide(this);"/>
<img src="lighting/photo2.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo3.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo4.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo5.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo6.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo7.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo8.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo9.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo10.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo11.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo12.jpg" alt="" border="0" onclick="showSlide(this);"/>
<img src="lighting/photo13.jpg" alt="" border="0" onclick="showSlide(this);"/>
</div>
</div>
<div id="footerSpace"></div>
<div id="mainFooter">
<div id="footerLeft">© 2010 Conway Brothers</div>
<div id="mainFooterRight"><a href="../index.html">Home</a> | <a href="../about.html">About Us</a> | <a href="../project.html">Projects</a> | <a href="../service.html">Services</a> | <a href="../contact.asp">Contact Us</a></div>
</div>
</div><br />
<br />
<br />
</center>
</body>
</html>
This is the slideControls.js file:
function findLivePageWidth() {
if (window.innerWidth)
return window.innerWidth;
if (document.body.clientWidth)
return document.body.clientWidth;
return (null); }
function initSlides() {
objectSlide=document.getElementById('slide');
objectCover=document.getElementById('cover');
objectPhotoSlide=document.getElementById('photoSlide'); }
function showSlide(evt) {
objectPhotoSlide.innerHTML='<img src="'+ evt.src +'" id="largePhoto" alt="Large Photo" border="0"/>';
objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>';
objectLargePhoto=document.getElementById('largePhoto');
livePageWidth = findLivePageWidth();
newLeft = ((livePageWidth/2)-8) - (200);
objectSlide.style.left = newLeft + 'px';
objectSlide.style.display = 'block';
objectCover.style.display = 'block'; }
function hideSlide() {
objectSlide.style.display = 'none';
objectCover.style.display = 'none'; }
window.onload=initSlides;
this is the css file:
#slide {
position:absolute;
z-index: 1000;
display: none;
top: 100px;
text-align:right;
padding:0px 8px 8px 8px;
background-color:#fff;
cursor: pointer;
font:"Arial Black", Gadget, sans-serif;
font-weight:bold;
font-size:10px;
#cover {
position:absolute;
width:100%;
height:100%;
z-index:100;
display: none;
background-color:#000;
opacity: .75;
filter:progid:DXImageTransform.
Microsoft.BasicImage(opacity=.75);
top:0px;
left:0px;
#photoAlbum {
position:relative;
z-index:0;
width: 400px;
#photoAlbum img {
width: 20%;
border: 2px solid red;
margin:8px;
vertical-align: top;
.slideControl {
color: red;
the error is in the slideControl.js file on line 13.
the error:
objectPhotoSlide is undefined line 13
that would be this code:
objectPhotoSlide.innerHTML+='<p>' + evt.alt +'</p>';
then there is the issue of interfearing with the operation of my nav.
Can anyone help me out.. I think I've been looking at this to long.
Thank you. -
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">
<!--
body {
background-color: #2B3856;
.style1 {
color: #FFFFFF;
.style4 {
color: #FFFFFF;
font-size: 36px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
margin-left: 250px;
.style5 {color: #CCCCCC}
.style11 {
font-size: 18pt;
font-style: italic;
a:link {
color: #FFFF00;
a:visited {
color: #000000;
a:hover {
color: #000033;
-->
</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">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</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 -
Hello, my situation:
I created a livesearch (like the gmail address search) which
echo's into a div. I use an onclick to call another JS file which
echo's a page called product.php into the div.
The spry tabbed panels are placed on the product.php page.
The problem is that the spry js file is ignored by AJAX. This
causes the tabbed panels not work. Do you know a way around?You can do that there is a sample to look at, click the
Widgets tab and then the Tabbed panels from spry data link
http://labs.adobe.com/technologies/spry/samples/ -
Spry Tabbed Panels - Contribute Error Message
I created a Web site using Dreamweaver CS4 that uses a Spry Tabbed Panels. It works fine, but so far it fails when it is pulled into Contribute CS5. I've read the posts about allowing Spry Widget editing in Contribute, so I've turned on that capability.
When I try to launch the Spry Widget Properties from within Contribute, I get this error:
"This tabbed panel is missing its content. Contact your administrator to add the missing content panel, or delete this panel and insert a new one."
I've tried creating new generic pages with new Spry tabbed panels, but they always fail with this message.
Here is a sample page:
http://www.dougriderconsulting.com/zmcpa/incentives.html
Any ideas? Thanks!The page http://www.dougriderconsulting.com/zmcpa/incentives.html mentioned here has no issues.
If there are any missing codes DW also shows the error as <missing content panel> or <missing tab> when the Tabbed Panel widget is selected.
In Contribute the same pops up as a message.
The issue in page http://www.dougriderconsulting.com/zmcpa/education_in_muskingum_county.html posted in Contribute Blogs is re-solved http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html#more-33. -
Validation Errors with Spry tabbed panels with doctype XHTML 1.0 Strict
I'm getting errors while using the W3C Validation Service on my Strict XHTML 1.0 pages that use the SPRY Tabbed Panels. I've read a few places that W3C has no plans on 'fixing or relaxing" the restrictions. Is there any type of work around to the Spry Widget Tab panels code ??? All of my other pages validate nicely... hate to go back to Transitional afterconverting all my other code.
The DreamWeaver File validation also gives me errors but I think that is fed from W3C.
Any help would be appreciated. Thanks Pat
Line 31, Column 46: there is no attribute "tabindex"
… <li class="TabbedPanelsTab" tabindex="0">Want a professional looking Logo ?</…Use Spry 2.0
You can see a live demo of Spry 2.0 widgets below (contains valid markup).
http://alt-web.com/sandbox/Spry-test.html
Unless you're incorporating XML applications into your web site, there is not much reason to use XHTML Strict doc types. That standard was last revised in 2002. It has since been replaced with HTML5.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/ -
When trying to insert a Spry Tabbed Panels I get a Java
Script error. It doesn't allow me to select the parent of the
Tabbed Panels for easy addition of additional panels. This has been
an ongoing problem. I've tried reloading DreamWeaver but that
didn't seem to help. Other Spry components work just fine. It's not
giving me a specific error just that it's JavaScript.
Suggestions?I had this I closed the site that I was working on and
selected a different site tried to insert spry all ok.
went back to original site and bingo all ok
why that happened, dont have a clue but try it it may work
for you -
Linking to specific spry tabbed panel - code not working
Hi,
I have followed the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php
with regard to being able to link to a specific tab. For some
reason though, my code doesn't work. I am usign Dreamweaver cs3,
and as soon as I head back to the design view, or preview it in a
browser for that matter, all I see is each tab one above the other,
and the tabs no longer work.
My code is as follows:
<script src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params =
Spry.Utils.getLocationParamsAsObject(); </script>
is in the head, and the body for the tabbed panels is:
<div id="mainContent">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">1st
Team</li>
<li class="TabbedPanelsTab" tabindex="0">2nd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">3rd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">4th
Team</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%"><!-- TemplateBeginEditable
name="playername1" -->
<div align="center" class="style3 style5">Player
name</div>
<!-- TemplateEndEditable -->
<p align="center"><!-- TemplateBeginEditable
name="playerpic1" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo1" -->
<p align="center" class="style3 style6 style4">Click a
player name to view their profile. </p>
<!-- TemplateEndEditable -->
<p align="center"> </p></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto1" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3"><!--
TemplateBeginEditable name="playername2" --><span
class="style5">Player name</span><!--
TemplateEndEditable --></div>
<p align="center"><!-- TemplateBeginEditable
name="playerpic2" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic2" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo2" -->
<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
<!-- TemplateEndEditable --></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto2" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto2" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%"><!-- TemplateBeginEditable
name="playername3" -->
<p align="center" class="style3 style6 style4">Player
name</p>
<!-- TemplateEndEditable -->
<p align="center"><!-- TemplateBeginEditable
name="playerpic3" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic3" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo3" -->
<p align="center" class="style3 style6 style4">Click a
player name to view their profile.</p>
<!-- TemplateEndEditable -->
<p align="center"> </p></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto3" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto3" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%"><!-- TemplateBeginEditable
name="playername4" -->
<div align="center" class="style3 style4
style6">Player name</div>
<!-- TemplateEndEditable -->
<p align="center"><!-- TemplateBeginEditable
name="playerpic4" --><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic4" /><!--
TemplateEndEditable --></p>
<!-- TemplateBeginEditable name="playerinfo4" -->
<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
<!-- TemplateEndEditable -->
<p align="center"> </p></td>
<td width="46%"><p align="center"><!--
TemplateBeginEditable name="teamphoto4" --><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto4" /><!-- TemplateEndEditable --></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab ?
params.tab : 0)});
The link I would then use to link to tab 2 say, would be:
../"pagename".php?tab=2#TabbedPanels2
Also, when I then go to click on the Spry tabbed panels
region in design view, I get an error message saying:
while executing inspectSelection in spry_tabbedpanels.htm, a
javascript error occurred.
I am pretty inexperienced with Spry and Java so I may have
missed something simple.
A solution would be much appreciated as this is driving me
mad!
Please let me know if you need me to post more code.
Thanks in advance.
p.s. I am using Dreamweaver CS3 and the SpryURLUtils.js
script is from the Spry 1.6.1 prerelease framework.quote:
Originally posted by:
brownie_jedi
Ok, so I've just changed the code to <script
type="text/javascript"
src="../SpryAssets/SpryURLUtils.js"></script>
to mimic the code for <script
src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
since the spry files are all in the same folder. Is this what
you meant?
Having just installed firebug, I get the error params is not
defined. So I guess that this all together means that the
SpryURLUtils.js file is not being called correctly?
p.s. Thanks for the speedy replies, much appreciated.
Yes it means it cant find the file SpryURLUtils.js.
in firebug theres a tab called scripts, if u click on it, u
can see wich scripts are loaded. i suggest u check that out. Or
post a online URL so we can see the problem for our selfs.. -
I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?
I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
<div class="section_w500">
<h2>North Bali Listings</h2>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
<li class="TabbedPanelsTab" tabindex="0">Land</li> <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
<li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
<li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
<p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
<br />
The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
<table width="100%">
<tr>
<td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
</tr>
</table>
<p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
<br />
<img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
<br />
<img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
<p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
</div>
<div class="TabbedPanelsContent">
<p> </p>
<table width="100%" border="0">
<tr>
<td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
<span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
<td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
</tr>
<tr>
<td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
<p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
<td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
</tr>
<tr>
<td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
Min Rental Period 25 Years, extendable to to a max of 75 years
(with full "Right Of Use" issued by owner)</span></td>
<td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
<br />
<span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
</tr>
</table>
<p><br />
</p>
<hr width="100%" noshade="noshade" />
<p> </p>
</div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
</div>
<p> </p>
<p>
<h7 style="color: #C03"></h7>
</p>
<h2></h2><!-- this stays empty to put dotted line under listings block -->
</div>
<div class="cleaner"></div>
</div> <!-- end of main column -->Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms. -
Modified Spry Tabbed Panels causing a bug in Dreaweaver.
Whenever I try to edit a page with a spry tabbed panel in Dreamweaver, I get a spiraling pinwheel, then finally, a popup window saying, "the file SpryTabbedPanelsDesignTime.js has been running a long time" and I have to click "no" to continue, only to have the whole thing reoccur in a few seconds.
I have modified the widget constructor, in order to link to secondary panels from another page, which all works perfectly. However it is frustrating to keep getting the error message as a result of this modification.
<script type="text/javascript">
<!-- var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: (params.panel ? params.panel : 0)}); -->
</script>
I have seen the issue addressed in adobe forums and have attempted the fix to the SpryTabbedPanelsDesignTime.js file as suggested here:
http://kb2.adobe.com/cps/401/kb401257.html .
I am not sure why this fix isn't working for me, as it seems to be working for others.
I am alos getting another similar popup error saying, "WidgetDomTranslator.js running a long time..."
I have attached the modified SpryTabbedPanelsDesignTime.js file that was supposed to fix the problem, but has not.
If any one can help it would be so very much appreciated!!I have never heard of that problem, but reading the technote that you pointed to seems to indicate that it's a problem with Dreamweaver CS3, which shipped with Spry 1.4.
I have used the params technique many times in Dreamweaver CS4 without problem. The main difference is that Dreamweaver CS4 ships with Spry 1.6.1. You can update Dreamweaver CS3 to Spry 1.6.1 by downloading the Spry updater from http://www.adobe.com/go/labs_spry_download.
Hopefully, that should fix your problem. -
Multi page recordset output from ASP page on Spry Tabbed Panel Widget
I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id=two class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div id=one class="TabbedPanelsContent">Content 1</div>
<div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html> -
Datasets in Spry Tabbed Panels
Hey guys,
I have a spry tabbed panel in which the contents are iframes that load a spry xml dataset. The problem I am encountering is that while the "default tab" spry loads...when toggling the other tab I get the errors
Failed to retrieve data set (pagingInfoDs) for spry:repeat
FF Firebug shows me
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://192.168.0.1:93/vadmin/includes/cms.js :: BrowserInfo :: line 51" data: no]among other things...
Now I'm developing on localhost so I'm not able to show an example...the thing is if I were to change the default tab (from 0 to 1) the default tab now will work whislt the other would trigger the error. This means that some thing with the tab NOT being "open" or "shown" is affecting the dataset. I find this wierd as the datasets are loading within iframes...
Any idea as to what can be causing this reaction in the tabs?well the code to the spry tabbed panel
<div class="contentList">
<div class="TabbedPanels" id="TabbedPanels_links">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" title="View Webpages">View Webpages</li>
<li class="TabbedPanelsTab" title="View Non-HTML Docs">View Non-HTML Docs</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<iframe src="../../../../?task=menus&a=browse&menu_id=true" width="100%" height="500" ></iframe>
</div>
<div class="TabbedPanelsContent"> <iframe src="../../../../?task=docs&a=browse&doc_id=true" width="100%" height="500" ></iframe></div>
</div>
</div>
</div>
</fieldset>
<script type="text/javascript">var TabbedPanels_links = new Spry.Widget.TabbedPanels("TabbedPanels_links", { defaultTab: 2 });</script>
If I were to switch iframe sources the one thats in the "default" tab will list while the the tab that isn't will error
This was the first error
uncaught exception:
[Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005
(NS_ERROR_FAILURE)" location: "JS frame ::
http://orin.mshome.net:93/vadmin/includes/cms.js :: BrowserInfo :: line
51" data: no]
After that its more that the dataset wasn't a property -
Dividing Spry Tabbed Panels content area into columns?
Hi there.
I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
How can I do this?
I thought about making divs inside the Panel but it would be too messy.
Please let me know if there is a simple way to do this.
Thanks in advance.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<style>
* {box-sizing: border-box;}
body {width: 960px; margin: auto;}
.TabbedPanelsContentVisible {overflow: auto;}
.col33 {width: 33.3333%; float: left; padding: 15px;}
</style>
</head>
<body>
<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">
<div class="col33">
<h3>Column 1</h3>
<p>Content 1</p>
<p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
<p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
</div>
<div class="col33">
<h3>Column 2</h3>
<p>Content 1</p>
<p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
</div>
<div class="col33">
<h3>Column 3</h3>
<p>Content 1</p>
<p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
<p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
</div>
</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html> -
Spry Tab Panel is not working properly on remote server
Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html" class="current">ABOUT</a></li>
<li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
<ul>
<li><a href="#">Business Plan</a></li>
<li><a href="#">Marketing Plan</a></li>
<li><a href="#">Incorporation</a></li>
<li><a href="#">Accounting System</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">OUR PROCESS</a></li>
<li><a href="#">CAREERS</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">values</li>
<li class="TabbedPanelsTab" tabindex="0">people</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem n, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, , </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit a, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="legal">
<ul>
<li>Copyright © 2012 Temari&Co</li>
<li>| Privacy Policy |</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="socialmedia">
<ul>
<li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
<li><img src="images/gicongri.png" width="20" height="20" alt="gicon"/></li>
<li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
<li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
</ul>
</div>
</div><!-- end footer-->
</div><!-- end wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #666;
height: 30px;
width: 116px;
text-transform: uppercase;
text-align: center;
line-height: 30px;
margin: 0px;
padding: 0px;
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
background-color: #FFF;
height: 100%;
width: 824px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
.TabbedPanelsContent {
height: 100%;
width: 100%;
overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
background-color: #EEE;
position: relative;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.TabbedPanelsContent {
clear:both !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 744px;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services -
Spry tabbed panels as menu system
Hi,
This is actually for Dreamweaver CS6. What I'm trying to do is use spry tabbed panels as horizontal my menu system. I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected. I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.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;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr[i])
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];
if (el)
this.showPanel(el);
el.focus();
break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponentNote - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
-moz-user-select: none;
background-color: #000000;
border-color: #000000;
border-left: 0 solid #000000;
border-style: solid;
border-width: 2px 0 0;
cursor: pointer;
float: left;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
height: 15px;
list-style: none outside none;
margin: 0;
padding: 4px 18px;
position: relative;
top: 0;
Don't use dummy text without normal length text with breaks
Maybe you are looking for
-
Problem with Mac Mini and Panasonic PT-AE700 projector
I just bought a brand new Mac Mini and intended to connect it through hdmi to my Panasonic PT-AE700 projector (with a 10 m hdmi-hdmi cable and a dvi-hdmi adapter). However there is no signal recognized by the projector. Any suggestions? I have tried
-
PNGs in Word 2007 get scrambled, sometimes
I have a Word 2007 doc "doc A" with a number of PNGs in it (these were exported from ArcMap). When I use Acrobat X Pro to convert to pdf (Standard quality, did not change any of the settings), the resulting pdf has the PNGs scrambled about 50% of the
-
IDoc with incorrect data is expected to fail but it does not
Hi All, The Job CQM_CR_O_IF103_IN_INOVIS_ORDER3 got cancelled as result of a short dump. In the initial investigation we found that the IDoc 0000000012089824 had an incorrect information i.e. it had a material which did not exist. The IDoc is expecte
-
Is three decimal possible in SAP
From the first day, we were told by our consultant that we could only use 2 decimal . We have some unit cost with three decimals. Is there any way to customize decimal? Please kindly advise. Thanks, Linda
-
Qosmio X505-Q860 CD Burner won't Burn Disks
While I love most everything about my computer, the cd burner won't burn new cds. Every time I try to burn a cd I get errors. Windows Media Player Message - Windows Media Player cannot burn the files. If the burner is busy, wait for the current task