Question

Is it possible to replace javascript w/ HTML if JavaScript is not enabled on the user’s browser?

I know I can use <noscript>this displays in place of javascript</noscript>

That works fine, but it still runs the javascript.

In theory I would want this:

if javascript is enabled
  run javascript

if javascript is not enabled
  don’t run javascript and give alternative method

I am using this jQuery plugin: http://malsup.com/jquery/cycle/int2.html

When I disable javascript on safari, it displays all three of the items, all within a div. The plugin fades in each item, but with it disabled it displays all three in a row, without fading in and out like it does w/ javascript enabled.

With javascript disabled, I would want to stop it from displaying all three items at the same time. I’ll show you what it is suppose to look like and what it does when JavaScript is disabled.

Disabled view: http://i42.tinypic.com/212y1j6.png (notice them 3 stacked on top of eachother) – I want to stop that from happening since the JavaScript is disabled

Enabled view: http://i39.tinypic.com/9gwu3d.png

Here is the code for the div the items are in:

$(document).ready(function() {     $('#featured-programs-left').cycle({          fx:     'fade',          speed:  'slow',         timeout: 15000,         next:   '#next2',         prev:   '#prev2'      }); });  <div id='featured-programs-left'>  <div>     <a href='http://site.com/academics/majors/emergency_medical_technician_-_paramedic/' title='Emergency Medical Technician - Paramedic'><img src='http://site.com/images/uploads/images/emt.jpg' alt='Emergency Medical Technician - Paramedic' /></a>     <strong>Emergency Medical Technician - Paramedic</strong>     <p>This unique A.A.S. degree program, a partnership between College and Faxton-St. Luke&#8217;s Healthcare provides the paramedic student the education necessary to function in an</p>      <p><a href='http://site.com/academics/majors/emergency_medical_technician_-_paramedic/' title='Learn more about Emergency Medical Technician - Paramedic'>Learn more</a></p> </div>  <div>     <a href='http://site.com/academics/majors/travel_tourism_hospitality_events_management/' title='Travel &amp; Tourism: Hospitality &amp; Events Management'><img src='http://site.com/images/uploads/images/hospitality_event_planning.jpg' alt='Travel &amp; Tourism: Hospitality &amp; Events Management' /></a>     <strong>Travel &amp; Tourism: Hospitality &amp; Events Management</strong>     <p>This program prepares students for exciting careers in the travel and tourism industry and the hospitality and events planning field. Graduates are prepared to:<br</p>      <p><a href='http://site.com/academics/majors/travel_tourism_hospitality_events_management/' title='Learn more about Travel &amp; Tourism: Hospitality &amp; Events Management'>Learn more</a></p> </div>  <div>     <a href='http://site.com/academics/majors/fashion_buying_merchandising/' title='Fashion Buying &amp; Merchandising'><img src='http://site.com/images/uploads/images/fashion_merchandising.jpg' alt='Fashion Buying &amp; Merchandising' /></a>     <strong>Fashion Buying &amp; Merchandising</strong>     <p>This program prepares graduates for careers throughout the Fashion Industry including positions in buying, fashion merchandising, retail and wholesale sales, retail</p>      <p><a href='http://site.com/academics/majors/fashion_buying_merchandising/' title='Learn more about Fashion Buying &amp; Merchandising'>Learn more</a></p> </div>  </div> 

CSS for the div’s

#featured-programs-left img, #featured-programs-right img{     xfloat:left;     overflow:auto;     xclear:left;     xwidth:351px;     xpadding:0 5px 5px 0;     border:0; }  #featured-programs-left, #featured-programs-right {     height:625px;     float:left;     overflow:auto;     clear:left;     clear:right;     width:100%;     xborder:2px solid red; }  #featured-programs-left div, #featured-programs-right div {     xborder:1px solid purple;     overflow:auto;     clear:left;     clear:right;     width:352px;     height:345px; }  #featured-programs-left {     float:left; } 

Answer 1

Somewhat like Ates’s solution, you can use Javascript to change the content for the users who have it enabled. For example, let’s say you have a fancy menu that gives Javascript users super-easy navigation, but is worthless to non-JS users. In the HTML set the display property to ‘none’ and then use JS to enable it. In your case, where you have content you don’t want to show for the non-JS users, you can just hide it by default. The downside is if the browser has JS AND CSS turned off, this won’t work. If you’re worried about that, you could use JS to insert the content.

<html> <head>   <script>     $(document).ready(function() {       $('.jsok').show();     });   </script>   <style>     .jsok { display: none; }   </style>  </head>  <body>    <div class='jsok'><!-- content for JS users here--></div>    <div><!-- content for everyone here --></div>    <noscript><!-- content for non-js users here --></noscript>  </body>  </html>