This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

I have a web page with Flip and Grow built in Dreamweaver that quit working after upgrade? How can I get help with this?

  • 5 replies
  • 1 has this problem
  • 10 views
  • Last reply by juliebacon

more options

My company (Rite in the Rain) has a web page that quit working properly after the upgrade. The "flip" action and the "grow" action now malfunctions. The flip action is an extension from DMXzone. It works in safari, rockmelt, chrome, and ie. Here is the link to our problem web page:

http://www.riteintherain.com/static.asp?htmltemplate=coolstories.html

Any information you have would be greatly be appreciated!

Marketing Department Rite in the Rain (Email removed by mod)

My company (Rite in the Rain) has a web page that quit working properly after the upgrade. The "flip" action and the "grow" action now malfunctions. The flip action is an extension from DMXzone. It works in safari, rockmelt, chrome, and ie. Here is the link to our problem web page: http://www.riteintherain.com/static.asp?htmltemplate=coolstories.html Any information you have would be greatly be appreciated! Marketing Department Rite in the Rain (Email removed by mod)

Modified by user633449

All Replies (5)

more options

The error console is not happy with the way the script is changing the transform property, but I'm not sure of the exact objection.

MDN page on transform: https://developer.mozilla.org/en-US/docs/CSS/transform

I notice that the HTML has a lot of nesting. For example:

<br /><br />
<div>
  <div>  
  </div>
  <div><img src="images/site/coolstories/Coolstories_167front.png" style="position:absolute;TOP:1175px;LEFT:320px"alt="" width="270" height="405" border="0" usemap="#MapMap9" 
 onclick="flip(this, 28, 'images/site/coolstories/Coolstories_167back.png', 0.8, 'swing');MM_effectGrowShrink(this, 1000, '100%', '150%', true, false, false)" />
    <map name="MapMap9" id="MapMap9">
    <area shape="rect" coords="38,475,380,599" href="http://www.riteintherain.com/inventory.asp?CatId=%7B950DADEB-D1CC-43F4-A927-59D5A4850499%7D" target="_parent" />
    </map>
  </div>
<br /><br />

Note that the opening <div> isn't closed, so the images nest deeper and deeper. Not sure whether this is affecting the script, but it probably doesn't help.

Modified by jscher2000 - Support Volunteer

more options

I also see some errors in the web console;

FB.getLoginStatus() called before calling FB.init().
SyntaxError: syntax error @ http://www.riteintherain.com/WEB%20FORM%20TESTING/Coolstories%206-25/ScriptLibrary/jquery-latest.pack.js:1
(caused by missing files: 404 — PAGE NOT FOUND) TypeError: document.getElementById(...) is null @ http://www.riteintherain.com/static.asp?htmltemplate=coolstories.html:425

Firefox also complains about missing spaces between attributes in the image tags that show red in the page source.
You can hover such a red text to see a tooltip about that error (i.e. Stray start tag "div")

more options

Thank you so much for the responses but I have taken the file down to the bare bones and the transform will not work. I think the problem might be in the script below?

<script type="text/javascript">
function flip(context, flags, backsrc, dur, easing, onend, onflip) {//v1.0
var $=jQuery,jc=$(context),f=flags,bs=$.trim(String(backsrc)),pf=parseFloat;if((
/\.(jpe?g|gif|pnga?)(\?.*)?$/i).test(bs))new Image().src=bs;jc.each(function(i,o
){var jo=$(o);if((f&32)&&jo.is(":animated"))return true;jo.stop(true,true);var c
={},r=/^[^\d\-\.\+]*/,x=pf(jo.css("scaleX").replace(r,"")),y=pf(jo.css("scaleY")
.replace(r,"")),a=180,bst;if(f&2){if(f&8)c.skewX=a*(y<1?0:1);c.scaleY=y*-1;}else
if(f&4){if(f&8)c.skewY=a*(x<1?0:1);c.scaleX=x*-1;}if(jo.is("img")){if(bs&&bs!=(o
.origsrc||jo.attr("src")))bst="img";}else try{bs=$(bs);if(bs.length>0){jo.width(
jo.width()).height(jo.height()).css({overflow:"auto"});bst="html";bs=bs.html();}
}catch(e){}if(bst){this.backsrc=bs;this.origsrc=!!this.origsrc?this.origsrc:bst
=="img"?jo.attr("src"):jo.html();this.front=!!this.front;}var sw=0;jo.animate(c,
{duration:(dur||.8)*1000,easing:easing,complete:onend,step:function(n,z){var el=
z.elem;if(z.prop=="scaleX"||z.prop=="scaleY"){if(z.state==1||z.state==0)sw=0;else
if(!sw){if(z.start>0&&z.end<0&&z.now<0){o.front=0;sw=1;if(f&16)jo.css("matrix",f&
4?[-1,0,0,1,0,0]:[1,0,0,-1,0,0]);if($.isFunction(onflip))onflip.call(o,"toback");
}if(z.start<0&&z.end>0&&z.now>0){o.front=1;sw=true;if(f&16)jo.css("matrix",[1,0,0
,1,0,0]);if($.isFunction(onflip))onflip.call(o,"tofront");}if(bst&&sw){if(bst==
"img")o.src=o.front?o.origsrc:o.backsrc;else jo.html(o.front?o.origsrc:o.backsrc);
}}}}});});}
</script>

Modified by cor-el

more options

There is a bug introduced in Firefox 18 affecting transforms and fixed position elements that is targeted to be fixed in Firefox 21: https://bugzilla.mozilla.org/show_bug.cgi?id=827577. Although you are not setting position fixed in your CSS, the scripts seem to use position:fixed at some points (it would take hours for me to really understand them, however). I'm not sure how you would test this possibility; I think you would need to install a current "nightly" version of Firefox. I also don't know whether there is a temporary patch for this that you could make to your script.

more options

Yes, I did use a fixed positions for the cards. This might explain the problem! I am now very anxious for Firefox 21. In the meantime I guess I will have to rebuild the page and look for a compatible solution. Thanks again!