Combining spry & css

I have done a spry gallery, by replacing images from a
tutorial. tried to center the page within the browsers windows by
looking @ previous css, the page ignores all but body color.
On another front I have through a css tutorial centered a two
column page with header and footer, replaced text with my header
& footer (both images), is it possible to make the two columns
spry regions, and insert my thumbs & main images there, coping
xml, SpryData.js, & xpath.js files from uncentered gallery that
works?
here is the code for the spry gallery page. can some one help
please?
Thanks

Spry turns off the autocomplete for a reason.. If users use autocomplete in IE. It will not fire a "change" event to the browser. So onchange validations will fail if you turn on autocomplete..
If you still think you want it on. You should manually edit the Spry .js file. And comment the autocomplete = false; out

Similar Messages

In the spry css menu, how do i know what does what?

I have two questions,
(1) In the spry css menu, is it just a case of trial and error to find out what each one does or is there a recognisable freature of each line to tell me what each one does, there are so many of them and most of them are alike. I cant help thinking there is a simple way of identifying what each one does without having to search around in the dark until i stumble on the right one that dose what i am trying to tweak in the appearance of the menu bar.
(2) When I am inserting the data for each of the navigation links when i first insert the spry menu I.E.... HOME...ABOUT...COURSES....CONTACT and the list items under "COURSES" link successfully to each page when clicked in the browser. When i click the "HOME" button, a drop down menu of the navigation options ( HOME...ABOUT...COURSES...CONTACT) appears under it. How do I eliminate this when i insert the spry menu bar so it does not appear in the browser.

Have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
Have proper markup.
Although the above are true answers to your questions, I have reason to believe that it will not satisfy you. Remember that these are user to user forums and that we do not have much time to spare. We can answer most specific questions, but do not have the time to answer generic questions to their fullest extent.
What I am trying to say is, please supply a link to your site with a specific question and we will help where we can.
Gramps

Multiple Spry CSS files?

I'm wondering if it's possible to have more than one style
sheet for, in this case, Spry Tabbed Panels. I'd like to have a
couple of different looks for tabbed panels in the site on which
I'm working and want be able to do that will CSS. So...
1) Is it possible?
2) Is there a specific naming convention, (i.e.,
"SpryTabbedPanels1.cs")?
3) Presumably they would need to be stored in the SpryAssets
folder???
Thanks - JAY

This is a multi-part message in MIME format.
------=_NextPart_000_01A6_01C8568B.7814C890
Content-Type: text/plain;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
Sure, it's completely possible. Create new CSS style sheets
that contain =
your revised styles and then link to them after the link to
the standard =
Spry CSS files. There's no standard naming convention and you
can store =
it wherever you'd like.
Best - Joe
Joseph Lowery
VP of Marketing, WebAssist
Author, Dreamweaver CS3 Bible
"LumberBisquit" <[email protected]> wrote
in message =
news:[email protected]...
I'm wondering if it's possible to have more than one style
sheet for, =
in this=20
case, Spry Tabbed Panels. I'd like to have a couple of
different looks =
for=20
tabbed panels in the site on which I'm working and want be
able to do =
that will=20
CSS. So...
1) Is it possible?
2) Is there a specific naming convention, (i.e., =
"SpryTabbedPanels1.cs")?
3) Presumably they would need to be stored in the SpryAssets
=
folder???
Thanks - JAY
------=_NextPart_000_01A6_01C8568B.7814C890
Content-Type: text/html;
charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-1">
<META content=3D"MSHTML 6.00.6000.16587"
name=3DGENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=3D#ffffff>
<DIV><FONT face=3DArial size=3D2>Sure, it's
completely possible. Create =
new CSS=20
style sheets that contain your revised styles and then link
to them =
after the=20
link to the standard Spry CSS files. There's no standard
naming =
convention and=20
you can store it wherever you'd
like.</FONT></DIV>
<DIV><FONT face=3DArial size=3D2>
<P>Best - Joe</P>
<P>Joseph Lowery<BR>VP of Marketing, <A=20
href=3D"
http://www.webassist.com/">WebAssist</A><BR>Author,
<A=20
href=3D"
http://www.idest.com/dreamweaver/">Dreamweaver
CS3=20
Bible</A></P></FONT></DIV>
<BLOCKQUOTE=20
style=3D"PADDING-RIGHT: 0px; PADDING-LEFT: 5px; MARGIN-LEFT:
5px; =
BORDER-LEFT: #000000 2px solid; MARGIN-RIGHT: 0px">
<DIV>"LumberBisquit" <<A=20
=
href=3D"mailto:[email protected]">[email protected]=
</A>>=20
wrote in message <A=20
=
href=3D"news:[email protected]">news:fme7c4$npe$1@forums=
.macromedia.com</A>...</DIV>I'm=20
wondering if it's possible to have more than one style sheet
for, in =
this=20
<BR>case, Spry Tabbed Panels. I'd like to have a
couple of different =
looks for=20
<BR>tabbed panels in the site on which I'm working and
want be able to =
do that=20
will <BR>CSS. So...<BR><BR> 1) Is
it possible?<BR> 2) Is =
there a=20
specific naming convention, (i.e., =
"SpryTabbedPanels1.cs")?<BR> 3)=20
Presumably they would need to be stored in the SpryAssets=20
folder???<BR><BR> Thanks -
JAY<BR></BLOCKQUOTE></BODY></HTML>
------=_NextPart_000_01A6_01C8568B.7814C890--

