PDA

View Full Version : Featured Content Glider - help with non-javascript presentation



Jeremy
01-08-2010, 12:19 PM
1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

3) Describe problem:

Hi folks. I love the script and it works fine. I now need to make sure that the content is still accessible when javascript is not enabled.

I have used <noscript>...</noscript> tags to enable the various separate segments of content to display vertically - so far so good. However, I would really like to have hidden the pagination / number / next / prev links at the bottom so that users without javascript enabled browsers will not get confused and find that these links don't actually do anything.

Does anyone have any suggestions?

Many thanks

jscheuer1
01-08-2010, 01:10 PM
Put this in your stylesheet:


.toc, .prev, .next {
display: none;
}

Then at the beginning of the featuredcontentglider.js file add the highlighted:


//Featured Content Glider: By http://www.dynamicdrive.com
//Created: Dec 22nd, 07'
//Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
//Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked
//Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration)
//Updated (July 21st, 09): Updated to work in jQuery 1.3.x
//Updated (Dec 13th, 09): Added keyboard navigation, so left/ right arrow keys now move glider. Fixed bug with auto rotation when "next" link isn't defined.

document.write('<style type="text/css">.toc, .prev, .next {display: inline;}<\/style>');

jQuery.noConflict()

var featuredcontentglider={
leftrightkeys: [37, 39], //keycode

Jeremy
01-08-2010, 01:48 PM
Hi John,

Many thanks - did as you asked but the pagination links still show when javascript is disabled.

Any ideas?

Jeremy
01-08-2010, 02:22 PM
Hey John,

I attempted using the class .glidecontenttoggler instead of .toc, .prev, .next in the external js file in the location you told me to and put 'display:none;' for the .glidecontenttoggler class in the CSS file and it now works. The pagination links are absent when javascript is disabled.

I am assuming this solution is legitimate?

Many thanks for helping me with this.

jscheuer1
01-08-2010, 04:30 PM
That would be more straightforward, yes. But it should have worked the other way. I'd have to see all of the styles involved to know for sure exactly why it did not. If it came before this rule:


.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
border: 1px solid black;
color: #2e6ab1;
padding: 1px 3px;
margin-right: 3px;
font-weight: bold;
text-decoration: none;
}

There's a good chance that would have overridden it.

But, as long as it works now I'm not going to complain.

However, if you were to have some <noscript> content in the glidecontenttoggler division(s), we could troubleshoot my first idea so that the <noscript> content in there could still show up without the controls.