FreewayTalk

36 replies to this thread. Most Recent

JDW

18 Apr 2013, 7:34 am

[Pro] SVG Image Action -- Suppress ActiveX Warning

In my quest to make parts of my site look better on Retina displays, I’ve found that a splattering of SVG graphics works well. The SVG Image action includes GIF or JPEG fallback for older versions of IE that don’t support SVG, while all other browsers get to enjoy the SVG graphic. But alas, I’m finding that IE8 coughs up an ActiveX warning and beeps on every single page that I have used the SVG Image action. (I’ve read that such was introduced in SP2 on WinXP.)

I want to suppress that warning! But the question is how.

My thinking was to use Conditional Statements like the following (where “Dshock” is the name of my graphics box in Freeway, and “052_Dshock.svg” is the name of my SVG graphic):

<!--[if !IE ]>
    <div id="Dshock" style="position:absolute; left:452px; top:73px; width:61px; height:75px; z-index:15">
    <object type="image/svg+xml" data="052_Dshock.svg"></object>
</div>
<![endif]-->
<!--[if lt IE 9]>
    <div id="Dshock" style="position:absolute; left:452px; top:73px; width:61px; height:75px; z-index:15">
    <img src="dshock.gif" border=0 width=61 height=75 alt="" style="float:left" title="">
    </div>
<![endif]-->
<!--[if gte IE 9]>
    <div id="Dshock" style="position:absolute; left:452px; top:73px; width:61px; height:75px; z-index:15">
    <object type="image/svg+xml" data="052_Dshock.svg"></object>
</div>
<![endif]-->

In the above code, the first condition is for all browsers other than IE. The second condition is for IE versions 6/7/8. And the third condition would be for IE9/10, both of which support the native display of SVG. But when I hand-edit my web page to include those 3 conditional statements, the fallback graphics display in IE6/7/8 just fine but nothing at all displays in Chrome or Firefox or Safari or IE9/10.

So clearly I do not understand how to implement IE conditional statements.

All I want to do is suppress the stupid ActiveX Warning in IE8 (or lower). Does anyone have an idea on how to accomplish that feat?

Thanks,

James Wages

DeltaDave

18 Apr 2013, 8:45 am
<!--[if lt IE 9]>

Means for Internet Explorer lower or equal to 9

So to target 8 and below you want

<!--[if lt IE 8]>

Similarly

<!--[if gte IE 9]>

Means greater than or equal to IE9 - so in your example you have contradictory statements.

Personally I think I would use a class attribute and do it in a Style block in before </Head> keeping the layout code separate from the style code.

Something like

<!--[if lt IE 8]>
<style type="text/css">
    #Dshock {
background-image:url(Resources/dshock.gif);
background-repeat:no-repeat;
background-position:center;
}
</style>
<![endif]-->

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

DeltaDave

18 Apr 2013, 8:50 am

Sorry James - just re-read your post and realised I read it wrong!

You were correct to write

<!--[if lt IE 9]>

Meaning less than 9

But the rest of my post stands

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

JDW

19 Apr 2013, 2:39 am

Dave, I obviously don’t want to hack the SVG Image Action, nor do I wish to use Source Code Snooper to hack every single one of my web pages. So your suggestion of using “a Style block in before </Head>” is sound. However, if I cannot even get the line Conditional Statements to kill the stupid IE8 ActiveX warning, I don’t see how I can expect to get the same code to function in Style Block form.

My point is that the code I have right now should work, in theory. But in reality it isn’t working in any of the modern browsers. That’s the problem.

—James Wages

JDW

22 Apr 2013, 1:16 am

Would anyone else care to comment?

Where there’s a will, there’s a way. I have the will. I just haven’t found the way.

Thanks,

James Wages

DeltaDave

22 Apr 2013, 9:05 pm

My point is that you are trying to change the Html structure of your page with conditionals whereas mine only alters style declarations.

I know that altering styles in this way works but I dont know if your method is valid or not.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

JDW

22 Apr 2013, 9:36 pm

My method is not valid insofar as it doesn’t work!

I’ve tried a lot of things, but the only thing that keeps IE 8 from displaying that stupid active text message is to completely hide any reference to the SVG from IE8. My code accomplishes that task, hiding the SVG from IE8, but the problem is that IE9 and IE10 and Firefox and Chrome and all modern browsers are refusing to display the SVG. In fact, the modern browsers dispkay nothing at all, except a big gaping hole in my web page.

