38 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
  • Has collected 50+ items on Envato Market
+2 more
abogawat says

I recently uploaded a single-page vcard style theme for review on themeforest and got feedback suggesting it needs to be compatible with browsers with javascript disabled. Here’s a preview of the theme: http://www.bogawat.com/themes/inset

Now I’m at a complete loss to understand how to address that issue. The way the template is structured, I’m using javascript to show and hide content. Disabling javascript is obviously going to render all the content together and look messed up. What do you guys think can be done?

I already have a couple of template with a similar structure up on themeforest and the issue has never been flagged before.

2541 posts
  • Has referred 10+ members
  • Has sold $100+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in United States
+9 more
CreatingDrew says

Have each navigation item actually link to an “about.html, “contact.html etc” page that would be your template containing only the about (or contact or bio etc) info in it.

When the user clicks, override it with Javascript to hide and show content. If it’s disabled, it will simply bring up your nice template with some about content :)

Also, if the layout is messed up with JS disabled you might need to rethink your logic, there is usually a good way to get it looking at least close to “normal”. Consider the idea of modifying something with JS and falling back on working CSS for when it’s disabled ;)

155 posts
  • Has been part of the Envato Community for over 5 years
  • Located in Canada
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
Warll says

May I suggest another option? Have it gracefully degrade into a one page site. It would be easiest to do since all you have to do is break the background wrapper image into two, one for top and bottom. The down side being that the buttons would be useless, but what little percentage of the internet that uses noscript(myself included) wouldn’t really mind, its when sites fail silently that it is a problem.

113 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
pearlstudios says

Check out mine, it will degrade gracefully without JS. Oops, I should rather say progressively enhanced with JS.

You should use named anchors and scroll it progressively with JS/jQuery.

38 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
  • Has collected 50+ items on Envato Market
+2 more
abogawat says
Have each navigation item actually link to an “about.html, “contact.html etc” page that would be your template containing only the about (or contact or bio etc) info in it. When the user clicks, override it with Javascript to hide and show content. If it’s disabled, it will simply bring up your nice template with some about content :)

Well, I’m not exactly sure how to do that. Am not exactly a pro at javascript, so any links to where I can get more help with this would be really great. Thanks!

4388 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team says

That theme will sell very well :)

113 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
pearlstudios says
Have each navigation item actually link to an “about.html, “contact.html etc” page that would be your template containing only the about (or contact or bio etc) info in it. When the user clicks, override it with Javascript to hide and show content. If it’s disabled, it will simply bring up your nice template with some about content :)
Well, I’m not exactly sure how to do that. Am not exactly a pro at javascript, so any links to where I can get more help with this would be really great. Thanks!

It’s got nothing to do with JS. You need to use overflow:hidden on a container < div > and use named anchors for links.

I had recently stumbled upon this one: http://www.impressivewebs.com/javascript-content-switcher-without-javascript/

Fancy name but a simple technique which a good front-end developer should know.

2541 posts
  • Has referred 10+ members
  • Has sold $100+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Located in United States
+9 more
CreatingDrew says
Have each navigation item actually link to an “about.html, “contact.html etc” page that would be your template containing only the about (or contact or bio etc) info in it. When the user clicks, override it with Javascript to hide and show content. If it’s disabled, it will simply bring up your nice template with some about content :)
Well, I’m not exactly sure how to do that. Am not exactly a pro at javascript, so any links to where I can get more help with this would be really great. Thanks!
Sure, I sent you a message, but I think I may have misunderstood what you wanted to do at first. Named anchors (#home, #about, etc) are def the easy way to go first if you can do it that way as others have mentioned. I was under the impression you were pulling external content or something of that nature.

Either way you can post more here or message me and we’ll try to help :)

Edit – Sorry, missed the link above at first!

600 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+6 more
designcise says

I think the whole point here is that CSS is supposed to be used for presentation purposes, and js for mostly doing all the DOM manipulation .. so if your site is not showing properly with javascript disabled, it obviously means that your presentation logic is a bit messed up, something to work on .. oh and i love the template :D!

38 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
  • Has collected 50+ items on Envato Market
+2 more
abogawat says

Thanks, guys. I’m going to try figuring this out and be back with hopefully an approved design. Wish me luck. :-)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by