Menu icon Foundation

My Posts

No Content

My Comments

Just Forms commented on Warren Kingston's post about 5 years

Lyn and Wing,

Thank you, I will test/try things out and post back what worked.

Enjoy the remainder of your weekend.

Just Forms commented on Warren Kingston's post about 5 years

Wing,

First and foremost THANK YOU!

Second, such a thorough answer is going to be helpful to a lot of people. I'm seeing the icon issue showing in several threads on the Foundation's forums as well as some places over in stackoverflow.

I wish older Android and other older mobile OSs did not need support... wishful thinking but it looks like they still have a big chunk of the market. It is good for me to learn anyways, so no real complaints on my part.

I am using Mondernizr and jQuery. If I am understanding your 3 line script correctly I would need a unique instance of the script for each respective PNG fallback. Is that correct?

 if(!Modernizr.svg) {
  $('.yourMenuIconClass').attr('src', 'url/to/your/PNG/image_fallback_01.png');
}

 if(!Modernizr.svg) {
  $('.yourMenuIconClass').attr('src', 'url/to/your/PNG/image_fallback_02.png');
}
/* this would continue for each SVG graphic that needs a PNG fallback */

If I am understanding Todd's approach correctly, it seems to make a global change through javascript to replace any image ending with SVG with PNG if there is any errors with loading the SVG. Keeps it neat and short and I won't have to create new instances of the 3 line script for any new/future SVGs added to the website. Yes/No? Like I said I'm learning so any guidance is very much appreciated.

You don't work for ZURB?! WOW! as I was researching this problem you have been all over the forums and the git pages helping people... again THANK YOU! You are being very gracious with your time and expertise. ZURB should be paying you!

All the Best.

Just Forms commented on Warren Kingston's post about 5 years

Sorry, the code got stripped from my last post - Here is the inline code for the SVG/PNG fallback

<a href="#"><img src="./images/image_graphic.svg" onerror="this.onerror=null; this.src='./images/image_graphic.png'" alt="Alt Text Goes Here"></a>

I this helps someone else.

Just Forms commented on Warren Kingston's post about 5 years

Wing,

Thank you very much for your speedy reply.

Unfortunately site analytics for my friend's website show that he has quite a few older android devices still accessing it. I am trying to get things to gracefully degrade. As I said I'm a noob and I'm just starting to read about progressive enhancement... next time I will look into this approach.

With Android v2.3.6, on an actual device not with an emulator (live dev tools for chrome etc.) -
Foundation's home page (http://foundation.zurb.com/) - The menu-icon shows up
Foundation's doc page for Off Canvas (http://foundation.zurb.com/docs/components/offcanvas.html) - The menu-icon does not shows up

I need to look at the code to see what is different between the two. Once I figure it out I will post back my findings. Hopefully this will help someone else out.

Since SVG/PNG fallback is the solution/fix here is what I have done (It may help another person who is just learning all of this - like me).

I have a png fallback for other SVG graphics on the page. Although it is more inline (not as clean and I think will be a maintenance nightmare - If I were to need to change out images/graphics). currently I'm using this inline approach:

I'm thinking something more like the solution by Todd Motto would work better (less inline markup): http://toddmotto.com/revisiting-svg-workflow-for-performance-and-progressive-development-with-transparent-data-uris/

You are one of the gurus over at Zurb, do you have a better approach to a SVG/PNG fallback?

As for the scrolling issues for older mobile devices I will create a new topic/post in the forums as you suggested.

Thank you again Wing, I hope you have a great weekend.

Just Forms commented on Warren Kingston's post about 5 years

I can confirm that the menu-icon is NOT showing up with Android v2.3.6 - Samsung SPH-D700. I am using Foundation v5.3.0.

I looked at Warren's site, Zurb's Doc page as well as our dev page, none of them are successful with showing the menu-icon on Android v2.3.6:
http://www.maggiewaltersartwork.co.uk/testpage.html
http://foundation.zurb.com/docs/components/offcanvas.html

I've read through the various articles in the forums as well as:

https://github.com/zurb/foundation/pull/5268
https://github.com/zurb/foundation/issues/5199

None of the "fixes" are working:
http://foundation.zurb.com/forum/posts/2458-menu-icon-off-side-of-screen

Should I be trying to create a PNG fallback?

I wish I could contribute to a solution but I am a noob to say the least.


Wing-Hou - on the off chance you reply, I'm also trying to support scrolling
with the older mobile phone devices as well. I'm looking into:
iScroll - http://cubiq.org/iscroll-5
Overthrow - http://filamentgroup.com/lab/overthrow.html
or possibly with - http://filamentgroup.com/lab/a-different-approach-to-qualifying-css-position-fixed.html

I know it is off-topic but any suggestions for a better solution (or confirmation that one of these is a better approach than the other) would be greatly appreciated.

