Spry Effects+Safari=Conflict?
I'm currently creating a site for a commercial video producer
and I've got thumbnails beneath the video player using Spry Effects
where onLoad, the thumbnails appear dimmed and upon rollover, the
thumbs brighten up. Problem is the effect works perfectly in
Firefox but not Safari at all. Is this a known conflict?
http://www.josephimartinez.com/commercials/index.html
This is being tested in v3.0.4 of Safari for Mac.
I tried the examples from the effects_coding/index.html but
it didn't matter whether it was the onclick or onmouseover effect.
Nothing is happening in any browser.
I've updated the following page with the new code and added
the reference to my SpryAssets folder (doh! how could I forget to
add that?) and you'll see I added the code to the vid1 instance.
http://www.josephimartinez.com/commercials/index2.html
Here's what I did:
First add the references to SpryEffects in the head:
<script type="text/javascript"
src="../SpryAssets/SpryEffects.js"></script>
Then did this to the div:
<div id="vid1">
<p><a onmouseover="fadeElement.start(); return
false;" href="coors_light.html"><img
src="../images/thumbs/coors_light.jpg" alt="Coors Light"
name="commCoors" width="124" height="93" border="0" id="commCoors"
/></a></p>
<p><a href="coors_light.html"><img
src="../images/logos/coors_light.gif" alt="Coors Light"
name="coorsLight" width="80" height="60" border="0" id="coorsLight"
/></a></p>
</div>
<script type="text/javascript">
var fadeElement = new Spry.Effect.Fade("vid1",
{duration:2000, from:100, to:20, toggle:true});
</script>
Similar Messages
-
I have two (2) questions about using the Spry Effects script in a horizontal slide configuration.
Question 1:
In DW CS4 if I add the command <duration: 500,> the numerals turn red. I also get an error in line ???? from DW which is the line the variable is on. If I go ahead and accept the change I see the desired quicker slide in Firefox and Safari. The default is 1,000 milliseconds so I am cutting it in half. But! In Internet Explorer 7 the script locks the browser window up. Even if I revert to the saved HTML and JS files the problem still persists. This problem also occurs if I set the duration higher than 1,000 milliseconds.
This also happens if I upload the files to the Internet. I was forced to redo the line in question and copy my saved SpryEffects.js over to my working directory. This unlocked the file in Internet Explorer 7. Any suggestions on how to get the quicker response time in Internet Explorer 7?
Question 2:
In Firefox I get a border around the button that enacts the Spry Effect. I set the text decoration to "none" for both of the IDs for the images. This thin line does not appear in Internet Explorer 7 or Safari 4.0.3. My version of Firefox is version 3.5.3.
The file can be viewed here.
Thank you in advance.I have also found that the Spry works better in FireFox than
IE7, when it comes to video
http://www.catholicmemphis.com/catholicmensconference.html
Check out this page and you will see that the Spry tabbed
menu stops the video in FireFox but not in Explorer. I have seen
this type of problem in a few forums, but know one gives an answer
to those looking for solutions.... -
Spry effects not recognizing classes
When adding a spry effect to an <img> element, it will pick up on ID's but not classes.
<style>
img.color {color:#fffff}
</style>
<body>
<img src="image.jpg" class="img.color" img />
</body>
In the spry effect dialogue, it will let me select the current img tag, but if i were to specify a second class
<style>
img.color {color:#fffff}
img.opacity {opacity:50}
</style>
<body>
<img src="image.jpg" class="img.color img.opacity" img />
</body>
then it wouldnt work because it can only recognize the current selection instead of the individual styles like i can do with an ID (which wont work for multiple styles as there can be only one id per element).It makes it very hard for us to know what you are trying to achieve without seeing some code hence I shall give you some code to work with
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<img src="header.jpg" onClick="MM_effectAppearFade(this, 1000, 100, 0, false)">
<script src="SpryAssets/SpryEffects.js"></script>
<script>
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});}
</script>
</body>
</html>
Just copy and paste the above code into a new document, make sure that you do have SpryEffects.js in the SpryAssets folder and try it out.
Gramps -
BUG report about Spry.Effect.Highlight
When the Spry.Effect.Highlight effect is not accomplished,
and click the trigger link, will report the error "startColor
undefined".Can you please elaborate? Which "trigger link" do you mean?
Are you using the Spry 1.4 release? -
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 static gallery combined with Spry Effect Observers
I have set up a Spry static gallery using the
demo
here.
I would like to add a cross fade for the main image using the
Spry Effect Observers shown at the bottom of
this
demo page.
I like the thumbnail grow effect used in the first demo and
like to add a cross fade for the main image when the thumbnail is
clicked. Have someone built such an example or can someone show me
how it is done? Typically I have 4 thumbnails/images per product
page.Mr. Andersson wrote:
> I thnik I know what's going on now...
>
> I tried Fireworks and it has a built in Slideshow
creator. The setting that
> dont use Flash uses Spry and looks like the Spry gallery
demo. The settings
> using Flash have cross fading images.
>
> From this I got the idea that Adobe maybe dont want us
to cross fade with
> Spry. They want to push Flash instead. It could explain
the total silence from
> Adobe in various threads where this question is asked.
This is a user to user forum, Adobe will never reply to you.
Also, Spry is still a pre-release framework, its nowhere near
finished.
Its the kind of framework where you take whats available and
make
something out of it, its very flexible if you know
javascript.
I am learning javascript just to understand the little bits
that I am
experimenting with, I think its the only way forward if you
intend to do
something outside the box.
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html -
Hello everyone,
I'm new to spry and know very little about ajax and java but
I'm eager to learn. I downloaded spry frameworks and I'm looking at
the demo effects page. I click on the fade one and it fades away
but fades back automatically. How can I set it so it wont fade back
until it is clicked again?
Thanks
-Chrisvar fadename = new Spry.Effect.Fade('idoffade',
{toggle:true}); -
Spry.Effect.GrowShrink crazy behaviour
Hi, I was wondering if someone could help me figure out why
when I pass the mouse over the thumbnails in my photo gallery, they
act all jumpy. I used the same effect as in the Spry demo photo
gallery yet they behave differently. My gallery is located here
http://www.fotosite.ca/temp/index.htm
my grow function looks like this (and shrink is similar)
function GrowThumbnail(img, from, to){
img.style.zIndex = 150;
img.style.borderStyle = 'solid';
img.style.borderWidth = '3px';
img.style.borderColor = '#ffff00';
Spry.Effect.GrowShrink(img, {duration: 500, from: from, to:
to ,toggle:false });
Thanks in advance for any help,Hi,
I see 2 problems:
1. The Grow/Shrink effect do not know to consider the margin,
border and padding so when you add these properties from the
JavaScript you'll have the weird behavior of images moving down and
right before animation start and then up and left when the mouse
leave.
We automatically include the 1px border in the thumbnail view
and we only change its color. You remove 2px from the border while
the mouse is not over the element and when you add them the effect
is really visible and disturbing. If you consider in keeping a such
big value for the border then you should keep it when the images
are not focused.
2. While you move the mouse over the thumbnails fast some of
the images will remain open. This is a bug that also reproduce in
our photo gallery too and I will look to fix it while the new Spry
will be released. The issue is basically generated by the fact you
are not using the toggle option while running the effect.
Cristian -
I am using the Grow/Shrink behavior from Spry Effects in
Dreamweaver. I am trying to grow an image from 20% to 100% but the
image appears in the browser at a 100% then when I click on it it
then appears at 100% and grows to 100%. Is it possible to get the
image to appear at 20% on the page and only grow when I click on
the image.gregmccarthy wrote:
> Thanks, that works beautifully. Kinda thought that was
what was needed but was not sure exactly how to do it - it is a
shame that how to books that you pay good money for don't explain
that.
As somebody who writes books, I can tell you why. My
"Essential Guide to
DW CS3" devotes about 250 pages to Spry, almost certainly
than any other
book on the market; but I don't include that technique. If I
tried to do
so, my 750 page book would probably be 7,500 pages long, and
would be
published a couple of years late.
One of the great things about web design is that you can do a
lot of
amazing things by experimenting. But you need to have a firm
grasp of
the basic technology to be able to do so. That's one of the
main things
you can learn from books. I had no idea how to create the
effect that
you wanted, but I did know how to apply a Spry effect. I sat
and thought
about the problem for about two minutes, tested my theory,
and was
delighted to discover that it worked. Devising new techniques
rarely
goes as quickly as that, but that's the challenge - and fun -
part of it.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/ -
Is there a way to use a spry effect to have a div (or image)
fade away and have it show the page underneath. For example, I have
a page where I want there to be a picture when you open the page. I
then want the picture to fade out automatically, and have my web
page (with navigation, etc) underneath of it show up. It seems that
when using spry effects however, the image will fade out, but it
doesn't fade to nothing. There is something there still blocking
the content underneath.
Any help at all would be greatly appreciated!Hi,
I've just reproduced your case and I have a solution for you.
After the effect finishes, you should made the image
invisible and in the same time to release the space occupied by the
image.
To do this, add into the effect constructor the option:
'finish:' that receives a function as parameter. On this function
you set for the image to become invisible after the effect finishes
by adding display:none.
The constructor should look like this:
var effect = new Spry.Effect.Fade('test', {duration: 3000,
from: 100, to: 0, finish:function(el,
eff){el.style.display='none';}});
The effect will be started onload.
Diana -
Spry Effects doesnt work with position:absolute CSS
HI guys,
I have a text with position: absolute; left: 20px; top: 10px;
to it and using Spry's Fade Effect, it just shows it without any
fade animation, any ideas why?
quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script src="assets/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="assets/SpryAssets/SpryData.js"
type="text/javascript"></script>
<link href="assets/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.TabbedPanelsContent {
background-color: #006699;
.cool {
background-color:#993366;
position:absolute;
left: 20px;
top: 10px;
-->
</style>
<script type="text/javascript">
<!--
function TabbedPanelsCycler(tp)
this.tp = tp;
this.timerID = 0;
this.interval = 5000; // Milliseconds
TabbedPanelsCycler.prototype.start = function()
this.stop();
var self = this;
this.timerID = setTimeout(function() { self.next(); },
this.interval);
TabbedPanelsCycler.prototype.stop = function()
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
TabbedPanelsCycler.prototype.next = function()
var tp = this.tp;
Spry.Effect.DoFade('Content' + (tp.getCurrentTabIndex()+1) %
tp.getTabbedPanelCount(), {duration: 1000, from: 100, to: 0,
toggle: false, finish: function(){
var el = document.getElementById('Content' +
((tp.getCurrentTabIndex() + 1) % tp.getTabbedPanelCount()));
tp.showPanel((tp.getCurrentTabIndex()+1) %
tp.getTabbedPanelCount()); // 1, 2, 3, 4, 0 ... loop
Spry.Effect.DoFade('Content' + (tp.getCurrentTabIndex() + 1)
% tp.getTabbedPanelCount(), {duration: 1000, from: 0, to: 100,
toggle: false});
if (this.timerID)
this.start();
TabbedPanelsCycler.prototype.previous = function()
var tp = this.tp;
var curIndex = tp.getCurrentTabIndex();
tp.showPanel(((curIndex < 1) ? tp.getTabbedPanelCount() :
curIndex) - 1);
if (this.timerID)
this.start();
function MM_effectAppearFade(targetElement, duration, from,
to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from:
from, to: to, toggle: toggle});
var dsFeaturebox1 = new
Spry.Data.XMLDataSet("assets/xml/featurebox_data.xml",
"featurebox/feature1");
//-->
</script>
</head>
<body onload="cycler.start();">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('Content1', 1000, 0, 100, false)"
tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('Content0', 1000, 0, 100, false)"
tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="Content1">
<div>Normal text here</div>
</div>
<div class="TabbedPanelsContent" id="Content0"
spry:detailregion="dsFeaturebox1">
<div class="cool">{XML text here}</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var tp1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var cycler = new TabbedPanelsCycler(tp1);
//-->
</script>
</body>
</html>
Thanks,
JHi guys,
I just would like to know why adding position: absolute on my
css would stop the Spry Effects from doing its job? Thanks! -
OnError event passed to Observer in Spry.Effect in IE
Hi ,
I have this issue that I have already spent 2 days on it and desperately need help from experts here.
I have two data sources ds3 and ds4 (div id="news"). (master detail regions). On click on ds3 row I fire a javascript function "fadeOutContent(rowID,rowNum)". Code is given below:
<script>
var gEffectInProgress = null;
var gPendingSetRowIDRequest = -1;
function fadeInContent(notificationType, notifier, data)
alert(" notificationType " + notificationType);
if (notificationType != "onPostUpdate")
return;
var effect = new Spry.Effect.Fade('news', { to: 100, from: 0, duration: 2000, finish: function() {
// The region is now showing. Process any pending row change request.
gEffectInProgress = null;
if (gPendingSetRowIDRequest >= 0)
alert(" see if this causes the error");
var id = gPendingSetRowIDRequest;
gPendingSetRowIDRequest = -1;
fadeOutContent(id);
alert("starting the effect ");
effect.start();
Spry.Data.Region.addObserver('news', fadeInContent);
function fadeOutContent(rowID,rowNum)
// If we have an effect already in progress, don't do anything
// We'll set the rowID when we're done.
alert(" gEffectInProgress " + gEffectInProgress);
if (gEffectInProgress)
gPendingSetRowIDRequest = rowID;
return;
// If the correct row is already showing, don't do anything!
if (rowNum == ds3.getCurrentRowNumber())
return;
gEffectInProgress = new Spry.Effect.Fade('news', { to: 0, from: 100, duration: 2000,finish: function() {
ds3.setCurrentRow(rowID);
alert("Currne tRow updated in ds3" + rowID);
gEffectInProgress.start();
</script>
Div for spry regions are as below:
<div class="rows" spry:region="ds3">
<div class="rowOdd" spry:repeat="ds3" spry:odd="rowOdd" spry:even="rowEven" spry:hover="mouseOver" spry:select="selected">
<div onclick="fadeOutContent('{ds_RowID}','{ds_RowNumber}');">{NewsLine}</div>
</div>
</div>
<div id="news" spry:region="ds4" style="margin-top:20px">
<p>{NewsPage}</p>
</div>
PROBLEM:
On first row everything works fine. On clicking on second row function fadeOutContent line ds3.setCurrentRow(rowID); causes on onError event passed to Observer, as a result fadeInContent function returns without doing any Fading.
Please help with any information that can provide possible solution to this.
ALL WORKS WELL IN FF. P.S. My site is on localhost. So can not share a link.
ThanksSorry, I am working on localhost so far.
-
Spry.Effect.Slide - cannot set initial state.
I have 3 div elements using the Spry.Effect.Slide effect. I
use CSS to close 2 elements and leave 1 element open. It works fine
in Firefox. But in IE7 when the hidden elements slide down to show,
its still display of none!! In firefox, the elements are displayed
fine when the slide effect is started. Below is my code.
Is there another simple approach that will work in IE7?
<style>
#menuGroupAboutCompany { display:none; }
#menuGroupAboutProducts {}
#menuGroupMoreMatchpoint { display:none; }
</style>
<script type="text/javascript">
var menuGroupAboutCompany_toggle = new
Spry.Effect.Slide('menuGroupAboutCompany', {duration:500, from:
'0%', to: '100%', toggle:true,
setup:menuGroupInit('menuGroupAboutCompany') });
var menuGroupAboutProducts_toggle = new
Spry.Effect.Slide('menuGroupAboutProducts', {duration:500,
toggle:true});
var menuGroupMoreMatchpoint_toggle = new
Spry.Effect.Slide('menuGroupMoreMatchpoint', {duration:500, from:
'0%', to: '100%', toggle:true, setup:menuGroupInit});
</script>Sorry, previous code posting had some other code I was
experimenting with. This is the current code that works in Firefox.
<style>
#menuGroupAboutCompany { display:none; }
#menuGroupAboutProducts {}
#menuGroupMoreMatchpoint { display:none; }
</style>
<script type="text/javascript">
var menuGroupAboutCompany_toggle = new
Spry.Effect.Slide('menuGroupAboutCompany', {duration:500, from:
'0%', to: '100%', toggle:true});
var menuGroupAboutProducts_toggle = new
Spry.Effect.Slide('menuGroupAboutProducts', {duration:500,
toggle:true});
var menuGroupMoreMatchpoint_toggle = new
Spry.Effect.Slide('menuGroupMoreMatchpoint', {duration:500, from:
'0%', to: '100%', toggle:true});
</script> -
I've come across a little hiccup when using a Spry Effect inside an Accordion. I am creating a survey page with one question per accordion tab. Some of these questions have sub-questions based on a yes or no answer.
I was able to use an onclick with a radio button to open a Spry Effect that will display more questions. The problem is that these questions are normally hidden and when the accordion renders it passes over the hidden content and ignores it when it is time for the onclick event to display them.
I was able to get it to work with one set by making the accordion open to that tab by default first (which renders the content) and then hides the sub-questions. The Spry Effect then calls a javascript function to open the fist accordion tab using the setup trigger.
But this doesn't seem to work for multiple Spry Effects on different tabs... am I missing something?
I have a demo page here (click "yes" on question 3) -- http://tv.swirelive.com/survey/demo_survey.phpOk. I figured it out. I had to define the Spry Effects first and then the Accordion last.
-
Spry effect "slide" won't reappear
Hello DW users, I recently made and uploaded a simple HTML
page to test out spry effects on text and images. If you view the
page at
http://student.santarosa.edu/~dnorth/hmwk1.html
you can see what I'm talking about. Everything works fine except
for the "slide" effect. It is set to toggle in its dialogue box,
but doesn't work like i expected it to. When you click on it, it
slides away and disappears. When I click back in the same area, it
doesn't reappear as I expected it to. I can only get it to come
back if I hit the page refresh button. any suggestions?? Thanks,
Deborah NorthJust so you'll know, it never makes sense to remove a valid
and complete
doctype.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"dnorth" <[email protected]> wrote in
message
news:fne0qe$kqn$[email protected]..
> Hi Teresa, thanks for the info. I've been working on it
and I got the
> slide
> effect to work only while linking it from a text link,
not directly from
> the
> image itself. It still has problems as you can see if
you go back to the
> link.
> I'm wondering if the slide effect has some bugs to make
it work in this
> manner.
> Maybe I need a hack. I tried removing the Doc Type as
you suggested, but
> that
> still didn't fix things. Who knows. I really appreciate
your time and
> suggestions on this problem. Please go back to the page
and hit refresh if
> you
> have the time.
http://student.santarosa.edu/~dnorth/hmwk1.html
>
> Thanks again, Deborah
>
Maybe you are looking for
-
How can I get my App Store sign in to match my newly updated Apple ID?
How can I get my App Store sign in to match my newly updated Apple ID? The old ID is already grayed in the box for my ID and it does not allow me to type in my new ID.
-
Java thread WAIT(400).. using NetBeans 6.0
Hi everyone, can someone please help me! Im trying to make something look like a 'loading' bar but I cant get this to wait(200)... like for ex: I want to ProgressBar1, to load up like 10% and then wait 4 seconds, and load up to 40% but Im not sure ho
-
Where should I put ADFS at?
Hi everyone, Hope you can help. I have no experience in installing or setting up adfs..but we just need it now for one project that antoher vendor need to access to our AD. I can find some instructions in how to setup adfs...very easy to follow. But
-
Cmos settings are lost when unplugged
Every time my computer is unplugged the cmos settings are gone when I restart. It's been like this since I got it 2 weeks ago. I thought flashing the bios with the latest version might help but it didn't. The battery voltage is 3.504V.
-
Hello Guys. I am new to Class programming in SAP -ABAP. I have knowledge of Classes in C++. Can some one send me following Material to improve my knowledge. 1. Study Material on Classs and development. 2. Sample program for creating ALV with Class.