Solved

Does jQuery gallery slider need a <noscript> ?

Posted on 2011-02-18
15
983 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:Kapena
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:Kapena
Comment Utility
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
Comment Utility
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
Comment Utility
I tried both of your solutions and the transparent background is still there with javascript disabled.
0
 
LVL 29

Expert Comment

by:fibo
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
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…
This video teaches users how to migrate an existing Wordpress website to a new domain.

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now