Solved

Does jQuery gallery slider need a <noscript> ?

Posted on 2011-02-18
15
1,007 Views
Last Modified: 2012-05-11
1.  I have a jQuery galley slider (S3 slider) on a new test page.  When I use jQuery like this, should I write in alternate content for browsers with java script disabled? Example code attached.
2.  ALSO, when I disabled javascript to test this <noscript>, the slider still worked.  Should that be happening?
You can view this test page at http://www.colorfulharvest.com/WEB4.php 
Thanks
<noscript><a href="http://support.microsoft.com/gp/howtoscript"><img src="/Images2/Home Slide Show/Fancy-Cauli-Plate.jpg" alt="Amazing Colors and Flavors, Naturally!" />This site is best viewed with Java Script enabled.  Click here to learn how.</a></noscript>

Open in new window

0
Comment
Question by:Kapena
  • 8
  • 7
15 Comments
 
LVL 29

Expert Comment

by:fibo
ID: 34932598
Tested your page in FF with Javascript disabled: it does not work really.

Digged into your source code....

What is the effect of placing
<script></script>
just before your <noscript> tag?
0
 

Author Comment

by:Kapena
ID: 34934241
Hi Fibo,
Thanks for the reply.  Placing the <script></script> tags before my <noscript> tag had no visible effect.  
But as I said in part 2 of my question, even with Javascript disabled in my browser, the jQuery slider continues to function.  That is more the root of my question:  
Does it make sense for the jQuery slider to operate with Javascript disabled? Or have I not completely disabled Java in the "Manage Add Ons"?  (I've disabled everything from Sun Microsystems/Java that I could see).
0
 
LVL 29

Expert Comment

by:fibo
ID: 34935223
B-) although their names are similar, Java and JavaScript are different languages.

- Re-activate Java
- Disable Javascript as described in
http://www.technipages.com/internet-explorer-7-enabledisable-javascript.html

- then redo your tests!
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:Kapena
ID: 34939173
Hi fibo,

Ah ha.  Okay, now that javascript is disabled I see what's going on, but now I need help with the execution of the <noscript>. There are two jQuery items I'll focus on:
1. The slide show at top center.
2. The pre-loader with an animated .gif spinner and transparent background.

1. With javascript disabled, the static photo and text show up in place of the jQuery slide show.  But the positioning is wrong and the CSS I've written doesn't seem to effect it.  Please tell me how to correct this.

2.  With javascript disabled, the pre-loader does not go away once the page is loaded.  The <noscript> and CSS I tried with this doesn't have any effect at all.  Please help correct this.

I am attaching selected HTML and CSS and you can still visit www.colorfulharvest.com/WEB4.php to view the test page online.

Thanks


/* CSS for the jQuery pre-loader */
#Loader{background-color:#000; height:100%; width: 100%; position: absolute; left: 0px; top: 0px; z-index: 99; opacity: .7; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7;} 
#Loader img#pageloading {position:absolute; background:#000; z-index:100; left:50%; top:50%;}
#Loader noscript {display:none; background-color:transparent;}

<!-- HTML for the pre-loader -->
<div id="Loader">
<img id="pageloading" src="/Images2/Page-Loading-Spinner.gif" alt="" />                
<noscript></noscript>
</div>

/* CSS for the jQuery slide show */

#bottombar {float:left; width:540px; margin-top:0px;}
#bottombar slider noscript {margin-left:45px; border:none;}

#slider {
    width: 450px; /* important to be same as image width */
    height: 290px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	margin-left: 25px;
	margin-top:20px;
}

#sliderContent {
    width: 410px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}

.sliderImage img {border: none;}

