noscript option

colak · 2013-05-26 17:47:24

hi all,

A quick question which might be easy to answer but I just can’t get my head around it.

I started using a jquery script for image rotation. Apart for the js in the head all I need to add is

<txp:images category="random" limit="5" sort="rand()" wraptag="ul" break="li" class="rslides">
<a href="/<txp:image_info type="name" />"><txp:image /></a>
</txp:images>

The problem is that when the browser javascript is off the whole layout breaks. Is there a method with which I can achieve something like:

<noscript>
<txp:images category="random" limit="1" sort="rand()" wraptag="ul" break="li" class="rslides">
<txp:else />
<txp:images category="random" limit="5" sort="rand()" wraptag="ul" break="li" class="rslides">
</noscript>
<a href="/<txp:image_info type="name" />"><txp:image /></a>
</txp:images>

etc · 2013-05-26 20:29:50

Hi Yiannis,

that’s hardly possible without recurring to AJAX. The simplest solution is probably CSS:

<noscript><style>
ul.rslides li {display:none}
ul.rslides li:first-child {display:inherit}
</style></noscript>

colak · 2013-05-27 05:07:15

Hi Oleg,

Thanks!!! Your suggestion works beautifully.

colak · 2013-05-27 06:16:43

Checking on it again, it does not validate. :(

colak · 2013-05-27 07:12:13

Ok this is how I solved it

I gave a class="no-js" to the body
From there on jquery comes to the rescue

<script type="text/javascript">
$(document).ready(function() {
$('body').removeClass('no-js').addClass('js');
});
</script>

The script replaces the class from no-js to js

I changed the styles to

.no-js ul.rslides li {display:none}
.no-js ul.rslides li:first-child {display:inherit}

simple:)

Textpattern CMS

Textpattern CMS support forum

#1 2013-05-26 17:47:24

noscript option

#2 2013-05-26 20:29:50

Re: noscript option

#3 2013-05-27 05:07:15

Re: noscript option

#4 2013-05-27 06:16:43

Re: noscript option

#5 2013-05-27 07:12:13

Re: noscript option

Board footer