Iframes and spry widget issue
PLEASE HELP!
I am building a website for my company using Dreamweaver for the very first time. I have a spry accordian menu on my page (that probably has nothing to do with my issue).
Next I added an iframe in the page to hold a vertical spry menu (since it will appear in other pages and I only want to edit it once. The menu was working fine until I did this.
Now that I embedded it in the iframe it is opening behind other things on the page. What can I do? Code is below:
<!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"><!-- InstanceBegin template="/Templates/Template_ABA_2011.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Arkansas Bankers Association</title>
<!-- InstanceEndEditable -->
<style type="text/css">
</style>
<link href="Dec28.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
<style type="text/css">
<!--
.style8 {
color: #CDDAE0;
font-weight: bold;
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->
</head>
<body onload="MM_preloadImages('Images/HeaderHover_Files/images/aboutus_hover.png','Images/Head erHover_Files/images/education_hover.png','Images/HeaderHover_Files/images/banking_hover.p ng','Images/HeaderHover_Files/images/government_hover.png','Images/HeaderHover_Files/image s/products_hover.png','Images/HeaderHover_Files/images/partnership_hover.png','Images/Head erHover_Files/images/fraudcenter_hover.png','Images/HeaderHover_Files/images/consumer_hove r.png','Images/HeaderHover_Files/images/home_hover.png','Images/HeaderHover_Files/images/c ontactus_hover.png','Images/HeaderHover_Files/images/sitemap_hover.png','Images/Header_htm landimages/images/home_hover.png','Images/Header_htmlandimages/images/contactus_hover.png' ,'Images/Header_htmlandimages/images/sitemap_hover.png')">
<div id="wrapper">
<div id="header">
<div align="center" "top">
<!-- ImageReady Slices (header_seachinfrontofimage.psd) -->
<table id="Table_01" width="980" height="81" border="0" cellpadding="0" cellspacing="0" bgcolor="#2B4E74" >
<tr>
<td rowspan="2">
<img src="Images/header_and_search/images/logo.png" alt="" width="597" height="81" border="0"></td>
<td>
<img src="Images/header_and_search/images/home.png" alt="" width="250" height="33" border="0"></td>
<td>
<img src="Images/header_and_search/images/contact-us.png" alt="" width="65" height="33" border="0"></td>
<td>
<img src="Images/header_and_search/images/site-up'.png" alt="" width="68" height="33" border="0"></td>
</tr>
<tr>
<td colspan="3" valign="middle" background="Images/header_and_search/images/search-box.png" border="0"><form name="form1" method="post" action="">
<label>
<input name="search" type="text" id="search" value="Search by Keyword(s)" size="35">
</label>
<label></label>
<label>
<input name="submit2" type="image" id="submit2" src="Images/header_and_search/images/arrow.png" border="0" align="bottom">
</label>
</form> </td>
</tr>
</table>
<!-- End ImageReady Slices -->
<a href="www.arkbankers.org/aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Images/HeaderHover_Files/images/aboutus_hover.png ',1)"><img src="Images/HeaderFiles/images/aboutus.png" name="Image21" width="76" height="37" border="0" id="Image21" /></a><a href="education_training.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Images/HeaderHover_Files/images/education_hover.p ng',1)"><img src="Images/HeaderFiles/images/education.png" name="Image22" width="133" height="37" border="0" id="Image22" /></a><a href="www.arkbankers.org/banking_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','Images/HeaderHover_Files/images/banking_hover.png ',1)"><img src="Images/HeaderFiles/images/banking.png" name="Image23" width="99" height="37" border="0" id="Image23" /></a><a href="www.arkbankers.org/government_relations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','Images/HeaderHover_Files/images/government_hover. png',1)"><img src="Images/HeaderFiles/images/government.png" name="Image24" width="141" height="37" border="0" id="Image24" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','Images/HeaderHover_Files/images/products_hover.pn g',1)"><img src="Images/HeaderFiles/images/products.png" name="Image25" width="130" height="37" border="0" id="Image25" /></a><a href="www.arkbankers.org/partnership_opportunities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','Images/HeaderHover_Files/images/partnership_hover .png',1)"><img src="Images/HeaderFiles/images/partnership.png" name="Image26" width="158" height="37" border="0" id="Image26" /></a><a href="www.arkbankers.org/fraud_center.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','Images/HeaderHover_Files/images/fraudcenter_hover .png',1)"><img src="Images/HeaderFiles/images/fraudcenter.png" name="Image27" width="94" height="37" border="0" id="Image27" /></a><a href="www.arkbankers.org/consumer_connection.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','Images/HeaderHover_Files/images/consumer_hover.pn g',1)"><img src="Images/HeaderFiles/images/consumer.png" name="Image28" width="149" height="37" border="0" id="Image28" /></a></div>
</div>
</div>
<div id="body">
<!--sidebar close -->
<table width="860" height="auto" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td width="3" rowspan="3" valign="top"> </td>
<td height="53" colspan="4" valign="top"><!-- InstanceBeginEditable name="Department_Heading" -->
<div align="center"><img src="Images/education_images/education_top.png" alt="Education and Training" width="805" height="150" /></div>
<!-- InstanceEndEditable --></td>
<td width="29" rowspan="2" valign="top"><table width="20" border="0" cellspacing="5" cellpadding="2">
<tr>
<td> </td>
</tr>
</table>
<br />
</td>
<td width="144" rowspan="2" valign="top"><img src="Images/Ads/ababannerad.jpg" width="140" height="325" /><br />
<br />
<img src="Images/Ads/Link_LiveEvents2010_CoverPic.jpg" width="144" height="186" /><br />
<br />
<img src="Images/Ads/SponsorshipBrochure2010_Link.gif" width="144" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top" background="Images/bg_department_details.png"><table width="771" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="135" valign="top">
<!--begins table that holds the spry accordian -->
<!--table that holds education items 1 and 2 is inside the table that holds the spry accordian menu. -->
<!-- InstanceBeginEditable name="Department_SubMenu_Ads" -->
<iframe src="EducationMenu.html" width="145" height="auto" frameborder="0" scrolling="no"> </iframe>
<br />
<br />
<!-- InstanceEndEditable --> <br /></td>
<td width="616" valign="top"><div align="left">
<!-- InstanceBeginEditable name="Department_Details" -->
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">ABA LIVE EVENTS</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Live.png" width="150" height="110" align="left" /><br />
The Arkansas Bankers Association is your organization, dedicated to serving the needs of Arkansas bankers. If you are an employee of an ABA-member financial institution, then you are an ABA member. Our educational offerings are available in a variety of formats to make training as convenient, timely and cost effective as possible.<br />
<a href="educ_liveevents.html">View All Live Events</a> <a href="educ_liveevents.html"><img src="Images/more_arrow.png" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">ABA WEBINAR LIBRARY</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinar_Library.png" width="150" height="124" align="left" /><br />
The Arkansas Bankers Association is your organization, dedicated to serving the needs of Arkansas bankers. If you are an employee of an ABA-member financial institution, then you are an ABA member. Our educational offerings are available in<br />
a variety of formats to make training as convenient, timely and cost effective as possible. We encourage you to explore all the training options available to you.<br />
<a href="Jan5_2.html">View Webinar Library <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /><br />
</a><br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">COMPUTER BASED IN-HOUSE</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/ComputerBasedInHouse.png" width="150" height="110" align="left" /><br />
The Arkansas Bankers Association is your organization, dedicated to serving the needs of Arkansas bankers. If you are an employee of an ABA-member financial institution, then you are an ABA member. Our educational offerings are available in a variety of formats to make training as convenient, timely and cost effective as possible. <br />
<a href="Jan5_2.html">View Computer Based In-House Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">WEBINARS & PODCASTS</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinars_Podcasts.png" width="150" height="110" align="left" /><br />
A webinar is an enhanced telephone seminar. The audio portion is delivered by speaker phone. You may also view a corresponding PowerPoint presentation by PC.
&A. You will receive a PIN, materials and instructions prior to the seminar.<br />
<a href="Jan5_2.html">View Webinars & Podcasts <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">SELF-PACED ONLINE</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/SelfPacedOnline2.png" width="150" height="104" align="left" /><br />
ABA eLearning includes over 60 courses and 200 hours of training in the retail, small business, personal trust, compliance, and
management development areas.<br />
<br />
<strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001">Register/Enroll/Take a Demo - </a></strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001" target="_rpbrowser"><strong>Take the Demo Now</strong></a><strong> </strong> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
<a href="Education/ABA_eLearning_Price_and_Credit_List%20Jan_10.xls" target="_rpexternal">Brochure & Pricing</a> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">INSTRUCTOR LED ONLINE</div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/InstructorLedOnline2.png" width="150" height="110" align="left" /><br />
Your instructor posts weekly assignments which includes a reading (either textbook or online) and homework is submitted through the discussion board or via email. You complete each at your convenience and take a weekly quiz. Exams (proctored midterms and/or finals) are all taken online. Your instructor is available to provide feedback and answer questions. <a href="Jan5_2.html">View Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><strong>ANNUAL CONVENTION</strong></div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/Convention.png" width="160" height="106" align="left" /><br />
New Rules, New Opportunities, New Banking Environment<br />
<br />
<strong>121st Annual Arkansas Bankers Association Convention & Tradeshow</strong><br />
The Peabody Hotel & Statehouse Convention Center, Little Rock, Arkansas<br />
May 4-6, 2011 - <strong><em>Brochure Coming Soon!</em></strong><br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><strong>BANK MANAGEMENT SEMINAR</strong></div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/BankManagementSeminar.png" width="124" height="106" align="left" />Open to our Bank Members, Associate Members and non-members, this annual event will be held at Hilton Branson Convention Center in Branson, Missouri.<br />
<br />
<strong>2011 Bank Management Seminar</strong><br />
Hilton Branson Convention Center, Branson, Missouri.<br />
August 4-6, 2011<br />
<br />
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><strong>E<strong>MERGING LEADERS LEADERSHIP CONFERENCE</strong></strong></div>
<div class="AccordionPanelContent"><img src="Images/Icons_Education/LeadershipConference.png" width="160" height="106" align="left" />Make plans to join us for the 2011 conference in order to network with your peers, further your education and leadership skills, and accelerate your banking career!<br />
<br />
<strong>2011 ELS Leadership Conference</strong><br />
Doubletree Hotel and Robinson Center, Little Rock, Arkansas<br />
July 21-22, 2011<br />
<br />
</div>
</div>
</div>
<br />
<br />
<!-- InstanceEndEditable -->
<div align="left"></div>
<p align="left""top"> </p>
<p> </p>
</div></td>
</tr>
</table>
<!-- InstanceBeginEditable name="Extras" -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
<!-- InstanceEndEditable --><br /> </td>
</tr>
</table>
<p> </p>
</div>
<!--body close -->
</div>
<div id="footer">
<table width="800" border="0" align="center" cellpadding="2" cellspacing="5">
<tr>
<td>Footer Contents Here</td>
</tr>
</table>
<br />
</div>
</body>
<!-- InstanceEnd --></html>
I frame should not be used in this situation because its contents are not in the same flow as the main document.
You are far better off using serverside includes as per following article http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps
Similar Messages
-
Spry Widget Issues - Deactivating after a while
Hi there,
I'm using Spry Widgets in DW CS3 and have been experiencing
the following strange issue.
When I insert a widget everything functions fine, the widget
is outline in blue, the little blue title appears when I roll over
it and the eye appears (for the Collapsible or the Accordion for
example) and allows me to close or open it with DW.
All in all, everything works sweet... I can edit it fine in
the Properties box etc.
And then after a while the widget just stops working. What I
mean is that there is no blue outline when rolling over it, there
is no Properties panel, there is no "eye", but the object is still
there, just not functioning.
I have obviously gone over the code as best I can. I've
created a new page within the same site and inserteda widget and
compared the code from one page to another and cannot find anything
off kilter.
Note that the CSS still woks fine, it just seems to lose its
Javascript capabilites (...)
This has happened with several different widgets in different
sites on different machines...
Any help would be much appreciated.
Thanks in advanceHere is a screenshot of a site I'm building atm. Please bear
in mind that I am not a coder and am building exclusively using
Design Mode.
LINK TO SCREENSHOT:
http://flickr.com/photos/7512606@N04/492179644"
>
-When I first inserted the Tabbed Panels widget, it
functioned fine...
-Now, something has happened and the widget is not editable
(other than going into the code) and the Panels are just displayed
one below the other.
-The widget functions normally when the page is previewed in
a browser, but I have lost my Design Mode editing capabilites.
-Now if I were to enter a new widget, it would start off
straight away in "non-editable" mode
-This has happened every time I have tried to use widgets.
Starts off fine and then loses editibility and/or functionality.
It's obviously something that I'm doing that is "breaking"
the widget, but any help would greatly appreciated.
Below is the code for that particular page:
<!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>Sisters, Pearls & MIssion Girls -
Info</title>
<style type="text/css">
<!--
body {
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url(images/background/info.jpg);
background-repeat: no-repeat;
background-position: right top;
#infoContainer {
position:absolute;
top:67.5px;
width:215px;
height:515px;
z-index:1;
opacity:0;
filter:alpha(opacity=00);
right: 17.5px;
#infoTitle {
position:absolute;
left:10px;
top:3px;
width:195px;
height:90px;
z-index:1;
#infoCredits {
position:absolute;
left:10px;
top:96px;
width:195px;
height:144px;
z-index:2;
overflow: auto;
#infoLogos {
position:absolute;
left:3px;
top:244px;
width:195px;
height:21px;
z-index:3;
#infoLinks {
position:absolute;
left:10px;
top:278px;
width:195px;
height:20px;
z-index:4;
#infoFMA {
position:absolute;
left:10px;
top:304px;
width:195px;
height:205px;
z-index:5;
.infoCredits {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #333333;
text-align: left;
#logosContainer {
position:absolute;
left:10px;
top:248px;
width:195px;
height:25px;
z-index:6;
overflow: visible;
#panelProcontaioner {
position:absolute;
left:10px;
width:195px;
height:205px;
z-index:7;
bottom: 5px;
#panelContainer {
position:absolute;
left:0px;
width:195px;
height:195px;
z-index:1;
opacity:0.8;
filter:alpha(opacity=80);
top: 15px;
-->
</style>
<script src="../../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="../../SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<link href="../../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<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_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
//-->
</script>
<link href="../css/films.css" rel="stylesheet"
type="text/css" />
</head>
<body onload="MM_effectAppearFade('infoContainer', 2000,
0, 100, false)">
<div id="infoContainer">
<div id="infoTitle"><img
src="images/info/sisters_logo.png" alt="sisters_logo" width="195"
height="90" /></div>
<div id="infoCredits"><span
class="textDefault">Directed by David Batty<br />
Produced by Jeni McMahon</span><br />
<br />
<span class="textSmall">A Rebel Films Production<br
/>
Financed by Film Finance Corporation of Australia<br
/>
Produced with the assistance of the Australian Broadcasting
Corporation<br />
© Rebel Films and Film Finance
Corporation</span></div>
<div id="infoLinks"><img
src="../images/buttons/imdb.png" alt="imdbButton" width="195"
height="20" /></div>
<div id="panelProcontaioner">
<div id="panelContainer">
<div id="filmsPanels" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
</ul>
<div id="panelContent" div
class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><a
href="../veiled/index.html" target="_top"><img
src="../../images/tabbed_nav/veiledPanel.jpg" alt="veiledPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../rodeo/index.html" target="_top"><img
src="../../images/tabbed_nav/rodeoPanel.jpg" alt="rodeoPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../inventions/index.html" target="_top"><img
src="../../images/tabbed_nav/inventionsPanel.jpg"
alt="inventionsPanel" width="195" height="175"
border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="index.html" target="_top"><img
src="../../images/tabbed_nav/sistersPanel.jpg" alt="sistersPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../thatsaustralia/index.html" target="_top"><img
src="../../images/tabbed_nav/taPanel.jpg" alt="taPanel" width="195"
height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../taylor/index.html" target="_top"><img
src="../../images/tabbed_nav/taylorPanel.jpg" alt="taylorPanel"
width="195" height="175" border="0"/></a></div>
</div>
</div>
</div></div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("filmsPanels");
//-->
</script>
</body>
</html> -
I have attached a spry trigger to a symbol on my page ...when
i preview in browser the rollover appears but i get a secondary
white box that is pushing im page down.Well screen shot wont help me much. Can you post the code?
And for future reference images you can upload it to:
http://imageshack.us -
Spry Widget Horizontal Menu IE Issue
Hi,
I am new to spry widgets. I am building this site in dreamweaver and am using the spry widgetfor my nav bar.
The issue is, in Firefox the menu looks the way it is supposed to, but in IE it has a black box. I have tried a few things,
but no luck. I am sure this is simple but I couldnt figure it out.
http://prorecllc.com/home.html
Any help will be appreciated, thanks in advance.I've been having problems with the horizontal menu in IE as
well. I have discovered that to center the main menu items without
having the submenu begin at the center of the parent item, put the
"text-align:center" under "ul.MenuBarHorizontal a" rather than the
"ul.MenuBarHorizontal li". I'm still working on making the submenu
items look nice - I don't like them centered but if they are
text-aligned left then they end up beginning far to the right of
the parent item (because the parent is centered with respect to
it's container). -
Thanks for looking at this. Your feedback is appreciated it.
Here are the facts:
1) My page uses an iframe (I know they suck but without going
into details, I'm stuck with it).
2) The page in the iframe contains Spry validation text boxes
and other form elements.
3) If I submit the page without the iframe, all works great
(i.e. the fields validate).
4) If I submit the form with the iframe, the fields do not
validate in IE7 without MULTIPLE REFRESHES/RELOADS OF THE FRAME. In
other words, you can submit the form without filling in the
appropriate input boxes.
Yes, it sounds strange. This behavior does not occur in
FireFox.
Here are the appropriate links:
Interior Form (the
one in the iframe)
Full
Page with iframe
Go ahead and click in a few of the input boxes to clear the
content and then try submitting the form. Blanks are not allowed
and you should see exclamation marks for blanks. Try it first in
FireFox and then try it IE.
Again, the only way I can get it to eventually work in IE is
to reload/refresh the iframe content (right click > refresh) a
few times.
Thanks for any insight.
Cheers.
NOTE: The validation problem only occurs with input boxes.
Checkboxes and selects seem to work fine in both browsers.This might help http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one and this http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.h tml
Gramps -
Issues with IFrame and calling an application outside the IFrame
Hi
I have an issue which is really turning my head 360 degrees in a "dead loop":)
I have a WebDynpro application, one component and three views in a viewset.
The first view will always be placed in column one and depending on some action the two other views should be loaded one by one. So in the main view the users will select three parameters from three dropdownboxes and then a call with the given parameters to an html file in KM - which then again is passing the parameters to a swf file which is presenting an Business Objects dashboard. The BO Dashboard is presented in an iFrame.
The users selects an element in the Dashboard and is then again calling the webdynpro application with four parameters, the three first from the dropdownboxes, but also a new one which is used to call the third view. I am using NavigationTarget in the URL to load the application at the given position in the portal. And the logic is working, BUT the portal is presented in the IFram of the first View.
So my question is - How to navigate from the IFrame and "back into the portal"????
Regards
Kay-ArneThere was an issue with the serialization file created.
Creating a new serilaization file via AAMEE and running it resolved the issue.
Create a serialization file via AAMEE: http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/creativesuite/pdfs/Ad obeApplicationManagerEnterpriseEditionDeploymentGuide_v_3_1.pdf
And then run it via command line.
Here are the steps:
AdobeSerialization (serialization file created using AAMEE 3.1) is not a double clickable file. You need to run it via command line to serialize the products. the command line is -
AdobeSerialization --tool=VolumeSerialize --stream --provfile=”Absolute_Path_of_prov.xml”
where
--tool=VolumeSerialize: specifies that the tool needs to process the prov.xml file to serialize.
--provfile” specifies the absolute file path to the prov.xml file,
By default, the tool looks for the prov.xml file in the same directory as the executable file and so
typically you do not need to specify this option. (Specify this option only if the prov.xml file is in some
other location.)
Make sure you invoke command prompt with Admin privileges. Return code of zero means success.
Tiffany can you please confirm the same?
-Pragya -
Update available to address iFrame and button issues
We just released an update to the DPS tools that addresses the issues around HTML/iFrame and buttons in release 25. You can download the updated components by following the links at http://www.adobe.com/go/learn_dps_install_en.
Neildid you check with VBPA Table ?
are you passing parvw field as 'WE' -
I have some Flash and Spry issues
Hi everyone!
I have one question about Flash and Spry Accordion panels. I
made this site for a school project and got the go ahead and do
these ladies' website. They love it! They loved the Panels, but I
don't like what Flash and the panels are doing in FireFox.
http://hoittsappraisals.com/
What I'm seeing is the panels sliding under the Flash element
that is in the first panel, but in IE its fine. What can I do to
fix it if there is a fix?
Thank you! And I can't wait till I can try CS3 I've seen the
Spry features that are built in and am totally jealous that it's
goin to be super easy to incorporate, when we've been slaving away
by hand!! haha, anyway, Any comments on the site would be much
appreciated!
Thanks
Noah WHi Noah,
Your flash object is using a native window ... which mozilla
(firefox) can't clip from the main canvas window underneath it.
There's an attribute/arg you can pass to flash that tells it
to share the same canvas as the browser. I think its called wmode,
but I'm not a flash person. I've asked folks internaly who are more
knowledgeable than me in the flash arena, so I'll get back to you
when they get back to me.
--== Kin ==-- -
Iframe flashing Spry Vertical menu
Hi All,
Im having an issue with the Spry Vertical Menu with flyouts.
It appears that the iframe used for the IE hack is flashing
on the screen whenever I rollover a menu item with a flyout in it.
Anyone having this same issue? Any help would be much
appriciated as I like the new Spry Widgets but I cannot have
glitches such as these... thanks
Here is my CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.css - Revision: Spry Preview Release
1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
LAYOUT INFORMATION: describes box model, positioning,
z-order
/* The outermost container of the Menu Bar, a fixed width box
with no margin or padding */
ul.MenuBarVertical
margin: 82px 0px 0px 26px;
padding: 0;
list-style-type: none;
font-size: 1em;
cursor: default;
width: 14.5em;
/* Set the active Menu Bar with this class, currently setting
z-index to accomodate IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this
container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0px 0px 0px 0px;
list-style-type: none;
font-size: 1em;
position: relative;
text-align: left;
cursor: pointer;
width: 14.5em;
/* Submenus should appear slightly overlapping to the right
(95%) and up (-5%) with a higher z-index, but they are initially
off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation
MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 8.2em;
background-color:#620808;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
text-decoration:none;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #000;
/* Menu items are a light gray block with padding and no text
decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
font-size: 1em;
padding: 0.5em 0em 0.5em 2em;
color: #dfc398;
text-decoration:none;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-image:url(../images/office/side_menu_rollover.jpg);
background-repeat:no-repeat;
background-position:6px 8px;
color: #FFF;
text-decoration:none;
/* Menu items that are open with submenus are set to
MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical
a.MenuBarItemSubmenuHover, ul.MenuBarVertical
a.MenuBarSubmenuVisible
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a
given menu item
/* Menu items that have a submenu have the class designation
MenuBarItemSubmenu and are set to use a background image positioned
on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class
designation MenuBarItemSubmenuHover and are set to use a "hover"
background image positioned on the far left (95%) and centered
vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless
you are an expert
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the
slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;ok... no sooner than I hit submit... figured it out...
If anyone comes across this, it seems just add width:0,
hieght:0 to the following css:
/* HACK FOR IE: to make sure the sub menus show above form
controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
position: absolute;
z-index: 1010;
width:0px;
height:0px;
Happy coding! -
Problem with layout and spry menu in IE
My navigation bar looks fine in Foxfire and Safari, but is all messed up in IE.
here is a link to the page:
http://vacationlandphotography.com/tls/header.html
here is my code:
<html>
<head>
<title>The Landing School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (header.psd) -->
<style type="text/css">
<!--
body {
text-align:center;
background-color: #000000;
#wrapper {
margin: 0 auto;
width: 1000;
text-align:left;
#Table_01 {
margin: 0 auto;
left:0px;
top:0px;
width:1000px;
height:133px;
#header-01 {
position:relative;
left:0px;
top:0px;
width:1000px;
height:102px;
#header-02 {
position:relative;
left:0px;
top:0px;
width:720px;
height:30px;
#header-03 {
position:relative;
left:697px;
top:-31px;
width:141px;
height:31px;
#header-04 {
position:relative;
left:838px;
top:-61px;
width:29px;
height:31px;
#header-05 {
position:relative;
left:867px;
top:-92px;
width:30px;
height:31px;
#header-06 {
position:relative;
left:897px;
top:-123px;
width:31px;
height:31px;
#header-07 {
position:relative;
left:928px;
top:-154px;
width:27px;
height:31px;
#header-08 {
position:relative;
left:955px;
top:-185px;
width:45px;
height:31px;
-->
</style>
<!-- End ImageReady Styles -->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="wrapper">
<!-- ImageReady Slices (header.psd) -->
<div id="Table_01">
<div id="header-01">
<img src="images/header_01.gif" width="1000" height="102" alt=""> </div>
<div id="header-02">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Wooden Boat Building</a>
<ul>
<li><a href="#">Overview </a></li>
<li><a href="#">Career Options</a></li>
<li><a href="#">Alumni Profile</a></li>
<li><a href="#">Syllabus</a></li>
<li><a href="#">Admission</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Composite Boat Building</a>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Career Options</a></li>
<li><a href="#">Alumni Profile</a></li>
<li><a href="#">Syllabus</a></li>
<li><a href="#">Admission</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu MenuBarItemSubmenu" href="#">Yacht Design</a>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Career Options</a></li>
<li><a href="#">Alumni Profile</a></li>
<li><a href="#">Syllabus</a></li>
<li><a href="#">Admission</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Marine Systems</a>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Career Options</a></li>
<li><a href="#">Alumni Profile</a></li>
<li><a href="#">Syllabus</a></li>
<li><a href="#">Admission</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Overview</a>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Associate’s Degree</a></li>
<li><a href="#">Tuition and Financial Aid</a></li>
<li><a href="#">Admission</a></li>
<li><a href="#">Faculty</a></li>
</ul>
</li>
</ul>
</div>
<div id="header-03">
<img src="images/header_03.gif" width="141" height="31" alt=""> </div>
<div id="header-04">
<a href="https://www.facebook.com/pages/The-Landing-School/81582557331?ref=ts" target="_top"><img src="images/header_04.gif" alt="" width="29" height="31" border="0"></a> </div>
<div id="header-05">
<a href="http://twitter.com/#!/landingschool" target="_top"><img src="images/header_05.gif" alt="" width="30" height="31" border="0"></a> </div>
<div id="header-06">
<a href="http://www.youtube.com/user/TheLandingSchool" target="_top"><img src="images/header_06.gif" alt="" width="31" height="31" border="0"></a> </div>
<div id="header-07">
<a href="http://landingschool.blogspot.com/" target="_top"><img src="images/header_07.gif" alt="" width="27" height="31" border="0"></a> </div>
<div id="header-08">
<img src="images/header_08.gif" width="45" height="31" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
here is my CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: none;
width: 700;
font-family: Arial;
color: #FFFFFF;
border: thin none #000000;
height: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 11px;
text-align: center;
cursor: crosshair;
width: 138px;
float: left;
height: 29px;
background-color: #FFFFFF;
border: 1px solid #000000;
font-family: Arial;
color: #FFFFFF;
word-spacing: -0.1em;
letter-spacing: normal;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
font: Arial;
z-index: 1020;
cursor: default;
width: 8.2em;
position: relative;
left: -500em;
background-color: #999999;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 125%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
font: Arial;
background-color: #999;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #003366;
color: #FFFFFF;
border: 0px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #003366;
color: #FFFFFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: none;
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
background: #FFF;
thank you!
Tote RoadYour first difficulty is outlined here in the W3C Validation tool: http://validator.w3.org/check?uri=http%3A%2F%2Fvacationlandphotography.com%2Ftls%2Fheader. html&charset=%28detect+automatically%29&doctype=Inline&group=0
Without a doctype declaration, the browsers don't know what to do with your code. Some apparently guess well. Internet Explorer, not so much.
After you've fixed your page up by copying this
<!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" />
in place of this:
<html>
<head>
either things will be improved or there will be something else cropping up. I opt for the former, myself!
Beth -
Spry Menu issues in Internet Explorer
I have created a Spry menu for my website and although the menu appears to look fine in Firefox and Safari, the formatting changes in Internet Explorer(IE).
1.sub menu bar is not dropping down below the main menu bar it is appearing at the top of the screen.
2.When you hover over the sub menu bar items the font should be white however in IE it is appearing as an aqua color.
3.The menu bar is not straight across the page, at the beginning and end there are chunks of the menu bar that appear white.
Are there any fixes for these issues that would help to make the menu look consistent across all browsers. The website page is
www.applmgt.net/LMNtestpage/html, below is the code. Any help would be appreciated as soon as possible.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Process operators – woodbuffalo.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="mystylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
a:link {
color: #300;
-->
</style></head>
<!-- Start Superstats code version 7.0b. Copyright 2007 MyComputer.com, Inc. More info available at http://www.mycomputer.com --><script language="JavaScript" type="text/javascript">/* You may give each page an identifying name, server, and channel on the next lines. */var pageName = "CostIntro";var pageType = "";var pageValue = "0";var product = "";/**** DO NOT ALTER ANYTHING BELOW THIS LINE! ****/var code = ' '; </script>
<script src="http://code.superstats.com/code/ss/applicationswb/0/30b" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
br = navigator.appName + parseInt(navigator.appVersion);
if (code != ' ' || br == 'Netscape2') {
document.write(code);
} else {
document.write(' <im'+'g src="http://code.superstats.com/b/ss/applicationswb/1'+ '?pageName=' + escape(pageName) + '" alt="" border=0>'); }</script>
<noscript><img src="http://stats.superstats.com/b/ss/applicationswb/1" alt="" border=0></noscript><!-- End Superstats tracking code. -->
<body vlink="#4E2C03">
<table width="760" border="0" cellspacing="0" cellpadding="2">
<tr>
<td bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img src="images/buffalobanner2.jpg" width="760" height="142"></td>
</tr>
</table>
<table width="764" border="0" bgcolor="#4E2C03"cellspacing="0" cellpadding="0">
<tr>
<td width="311" "height="60"><font color="#FFFFFF" size="1" face="Arial, Helvetica, sans-serif"><a href="index.html" class="navbar">www.woodbuffalo.net</a> > <a href="LMNtestStart.html" class="navbar">Labour
Market News</a></font></td>
<td width="136" height="65"><!-- BEGIN: Constant Contact Border Email List Button -->
<div align="center">
<table width="135" border="0" cellspacing="1" cellpadding="2" bgcolor="#330000">
<tr>
<td bgcolor="#FFFFFF" align="center"><div style="float: right; margin-right:3px; margin-top:2px; background-color: #330000;"><a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" target="_blank"><img src="http://img.constantcontact.com/ui/images1/visitor/email5_trans.gif" alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" border="0" align="center"></a></div>
<a href="http://visitor.constantcontact.com/d.jsp?m=1102570618937&p=oi" style="text-decoration:none; font-weight:bold; font-family:Arial; font-size:13px; color:#000000;" target="_blank">Join our FREE Subscriber List</a></td>
</tr>
</table>
</div>
<!-- END: Constant Contact Border Email List Button --> </td>
<td width="299" height="65"><form action="http://www.applmgt.net/SearchResults.html" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="011832208051241677611:jmojvtncciq" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</table><ul id="MenuBar1" class="MenuBarHorizontal">
<table width="780" border="0" >
<tr>
<td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
</a>
<ul>
<li><a href="employINTRO.html">Introduction</a></li>
<li><a href="aboutWages.html">Wages</a></li>
<li><a href="employOG.html">Oil & Gas</a></li>
<li><a href="employSERV.html">Service/Retail</a></li>
<li><a href="employCONST.html">Construction</a></li>
<li><a href="employGOVED.html">Gov't/Education</a></li>
<li><a href="employFOREST.html">Forestry</a></li>
<li><a href="employTRANS.html">Transportation</a></li>
<li><a href="employHEALTH.html">Health</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
<ul>
<li><a href="trainINTRO.html">
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
Introduction</a></li>
<li><a href="trainSKILLS.html">General Skills</a></li>
<li><a href="trainSAFE.html">Safety</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
<ul>
<li><a href="aboutINTRO.html">Introduction</a></li>
<li><a href="MediaEvent.html">Coming Events</a></li>
<li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
<li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
<ul>
<li><a href="mediaINTRO.html">Introduction</a></li>
<li><a href="mediaLMN.html">Labour Market News</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
<ul>
<li><a href="linksINTRO.html">Introduction</a></li>
<li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="linksEMPLIntro.html">Employer Websites</a></li>
<li><a href="linksRESIntro.html">Resources</a></li>
<li><a href="linksFACTSIntro.html">Fast Facts</a></li>
<li><a href="ContactUS.html">Contact Us</a></li>
<li><a href="privactStatement.html">Privacy Statement</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="siteMAP.html">Site Map</a></li>
</ul>
<ul>
</td>
</tr> </td>
</tr>
</table>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="760" height="40" bgcolor="#FFFFFF"><p><font color="#4E2C03" size="4" face="Arial, Helvetica, sans-serif"><strong>Process
operators: Maintaining a career in the oil sands industry</strong></font><img src="images/darkLine.gif" width="750" height="3"></p>
</td>
</tr>
</table>
<table width="764" border="0" cellspacing="0" cellpadding="4">
<tr>
<td colspan="2" valign="top"><table width="760" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="135" valign="top"><table width="165" height="188" border="0" cellpadding="1" cellspacing="0" bgcolor="FFFFFF">
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Main
story</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>What's in a Name?</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Schools Offering Programs</strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></td>
</tr>
<tr>
<td><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong>Apply for an Oilsands Job</strong></font></td>
</tr>
<tr>
<td><p><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif"><strong><img src="images/mediumLine120.gif" width="120" height="10"></strong></font></p></td>
</tr>
</table>
<p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="ddcb8f">
<tr>
<td><div align="left">
<p><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><em>"A
process operator, whether in Fort McMurray, or in a gas
plant in Medicine Hat, basically processes the upstream
oil and gas until it's purified enough to go through
a pipeline outside the gates of the plant." </em></font></p>
<p align="right"><font color="4e2c03" size="2" face="Arial, Helvetica, sans-serif"><strong>John Cook,<br>
associate dean of technology, Keyano College</strong></font></p>
</div></td>
</tr>
</table> <p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><font color="#4E2C03" size="3" face="Arial, Helvetica, sans-serif"><strong><a href="contactUS.html"><img src="images/bulletin/LMNWB200810vFinal1.gif" width="121" height="158" border="0"></a></strong></font><font color="#000000" size="3" face="Arial, Helvetica, sans-serif"><strong>Free Subscribe
Now!</strong></font></p>
</div>
</td>
</tr>
</table> <p> </p>
<table width="155" height="188" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><a href="mediaLMN1208.html"><font color="#000000" size="4.5" face="Arial, Helvetica, sans-serif"><strong>Next
issue...</strong></font></a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font color="333399" size="3" face="Arial, Helvetica, sans-serif"><img src="images/htmlbulletinimages/1008v5.png" width="125" height="159" border="0"></font></strong></a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Janitoral</font></strong></a></p>
<p align="center"><a href="mediaLMN1208.html"><img src="images/htmlbulletinimages/1008v6.png" width="123" height="141" border="0"> </a></p>
<p align="center"><a href="mediaLMN1208.html"><strong><font size="3" face="Arial, Helvetica, sans-serif">Security</font> </strong></a></p>
</div>
</td>
</tr>
</table> <p> </p> <table width="155" height="141" border="1" cellpadding="10" cellspacing="0" bordercolor="4e2c03" bgcolor="#FFFFFF">
<tr>
<td><div align="left">
<p align="center"><font color="#000000" size="2" face="Arial, Helvetica, sans-serif"><strong><font color="#FF9933">If
you like this article, you might also like:</font></strong></font></p>
<p align="center"><font color="#FF0000" size="3.5" face="Arial, Helvetica, sans-serif"><strong><a href="mediaLMN1206.html">Employment in the oilsands</a></strong></font></p>
</div>
</td>
</tr>
</table> <p> </p></td>
<td width="605" valign="top"><p><div class="floatrightgrey">
<p><img src="images/htmlbulletinimages/1008v1" width="325" height="221"> </p>
<p><font size="1" face="Arial, Helvetica, sans-serif"><em>Process operators are expected to be in high demand in the next few years. One study reported that between 2006 and 2020, over 5,000 new plant and facility operators will be needed in the oil sands.</em></font></p>
</div>
<font size="2" face="Arial, Helvetica, sans-serif">One study reported that between 2006 and 2020, over 5,000 new plant
and facility operators will be needed in the oil sands. As construction
of more and more oil sands projects ends and production begins, there
is a change in the kind
of workers most needed. More maintenance trades are needed and less
construction trades workers are needed. Also, companies now need more
operating and technical employees, such as process operators, power
engineers, and instrumentation technicians.<p>A study recently put out by the Government of Alberta (Report on Phase
2 of the Oil Sands Labour Resource Study) found that from 2006 to 2020,
15,000 new employees would be needed for operations and maintenance
in the oil sands industry. The study says there will be a need for
over 5,000 plant and facility operators between 2006 and 2020. This
includes process operators
(noc 9232) and power engineers (noc 7351).
</p><p><div class="floatleft">
<p><img src="images/htmlbulletinimages/1008v2" width="356" height="235">
<em><font size="1"><br>
Over the next few years, more plants and facilities will open up and the
demand for process operators and power engineers will increase. There is
advancement in this industry and even movement between industries.</font></em></p>
</div>
</font>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Opportunities</strong><br>
Recently, there have been over 80 job postings for process operators
and power engineers, so there is great opportunity in Wood Buffalo
for this occupation.
</font><font size="2"> </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“Attrition
is one reason (for the increased need) because a lot of the older
guys are going to be coming to the age of retirement within a
very short time and they will have to be replaced,” says
John Cook, associate dean of technology with Keyano College. “The
other reason is expansion of the existing plants and new plants
starting up.”</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Hazel White,
recruitment advisor with Syncrude Canada Ltd. says they recently
had a large number of process operator
positions
posted online
because of their practice to promote staff within the company.While
this is an entry-level position, most companies require that
their employees have at least a high school diploma and their fourth
class power engineering ticket. For more information on education,
see Schools
on page 4.</font><font face="Arial, Helvetica, sans-serif"> </font> </p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Process operators</strong><br>
There are a few different kinds of process operators: refinery/upgrader
process operator, gas plant operator, and oil and gas pipeline operator,
to name a few. The jobs found in Fort McMurray are generally related
to mineral and hydrocarbon processing in the oil sands industry.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">When
searching for jobs, be aware that there are a number of different
job titles for process operators. Usually, the title of the job
is based on the process the employee is involved with or by the
unit
in which the employee works. See the list on this page for
other common
job titles found recently on Job Bank.<img src="images/htmlbulletinimages/1008v3.png" width="209" height="365" align="right" class="floatrightnocut"></font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Movement between
industries</strong><br>
There are industries other than oil and gas where process operators
can work, such as pulp mills and chemical plants. They may process
different products, but employers will often consider hiring workers
from these other industries.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“We have been successful in taking people that had previously worked
in a paper mill,” says White with Syncrude. “The processes
are certainly different. They’re dealing with paper, rather
than oil, but we recently hired 18 (previous mill workers) and
it’s
my understanding that all 18 have gotten their fourth class tickets
since coming to Syncrude. We still need people with refinery experience,
but it is possible.” </font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Power engineering</strong><br>
Process operators in the Fort McMurray area generally have their
fourth or third class power engineering certificate, which allows
them to
process steam and operate boilers. Other process operators, such
as pulp mill operators, don’t necessarily need this. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">In
order to be called a power engineer, a person must be certified
through the Alberta Boilers Safety Association to operate pressure
equipment (www.absa.ca). </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">There are
four different levels of power engineer—the lowest
is fourth class, going up to first class. For more information
on the Alberta Boilers Safety Association, contact their Fort
McMurray office
at 780-714-3067.</font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Field and control
room operators</strong><br>
There are basically two levels of process operators in Fort McMurray:
field operators and control room operators (or board operators). </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“</font><font size="2" face="Arial, Helvetica, sans-serif">Primarily
when someone is starting out, they’re in the field,” says
Cook. “After a few years they can become a board
operator if they want to do that. They are more experienced
and are
kind of like
the team lead. They tell the field people what needs to
be done and if it needs manual operation, (the field operators)
go out and do it—turning
valves, adjusting an instrument to control temperature,
pressure, flow, or level.”</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Process
operators are responsible for the initial separation processes
or the special treatment
required to ensure that
impurities such
as water and sediments are removed from oil and gas in
the field. Once
separated, the oil or gas is transported by pipeline
to refineries, gas plants or markets.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Some duties
of a process operator are operating equipment to ensure that
the oil meets
specifications before it
goes into
a pipeline.
Some of the equipment could be:<img src="images/htmlbulletinimages/1008v4" width="302" height="201" class="floatrightnocut"></font></p>
<ul>
<li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">dehydration
units</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">vacuum and atmospheric
distillation columns</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">cokers</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">fractionators</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">pumps</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">compressors</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">steam
turbines</font></li>
<li><font size="2" face="Arial, Helvetica, sans-serif">heat exchangers</font></li>
</ul> <p><font size="2" face="Arial, Helvetica, sans-serif">“A process operator, whether in Fort McMurray, or in a gas plant
in Medicine Hat, basically processes the upstream
oil and gas until it’s
purified enough to go through a pipeline
outside the gates of the plant,” says
Cook. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Co-op education</strong><br>
There are many power engineering programs around northern Alberta
(see below) and some process operating courses. Keyano College
offers co-ops
for both courses and one of the advantages of this program,
besides being in Fort McMurray, is the job placements which
are provided.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">“We only take as many students as we can guarantee work placement
spots, and students have to compete for a seat,” says Cook. “We
look at their educational background, their marks and then
there’s
an interview process with Keyano staff and industry people—just
like applying for a job.”</font></p> <p><font size="2" face="Arial, Helvetica, sans-serif"><strong>Salary and benefits</strong><br>
The pay range for this occupation varies greatly depending
on experience and training, but the range is about $20
to $47 per
hour, but averages
about $30 to $40 per hour. </font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Because these
positions are for ongoing production and maintenance of oil
sands projects,
employees are expected
to move to
Fort McMurray, regardless of whether they are doing shift
work or
not.</font></p>
<p><font size="2" face="Arial, Helvetica, sans-serif">Over the
next few years, there will be many more opportunities for people
wanting to get into a career in process
operating
or power engineering.</font></p></td>
</tr>
</table></td>
</tr>
<tr>
<td width="586"> </td>
</tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="4" bgcolor="FFFFFF">
<tr>
<td height="10" colspan="2" bgcolor="#FFFFFF"><img src="images/darkLine.gif" width="750" height="3"></td>
</tr>
<tr>
<td width="160" height="20" bgcolor="#FFFFFF"><div align="left"><font color="#4E2C03" size="2" face="Arial, Helvetica, sans-serif">This
website is funded by the Government of Alberta. </font></div>
</td>
<td width="199" align="center" valign="middle" bgcolor="#FFFFFF"><div align="right"><img src="images/GoA - EI 2Color C.PNG" width="170" height="31" border="0"></div>
</tr>
<tr>
<td height="8" colspan="2" bgcolor="#DDCB8F"><table width="760" border="0" cellspacing="0" cellpadding="4">
<tr>
<td width="108"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="index.html">Home</a></font></strong></font></strong></font></div>
</td>
<td width="104"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="linksINTRO.html">Links</a></font></strong></font></strong></font></div>
</td>
<td width="117"><div align="center"><font size="2"><strong><font color="#DDCB8F" face="Arial, Helvetica, sans-serif"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="contactUS.html">Contact
Us</a></font></strong></font></strong></font></div>
</td>
<td width="151"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="privacyStatement.html"> Privacy
Statement</a></font></strong></font></div>
</td>
<td width="119"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="disclaimer.html">Disclaimer</a></font></strong></font></div>
</td>
<td width="113"><div align="center"><font size="2"><strong><font color="#4E2C03" face="Arial, Helvetica, sans-serif"><a href="siteMAP.html">Site
Map</a></font></strong></font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Hi Nadia thanks for your help in trying to fix the spry menus.
I am new to Dreamweaver and therefore would appreciate a bit more help with the issues you identified.
I did replace the doctype. As for removing the menu from a table and putting it into a div, would you be able to identify in the code below how I would do that? Thanks
Spry Menu Code
</table><ul id="MenuBar1" class="MenuBarHorizontal">
<table width="780" border="0" >
<tr>
<td><li><a class="MenuBarItemSubmenu" href="index.html"> Home</a>
<li><a class="MenuBarItemSubmenu" href="#"> Employment
</a>
<ul>
<li><a href="employINTRO.html">Introduction</a></li>
<li><a href="aboutWages.html">Wages</a></li>
<li><a href="employOG.html">Oil & Gas</a></li>
<li><a href="employSERV.html">Service/Retail</a></li>
<li><a href="employCONST.html">Construction</a></li>
<li><a href="employGOVED.html">Gov't/Education</a></li>
<li><a href="employFOREST.html">Forestry</a></li>
<li><a href="employTRANS.html">Transportation</a></li>
<li><a href="employHEALTH.html">Health</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> Training & Education</a>
<ul>
<li><a href="trainINTRO.html">
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js"></script>
Introduction</a></li>
<li><a href="trainSKILLS.html">General Skills</a></li>
<li><a href="trainSAFE.html">Safety</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#"> About Wood Buffalo</a>
<ul>
<li><a href="aboutINTRO.html">Introduction</a></li>
<li><a href="MediaEvent.html">Coming Events</a></li>
<li><a href="AboutCostIntro" font size"12" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="aboutStats.html">What's it like in Fort McMurray?</a></li>
<li><a href="aboutBeforeMove.html">Before You Move</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#"> Labour Market News</a>
<ul>
<li><a href="mediaINTRO.html">Introduction</a></li>
<li><a href="mediaLMN.html">Labour Market News</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Links</a>
<ul>
<li><a href="linksINTRO.html">Introduction</a></li>
<li><a href="AboutCostIntro" class="MenuBarItemSubmenu">Cost of Living</a>
<ul>
<li><a href="AboutCostHouse.html">Housing</a></li>
<li><a href="AboutCostAcc.html">Other Accommodations</a></li>
</ul>
</li>
<li><a href="linksEMPLIntro.html">Employer Websites</a></li>
<li><a href="linksRESIntro.html">Resources</a></li>
<li><a href="linksFACTSIntro.html">Fast Facts</a></li>
<li><a href="ContactUS.html">Contact Us</a></li>
<li><a href="privactStatement.html">Privacy Statement</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="siteMAP.html">Site Map</a></li>
</ul>
<ul>
</td>
</tr> </td>
</tr>
</table> -
Spry validation issue with submit button
Hi,
I'm new to Spry but am having an issue getting it to work at all. I created a very simply form (i.e. table with Spry text field and submit button). I've read many articles and been to several forums, but I can't seem to find the issue I'm having. Basically, when I go to preview the page in a browser, the table with the Spy text field and submit button comes up fine, but when I hit the submit button, I see the page refresh and any values I had in the text field disappear, but nothing ever comes up saying "A value is required," which is what I'm looking for. This happens even if I don't have any values in the text field. Below are images of what I'm describing and also the code. I verified that the "Required" check box is checked in the SpryTextField and the submit button action is selected to "Submit Form." My setup is Win 7, DW6, & XAMPP. Any help you can provide would be greatly appreciated.
Before Submit Button pressed:
Browser after button pressed: (same as above but no message saying "A value is required.")
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>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body>
test
<table width="600" border="1">
<tr>
<td><form id="form1" name="form1" method="post" action="">
<span id="sprytextfield1">
<label for="test"></label>
<input type="text" name="test" id="test" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span>
</form></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><form id="form2" name="form2" method="post" action="">
<input type="submit" name="submit" id="submit" value="Submit" />
</form></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email");
</script>
</body>
</html>Do yourself a big favor and don't waste time with Spry Validation. Most modern browsers support HTML5 forms with the required attribute.
If you must placate older browsers, use jQuery validate script. It's lightweight and works when HTML5 support is missing. You can see an example below. If you hit submit with empty form fields, the required fields pop-up with messages. View source in browser to see the code.
HTML5 Form with jQuery Validation
Nancy O. -
Spry Validations not working javascript:Spry.Widget.Form.destroyAll() in popup
iam using spry to validate controls in a popup.in that
validations are working fine but the problem is when we click
cancel button also thse validations are firing...
i am using
javascript:Spry.Widget.Form.destroyAll() to destroy
validations...but it is not working.
when we click on cancel button how to destroy the validations
as well as hide the popup...
can anyone help me...Thanks! (While I'm REALLY not comfortable with code yet (working on it :-) I atleast understood that it was a PHP issue (yay).
Studied the code in the examples in the book. And added:
<pre>
<?php if ($_POST) {print_r($_POST);} ?>
</pre>
It worked. (I'm local testing, with no connection to a database yet. Just trying to get the basic pages to work first.)
Hopefully the more I work on all of this, the more I'll begin to "get it"! And I'm almost up to the Chapter on PHP. So, I'm hoping to will become clearer as I read on.
Thanks for the help in pointing me in the right direction!!!
-- Jami -
Spry Widget Wont Load JS to Browser?!?
I have a Spry slide show widget on my website. I have it linked to the root folder and also in a folder for orginazaion reasons. When the page loads I get a lot of JS errors. If I open the file offline it works fine but when uploaded to the server it wont load the JS. I have checked all the links and they are okay. I can even follow the links and they open up the script. Dreamweaver added the JS files so im asuming that the JS codes are correct. The 2 links are http://tylerdickersondesign.com/classic/classic.html & http://tylerdickersondesign.com/classic.html. This is so frustrating!
Here is the my HTML 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>
<link rel="icon" type="image/ico" href="http://www.tylerdickersondesign.com/images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tyler Dickerson Design</title>
<link href="classic.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #Tyler */
#Tyler {
width: 650px;
margin: 24px 0px 0px 0px;
border: solid 1px #000000;
background-color: #717c96;
padding-top: 10px;
#Tyler .ISSName {
top: -24px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 18px;
text-transform: none;
color: #000000;
#Tyler .ISSSlideTitle {
top: -18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
overflow: hidden;
color: #000000;
text-transform: none;
#Tyler .ISSClip {
height: 400px;
margin: 0 10px 10px 10px;
border: solid 1px #333333;
background-color: #ffffff;
#Tyler .ISSControls {
top: 11px;
height: 400px;
#Tyler .FilmStrip {
height: 80px;
background-color: #2a3a5b;
#Tyler .FilmStripPreviousButton, #Tyler .FilmStripNextButton {
width: 25px;
height: 80px;
#Tyler .FilmStripTrack {
height: 80px;
#Tyler .FilmStripContainer {
height: 80px;
#Tyler .FilmStripPanel {
height: 80px;
padding-left: 10px;
margin-right: 0px;
#Tyler .FilmStripPanel .ISSSlideLink {
margin-top: 10px;
border: solid 1px #2a3a5b;
background-color: #2a3a5b;
#Tyler .FilmStripPanel .ISSSlideLinkRight {
border: solid 1px #404f6b;
width: 126px;
height: 50px;
margin: 4px 4px 4px 4px;
#Tyler .FilmStripCurrentPanel .ISSSlideLink {
background-color: #59647d;
border-color: #59647d;
#Tyler .FilmStripCurrentPanel .ISSSlideLinkRight {
border-color: #404f6b;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141543" binding="#Tyler" />
</oa:widgets>
-->
</script>
</head>
<body>
<div class="container">
<div class="header"><a href="http://tylerdickersondesign.com"><img src="images2/l2.png" alt="logo" /></a>
<!-- end .header --></div>
<float>
<a href="http://www.facebook.com/TylerDickersonDesign"><img src="images2/ft.png"/></a>
</float>
<div class="sidebar1">
<ul class="nav">
<li></li>
<li></li>
<li><a href="http://tylerdickersondesign.com/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="http://tylerdickersondesign.com/contact.html">Contact</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<table width="90%" border="1" cellspacing="0" cellpadding="5">
<tr>
<th scope="col"><center>
<ul id="Tyler" title="">
<li><a href="images2/1.jpg"><img src="images2/1t.jpg" alt="photos-1.jpg" /></a></li>
<li><a href="images2/2.jpg"><img src="images2/2t.jpg" alt="photos-10.jpg" /></a></li>
<li><a href="images2/3.jpg"><img src="images2/3t.jpg" alt="photos-11.jpg" /></a></li>
<li><a href="images2/4.jpg"><img src="images2/4t.jpg" alt="photos-12.jpg" /></a>
</ul>
<script type="text/javascript">
// BeginOAWidget_Instance_2141543: #Tyler
var Tyler = new Spry.Widget.ImageSlideShow("#Tyler", {
widgetID: "Tyler",
widgetClass: "BasicSlideShowFS",
injectionType: "replace",
autoPlay: true,
displayInterval: 3000,
transitionDuration: 2000,
componentOrder: ["name", "title", "view", "controls", "links"],
sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin, Spry.Widget.ImageSlideShow.PanAndZoomPlugin ],
TFSP: { pageIncrement: 4, wraparound: true }
// EndOAWidget_Instance_2141543
</script>
</center>
<p><br />
</p>
<h1>Graphic Design</h1>
<p>Welcome to Tyler Dickerson Design. We take pride in our commitment to the highest degree of excellence in graphic design, web design, and photography. Our goal is to provide each and every client with more than they imagined in terms of design and more than they have experienced in regard to customer service, while at the same time staying within each individual budget we are working with. We offer the highest quality of design that will take your company and clients to the next level. We are committed to achieving excellence. When you hire us as your creative designer, you have taken the first important step to a new way of doing business. Tyler Dickerson Design is a proud, experienced artist of Graphic Design, Web Design, and Photography. Our expertise-based knowledge of marketing, advertising, promotion, logo development, print production processes, and photography are unmatched. Select Tyler Dickerson Design to receive the highest level of personal attention and dedication to detail. We are the creative designers that stand for quality, uniqueness and value. We are quick, flexible, and great listeners.</p>
<h2>Web Design</h2>
<p>As your web designer it is our goal to develop elegant and affordable web solutions that enable small to large businesses to establish visibility online, increase sales, and improve productivity. Tyler Dickerson Design provides high-quality, professional web design and online marketing services to small businesses and non-profits at prices that fit their budgets. We work extremely hard to keep prices affordable for our clients, while giving them access to the same web site and marketing services that have always been available to large companies with big budgets.</p>
<h3>Photography</h3>
<p>Tyler Dickerson Design explores the connection between the eye, the camera, and the soul by raising the growth of artistic vision and technical knowledge. We strive to capture and deliver the highest quality photographs for our clients, while focusing on the genuine moments of life that are often fleeting and quickly forgotten. We promise to give the maximum level of service to each client, while respecting individual needs. Our hope is to develop a personal connection that supports an ongoing and long-lasting working relationship. </p>
<p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
<p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
<h4>Marketing Materials</h4>
<p>Tyler Dickerson Design uses the highest quality materials. We take pride in our work and want our clients to be 100% satisfied with their experience with us. Give us a chance to astonish you. </p></th>
</tr>
</table>
<h1> </h1>
<!-- end .content --></div><br />
</wrap>
<div class="footer">
<p><center><small>© 2013 Tyler Dickerson Design. All Rights Reserved.</center></p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Thanks guys!It seems to function correctly here on my Windows 7 machine in...
Firefox 16
IE9
Opera 12.11
Chrome 24
Safari 5.1.7
There are a few errors in your HTML that could be causing an issue for you in an older browser. Make sure to clean them up after running the validator here:
http://validator.w3.org/ -
Can someone help with insertion of Flash actionscript 3.0 swf into Dreamweaver spry widget panel?
Working on a thesis project due soon... Created flash actionscript 3.0 swf for home page, text plus image, previews beautifully in Flash Publish, stored in my root folder, previews great when I open it in the root folder, dragged and dropped it into my dreamweaver code page, within a spry widget framework, size is perfect. and upon view in design or browsers or browser lab, I just get a nice empty white box. In design view, I see the F symbol and when I click play in properties, I get a message that says "Unable to find the plug in that handles this media type. Dreamweaver looks in both the "config/Plugins folder and the plug in folder for each o your installed browsers". I have Flash Professional CS 5. Reinstalled it just in case that was the issue with the plug in and didn't resolve the problem. Dreamweaver version is CS5. Using a template with spry widget panels. Before I inserted the swf, the preview in browsers and browser lab was fine on the spry widget and background. PC is windows, 32 bit, with ms office suite 2010 upgrade on it. Appreciate any advice.
my first trace on the hz position and vt position outputs but the trace for "scroll positions" and "new scroll positions" is not outputting.
i recieve this output when i click the 'next' and 'back' buttons within the menu9.SWF.
[Event type="iwannaresetscrolling" bubbles=true cancelable=false eventPhase=2]
does this seem right?
import fl.events.ScrollEvent;
aSp.setSize(600, 350);
function scrollListener(event:ScrollEvent):void {
trace("horizontalScPosition: " + aSp.horizontalScrollPosition +
", verticalScrollPosition = " + aSp.verticalScrollPosition);
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener);
function completeListener(event:Event):void {
trace(event.target.source + " has completed loading.");
// Add listener.
aSp.addEventListener(Event.COMPLETE, completeListener);
aSp.addEventListener("main swf", scrollResetListener);
function scrollResetListener(event:Event):void {
trace("Scroll positions", aSp.horizontalScrollPosition,aSp.verticalScrollPosition)
aSp.horizontalScrollPosition = aSp.verticalScrollPosition = 0;
trace("New scroll positions", aSp.horizontalScrollPosition,aSp.verticalScrollPosition)
aSp.source = "menu9.swf";
Maybe you are looking for
-
Pages 5.1 - no more change table to text?
I'm annoyed that obviously the function to change from text to table and v.v. won't exist no longer?
-
Printing from a MacBook Pro ???
Hi. Is there a way to print from a MacBook pro to a non-wireless compatible printer without having a direct usb connection??? Hope that makes sense. I heard something about using a Time Capsule or air port of some sort but have no idea what that mean
-
How do I set my 3gs to activate hot spot and then connect soil tablet to? I uv tried with 4g which works but in 3gs it does not work
-
JDeveloper 11g - Exception when trying to run on Tomcat 5.5.20
I am trying to get an application working on JDeveloper 11g Technology Preview (4524) using Tomcat 5.5.20 as the server (NOT the Oracle embeded server), so that I can run and debug on Tomcat from JDeveloper. I can deploy to the Tomcat server but when
-
Mail shuts down as soon as I try to read any mail sent in the last 24 hours
Long story short.....got a PDF file from my business, and as soon as I went to try to open the PDF file...my mail program shut down completely. I thought this might be just an isolated incident, so I went to .MAC and forwarded the email to a PC and i