Spry css ERROR when validating

These are the errors I got when attempting to validate my
spry css - does anyone know how i fix them.
Cheers Kylie
56 .AccordionPanelTab Property -moz-user-select
doesn't exist : none
57 .AccordionPanelTab Property -khtml-user-select
doesn't exist : none

I have to say as someone new to web-design, I really don't understand why this won't validate..
I mean, I get the technical side of it - that mozilla and linux require additional or different coding to appear and act the way it's intended to. But why even have validation then? Why have codes that specify one complete set of rules - when every browser acts, behaves, and appears differently? If w3 standards are to be obeyed, then why are non-compliant browsers still used?
For example, when create a .css - that stylesheet should define the style in all browsers. I shouldn't, in my opinion anyway, need various hacks to compensate for specific instances. That's what standards are (supposed to be) for! To eliminate the need for special and extreme instances!
It seems to me (again, a newbie to all of this - so I don't want anyone to think I'm challenging them, just seeking answers), that either the browsers that refuse to comply to the same set of standards should be slowly weeded out by those of us who refuse to use them for their negligence, or that w3 standards should be completely ignored for their inability to represent all browsers.
or maybe everyone just needs some time to catch up? I'd love your opinion on this, Mr. Powers.

CS3 Spry css question

I know basic tableless css, my question is instead of a regular navigation bar I need to use the spry widget for a dropdown navigation bar on an exisitng html page. I'm able to insert the spry in the correct spot on the .html page and get it to work but I have a css sheet already attached to the page I need to know if I can just select all the css from the spry css page and insert it inside my attached css page?
Any help?

Yes, you can move the styles, but in my opinion, it is safer to maintain the Spry CSS assets in their own file, safe from inadvertent deletion or harm. There is an inherent logic to the order of styles in the Spry CSS sheets, and you might lose the wisdom of the comments not to mention the orderly consistency as well.
You may link many style sheets to your .html pages...you are not limited to one per page.
By using several CSS files attached to one page, you can also have a separate style sheet for different media: one for the Screen, one for Print, one for a Handheld device. There's no reasonable way to keep all these varying uses for different style sheets all one ONE sheet. The Printer will look for your main style sheet AND at the overriding styles in the print style sheet, for instance, so you don't need to print the nav bar when what you want is a print of the content.
Z
You do, of course, need to NAME the CSS files with distinct names, for instance, global.css, print.css, handheld.css.
Message was edited by: Zabeth69

Spry CSS

I am using spry on an FAQ page and it works fine but I want
some panels to open a certain height like 100px and others to open
200px. I copied the CSS and changed the height and then changed the
name of the class. When I use the first class it works fine but the
second content div I use a different class and it doesn't work it
still acts like the first class. How can I stop the first class
attributes for height so my other panel content areas can have
their own CSS.
I also would love to understand how to make the js work so
the content panel can expand to just the size needed for the
content. I tired height: auto; and it did not work.

