38 posts
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • India
  • Sold between 10 000 and 50 000 dollars
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
  • United States
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Bought between 50 and 99 items
  • Repeatedly helped protect Envato Market against copyright violations
  • Has been a member for 5-6 years
  • Contributed a Tutorial to a Tuts+ Site
  • Contributed a Blog Post
+4 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
  • Bought between 10 and 49 items
  • Canada
  • Exclusive Author
  • Has been a member for 4-5 years
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
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
  • India
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Bought between 1 and 9 items
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
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • India
  • Sold between 10 000 and 50 000 dollars
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!

4320 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly helped protect Envato Market against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says

That theme will sell very well :)

113 posts
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
  • India
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Bought between 1 and 9 items
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
  • United States
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Bought between 50 and 99 items
  • Repeatedly helped protect Envato Market against copyright violations
  • Has been a member for 5-6 years
  • Contributed a Tutorial to a Tuts+ Site
  • Contributed a Blog Post
+4 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!

594 posts
  • Author had a File in an Envato Bundle
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly helped protect Envato Market against copyright violations
  • Sold between 10 000 and 50 000 dollars
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
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • India
  • Sold between 10 000 and 50 000 dollars
abogawat says

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

by
by
by
by
by
by