/* Text */
.sliderImage span {
    position: absolute;
	font: 12px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 410px;
    background-color:#9e1f63;
    filter: alpha(opacity=80); /* IE */
    -moz-opacity: 0.8; /* mozilla */
	-khtml-opacity: 0.8; /* khtml, old safari */
    opacity: 0.8; /* fx, safari, opera */
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
#slider ul { list-style-type: none;}

<!-- HTML for the jQuery slide show -->
<div id="bottombar">
<!-- Begin S3 Slider -->
<div id="slider">
        <ul id="sliderContent">
            <li class="sliderImage">
                <a href=""><img src="/Images2/Home Slide Show/Fancy-Cauli-Plate.jpg" alt="Color and Nutrition " /></a>
                <span class="top"><strong>Grown for color, taste, &amp; nutrition...</strong><br />from traditonally bred, heirloom style seeds.</span>
            </li>
            <li class="sliderImage">
                <img src="/Images2/Home Slide Show/Strawberries.jpg" alt="Year round strawberries" />
                <span class="bottom"><strong>Strawberries grown year round...</strong><br />sweet &amp; red all the way through.</span>
            </li>            
            <li class="sliderImage">
                <a href=""><img src="/Images2/Home Slide Show/Child-Color-Cauli-Plate.jpg" alt="Kids love Colorful Harvest" /></a>
                <span class="top"><strong>Kids love Colorful Harvest...</strong><br />for enticing colors and mild flavors. </span>
            </li>
            <li class="sliderImage">
                <img src="/Images2/Home Slide Show/Shopper-w-Child.jpg" alt="Moms love fun nutrition" />
                <span class="bottom"><strong>And moms love Colorful Harvest...</strong><br />for making family nutrition fun again.</span>
            </li>
            <li class="sliderImage">
                <img src="/Images2/Home Slide Show/Scallops.jpg" alt="5" />
                <span class="top"><strong>Chefs add color &amp; innovation with Colorful Harvest</strong><br />Seared scallops with roasted sweet red corn and orange cauliflower.</span>
            </li>
            <div class="clear sliderImage"></div>
        </ul>
<noscript><a href="http://support.microsoft.com/gp/howtoscript"><img src="/Images2/Home Slide Show/Fancy-Cauli-Plate.jpg" alt="Amazing Colors and Flavors, Naturally!" /><br />This site is best viewed with Java Script enabled.  Click here to learn how.</a></noscript>     
    </div> <!-- End S3 Slider -->
     
</div> <!-- end BottomBar -->

Open in new window

0
 
LVL 29

Expert Comment

by:fibo
ID: 34941092
A - pre-loader
You currently have in lines 7-10
<div id="Loader">
<img id="pageloading" src="/Images2/Page-Loading-Spinner.gif" alt="" />                
<noscript></noscript>
</div>

where the <noscript> is useless: the rest of the html code is ran wether script is active or not.

It seems that you consider the <noscript as
1 - write everything between </noscript> ... <noscript> if javascript is active
2 - otherwise, write everything between the <noscript> ... </noscript>

This is not the way it works. It works as
1 - write everything outside of <script>..</script> AND <noscript> ... </noscript>
2 - if javascript is running, run what is inside <script>..</script> and ignore what is inside <noscript> ... </noscript>
3 - if javascript is not running, then ignore whatever is within <script>..</script> and display what is withinh <noscript> ... </noscript>


To make your pre-loader work, you should write the reverse:
<div id="Loader">
<script>write('<img id="pageloading" src="/Images2/Page-Loading-Spinner.gif" alt="" />');
</script>
</div>
OR you might consider using javacsript to load a different css


2 - You should consider first your page / code without javascript, then enhance it with javascript; this "unobtrusive javascript" ensures that your page degrades smartly if javascript is not there
See http://en.wikipedia.org/wiki/Unobtrusive_JavaScript and
http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/

0
 

Author Comment

by:Kapena
ID: 34944584
Hi Fibo,
Thanks for the input.  Newbs like me need some hand holding, so bear with me here.  I'm still digesting the "unobtrusive javascript" information, but javascript is new to me and it may take a while.  
In the meantime, I tried the solution you described for the (2) pre-loader  and it seems to disable it whether javascript is enabled or not.  I've attached the current html.  Is there more to do, such as adjustments in the <head>?
On (1) the slide show, The <noscript> seems to be functioning as intended, even though it is not enclosed in the <script> tags. But I can't seem to get the <noscript> image to position, or to remove the border in IE (border:none).


<head>
<script src="jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jQuery/auto-slide.js" type="text/javascript"></script> <!-- for adSlider and pre-loader -->
<script src="/jQuery/s3Slider.js" type="text/javascript"></script> <!-- for Slide Show -->
<script type="text/javascript"> <!--for Slide Show -->
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 8000
        });
    });