All I want to do is prevent IE 8 from beeping at users and displaying that stupid active X warning message at the top of the browser window, only because it chokes on seeing an SVG on the page.

DeltaDave

22 Apr 2013, 9:39 pm

Can you share a link so that I can try with IE8

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

JDW

22 Apr 2013, 9:58 pm

I’m at home on my iPad right now, and I need to leave for the office, but what I can say is that any page with an SVG on it will result in the IE8 ActiveX error message and beep. I forget which of my test web pages have the IE conditional statements on it (I’ll have to check that when I get to the office), but here is one page on my site that has an SVG:

http://visionsecurity.jp/en/test/sensors/318_052.html

In researching the subject, I found that some other people experienced the beep and error message in IE 7 too, but I am not saying that IE 7. I am only saying it and IE8. Other people are saying that the browser settings have something to do with it, but I cannot expect all of my web visitors to alter their browser settings only to prevent this beep an error message from displaying. I want to be able to suppress the error, without having the user to change any settings.

Thanks.

DeltaDave

22 Apr 2013, 10:09 pm

Not getting it on that page.

I will try again later with any other links you can provide.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

JDW

23 Apr 2013, 12:31 am

If you don’t get the stupid ActiveX warning message and beep on that page in my site, you won’t get it on any page. On my WinXP PC running IE8, I get it on any page (from any site) which has an SVG on it.

I could make a video to show you, but suffice it to say, what I’ve told you is true.

waltd

23 Apr 2013, 12:32 am

While you guys have your IEs warmed up, try this page, which is a cut-down test page with nothing except a single SVG embedded on it.

http://scripty.walterdavisstudio.com/svg.html

See if you get the error there. This is an HTML5 page with no styles or script or anything, just the standard HTML5 “shiv” for IE. Just to get a baseline for what IE will tolerate.

The “beep” I believe may be a leftover from the EOLAS patent, so the solution may be to inject the SVG into the page with JavaScript, just as we used to do with QuickTime back in the day (when IE 8 was a valid and current browser). The EOLAS settlement was thrown out or expired or something — I recall that IE no longer requires you to inject QuickTime objects with JavaScript, but I don’t recall at what version that started being possible.

Walter

On Apr 22, 2013, at 6:09 PM, DeltaDave wrote:

Not getting it on that page.

I will try again later with any other links you can provide.

D

Freeway user since 1997

http://www.walterdavisstudio.com

JDW

23 Apr 2013, 1:00 am

Here’s a screen shot of the message/error that appears when I try to open your page, Walter:

http://kiramek.com/21test95/walters_svg_IE8_warning.png

There is a beep sound too. I would have made a video of that, but I know about your slow net connection. You need Google Fiber! :-)

Anyway, that Japanese basically just says:

“On this website you need Adobe Systems ‘SVG Viewer 3.0 for Netscape’ add-on. For more info on add-ons click here…”

The mention of “Netscape” in IE8 is hilarious!

waltd

23 Apr 2013, 1:20 am

Google to the rescue (literally — they developed this library): http://code.google.com/p/svgweb/downloads/detail?name=svgweb-2011-02-03-Lurker-Above.zip

The same page re-worked to include this library:

http://scripty.walterdavisstudio.com/svg/

Walter

PS: Do go back to look at the original link — I realized while making this demo that I had neglected to upload the png and SVG graphics along with the HTML, so that wasn’t a fair test. See if there is anything working when you visit the original version too.

On Apr 22, 2013, at 9:00 PM, JDW wrote:

Here’s a screen shot of the message/error that appears when I try to open your page, Walter:

http://kiramek.com/21test95/walters_svg_IE8_warning.png

There is a beep sound too. I would have made a video of that, but I know about your slow net connection. You need Google Fiber! :-)

Anyway, that Japanese basically just says:

“On this website you need Adobe Systems ‘SVG Viewer 3.0 for Netscape’ add-on. For more info on add-ons click here…”

The mention of “Netscape” in IE8 is hilarious!

Freeway user since 1997

http://www.walterdavisstudio.com

DeltaDave

23 Apr 2013, 1:26 am

I am using IE8 but with Win7 so it may not be a fair representation of your visitors’ systems James.

However I get no errors on either of Walter’s pages either.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

JDW

23 Apr 2013, 1:27 am

After your change, Walter…

The GOOD: Your SVG now displays!

The BAD: The stupid BEEP & Warning still appear.

