Spry vs mootools
Hello, I'm working on a website that use mootools 1.2, I need
to filter
a database recordset without reload the page, spry works well
but
doesn't work with mootools effects...
Someone can suggest me a tutorial or samples to do this with
mootools ?
On google I've found only tutorial with mootools 1.1
howdy
"Jus Dreamin" <[email protected]> wrote in
message
news:f2pj9n$gim$[email protected]..
> Interesting, but not sure about all of this... a quicky
check using
> Firefox,
> with js disabled, yielded... yes, the upper level of the
menu, but no
> submenu
> items..... Will be looking at this more later. .......An
interesting
> point.
Actually, having submenus "work" when script is disabled is
not always the
perfect road to accessibility. Accessibility is, of course, a
very
subjective topic, but this article might prove insightful:
http://www.projectseven.com/tutorials/accessibility/pop_integrated/index.htm
Beyond that, there's no need to get into a contest between
free tools such
as Spry and commercial systems such as Pop Menu Magic. They
each have their
plusses and minuses and which to use depends on the the
goals, needs, and
coding abilities of the user - along with the need for rich
features,
automation, and, of course, one-on-one support.
That said, we also have a free menu that has proven quite
popular:
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
Similar Messages
-
Image rollovers with Spry fade possible?
Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.quote:
Originally posted by:
wriggs
Does anyone know of a way to implement the Spry Fade effect
so that the result is an image that will fade onmouseover and fade
out onmouseout?
Ideally I would use .hover, but this is not available, so I
have to use onmouseover and onmouseout.
The problem with this is that if you roll out of the image
before the fade is complete, when you roll in again, the image
starts the fade again and does not fade from where it had gotten
to.
I could use setInterval and clearInterval, but I was hoping
that Spry would have a good, fast work around.
Basically I want a button image that fades seamlessly when
you rollover it.
Many thanks.
Hi, I have no relevant eixperience with the Spry ajax
framework, but it can be solved with
mootools framework easily.
<img src="yourbutton" id="button" onmouseover="fadein();"
onmouseout="fadeout();"/>
<script>
function fadein() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(0.5,1);}
function fadeout() {
new Fx.Style( "button", 'opacity', {duration: 1000 }
).start(1,0.5);}
</script>
Of course you will need to set the 0.5 opacity property via
css.
Regards
Bagi Zoltán -
Spry 1.6 Came out on 1 Oct 2007. It has been 1 1/2 years since any major update of the Spry framework.
I can understand that DW CS4 took a lot of time for the SPRY team, but since then we have only one little update, the SpryData.js on 11 Dec 2008. That's it…
I need to know if Spry is dead so I can move on to another framework.
Spry is the best AJAX framework for data related websites. And that is the kind of website I have. Nothing is better!!! But if Spry is dead, I have to look into using something else that will meet all my needs in all areas, not just data.
We all choose Spry because we were told it's in pre release and the developers were looking at adding new functions and features by listening to the community that uses Spry. This was the main benefit of Spry for everyone.
But it looks more and more like it's dead. The developers will not comment on any of the threads that ask about the future of Spry, and to me this is a big indicator of it's state.
If just one of Kin or Donald came out and said "… we have something big around the corner…" then many of us would be excited and continue to use it. But until then I will start to look into JQuery or Mootools to see how difficult it will be to change all my pages to a framework that is expected to keep evolving….
Hope to hear some good news!
KevinThanks for your input on this.
Kin and I have too been frustrated by our lack of time to commit to the process.
As you probably know, we work on the Dreamweaver team as well and that always takes a priority.
We are both bummed that we haven't been able to put out 1.7 in a timely manner.
If I may ask, why isn't there a seperated Spry team than? Iknow Spry is just a small part of Dreamweaver, but I think the future of DW might even depend on a good rock solid ajax framework. Especially after I had seen "Atlas" from 280 North. It could be come an hard punch for Adobe.
We are investigating new ways of putting widgets together and making them more flexible and skinable. We are also throwing around ideas for Spry/jQuery interactions. Nothing solidified yet but we are looking at things.
Please, do not use the jQuery syntax. Its one big reason why I absolutely hate the framework sure the code base is allright but It almost make all code unreadable. do().stuff().here().and().try().to().de().bug().my().issue("please").dont().you().love([" chaining",functions(like,this){alert("no")}]);
This means that Spry is not dead. We are working on things that we hope will be interesting and innovative.
It also means that we can't really give a roadmap for Spry. I am hoping that for the near future, we will be able to release some new things as we perfect them: smaller periodic releases that let's us keep innovating and let's you know that we are investing in the framework.
I already knew this, but I'm still happy when I see you posting this . I love Spry and use it on a daily basis both personal and in an enterprise enviourment.
As far as I can see Spry is a crucial part of Dreamweaver's future, so I don't see it lacking attention. But we have definitely a visibility problem. The team isn't allowed to talk about the roadmap, leaving us in the cold... A very uncomfortable situation, both for Spry's team and the users community.
Massimo
Yeah, so true. But I would also love to see it intergrated in to ColdFusion as default ajax framework . And I fully agree on the visibility problem. I'm in a team of 10 programmers at work. And they are like what is the Spry Framework you are Community Expert in. +_+" ofcourse after few slaps and presentation they where up to date..
But I think this is mainly because all "major" frameworks aren't as issolated as Spry currently is. Typing in jQuery.com is allot easier than labs.adobe.com/technologies/spry and even than the information presented is minimal and requires further investigation to find the info that you want. It might even bee in 5 different locations, API, Samples, LiveDocs, Articles or Devnet and if you are unlucky its not even there at all.
The frustration I see from people is, I think, based on a deep desire to see this project continue, realizing the potential that is clearly evident in what is currently available.
I agree on that point.
I mean, many of the peices of a well-developed framework are here. Instead of waiting around for updates, perhaps we should be developing our own widgets and packages that can be shared in the community.
There are already a few people doing that. Me and Massimo for example have both released some widgets for Spry. And I'm still working a few widgets that will be "released" soon. Such as JSONP support for the SpryJSON dataset this will allow us to some crossdomain JSON requests etc..
Sure, there are some key components that still need to be developed from the top down, but there is plenty that can be done in terms of creating eye-candy that will lure in other users.
Theres actually allot that can be reused, SpryDOMUtils.js and the SpryEffects.js provide almost for what is needed to created custom widgets on your own. A example is an article series the i created for insideRIA:
http://www.insideria.com/2009/02/creating-your-own-side-bar-wid.html
http://www.insideria.com/2009/02/creating-your-own-side-bar-wid-1.html
Without a public code repository, bugtracker and roadmap, there is very little the community could do. Spry has an open source license, but its developing model is completely closed. I already did some work with extensions and add-ons for Spry (see my website). But since all the developing happens behind closed doors, people from the community can't contribute, unless we fork, but that's an option I wouldn't consider (not at this stage at least).
Massimo
Yeah its such a shame that Spry isn't listed at opensource.adobe.com It would be a great candidate for it. And I would love to provide some patches to existing issues in the framework. But the closed development is kinda blocking that as we have no clue what Spry team is doing. Same thing actually counts for widgets. It would be a waste of time if we as 3rd Party developers started creating a Spry syntax based Drag and drop addon and the Spry team is working on the same over at the jQuery UI framework you can see in there wiki what they are working on.
BTW - look how many hits this thread is getting - Adobe,
Its been retweeted a couple times on twitter .
Anyways I will always be on Spry side what ever it will do, I absolutely love the framework and will not swap for any other. (yes even when they decide to implement().chaining().in().the().whole().framework()) -
I just bought dreamweaver and I'd like to use the password widget. At this point I'm just trying to compare the input to a string. However, it appears that the java script is running when the form loads and not when I type in the password box. I'll paste my code below. If anyone can help I'd really appreciate it.
thanks!!!
<html>
<head>
<title>HOA Meeting Minutes</title>
<style type="text/css">
body {
font-family: verdana,arial,sans-serif;
font-size: 10pt;
margin: 30px;
background-color: rgb(225,208,188);
border: thick #000;
background-repeat: no-repeat
</style>
<link href="CSSFiles/imageMenu.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css">
<script src="JavascriptFiles/mootools.js" type="text/javascript"></script>
<script src="JavascriptFiles/imageMenu.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
</head>
<body>
<label for="Password">Password</label>
<form>
<span id="sprypassword1">
<input type="password" name="Password" id="Password">
<span class="passwordRequiredMsg">A value is required.</span>
</span>
</form>
<h6><a href="content.html" title="Return">Return to Main Menu</a></h6>
<h1>
<center>
<p><img src="hoa_meet.png" width="617" height="177" alt="HOA Meeting Minutes"></p>
</center>
</h1>
<script type="text/javascript">
document.write(sprypassword1);
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1",{validateOn:["blur", "change"], minChars:6, maxChars:15});
if(sprypassword1 == "Agent007")
document.write("Welcome special agent 007");
else
document.write(sprypassword1);
</script>
</body>
</html>Try
<!doctype html>
<html>
<head>
<title>HOA Meeting Minutes</title>
<style>
body {
font-family: verdana,arial,sans-serif;
font-size: 10pt;
margin: 30px;
background-color: rgb(225,208,188);
border: thick #000;
background-repeat: no-repeat
</style>
<link href="CSSFiles/imageMenu.css" rel="stylesheet">
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet">
</head>
<body>
<form name="myForm">
<span id="sprypassword1">
<label for="Password">Password</label>
<input type="password" name="Password" id="Password" onKeyUp="showMessage();">
<span class="passwordRequiredMsg">A value is required.</span>
</span>
</form>
<div id="message"></div>
<h6><a href="content.html" title="Return">Return to Main Menu</a></h6>
<h1>
<center>
<p><img src="hoa_meet.png" width="617" height="177" alt="HOA Meeting Minutes"></p>
</center>
</h1>
<script src="JavascriptFiles/mootools.js"></script>
<script src="JavascriptFiles/imageMenu.js"></script>
<script src="SpryAssets/SpryValidationPassword.js"></script>
<script>
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1",{validateOn:["blur", "change"], minChars:6, maxChars:15});
function showMessage() {
var div = document.getElementById('message');
if(myForm.Password.value == "Agent007") div.innerHTML = "Welcome special agent 007";
else div.innerHTML = myForm.Password.value;
</script>
</body>
</html>
You will have noticed the DOCTYPE declaration to ensure that the browser understands. I prefer to place (links to) JS at the bottom of the document. -
I am totally new to Spry and was just messing around with the
new effects that can be used in Dreamweaver. I instally noticed
that when I apply an effect to a div, span, etc.....the default
state is active (or visible). Is there a way I can get around this
by making it hidden on load (INSIDE the Spry framework).
I don't mean using "visibility: hidden;" to hide it because
then if someone has javascript disable.....the area will be hidden
and never able to be accessed.
MooTools has an easy:
"$('YourSelector').effect('opacity').set(0);" for instance. Is
there something like this in Spry?Yeah, sounds like there is a deadlock. Perhaps the Applet is blocking when it makes the call via LiveConnect to JavaScript. When this call is made, the browser is probably calling the stop() method.
Does this Applet have any dialogs? We've seen a problem where any open dialogs will cause the browser to crash/lock when the page is changed. If this is the case, then you could try to close any open dialogs (or set their visibility to false) just before you hide the frame.
Also, just for grins, you could try wrapping the call JavaScript in a different thread to see how this affects the process.
Let me know if this helps.
Eric -
Spry Collapsible panel - open and closed default question...
I am using a Spry Collapsible panel in a vertical nav menu (DW CS4) and it's in a template for my site. I want it to be closed as default on the Home page, but when a visitor clicks to open it and selects their option, I would like it to remain open on the selected page - Is there a way to do this?
Thank you all!
AzaCheck out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel
-
Spry menu bar woes (add submenu levels and edit width)
So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one. So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise: when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a> <ul> <li><a href="#">Digital Matrix Systems</a></li> <ul> <li><a href="#">R2 Digital Audio Matrix</a></li> </ul> <li><a href="#">pre-amplifiers & mixers</a></li> <ul> <li><a href="#">PMX124</a></li> </ul>
the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code? i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull. Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
HTML code for the menu:
<tr> <td><ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a> <ul> <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a> <ul> <li><a href="#">Digital Matrix Systems</a></li> <ul> <li><a href="#">R2 Digital Audio Matrix</a></li> </ul> <li><a href="#">pre-amplifiers & mixers</a></li> <ul> <li><a href="#">PMX124</a></li> </ul> <li><a href="#">music Sources</a></li> <li><a href="#">amplifiers</a></li> <li><a href="#">paging</a></li> <li><a href="#">speakers</a></li> <li><a href="#">microphones</a></li> </ul> </li> <li><a href="#">racks and stands</a></li> <li><a href="#">cables</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a> <ul> <li><a href="#">Who are we?</a></li> <li><a href="#">history</a></li> <li><a href="#">contact us</a></li> <li><a href="#">philosophy</a></li> <li><a href="#">careers</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a> <ul> <li><a href="#">catalogs</a> </li> <li><a href="#">manuals</a></li> <li><a href="#">software</a></li> <li><a href="#">documents</a></li> <li><a href="#">pricelists</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li> </ul></td>
sprymenuhorizontal.css:
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* 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: 14px; cursor: default; width: 1010px; font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ ul.MenuBarActive { z-index: 1000; } /* 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: 100%; position: relative; text-align: left; cursor: pointer; float: left; } /* 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 { list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 166px; position: absolute; left: -1000em; background-color: #6C6C6C; height: 0px; margin-top: 0px; margin-right: 0em; margin-bottom: 10px; margin-left: 0em; text-align: right; text-indent: 0em; padding-top: 0px; padding-right: 0em; padding-bottom: 0px; padding-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #666; border-right-color: #666; border-bottom-color: #666; border-left-color: #666; } /* 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; height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; height: 41px; margin-top: 0%; margin-right: 0%; margin-bottom: 0px; margin-left: 162px; float: right; } /* 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: 1px solid #666; background-color: #6C6C6C; height: 0px; padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background-color: #6C6C6C; padding: 0em; color: #FC0; text-decoration: none; font-size: 14px; margin-left: 0em; } /* 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: #FC0; color: #FFF; } /* 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: #FC0; 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.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 98% 50%; } /* 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: 98% 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: 98% 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: 98% 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; filter:alpha(opacity:0.1); } /* 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 { display: inline; f\loat: left; background: #FFF; } }[/SPOILER] any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...since the layout of the pasted text got all weird, here i'm trying it again.
sprymenubarhorizontal.css:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
/* 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 a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
/* 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
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
/* 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;
height: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 166px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
/* 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: 1px solid #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
/* 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: #FC0;
color: #FFF;
/* 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: #FC0;
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.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
/* 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: 98% 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: 98% 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: 98% 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;
filter:alpha(opacity:0.1);
/* 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
display: inline;
f\loat: left;
background: #FFF; -
How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?
Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!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></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #003366;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/international.jpg);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
</style> -
How can I get a menu link to show active state in Spry?
I want to have my Spry menu bar show the page I am on as a highlighted with background-color and text-color being highlighted and different than the rest of the menu bar. It seems that there are two ways that people talk about doing this.
One is to modify the a:hover and a:focus styles in the Spry assets. If this is the answer, I am missing something. After much experimentation, I actually created a style for a:hover (which is rollover only) and a:focus (which is when you click on the bar). It has no bearing on the state of the menu when it is showing the page as the page the user is on. If someone can give me a clue whether the CSS in Spry assets is the way to go, please provide specific code that would go in a specific place. Generalities are not helping me go to a specific solution.
The other way to go seems to give the body an ID on each page. There is a thread here: <http://www.highdots.com/forums/macromedia-dreamweaver/using-css-highlight-current-page-227 823.html>
It says:
"Example:
<body id="home">
This is because the CSS is:
#home #menu .home a
background-color:#ED2424;
color: #E7E63E;
That means color the <a> tag with the class home, inside the #menu container,
inside the #home container which is the body.
Without giving the body an ID, there is no "home" container so the CSS doesn't
apply to anything."
If this is correct, where do each of these snippets of code actually go? Does this apply to Spry? I would assume that the body id is in Source Code, and the others are in CSS. But where?
There is also another solution posted elsewhere: <http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/>
What specific advice can you provide to get a web site to do something that is pretty basic from the perspective of the user?
Nv<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal li.MenuBarActive a {
background: #F00;
font-weight: bold;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li class="MenuBarActive"><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script>var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});</script>
</body>
</html>
So that you do not have to repeat the style rules in every document, add the rules to the existing SpryMenuBarHorizontal.css. The class is added to the menu item that has the current document, in our case above it will be index.html or similar. The class will be placed on menu items that correspond to the current page.
Gramps -
Using a variable in Spry conditional tests included in a Spry Tooltip
I have the following code:
<div spry:region="company" id="tooltip">
<div spry:repeat="company" spry:choose="spry:choose">
<div spry:when="'{name}'==memberName">
<table>
<tr>
<td
align="center"><h2>{name}</h2></td>
</tr>
<tr>
<td align="center"><img src="{headshot}"
alt="{name}" width="227" height="350" /></td>
</tr>
<tr>
<td align="center">{description}</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var tooltip_trigger_one = new
Spry.Widget.Tooltip("tooltip","#trigger", {showDelay: 200,
hideDelay: 200, offsetX: 250, offsetY: 200} );
</script>
where the variable "memberName" is set elsewhere to a value
that matches one of the occurrences in the column "name" in the
dataset "company". I can see, using debugging tools, that the
variable is being set correctly. But.... when the tooltip is
triggered, only a small few-pixel square box opens up.
If, instead of using the variable "memberName" in:
<div spry:when="'{name}'==memberName">
I use a string, as in
<div spry:when="'{name}'=='John Doe'">
then the code works correctly and I get a large tootlip
showing me the correct information for that member of the company.
I have tried different tests (spry:if and spry:test for
instance), tried various combinations of quotes and parenthesis and
tried placing the code at various places both inside and outside of
the <body> -- but always get the same results.
Is it not possible to test against a variable or am I doing
something else incorrectly?
Thanks,
JanetOK.... some progress to report.
I was setting memberName onmouseover-- which is also the
trigger for the tooltip-- thusly:
<p><em onmouseover="memberName='John Doe'"
id="trigger">John Doe</em></p>
It seems that the variable is being set, but too late, as the
trigger has already caused the div... id="tooltip"> to be
evaluated with "memberName" not equal to any of the names in the
dataset. I tried using a function call to set "memberName" and
tried putting the onmouseover in the <p> tag and leaving the
trigger id in the <em> tag. but neither of those appear to
change the outcome. "memberName" still appears to be set to the
value I initialized it to up the the <head> section at the
time the tooltip <div> is evaluated. Although it is set
correctly if I check it's value using Firebug after I have
mouse-overed it.
Incidentally, using a Firebug breakpoint just before the
<div spry:when...> and checking the value of memberName was
how I discovered that "memberName" still seemed to have a value of
"initialized" which is what I set it to up in the <head>
section.
Having written all of this, I am wondering though, shouldn't
the value of "memberName" be equal to "John Doe" the second time I
mouseover it? Or, if there are more than one trigger "names" on the
page, shouldn't "memberName" be equal to the name of the previous
trigger that I moused-over? And with memberName having a legitimate
value at that point, shouldn't the tooltip now show the correct
display information rather than just that little few pixel square
box that I am getting when I mouse-over the trigger name?
Clearly there is something that I just am not understanding.
Janet -
Generate Photo Gallery XML for Spry with Adobe Bridge
Wanted to post a note to what I've discovered/worked out -- a
way to
generate a very useful photos.xml from Adobe Bridge. If you
use Bridge,
it's very easy to add titles, keywords, ratings -- all kinds
of metadata
that one might use in a photo gallery. Here it is in case
anyone wants
to use.
The script is based on one I found at the Adobe User to User
Bridge
Scripting Forum for exporting a CSV file.
Note 1: this particular script doesn't take into account
CDATA that
might exist in your metadata, like ampersands in your title.
I've just
avoided using those, but you could also have the script write
out a
CDATA node for that info instead.
Note 2: this script does not write out a thumbpath,
thumbwidth or
thumbheight attribute. But usually the thumbpath is the exact
same as
the regular "path" attribute, and the thumbwidth and
thumbheight are
just a ratio of the regular "width" and "height" attributes.
I added a
bit of JS to the gallery.js file to calculate those before
growing the
thumbnail on rollover.
Personally I'm using keywords as categories and titles as
captions and
sorting by rating (stars in Bridge), so here's the .jsx file
I created.
The script should be saved to the folder "StartupScripts" in
Program
Files/Common Files/Adobe.
Hope this is useful for others too!
#target bridge
if (BridgeTalk.appName == "bridge" ) {
// create menu
var menu = MenuElement.create( "command", "Export XML File",
"at the end
of Tools");
menu.onSelect = function(m) {
try {
// ask for the name of the output file
var f = File.saveDialog("Export XML file to:", "XML
File:*.XML");
if ( !f ) { return; }
// open filestream and write first line
f.open("w");
f.writeln("\<photos\>\r\r");
// get a list of all the visible thumbnails in Bridge
var items = app.document.visibleThumbnails;
for (var i = 0; i < items.length; ++i) { var item = items
f.writeln("\<photo path = \"" + item.name + "\"" + "\r" +
"width = " +
"\""+ getWidth(item) + "\"" + "\r" + "height = " + "\""+
getHeight(item)
+ "\"" + "\r" + "rating = " + "\""+ getRating(item) + "\"" +
"\r" +
"categories = " + "\""+ listKeywords(item) + "\"" + "\r" +
"caption = "
+ "\""+ getTitle(item) + "\"" + " \>" + "\r" +
"\<\/photo\>\r\r" ); }
f.writeln("\<\/photos\>");
f.close();
} catch(e) {
function getTitle(tn) {
md = tn.metadata;
md.namespace = "
http://purl.org/dc/elements/1.1/";
var varTitle = md.title;
return varTitle;
function getWidth(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/tiff/1.0/"
var varWidth = md.ImageWidth;
return varWidth;
function getHeight(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/tiff/1.0/"
var varHeight = md.ImageLength;
return varHeight;
function getRating(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/xap/1.0/"
var varRating = md.Rating;
return varRating;
function listKeywords(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/photoshop/1.0/";
var Keywords = md.Keywords;
var varKeywords = "" ;
for ( var i = 0; i < Keywords.length; ++i ) { varKeywords
= varKeywords
+ Keywords + ","; }
return varKeywords;I updated the script so it exports an XML file from Bridge
with full
compatibility with the Spry Demo Photo Gallery, to use as
photos.xml.
It's at the same address:
http://www.imagicdigital.com/spry/bridge_export_xml.zip
To Use:
The script goes in the folder "StartupScripts" in Program
Files/Common
Files/Adobe.
Launch Bridge and browse to a folder that contains the files
you want in
your gallery -- the "source" folder, as it were.
Choose the menu command "Tools > Export XML for Spry
Gallery".
Type a name for your XML file in the Save dialog box, choose
a location,
and hit "Save".
In the dialog box that pops up, enter a max length/width for
your
thumbnails, in pixels. Some common sizes are "75" , "100" or
"125".
Hit "OK". You should see an alert pop up telling you "XML
file
successfully created!" -
Spry menu bar doesn't appear correctly in IE
Hi guys..
I created a spry menu bar in DW CS4. It looks fine in Firefox but in IE 8, the background image of the navigation bar appears white after allowing activecontrol to run. I didn't include any image for ul.MenuBarHorizontal a because I wanted to use the background image for the div containing the navigation bar.(Hope I didn't confuse you there).. I tried using the search box but couldn't find any solution to my problem. Here are my screen shots.
This is in firefox.
This is in IE 8 before allowing activex.
This is in IE 8 after allowing activex. (Part of the navigation bar is white)
Here's the code.Hope you can help me asap. Thanks!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: default;
width: 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;
/* 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: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 9em;
float: left;
/* 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%;
z-index: 1020;
cursor: default;
width: 9em;
position: absolute;
left: -1000em;
/* 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: 9em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* 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: 1px solid #CCC;
background-image: url(../images/single.jpg);
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
padding-top: 1.05em;
padding-right: 0.75em;
padding-bottom: 1.05em;
padding-left: 0.75em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image: url(../images/single.jpg);
/* 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
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.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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-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(../images/single.jpg);
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-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;
filter:alpha(opacity:0.1);
/* 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
display: inline;
f\loat: left;
background: #FFF;/* 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
display:
inline;
f\loat: left;
background: #FFF;
I hope this helps.
Ben -
Spry Dynamic Tabs - reCAPTCHA is missing when loading external php file
Hello,
I have solved all my problems lately on this forum.
But now im converting my site to use Dynamic tabs, and something goes wrong.
The dynamic tabs load content from external files. It loads html but i think something goes wrong with php and my buttons.
You need to know ALL is working perfect on the old site.
2 problems;
I dont know how to convert my buttons to this new style.
I dont know why the reCAP suddently is missing.
Why is reCAPTCHA missing?
SOURCE HTML (index.html);
<?php include("PHP/form.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Wientjes Voegwerk & Renovatie - Home</title>
<meta http-equiv="Content-Language" content="NL" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie. Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie. Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!"/>
<meta name="keywords" content="Voegwerk, Renovatie, Reinigen, Impregneren, Muur, Voegen, Steen, Woning, Garage, Schoorsteen, Bedrijf, Gevel, Wientjes, Uitslijten, Kappen, Fundering, Vorstschade, Metselen, Metselwerk, Vocht" />
<meta name="author" content="Rob Nijlaan" />
<link href="CSS/Style2.css" rel="stylesheet" type="text/css" />
<script src="JAVASCRIPT/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="JAVASCRIPT/SpryEffects.js" type="text/javascript"></script>
<script src="JAVASCRIPT/SpryData.js" type="text/javascript"></script>
<script src="JAVASCRIPT/xpath.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function FadeAndUpdateContent(ele, url){
try {
Spry.Effect.DoFade(ele,{
duration: 500, from: 100, to: 0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
catch(e){ alert(e); }
-->
</script>
</head>
<body>
<div id="WContainer">
<div id="WHeader" align="center"> <img src="Art/VoegenRenLos.png" width="540" height="58" alt="Voeg en Renovatiebedrijf" /><br />
<img src="Art/WientLogo.png" width="600" height="136" alt="Wientjes Voegwerk & Renovatie" /> </div>
<script type="text/javascript">
var dsTabs = new Spry.Data.XMLDataSet("data/data.xml", "tabs/tab");
function loadContent(panel,url){
Spry.Utils.updateContent(panel,url);
Spry.Data.Region.addObserver("example1Region",dateLoadedCallback);
function dateLoadedCallback(notificationType, notifier, data){
if (notificationType =="onPostUpdate"){
row= dsTabs.getRowByRowNumber(0)
if(row){
loadContent('0',row.url)
</script>
<div id="example1Region" spry:region="dsTabs">
<div id="dynamicTabs" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
<li spry:repeat="dsTabs" class="TabbedPanelsTab" onclick="loadContent('{ds_RowID}','{url}');" tabindex="0">{title}</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="dsTabs" id="{ds_RowID}" class="TabbedPanelsContent"></div>
</div>
</div>
<script type="text/javascript">
var t1 = new Spry.Widget.TabbedPanels("dynamicTabs");
</script>
</div>
<div id="WFooter" align="center">
<p class="footer">Wientjes Voegwerk & Renovatie , 03- '02 » Site by ; <b>Rob Nijlaan</b></p>
</div>
</div>
</body>
</html>
Dont mind the extra javascripts they are not used for now (like SpryEffects.js) its for future use.
SOURCE XML (data.xml);
<?xml version="1.0" encoding="UTF-8"?>
<tabs>
<tab>
<title>
tab 1
</title>
<url>../data/HOME.html</url>
</tab>
<tab>
<title>Tab2</title>
<url>examples/tab2.html</url>
</tab>
<tab>
<title>Tab3</title>
<url>examples/tab2.html</url>
</tab>
<tab>
<title>Tab4</title>
<url>../PHP/form.php</url>
</tab>
</tabs>
The html file loads like it should be, but the php form has problems.
See it yourself: http://www.wientjesvoegwerk.nl/index2.html
The tab 1 displays a html file like it should.
The tab 4 displays the contact form but you will see the reCAPTHCA is missing.
I have really no clue why it happens, exept maybe its a PHP issue.
Maybe the script isnt compatible with non-html documents...
Can someone please tell me whats the problem and if there is a solution????
How do i change this button?
I used this in my previous site:
<table class="Button" >
<tr>
<td style="padding-right:0px" title ="Home">
<a href="#" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/>
</a></td>
</tr>
</table>
But the dynamic script uses {title} to get the <title> out of the xml.
I tryd to put this straight into the title tags in the xml but obviously it wont work.
And i really dont have a clue how to change this.
My button has a mouseover img. Basicly its 2 buttons in 1 img stacked on top of each other.
Like this: http://www.wientjesvoegwerk.nl/Buttons/contact.png
Because of the CSS script it hovers to the right position.
Part of SOURCE CSS (Style.css)
.Button a{display:block;}
.Button a:hover{background-position:left bottom;}
a.Button {display:none}
How can i change the xml and the script so "title" can be replaced with the button.
Or how can i change the button so the mouseover works and the script still takes the button-img from the xml???
Any help would be nice, because im finnaly in a postition to finish this site, and this is the only blockade left to conquer...Maybe it is not liking that the index page is an HTML page and not a PHP page. Try this way:
In your form.php, remove the following code:
<?php
require_once('recaptchalib.php');
$publickey = "6LfKNwwAAAAAAEdS6PjiDSHRQBDOYrGcM8R1eQQm"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
Replace it with:
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfKNwwAAAAAAEdS6PjiDSHRQBDOYrGcM8R1eQQm"></script>
<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=6LfKNwwAAAAAAEdS6PjiDSHRQBDOYrGcM8R1eQQm" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
The replacement code is the same code that is outputted from the recaptchalib.php file. -
Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?
Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<link href="../CSS/main.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
<div id="buyNow1">
<p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
</div>
</div>
<div id="mainNav">
<ul id="mainNavcontent" class="MenuBarHorizontal">
<li><a href="../index.htm">Home</a> </li>
<li><a href="../swimmer.html">Swimmer Buddy</a></li>
<li><a href="../order_now.html">Order Now</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
<ul>
<li><a href="../photo_gallery.html">Photos</a></li>
<li><a href="../video_gallery.html">Videos</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
<ul>
<li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
<li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
<li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
<li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
</ul>
</li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div>
<!-- TemplateBeginEditable name="mainContent" -->
<div id="pageInfo">
<div id="info_page">
<p class="regionID">Region ID</p>
<hr class="breaklinePageInfo" />
<p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
</div>
<div id="mainContent">
<div id="content">
<p>Main Content Goes her</p>
</div>
</div>
</div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="buynow2" -->
<div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
<!-- TemplateEndEditable -->
<div id="footer">
<div id="footertext">
<p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
</div>
<div id="footerlinks">
<p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: default;
width: 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;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
/* 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%;
z-index: 1020;
cursor: default;
width: 132.8px;
position: absolute;
left: -1000em;
/* 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 95%;
/* 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: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* 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
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
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: url(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* 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(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* 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(SpryMenuBarDownHover.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;
filter:alpha(opacity:0.1);
/* 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
display: inline;
f\loat: left;
background: #FFF;Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same. -
Spry Rollover Menus Do not Retract or Hover
Here's my code and I will attach a screenshot:
<html>
<head>
<meta name="verify-v1" content="7UOb7pMZvRsNAeg3bRekSJNhH/EMwsI9CcQBQKDS/3I=" />
<title>Total Life Counseling Orlando Winter Park Clermont</title>
<meta name="KEYWORDS" content="Orlando Winter Park & Clermont family counseling individual group children teenagers adult Skype Online Phone Portuguese Espanol Spanish Portuguese">
<meta name="DESCRIPTION" content="Total Life Counseling Center offers a full range of individual, family, group, phone, online, Skype counseling and therapy services for children, teenagers, adolescents and adults in Orlando, Winter Park, Metro West, East Orlando and Clermont Florida using a relational non-judgmental and non-threatening approach. Total Life Center consists of competent masters level therapists, Espanol counselors, Portuguese Counselors, Licensed Mental Health Counselors, Business Coaches, Image Enhancement Coaches and Masters Level interns who provide counseling for emotional, mental, physical and spiritual care including marriage, the individual, the family, substance abuse and more. Our offices serve College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg.">
<LINK REV="Made" HREF="http://www.totallifecounseling.com">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="javascript/special_functions.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" type=text/css href="styles/stylesheet.css">
<script type="text/javascript" src="flashobject.js"></script>
<link rel="stylesheet" type="text/css" href="styles/anylink.css" />
<script type="text/javascript" src="javascript/anylink.js">
* AnyLink CSS Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
_uacct = "UA-1922062-1";
urchinTracker();
</script>
<meta name="Microsoft Theme" content="none">
<style type="text/css">
<!--
.style1 {color: #FF0000}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
.style17 {
color: #6CA7C2;
font-weight: bold;
-->
</style>
<style>
<!--
#blog-header h1 {
font-size: 24px;
text-align: left;
padding: 15px 20px 0 20px;
margin: 0;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top left;
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
div.Section1
{page:Section1;}
span.EmailStyle15
{font-family:"Arial","sans-serif";
color:#993366}
.__feedview__mainbody { margin-right: 0px }
#main {
margin:0;
padding:15px 20px;
.post {
margin:0 0 2em;
.post h3 {
margin:0 0 .25em;
line-height: 1.4em;
font-weight: bold;
font-size: 150%;
color:#8cdfff;
.style19 {color: #83B5CC}
.style23 {font-size: 18px}
.style25 {
font-size: 12pt;
font-family: Tahoma;
.style28 {font-size: 11px}
.style29 {
font-size: 10pt
.style22 { color: #77ADC6;
font-weight: bold;
.style31 {font-size: 12pt}
.style32 {
font-weight: bold;
font-family: Tahoma;
font-size: 14pt;
.style33 {color: #6CA7C2}
.style10 { font-size: 16pt;
font-weight: bold;
.style34 {font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
.style35 {font-size: 14pt}
.style36 {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
.style37 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
<script src="../Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" class="home-bg">
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: -500; top: -500" id="layer2">
<img border="0" src="flash/images/image1.jpg" width="2" height="1"><img border="0" src="flash/images/image2.jpg" width="2" height="1"><img border="0" src="flash/images/image3.jpg" width="2" height="1"><img border="0" src="flash/images/image4.jpg" width="2" height="1"><img border="0" src="flash/images/top-right.jpg" width="2" height="1"></div>
<table width="106%" height="600" border="0" cellpadding="0" cellspacing="0" class="home-bg-l1">
<tr>
<td width="217" class="home-bg-l1"> </td>
<td width="893" valign="top"><table width="828" height="595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="532" valign="top"><table width="828" height="540" border="0" cellpadding="0" cellspacing="0" class="home-cbg2">
<tr>
<td width="30" class="home-bg-l2"> </td>
<td width="768" valign="top"><table width="768" height="532" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="307" valign="top" class="home-t1">
<div style="position: absolute; width: 768; height: 24; z-index: 1; top: 25" id="layer1" align="right">
<div id="horizontalMenu">
<ul id="MenuBar3" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="contact_us.htm">Contact Us</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="services.htm">Services</a></li>
<li><a class="MenuBarItemSubmenu" href="counselors.htm">Counselors</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="http://www.totallifecounseling.com/shop" target="_blank">Products</a></li>
<li><a href="forms.htm">Forms</a></li>
<li><a href="#">Court Ordered</a></li>
<li><a href="camps.htm">Camps</a></li>
</ul>
</div>
<!-- End HorizontalMenu Scripting -->
<div id="header">
<script type="text/javascript">
//var fo = new FlashObject("flash/HorizontalMenu10.swf", "header", "768", "307", "6");
//fo.addParam("wmode", "transparent");
//fo.addParam("base", "flash");
//fo.write("header");
</script>
</div>
<!-- End Header Scripting -->
<!-- #EndLibraryItem --></td>
</tr>
<tr>
<td valign="top" class="home-c"><table width="768" height="235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11"> </td>
<td width="576" valign="top">
<table border="0" style="border-collapse: collapse" width="100%" id="table45" cellpadding="0" height="100%">
<tr>
<td width="176" valign="top" bgcolor="#F2F4F5">
<table width="100%" border="0" cellpadding="2" cellspacing="2" id="table46" style="border-collapse: collapse">
<tr>
<td height="31" bgcolor="#2A6180"><p align="center"><A href="http://totallifecounseling.blogspot.com/"><strong>Articles & Blogs</strong></A></p></td>
</tr>
<tr>
<td height="1328" valign="top" bgcolor="#FFFFFF">
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style="width:160; background-color: #ffffff;">
<p align="center" class="style12"></strong>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9ae1e727d21f0f"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 15,
interval: 6000,
width: 170,
height: 1326,
theme: {
shell: {
background: '#F2F4F5',
color: '#6CA7C2'
tweets: {
background: '#ffffff',
color: '#2a6180',
links: '#2a6180'
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'all'
}).render().setUser('TotalLife').start();
</script>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;">
<div align="center"><span class="style25"><font style="font-weight: bold; font-family:Georgia,'Times New Roman',Times,serif; font-size:12px; color:#006699;">Read E-Newsletter</font></span>
<input type="text" name="ea" size="20" value="" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;">
<input type="submit" name="go" value="GO" class="submit" style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;">
<input type="hidden" name="m" value="1101177120388">
<input type="hidden" name="p" value="oi">
</div>
</form>
</div>
</div>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe -->
<!-- END: SafeSubscribe -->
<!-- BEGIN: Email Marketing you can trust -->
<!-- END: Email Marketing you can trust -->
<p align="center" class="messageBoxContent style19"><strong><A href="resources.htm" class="style1 style25 style31"><font color="#FF0000">Recommended Books, Vitamins & Resources</font></A></strong></p>
</td>
</tr>
</table>
<hr color="#2A6180" size="1"> </td>
<td width="2" valign="top"> </td>
<td width="435" align="center" valign="top" bgcolor="#F3F5F5" class="boxText3"><p align="center"><strong>Counseling in Orlando, Winter Park, East Orlando, Clermont Florida and Central Florida</strong>
<p>TLC offers a "full" range of Individual, Family, & Group Counseling services for Children, Teenagers, Adolescents, and Adults. Our skilled counselors are Relational, Approachable and Specialists providing therapy services in the Central Florida area including: Orlando, Winter Park, Metro West, East Orlando, and Clermont Florida.</p>
<p align="center"><strong><span class="style24"><span class="style32"><font color="#FF0000">Complimentary</font> <span class="style1">15 Minute Phone Consultation (407) 248-0030</span></span></p>
<script type="text/javascript">
AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1','type','application/x-shockwav e-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube .com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1' ); //end AC code
</script><noscript><object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object></noscript>
<p align="center" class="boxText2"><strong><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><a href="espanol.htm">Español Consejero</a> or <a href="portuguese.htm" target="_blank">Português Conselheiro</a></strong></p>
<p align="center"><span class="boxText3"><a href="testimonials.htm"><strong>Testimonial </strong></a></b>- "He is doing so well! We are continuing with the diet changes and vitamins and his attitude is so much better.
You were right - kids don't see you for very long We are so grateful for your help. We were in a bad place before we saw you and I am really amazed at the difference." </span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<div align="center">
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
</div>
<p><A href="camps.htm" target="_blank"><span class="style1"><blink>Channel 13 News</blink></span> interviews Jim West, president of Total Life Counseling on how our Orlando area Camps Helped a Student with Making Friends.</A></p>
<p align="left">Orlando Mental Health <a href="counselors.htm" target="_parent">Counselors</a> specializing in all areas of therapy. Call us today. We can help!
<HR>
<p align="left"><strong>Services:</strong> Total Life Counseling Center consists of Licensed Counselors, Masters Level Therapists, <a href="espanol.htm" title="Espanol Counseling Services in Orlando & Winter Park Florida" target="_blank"><strong>Espanol Counselors</strong></a>, <a href="portuguese.htm" target="_blank"><strong>Portuguese Counselors</strong></a>, Licensed Mental Health Counselors, <a href="corporate.htm" target="_blank"><strong>Business Coaches</strong></a>, <a href="image.htm" target="_blank"><strong>Image Enhancement Coaches</strong></a> who provide counseling for emotional, mental, physical and spiritual care including marriage, individual, family, substance abuse and more. TLC provides services for all ages in the Orlando Central Florida area and can handle almost any issue:<br>
<TABLE id="table49" width="100%" border="0">
<TBODY>
<TR>
<TD height="23" align="middle"><div align="left"><A href="adhd.htm" target="_parent">ADD or ADHD </A></div></TD>
<TD align="middle"><div align="left"><A href="marriage.htm" target="_parent">Marriage</A></div></TD>
<TD align="middle"><div align="left"><A href="sexualabuse.htm" target="_parent">Sexual Abuse</A></div></TD>
</TR>
<TR>
<TD height="22" align="middle"><div align="left"><A href="depression.htm" target="_parent">Depression</A></div></TD>
<TD align="middle"><div align="left"><A href="anger.htm" target="_parent">Anger Management</A></div></TD>
<TD align="middle"><div align="left"><A href="anxiety.htm" target="_parent">Anxiety</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="socialskillsgroups.htm" target="_parent">Social Skills Groups</A></div></TD>
<TD align="middle"><div align="left">Mood Disorders or Bi-Polar</div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-injurious Behavior</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="premarital.htm" target="_parent">Pre-marital</A></div></TD>
<TD align="middle"><div align="left">Eating Disorders</div></TD>
<TD align="middle"><div align="left">Women's Issues</div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><A href="odd.htm" target="_parent">Oppositional Defiance Disorder</A></div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-Mutilation or Self Harm</A></div></TD>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Challenged</a></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="janie.htm" target="_parent">Codependency</A></div></TD>
<TD align="middle"><div align="left"><A href="coaching.htm" target="_parent">Career Assessment</A></div></TD>
<TD align="middle"><div align="left"><A href="deb.htm" target="_blank">Gender Identity</A></div></TD>
</TR>
<TR>
<TD height="55" align="middle"><div align="left"><a href="ptsd.htm">Post Traumatic Stress Disorder PTSD</a></div></TD>
<TD align="middle"><div align="left"><a href="multiple.htm" target="_parent">Multiple Personality or Dissociative Disorders</a></div></TD>
<TD align="middle"><div align="left"><A href="adhd.htm" target="_parent">Attention Deficit Hyperactivity Disorder</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="counselors.htm" target="_parent">Christian Counseling</A></div></TD>
<TD align="middle"><div align="left"><a href="skype.htm" target="_blank">Skype, Phone or Online Counseling</a></div></TD>
<TD align="middle"><div align="left"><A href="cyberbullying.htm" target="_parent">Cyberbullying</A></div></TD>
</TR>
<TR>
<TD height="29" align="middle"><div align="left"><A href="grief.htm" target="_parent">Loss</A></div></TD>
<TD align="middle"><div align="left"><a href="anxiety.htm" target="_parent">Stress Management</a></div></TD>
<TD align="middle"><div align="left"><A href="grief.htm" target="_parent">Grief</A></div></TD>
</TR>
<TR>
<TD height="37" align="middle"><div align="left"><A href="substance_abuse.htm" target="_parent">Substance Abuse & Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm">Sports Psychology</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm" target="_blank">Mental Toughness</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="sexualaddictions.htm" target="_parent">Sexual Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="groups.htm">Groups</A></div></TD>
<TD align="middle"><div align="left"><A href="parenting.htm" target="_parent">Parent Coaching</A></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left">Family</div></TD>
<TD align="middle"><div align="left"><A href="divorce.htm">Divorce Recovery</A></div></TD>
<TD align="middle"><div align="left"><a href="premarital.htm" target="_parent">Pre-Marital</a></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Disabled</a></div></TD>
<TD align="middle"><div align="left"><a href="leadershipcoaching.htm">Leadership Coaching</a></div></TD>
<TD align="middle"><div align="left"><a href="selfharm.htm" target="_blank">Self Harm</a></div></TD>
</TR>
</TBODY>
</TABLE>
<HR><p>At Total Life Counseling we focus on more than just the “Mind;" we focus on the “Total” person. </p>
<p><U>Clients travel all over Florida, from the Bahamas and Georgia </U>as TLC has worked with patients' and their prescribers' to reduce their dependency on medication. Since 2003 85% of our patients were stabilized with FDA approved supplements and dietary adjustments.</p>
<p>Patients receive tremendous relief from their symptoms with less medication or in some cases without medication. </p>
<p>Orlando teen and adolescent life workshops and teen camps.</p>
<p><span class="style1"><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><strong>Se Habla Español</strong></a> <span class="style22">and</span> <a href="portuguese.htm" target="_blank"><strong>Portuguese (Portugues)</strong></a> <span class="style17">Counselors</span></span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
<HR>
<H2>Our Mission Statement</H2>
<p>To provide the Hope, Healing and Support to Individuals, Couples, and Families in a Warm, Approachable Way.</p>
<h2>Our Vision Statement</h2>
<p>To Accelerate Healing with our Relational, Holistic, Experiential approach through Communication, Camps, Coaching, and Counseling.</p>
<HR><h2 class="boxText3 style35">Office Locations and Areas Served</h2>
<p align="left" class="style36">Total Life Counseling Center provides counseling, therapy, coaching, camps and career services for all of central Florida, including: Orlando, Winter Park, Maitland, College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg. </p>
<p align="left" class="style36">Our counseling, therapy, camps, group, coaching and career services are conveniently located at:</p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=ewk9MRVLeIOeBOayBAhxUA= =&2g=4r1UgrxqqQkErUUWTq9wZA==&2v=ADDRESS&2a=1507 S Hiawassee Rd&2c=Orlando&2s=FL&2z=32835-5718&2y=US&2pn=&2pl=&cat=&q=">1507 S. Hiawassee
Road, Suite 101, Orlando, FL 32835</a></font></p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=QjNBshU7m2oAHEBWy833/w= =&2g=qrdtLjTZeC3HG9agi4ixtw==&2v=ADDRESS&2a=1850 Lee Rd&2c=Winter Park&2s=FL&2z=32789-2115&2y=US&2pn=&2pl=&cat=&q=">Lee
World-1850
Lee Road
Ste. #215, Winter Park, FL 32789</a></font></p>
<p align="left" class="style36"><a href="http://maps.google.com/maps?q=1850+N.+Alafaya+Trail+Building+1-B+Orlando,+FL+32826&oe=utf- 8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&split=0&gl=us&ei=syZJSpCoJ 4ii8QTjreGTDQ&sa=X&oi=geocode_result&ct=title&resnum=1" target="_parent" class="style37">1850 N. Alafaya Trail Building 1-A Orlando, FL 32826 Suite 1A</a></p>
<p align="left" class="style34"><span class="style29"><a href="http://maps.google.com/maps?client=safari&rls=en-us&q=7432+State+Road+50,+Groveland,+FL+34 736&oe=UTF-8&um=1&ie=UTF-8&split=0&gl=us&ei=dPWZSaKgNp6Dtwfel5CcCw&sa=X&oi=geocode_result& resnum=1&ct=title" target="_parent" class="style37">7432 State Road 50, Groveland, FL 34736</a></span></p>
<p class="style10"><b class="style32">Call us (407)
248-0030</b>
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
</p>
<DIV align="center">
<DIV>
<FORM name="ccoptin0" action="http://ui.constantcontact.com/d.jsp" method="post" target="_blank">
<strong><IMG alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" src="http://img.constantcontact.com/ui/images1/visitor/email1_trans.gif" border="0"> Read our e-Newsletter
<INPUT name="ea0">
<INPUT type="submit" value="GO" name="go0">
<INPUT type="hidden" value="1101177120388" name="m0">
<INPUT type="hidden" value="oi" name="p0">
</strong>
</FORM>
</DIV>
</DIV>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe --> <DIV align="center"><strong><A href="http://www.constantcontact.com/safesubscribe.jsp" target="_blank"><IMG height="14" alt="" src="http://img.constantcontact.com/ui/images1/safe_subscribe_logo.gif" width="168" vspace="5" border="0"></A></strong></DIV></td>
</tr>
</table> </td>
<td width="1"></td>
<td width="165" valign="top"> <table border="0" style="border-collapse: collapse" width="96%" id="table" cellpadding="2" cellspacing="2">
<tr>
<td height="32" bgcolor="#2A6180"><p align="center"><A href="consultation.htm"><strong>Upcoming Seminars</strong></A></p></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><p align="center" class="style12"><strong><a href="http://www.youtube.com/TotalLifeMedia" target="_blank"><span class="style23"><img src="images/Youtube.jpg" alt="Total Life Counseling Center You Tube Videos" width="97" height="41" border="0" align="top"></span></a></strong></p>
<p align="center"><a href="http://www.facebook.com/pages/Total-Life-Counseling-Center/174661783281?ref=mf" target="_blank"><img src="images/Facebook.jpg" alt="Total Life Counseling Centers Facebook Fan Club" width="120" height="52" border="0"></a>
<p align="center" class="style12"><a href="4hourparenting.htm" target="_blank"><strong>4 Hour Court Ordered Divorce Parenting Class-Helping Your Children Through the Transition of Divorce</strong>, Court Referrals Accepted, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="parenting.htm" target="_blank"><strong>4 Hour Parenting Class-Parenting with Purpose</strong></a>, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="angermanagement.htm" target="_parent"><strong>8 Hour Anger Management Class</strong></a> Court Referrals Accepted, Saturday, 9a-5:30p, <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><span class="style17"><a href="marriage.htm" target="_parent">Couples Cafe </a></span><a href="marriage.htm"><span class="style17">"Enjoying Our Differences" </span></a><a href="Documents/Marriage Couples Cafe.pdf" target="_parent"><strong>Northland Church Natures Table </strong></a>Longwood, FL, TBA, 6:30p-8:30p<BR>
<BR>
<strong>Teen Talk about Obesity, Video Game Addiction, & Hooking Up</strong> - January 26th, 12p-1p, <a href="http://www.810weus.com/" target="_blank"><strong>The Linnda Durre Show 810 AM</strong></a> - James West, MA, LMHC</p>
<p align="center"><span class="style12 style28"><strong>The Hook Up Mentality</strong><BR>
Feb 4th from 9:30a-10:30a, East Ridge Middle School, <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Social Networking & Internet Safety</strong><BR>
Feb 19th from 9:40a-11a, <a href="http://www.thefirstacademy.org" target="_blank">The First Academy</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Top 10 Technology Relationship Kilers</strong><BR>
May 14th from 9a-12p, RSVP at (407) 281-7000, <a href="http://www.psysolutions.com/facilities/universitybehavioralcenter/" target="_blank">University Behavioral Center</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a> & <a href="janie.htm" target="_blank">Janie Lacy, MS</a></span></p>
<p align="center" class="style12"><strong>Professional Communicators Available for <a href="corporate.htm" target="_blank">Corporations,</a><a href="consultation.htm" target="_blank"> Colleges, Schools or Local Organizations on a Variety of Topics.</a></strong></p>
<p align="center"><span class="style12"><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a></span></p>
<HR color="#2a6180" SIZE="1">
<TABLE id="table47" cellSpacing="2" cellPadding="2" width="99%" border="0">
<TBODY>
<TR>
<TD height="120" bgColor="#ffffff"><p align="center"><strong><a href="Documents/Staff Brochure.pdf" target="_blank">TLC Brochure</a></strong></p>
<p align="center"><strong><A href="http://www.adobe.com/products/acrobat/readstep2.html"><IMG height="31" alt="Get Adobe Reader logo" hspace="3" src="images/get_adobe_reader.gif" width="88" vspace="3" border="0"></A></strong></p></TD>
</TR>
</TBODY>
</TABLE>
<p align="center"><strong><A href="http://www.cfchristianchamber.com">Member of the Central Florida Christian Chamber of Commerce</A></strong></p>
<!-- google_ad_client = "pub-7929094220693135"; //Home Page, 120x240, created 12/4/07 google_ad_slot = "9273104889"; google_ad_width = 120; google_ad_height = 240; //--> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="30" class="home-bg-r1"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="90" valign="top" class="home-b1"><table width="828" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30" height="90"> </td>
<td width="90"> </td>
<td align="center" valign="top">
<!--COPYRIGHT info BEGIN-->
<div class='copyright'>Copyright © 2006. Total Life Counseling Center. All rights reserved.<BR>
<br>
Main Office: 1507 S. Hiawassee Road #101, Orlando FL 32835 Satellite Locations: Clermont, Winter Park, East Orando Florida<br>
</div>
<!--COPYRIGHT info END-->
<!--BOTTOM OF PAGE LINKS BEGIN-->
<div class='bottomLinks'>
<DIV><A href="index.html" target="_blank">Home Page</A> | <A href="contact_us.htm" target="_blank">Contact</A> | <A href="maps.htm" target="_blank">Office Locations</A> |<A href="forms.htm"> FAQ</A> <A href="resources.htm">Links</A> <a href="employment.htm"><span class="style33">EMPLOYMENT</span></a></DIV>
</div>
<!--BOTTOM OF PAGE LINKS END--></td>
<td width="90"> </td>
<td width="30"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="147" class="home-bg-r2"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Can you tell me where the error is in my HTML? Also how do I give you my JS script?
Here's 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: default;
width: auto;
background-color: #214D65;
top: 0px;
bottom: 10px;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* 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
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #2B6180;
font-style: normal;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
z-index: -1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8.05em;
float: left;
background-color: #235E80;
top: -15px;
border-top-color: #A4B5BF;
border-right-color: #A4B5BF;
border-bottom-color: #A4B5BF;
border-left-color: #A4B5BF;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
right: -8px;
color: #FFFFFF;
/* 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%;
z-index: 1020;
cursor: default;
width: 10em;
position: absolute;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* 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
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #285B78;
border-top-color: #2B6180;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -5% 0 0 95%;
top: auto;
/* 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
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #2B6180;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
border-top-color: #587788;
/* 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: #2E698B;
color: #285D78;
background-repeat: no-repeat;
background-image: none;
/* 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: #2A6180;
color: #205775;
background-repeat: no-repeat;
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-repeat: no-repeat;
/* 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-repeat: no-repeat;
/* 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-repeat: no-repeat;
/* 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-repeat: no-repeat;
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
display: inline;
f\loat: left;
background: #FFF;
Maybe you are looking for
-
Where can i find edited adobe photoshop files in time machine after update?
i was having issues with my computer, brought it in to apple store. they suggested i back everything up on external using time machine before doing a erase/re-write. i did so. HOWEVER, my edited photos in photoshop & bridge are gone. after the re-wri
-
How to connect my home Mac at distance
Please, can someone tell me how process to make a connection between my home Mac et my Macbook pro when I am outside home? Thank you for the answers
-
Hi all, We've coded a large application and I've deployed it as an applet over the web. The problem is when a user clicks the refresh button or the back button on the browser. The applet's destroy method is called and then the init method and the app
-
No join in the query involving 2 tables
Friends, I saw a strange plan for one query in TESTING DB today. Although 2 tables are involved i dont see any join , NL/HJ/SMJ !! Can you please tell why this might be happening? Note: i am not facing any performance issue but curious to know what t
-
Make Brush preset doesn't match canvas angle
Hello! I'm running a demo version of Photoshop Cs 5 on my brand spanking new Macbook pro 2.3 ghz with 8gb of ramalama. I work on comics and I create a lot of preset brushes as I go, using an action script. I'll draw a path, and the script witll fill