</script>
</head>

<div id="Loader">
<script>write('<img id="pageloading" src="/Images2/Page-Loading-Spinner.gif" alt="" />'); </script>
<noscript></noscript>
</div>

Open in new window

0
 
LVL 29

Expert Comment

by:fibo
ID: 34945259
1 - My code was not complete. Here is a revised version which runs fine in "my" IE and "my" FF.

<body>
<div id="Loader">
<script type="text/javascript">document.write('<img id="pageloading" src="/Images2/Page-Loading-Spinner.gif" alt="" border=2 />'); </script>
<noscript>Loading page...</noscript>
</div> 
</body>

Open in new window


What was wrong: document.write works always, not write. And yes, the code should be within the <body>.

2 - Solving style display differences between IE and FF may be slightly delayed: get your main code running, THEN (only) make the tuning adjustments
0
 

Author Comment

by:Kapena
ID: 34945706
Okay, both <noscript> items seem to be working properly with javascript disabled in both IE and FF.  Thanks.  

Still puzzled about <noscript> styling.  

In the pre-loader, I can't get the transparent background to disappear when java is disabled.
My attempted solution was to add the #slider noscript {background-color:transparent;} (see attached styles), but it had no effect.

In the slide show, I can't get the single substitute image and text to properly position.  I tried various solutions in various places but none worked so I took them out.  The current styles are attached.

/* pre-loader */
/* Spinner */
#Loader img#pageloading {position:absolute; background:#000; z-index:100; left:50%; top:50%;} 
/* Background */
#Loader {background-color:#000; height:100%; width: 100%; position: absolute; z-index: 99; opacity: .7; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7;} 
#Loader noscript {background-color:transparent;}

/* slide show */
#bottombar {float:left; width:540px; margin-top:0px;}
#slider {
    width: 450px; /* important to be same as image width */
    height: 290px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
	margin-left: 25px;
	margin-top:20px;
}

#sliderContent {
    width: 410px; /* important to be same as image width or wider */
    position: absolute;
	top: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}

.sliderImage img {border: none;}

/* Text */
.sliderImage span {
    position: absolute;
	font: 12px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 410px;
    background-color:#9e1f63;
    filter: alpha(opacity=80); /* IE */
    -moz-opacity: 0.8; /* mozilla */
	-khtml-opacity: 0.8; /* khtml, old safari */
    opacity: 0.8; /* fx, safari, opera */
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
#slider ul { list-style-type: none;}

Open in new window

0
 
LVL 29

Expert Comment

by:fibo
ID: 34947221
java is disabled
Pardon my insistence, but you MUST say javascript, not java. Otherwise you will confuse lots of people, including you.

#Loader noscript {background-color:transparent;}

Open in new window

I would not expect it to work, and would make things more robust by saying something like

#Loader .noscript {background-color:transparent;}
...
<body>...
<div id="Loader">...
<noscript><div class='noscript'>...</div></noscript>
</div>

Open in new window


Or you could use something like
<body>
<script type="text/javascript">document.write('<div id="Loader"><img id="pageloading" src="/Images2/Page-Loading-Spinner.gif" alt="" border=2 />'); </script>
<noscript><div id="Loader" class="noscript">Loading page...</noscript>
....</div> 
</body> 

Open in new window

0
 

Author Comment

by:Kapena
ID: 34947670
I tried both of your solutions and the transparent background is still there with javascript disabled.
0
 
LVL 29

Expert Comment

by:fibo
ID: 34959178
B-)
The attached example seems now to work in all situations
<head><style>
#Loader {height:100%; width: 100%; position: absolute; } 
#Loader.scripter {border:2px solid red;background-color:#FCC;}
#Loader.noscripter {border:2px solid blue;background-color:#FFC;}