The very existence of an SVG is causing the Beep and Warning. I am just curious how to suppress that Beep and Warning, even if it means using a technique that will not display the SVG at all, using a fallback GIF image instead. I thought my conditional statements would do that, but they end up displaying the fallback in IE8 (and suppress the Beep and Warning), but all newer browsers get nothing… nada… el zippo.

JDW

23 Apr 2013, 1:36 am

I’m quite certain you have to be using WindowsXP, Dave.

Sadly, a huge number of our web visitors here in Japan are still using XP. They heard about how bad Vista was so they didn’t upgrade then. Then Win7 came out and they asked themselves what they would gain by switching. Then they learned that most of their Japanese proprietary software wouldn’t work right on 7, so they stayed with XP. Then Win8 came out and all the bad press has made it another Vista.

Heck, I think the Japanese will still be using XP 10 years from now. It’s really scary here. I do all I can to get these people mental help by moving them to the Mac. Works great on end users, but business folks are hard nuts to crack. Too much proprietary business software here that only works in XP (at least, the software vendors only support XP).

So it’s not a matter of me living in the past. It’s a matter of me having to endure pain and suffering to ensure our site is viewable and without unnecessary beeping and warnings for our primary viewer base.

Any further thoughts you gentlemen may have would be greatly appreciated.

DeltaDave

23 Apr 2013, 1:40 am

I still think that my method of doing the conditionals is the way to go - however it is really late here and I do not have time to make a test page.

If i get some time tomorrow I will give it a go.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

waltd

23 Apr 2013, 2:02 am

See if your beeping will stop with this one:

http://scripty.walterdavisstudio.com/svg/js.html

I’m using a simple Prototype script (inside a conditional comment) to look for any object tags that contain embedded images and replace the object with the image. I don’t have IE 8 running here, so I can’t test it right now, but your day is just getting going there, so I figure you have a chance. View source, it’s all inline code.

Walter

On Apr 22, 2013, at 9:26 PM, DeltaDave wrote:

I am using IE8 but with Win7 so it may not be a fair representation of your visitors’ systems James.

However I get no errors on either of Walter’s pages either.

D

Freeway user since 1997

http://www.walterdavisstudio.com

JDW

23 Apr 2013, 2:21 am

Nope. IE8 on WinXP gives be the annoying “be-deep” sound and warning message.

waltd

23 Apr 2013, 2:59 am

Try again now. This is probably the only thing that could work on that wretched excuse for a browser. We end up punishing all other browsers just to pacify its childish tantrums. The script is now an inversion of the previous approach — standard browsers use JavaScript-injected SVG, and IE sees a static-coded PNG.

Walter

On Apr 22, 2013, at 10:21 PM, JDW wrote:

Nope. IE8 on WinXP gives be the annoying “be-deep” sound and warning message.

Freeway user since 1997

http://www.walterdavisstudio.com

JDW

23 Apr 2013, 3:08 am

May you live to be one thousand years old, Walter!

It works!

The graphic displays and there’s no more beep or warning!

So what specific code block should I copy/paste into Protaculous2 (or page Markup) to work this wonderful magic?

waltd

23 Apr 2013, 3:43 am

I just revved the SVG image action to support this trick.

Walter

On Apr 22, 2013, at 11:08 PM, JDW wrote:

May you live to be one thousand years old, Walter!

It works!

The graphic displays and there’s no more beep or warning!

So what specific code block should I copy/paste into Protaculous2 (or page Markup) to work this wonderful magic?

Freeway user since 1997

http://www.walterdavisstudio.com

JDW

23 Apr 2013, 4:25 am

In that case I should rephrase to say “two thousand years old!”

I just finished testing in IE7/8/9/10, FF (Mac & Win), Chrome (Mac & Win) and Safari (Mac). Your revised Action works great!

Here’s the download page for those of you following this: http://actionsforge.com/actions/view/295-svgimage

Thank you, Walter!

DeltaDave

23 Apr 2013, 7:05 am

The graphic displays and there’s no more beep or warning!

I cant compete with an action for ease of use so no point in trying the conditional styling route.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

DA

21 Aug 2013, 12:35 am

Hey JDW, I’m new here. Happened across this thread looking for something else. Glad you found a workaround. However, I wanted to point out that your syntax for non-IE browsers in the original post is incorrect and is at least part of the reason for the conditional failure. You left out an additional “—>” and “Lorem Ipsum<!--