Thank you in advance for any help you may provide.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Warren Kingston's post about 5 years

Lyn and Wing,

Thank you, I will test/try things out and post back what worked.

Enjoy the remainder of your weekend.

You commented on Warren Kingston's post about 5 years

Wing,

First and foremost THANK YOU!

Second, such a thorough answer is going to be helpful to a lot of people. I'm seeing the icon issue showing in several threads on the Foundation's forums as well as some places over in stackoverflow.

I wish older Android and other older mobile OSs did not need support... wishful thinking but it looks like they still have a big chunk of the market. It is good for me to learn anyways, so no real complaints on my part.

I am using Mondernizr and jQuery. If I am understanding your 3 line script correctly I would need a unique instance of the script for each respective PNG fallback. Is that correct?

 if(!Modernizr.svg) {
  $('.yourMenuIconClass').attr('src', 'url/to/your/PNG/image_fallback_01.png');
}

 if(!Modernizr.svg) {
  $('.yourMenuIconClass').attr('src', 'url/to/your/PNG/image_fallback_02.png');
}
/* this would continue for each SVG graphic that needs a PNG fallback */

If I am understanding Todd's approach correctly, it seems to make a global change through javascript to replace any image ending with SVG with PNG if there is any errors with loading the SVG. Keeps it neat and short and I won't have to create new instances of the 3 line script for any new/future SVGs added to the website. Yes/No? Like I said I'm learning so any guidance is very much appreciated.

You don't work for ZURB?! WOW! as I was researching this problem you have been all over the forums and the git pages helping people... again THANK YOU! You are being very gracious with your time and expertise. ZURB should be paying you!

All the Best.

You commented on Warren Kingston's post about 5 years

Sorry, the code got stripped from my last post - Here is the inline code for the SVG/PNG fallback

<a href="#"><img src="./images/image_graphic.svg" onerror="this.onerror=null; this.src='./images/image_graphic.png'" alt="Alt Text Goes Here"></a>

I this helps someone else.

You commented on Warren Kingston's post about 5 years

Wing,

Thank you very much for your speedy reply.

Unfortunately site analytics for my friend's website show that he has quite a few older android devices still accessing it. I am trying to get things to gracefully degrade. As I said I'm a noob and I'm just starting to read about progressive enhancement... next time I will look into this approach.

With Android v2.3.6, on an actual device not with an emulator (live dev tools for chrome etc.) -
Foundation's home page (http://foundation.zurb.com/) - The menu-icon shows up
Foundation's doc page for Off Canvas (http://foundation.zurb.com/docs/components/offcanvas.html) - The menu-icon does not shows up

I need to look at the code to see what is different between the two. Once I figure it out I will post back my findings. Hopefully this will help someone else out.

Since SVG/PNG fallback is the solution/fix here is what I have done (It may help another person who is just learning all of this - like me).

I have a png fallback for other SVG graphics on the page. Although it is more inline (not as clean and I think will be a maintenance nightmare - If I were to need to change out images/graphics). currently I'm using this inline approach:

I'm thinking something more like the solution by Todd Motto would work better (less inline markup): http://toddmotto.com/revisiting-svg-workflow-for-performance-and-progressive-development-with-transparent-data-uris/

You are one of the gurus over at Zurb, do you have a better approach to a SVG/PNG fallback?

As for the scrolling issues for older mobile devices I will create a new topic/post in the forums as you suggested.

Thank you again Wing, I hope you have a great weekend.

You commented on Warren Kingston's post about 5 years

I can confirm that the menu-icon is NOT showing up with Android v2.3.6 - Samsung SPH-D700. I am using Foundation v5.3.0.

I looked at Warren's site, Zurb's Doc page as well as our dev page, none of them are successful with showing the menu-icon on Android v2.3.6:
http://www.maggiewaltersartwork.co.uk/testpage.html
http://foundation.zurb.com/docs/components/offcanvas.html

I've read through the various articles in the forums as well as:

https://github.com/zurb/foundation/pull/5268
https://github.com/zurb/foundation/issues/5199

None of the "fixes" are working:
http://foundation.zurb.com/forum/posts/2458-menu-icon-off-side-of-screen

Should I be trying to create a PNG fallback?

I wish I could contribute to a solution but I am a noob to say the least.


Wing-Hou - on the off chance you reply, I'm also trying to support scrolling
with the older mobile phone devices as well. I'm looking into:
iScroll - http://cubiq.org/iscroll-5
Overthrow - http://filamentgroup.com/lab/overthrow.html
or possibly with - http://filamentgroup.com/lab/a-different-approach-to-qualifying-css-position-fixed.html

I know it is off-topic but any suggestions for a better solution (or confirmation that one of these is a better approach than the other) would be greatly appreciated.

Thank you in advance for any help you may provide.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content