Oh, yes...
Congratulations!
Take care,
Tim
"TC2112" <[email protected]> wrote in message
news:g4c1tn$40c$[email protected]..
> Hello,
>
> You can just make a copy of the spry CSS stylesheet and
change the name to
> something like
> SpryAccordianWedding.css
> Make sure it is in the same folder as the original spry
stylesheet.
>
> Use this "new" stylesheet to style the spry on the
wedding pages.
> Change the link on the wedding page to reference this
new sheet:
> <link href="../SpryAssets/SpryAccordianWedding.css"
rel="stylesheet"
> type="text/css" />
>
> Take care,
> Tim
>
>
> "smitz123" <[email protected]> wrote in
message
> news:g4bvpe$1rb$[email protected]..
>> Hello,
>>
>> I started building a website for my work and have
set up several sprys
>> and
>> custonized them using the CSS panel like you should.
All the Spry seemed
>> to
>> work fine on the page just how I wanted them to.
Then I started to do a
>> webpage for my upcoming wedding. I am using the same
site to also host
>> my
>> wedding site. Unfortunitly when I change the tabbed
panel spry on one it
>> changes the other. I understand the CSS is a form of
standardization for
>> websites but is there a way to seperate these two
sprys so when I change
>> one
>> the other does not change? I imagine there is but I
cannot figure it
>> out. If
>> someone knows how I could really use the help,
please be pretty detailed
>> as I
>> am still pretty new to Dreamweaver but I have been
using Adobe products
>> for
>> years now. The two sites in question are:
http://www.ZESstudio.com and
>>
http://www.ZESstudio.com/zachandbevinwedding.html
and you can see the
>> error on
>> the About us page on my wedding website. Thanks so
much for your help!
>>
>> -Zach
>>
>
>

Photo gallery using Spry/CSS?

I have done a spry gallery, by replacing images from a
tutorial. tried to center the page within the browsers windows by
looking @ previous css, page ignores all but body color. here is
the code can some one help please?
<!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>Ajax Album Demo</title>
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml",
"/gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml",
"/gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="header"><img src="images/HP 2 Header.jpg"
width="800" height="54" /></div>
</div>
<div id="thumbContainer" spry:region="dsGallery
dsData"> <img src="{dsData::thumbnail/@base}{@thumbpath}"
spry:repeat="dsGallery" class="thumbs"
onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div>
<div id="main" spry:detailregion="dsGallery
dsData"><img src="{dsData::large/@base}{@path}"/><br
/>
Name: {@path}</div>
<div id="apDiv1"></div>
</body>
</html>
Thanks

Thats beouxe of the position absolute, top left, these force
the elements in position.
So u would need to change that and it would "center" in the
way u wanted.

Javascript - Is there a way of combining two CSS styles in getElementById

I am trying to transition how a div is displayed when a button is clicked, but can't figure out how to combine CSS styles into a javascript function.
I'm trying to combine display:block and transition: all .3s ease. I have this so far, but only the display property is working for me.
document.getElementById("myDIV").style.display = "block",WebkitTransitionDuration = "3s";
I have tried this too, but still no joy:
var myElement = document.getElementById('myDIV');
myElement.style.cssText = 'display:block; transition: all .3s ease;';
Apart from not knowing what I'm doing here, has anybody got any thoughts as to what's wrong with what I'm doing?

This should be easy. Try -
var myElement = document.getElementById('myDIV');
document.myElement.style.onmouseover = 'display:block; transition: all 0.3s ease;';
Does that work?

Default spry css not working correctly