For IE browser versions: <!--[if IE]>Lorem Ipsum<![endif]-->

DA

21 Aug 2013, 12:41 am

Wow. That’s funny. When I posted, my correction was removed from my entry. Hopefully, it will show up below with quotes.

“For non-IE browsers: <!--[if !IE]> -->Lorem Ipsum<!--

For IE browser versions: <!--[if IE]>Lorem Ipsum<![endif]-->“

waltd

21 Aug 2013, 12:43 am

This is a mailing list. There is no sort of correction possible once an e-mail has been sent.

Walter

On Aug 20, 2013, at 8:40 PM, DA wrote:

Wow. That’s funny. When I posted, my correction was removed from my entry. Hopefully, it will show up below with quotes.

“For non-IE browsers: <!--[if !IE]> -->Lorem Ipsum<!--

For IE browser versions: <!--[if IE]>Lorem Ipsum<![endif]-->“

Freeway user since 1997

http://www.walterdavisstudio.com

DA

21 Aug 2013, 12:45 am

OK. A little better. Didn’t show all of what I wanted however. Last time for non IE browsers. Ignore quotes and parentheses. “(<!--[if !IE]> -->Lorem Ipsum<!--

DA

21 Aug 2013, 12:50 am

OK. I give up. Just look it for appropriate non-IE syntax. Basically, it’s the same as the for IE browser syntax, but with the addition of —> as the last part of the start/opening tag. And as the first part of the end/closing tag, you add <!—

DA

21 Aug 2013, 12:52 am

It worked. That is not an em-dash, by the way. Should be “—>” and “<!—”

DeltaDave

21 Aug 2013, 12:56 am

OK. I give up.

If you want to post some code on a new line put 4 tildes in a row ~~~~

Then your code

a new line and four more tildes ~~~~

Then your code

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

DA

21 Aug 2013, 1:32 am

OK. Thank you for the for the instructions, David. Sorry to blow-up folks email boxes; didn’t realize it was a list-serve.

Unfortunately, the preview of this post shows that despite the 4 tildes, the code stops displaying right after …IpsumLorem Ipsum<!--

Just to show you that I used the tildes correctly.  I'm posting this gibberish where the code I entered should be showing.  Even above, I simply wrote "...Ipsum<exclamation><dash><dash>." not "...IpsumLorem Ipsum<exclamation><dash><dash>."

See. I feel like I’m in the twilight zone. Some odd background editing is occurring. I’m sure there’s a pattern. It doesn’t like the ankle bracket before .

OK. Enough. Till next time.

Donald

JDW

21 Aug 2013, 1:43 am

I’m totally confused by all these posts today. What specifically is wrong with the code I use on my sites?

For example, here’s the top page in one of my sites:

view-source:http://visionsecurity.jp/en/

Do a keyword search in that HTML for “lte” to see all the instances where I use conditional statements. Now offer me your feedback on that.

Thanks,

James W.

DA

21 Aug 2013, 2:09 am

That code looks fine. However, in your post above, it’s the code that affects all other browsers (and IE9/10, in this case) that is incorrect. So that it shows up below, I will selectively use a “b” for ankle bracket, “x” for exclamation point, and “d” for dash, where the code should differ. Ignore the quotes but be sure to include the spacing exactly as below. The ankle brackets point inward toward Lorem Ipsum.

<!--[if !IE]> "ddxb"Lorem Ipsum"bxdd" <![endif]-->

<!--[if IE]>Lorem Ipsum<![endif]-->

So taking your example at the beginning, it should be:

<!--[if !IE ]> "ddxb"
    <div id="Dshock" style="position:absolute; left:452px; top:73px; width:61px; height:75px; z-index:15">
    <object type="image/svg+xml" data="052_Dshock.svg"></object>
</div>
"bxdd" <![endif]-->

Hope that helps. It’s confusing, I know.

Donald

JDW

21 Aug 2013, 2:15 am

I think I gave up on doing conditional statements for use on pages where I used the SVG action because it was too much manual labor for me. You can see the HTML of the page you refer to here:

view-source:http://visionsecurity.jp/en/sensors/318_052.html

And you can see the SVG graphics in all their glory on that page here:

http://visionsecurity.jp/en/sensors/318_052.html

Best,

James W.

Back to Top

DA

21 Aug 2013, 2:20 am

Nice. Your site looks good. Glad you’ve found success. Cheers!

Donald