#Loader img#pageloading {position:absolute; background:#FFF; z-index:100; left:50%; top:50%;} 
</style></head>
<body>
<div id="Loader" class="noscripter">
    <script type="text/javascript">Loader.className="scripter";document.write('<img id="pageloading" src="/Images2/Page-Loading-Spinner.gif" alt="image missing" title="image missing" border=2 />text1'); </script>
    <noscript>Loading page...<br></noscript>
    <br>....the text...
</div> 
</body>

Open in new window

1 - Test it as is on your own machine
2 - Reintroduce all the css elements I have removed. Depending on the expected result, that should be at the "Loader", "Loader.scripter" or "Loader.noscripter" level
3 - Depending on the situation, you might need to write
document.getElementById('Loader').className="scripter";
rather than
Loader.className="scripter";
0
 

Accepted Solution

by:
Kapena earned 0 total points
ID: 34961433
Hello Fibo,
Thank you for your new approach.  However, during the interval between our last posts, I found a very elegant solution that avoids the <noscript> tag all together.  There are multiple benefits:
1) I had discovered that the newest version of Opera does not recognize the contents of the <noscript> tag, so this new solution avoids that problem.
2) CSS is very straight forward.
3) If JS is enabled (class="js") it knows what to display, if JS is not enabled (class="no_js") it knows what alternative content to display.
You can see the difference it makes on my test page at www.colorfulharvest.com/WEB4.php The relevant code is attached, including a note identifying the forum where I found the information.  I hope that the community can benefit from this exchange and, again, I appreciate your efforts.    
<head>
<!-- noscript alternative http://stackoverflow.com/questions/2233771/how-can-i-show-different-content-when-javascript-is-disabled -->
<script type="text/javascript"> document.documentElement.className += " js"</script>
</head>

<body>

<div id="slider" class="js">
<ul id="sliderContent">
<!-- slide show contents -->
</ul> <!-- end sliderContent -->
</div> <!-- End S3 Slider -->
   
<div id="Slider_no_js" class="no_js">
<p>This site is best viewed with Javascript enabled.</p><img src="/Images2/Home Slide Show/Fancy-Cauli-Plate.jpg" alt="Amazing Colors and Flavors, Naturally!" />
</div> <!-- end no_js -->

/* in linked style sheet */

/* for no-js <noscript> substitute */
html.js .no_js, html .js {display: none;}
html.js .js {display: block;}

/* For Slider no_js */
#Slider_no_js.no_js {
    width: 410px; 
    height: 290px;
    position: relative; 
    margin-top:10px;
    margin-bottom:10px;
    margin-left:65px;
}
#Slider_no_js.no_js p {font-size:10px; color:#0c5971; text-align:center;}

Open in new window

0
 
LVL 29

Assisted Solution

by:fibo
fibo earned 500 total points
ID: 34969158
That's a nice solution, thx for the tip!

You might now decide to close the question, allocating grade A and points to your solution: this will get you your points back (not that it matters really since you are a premium member) but, what is more important, the solution will stay in the knowledgebase
0
 

Author Closing Comment

by:Kapena
ID: 35045619
Fibo helped with useful advice but the final solution came from a nother source that I discovered outside Experts Exchange.
0
 
LVL 29

Expert Comment

by:fibo
ID: 35045854
B-) Thx for the grade and points, even if you deserve almost all of them!
Your question has been an excellent occasion to stimulate my brain... and your solution is great.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question