Hi. I made my first Spry tabbed panel, CS3 on a Mac. It
worked perfectly in Safari, and on a PC with Explorer. However the
panels were not "stacked" under each other in Firefox and Opera -
displayed all tab content as one long column . I ran a css
validation and it came back with two errors:
Property -moz-user-select doesn't exist : none
Property -khtml-user-select doesn't exist : none
What does this mean? Does anyone know why the tabbed panels
are not working in Mozilla browsers and how to fix?
The only change I made to the supplied css was to change the
color of the tab, Here is the code:
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 2px;
margin: 0px 1px 0px 0px;
font: bold 10px Arial, Helvetica, sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #000000;
Here is the page:
http://pureinspirationmag.com/issues/back2.shtml
Here is the link to the complete code:
http://pureinspirationmag.com/SpryAssets/SpryTabbedPanels.css
Thanks for any help!

Perhaps there is something I can do within DW that might easily solve this?
There's no magic button to fix bad code. Adobe abandoned GoLive back in 2008 because it wasn't capable of producing standards compliant code. This is 2013. It would make more sense to re-build the site from scratch to be both web standards compliant and responsive in mobiles, tablets and desktops.
Nancy O.

Problem combining Spry effects with image captions [was: LShub]

I am using Spry effects combo sample 2. The thumbnails in the sample are all included within the same preview div. I need to include captions underneath the images, so I have each thumbnail and caption within a separate div. The effect still works everywhere except Explorer. In Explorer 7, the image grows behind the image in the next div.
I read through the Spry for Ajax forum, but the Java Script used there is different. I have tried putting all the divs I want to grow inside another and giving the new div a position and z index. I have also added a z-index in the CSS of the preview div. Nothing I've tried works. Is there a fix?
Here is a link for the page I am working on:
http://www.nhci.com/stage/kitchens/countertops.html?tab=kitchens#
Relevant CSS:
.thumbs {
    clear: both;
    margin: 5px auto;
.thumbnails85 div {
    position: relative;
    width: 85px;
    height: 85px;
    float: left;
    margin: 6px;
    padding: 0;
    float: left;
    display: inline;
.thumbnails85 img {
    top: 0px;
    left: 0px;
    width: 85px;
    height: 85px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
.preview {
    padding: 3px;
    margin-bottom: 5px;
    height: 300px;
    width: auto;
    margin-right: 3px;
    position: absolute;
    float: left;
.spacer105 {
    height:105px}
[Subject title edited by moderator]

I am using Spry effects combo sample 2. The thumbnails in the sample are all included within the same preview div. I need to include captions underneath the images, so I have each thumbnail and caption within a separate div. The effect still works everywhere except Explorer. In Explorer 7, the image grows behind the image in the next div.
I read through the Spry for Ajax forum, but the Java Script used there is different. I have tried putting all the divs I want to grow inside another and giving the new div a position and z index. I have also added a z-index in the CSS of the preview div. Nothing I've tried works. Is there a fix?
Here is a link for the page I am working on:
http://www.nhci.com/stage/kitchens/countertops.html?tab=kitchens#
Relevant CSS:
.thumbs {
    clear: both;
    margin: 5px auto;
.thumbnails85 div {
    position: relative;
    width: 85px;
    height: 85px;
    float: left;
    margin: 6px;
    padding: 0;
    float: left;
    display: inline;
.thumbnails85 img {
    top: 0px;
    left: 0px;
    width: 85px;
    height: 85px;
    position: absolute;
    z-index: 1;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
.preview {
    padding: 3px;
    margin-bottom: 5px;
    height: 300px;
    width: auto;
    margin-right: 3px;
    position: absolute;
    float: left;
.spacer105 {
    height:105px}
[Subject title edited by moderator]

Spry CSS keeps crashing DW

I added a spry tabbed panel to a page... then I opened the CSS file and made a change, then clicked to switch back to the original file to see the change and DW crashes.
I restart, open the CSS file, make the change and hit CTRL+S. DW crashes.
There is something going on here with this file that keeps causing DW to crash. Has anyone run into this before?

I'm not sure if this could be the cause, but there is a bug in CS3 (not sure what you are using) :
The 8KB bug
This is a very rare bug that causes Dreamweaver to crash during operation, and then crash repeatedly each time you try to restart the program. It normally affects only Dreamweaver CS3 on Windows, and is caused by the presence of a file that's exactly 8,192 bytes (8KB) or a multiple thereof.
The solution is to open the file in a text editor and add a few extra characters (new lines or a comment will do). Save the file, and restart Dreamweaver.
If the file causing the problem is an image or other type of media file, edit it so that it's no longer an exact multiple of 8KB
Other than that, are you using the latest Spry Version?
SPRY UPDATERS: http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_spry
If none of these help - then you may want to ask the question over at the forum dedicated to the Spry Framework:
http://forums.adobe.com/community/adobe_labs/spry_framework_ajax_prelease

Combining SPRY effects

I'm using the grow/shrink effect twice on an object. Once
onMouse Over to make it grow and once again onMouseOut to make it
shrink. The problem I am having is that the object begins to grow
and shrink spasticlly like it's having soome kind of seizure. Is
there a better way to do this. Toggeling the effect doesn't work
since you have to mose back over the object to get it to shrink and
that is so not what I am looking for.

Due to the Spry framework being fairly new, you may be best
asking this
question in the Spry specific forum: You may want to ask your
question at
the Spry specific forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/
"wistatboy" <[email protected]> wrote in
message
news:f4ouks$57p$[email protected]..
> I'm using the grow/shrink effect twice on an object.
Once onMouse Over to
> make
> it grow and once again onMouseOut to make it shrink. The
problem I am
> having is
> that the object begins to grow and shrink spasticlly
like it's having
> soome
> kind of seizure. Is there a better way to do this.
Toggeling the effect
> doesn't
> work since you have to mose back over the object to get
it to shrink and
> that
> is so not what I am looking for.
>

Html lost link to spry css

I'm pretty new to Dreamweaver so thanks for the help.
I've set up a spry horizontal menu bar. The menubar.js is attached but the horizontalmenu.css is not showing under the html associated files. It has somehow become unattached even though the stylesheet link is in the head section of the html file. How do I re-link it or for that matter, link a different one? Opening the link as a file does not seem to do it.
Thanks.

I am a tutor at a college in the UK and although this is not a frequent occurance it does happen more than you might think.
More than a few students have experianced this in their software.
It is a Dreamweaver issue and not a code issue. The html code is still intact when it happens and if you were to preview the page it would display correctly.
It is that the style sheet info in the css panel is lost and in page design view of Dreamweaver.
If you restart Dreamweaver its there again. but once this has occured, it then happens more freqently on that computer.
David

Link to spry css broken in template or child pages

Hi,
on the following pages the spry menu is not displaying properly. I did notice that in the template pages the link ref was missing ../ at the beginning. Having added this and updated the templates and child pages (these were also uploaded to the server) I thought that would solve the problem. But it doesn't look as though the change in the link ref has updated correctly.
http://davidcoshdesign.com/nea/lighting_decorative.html
http://davidcoshdesign.com/nea/lighting_functional.html
http://davidcoshdesign.com/nea/news.html
http://davidcoshdesign.com/nea/links.html
http://davidcoshdesign.com/nea/blog.php
Any pointers, would be great.
Second url:
http://davidcoshdesign.com/nea/lighting_functional_wall.html
This one appears not to be linking properly to the template? At leats, I think that's the problem. The template is in the correct folder and uploaded to the server.
I have noticed on this site that when I make a new page based on any of the site templates, when I look at the coding in DW, there are references to the local site 'root' folder.
Have I messed up the links to templates etc on site-wide basis? Do I need to go into 'Manage Sites' to sort this out?

No, just a reoccurring problem, for someone who constantly struggles witht the vagaries of html.
RP

Combining Spry elements

My situation is this: I am creating a photo gallery page,
with 5 galleries. Each gallery's thumbnails are displayed in a Spry
panel (Tabbed Panels) on the right side of the page. The full size
image will be displayed in another div on the left side of the
page. So far, I have everything for the first gallery working, and
I was able to get the thumbnails for the second gallery to show,
but can't figure out how to get the corresponding full size image
for the second gallery to show up when the thumbnail is clicked.
Can anyone help me out with this? The page is located here:
http://www.mistchild.com/nyc/08/photos.htm
Thanks

Can anyone help me with this?

Combining spry & css

Similar Messages

Maybe you are looking for