Using jquery for fading in and out articles (like a flash banner)

alanpmcd · 2010-12-05 17:48:12

I am trying to use jquery in a related way, to vertically scroll text, five most recent blog items in turn. But I can’t seem to make it work and wondered if anyone could help me: I’m a js novice. Here is the final product, down the left-hand side of the linked page, below the simple html marquee that I’m trying to supersede: http://www.incredible-edible-todmorden.co.uk/playground

Here’s how I put it together.

In my head I have:

<script src="/js-global/jquery.js" type="text/javascript"></script>
<script src="/js-global/jquery.cycle.all.js" type="text/javascript">$(function() {$('#s1').cycle({ fx: 'scrollUp', speed: 300, timeout: 4000 }); }); 
</script>

My article form is called by:

<txp:output_form form="panel_blogs_scrolljs" />

In my form I have:

<div id="s1">
<div class="scrollbox">
	<div class="inside box">
	<ul class="articlelist"><txp:article_custom form="sidebar_link_news" listform="sidebar_link_news" limit="5" sort="Posted desc" section="blogs" /></ul>
	</div>
</div>
</div>

All help greatefully received.

Alan

jakob · 2010-12-05 21:19:57

not tried it, but does it work when you separate out your loading of the jquery.cycle from your jquery call into its own <script>:

<script src="/js-global/jquery.js" type="text/javascript"></script>
<script src="/js-global/jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $('#s1').cycle({ fx: 'scrollUp', speed: 300, timeout: 4000 }); 
   }); 
</script>

and you may need to set the height of the container to be smaller than the contained items.

Last edited by jakob (2010-12-05 21:49:16)

alanpmcd · 2010-12-05 23:34:55

Thanks jakob. I’ve tried both those options, and quoting a direct source of jquery from Google. Nothing makes it scroll, it’s just appearing in a box.

Pesky thing. Am I nesting the divs in the right way? I have the div id for the effect; then the div classes for the outer bod and the inner box; then the form producing the information about five articles. And the result is just the five articles, static. Do I somehow need to loop the articles outside the div for the effect? Or am I barking up the wrong tree in wondering this?

alanpmcd

jstubbs · 2010-12-06 02:38:26

Looks like you are not loading jQuery correctly:

<script src="hhttps://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

Note the extra “h” in the https portion of the URL.

alanpmcd · 2010-12-06 08:07:16

Thanks Jonathan. That was true but hasn’t proved to be the source of the problem.

alanpmcd

jstubbs · 2010-12-06 12:51:57

Took another look and Safari Inspector Console reports: “[cycle] terminating; too few slides: 1”

So that appears to be your problem. Try setting something like this:

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'scrollUp', speed: 300, timeout: 4000
	});
});
</script>

And see how that goes.

alanpmcd · 2010-12-06 17:50:22

Thanks Jonathan. I’ve tried that. No success. I’ve tried putting <div> tags around ordinary text but still can’t get it to see them as slides under the same id name. It is as if the separate items only appear as one ‘slide’ for some reason.

alanpmcd

jakob · 2010-12-06 21:07:27

In such cases, I typically go back to a basic scenario and get that working, then add complexity back in.

For example, I can see that in your div #s1 which you are asking the cycle plugin to cycle the content of you have a further div and inside that an ul and inside that the articles each inside an li. The items have all sorts of padding and height:auto;.
If you look at a simple example such as the one here you see a very simple setup: a container div with fixed height and width dimensions and no padding or margins (the height and width = the size of a single item plus its padding and border) with the scrolled items immediately inside it, also with set dimensions and positioning information. I guess the latter is also relevant as the cycle plugin sets the container to position:relative;.
So a reason why you may be getting the too few cycles is that you are addressing #s1 which has only one child item directly beneath it. If you address $('ul.articlelist') you may have more luck. A second reason maybe your use of height:auto; as your container is set to expand to the size of the contents and not a specified containing rectangle.

alanpmcd · 2010-12-07 20:03:29

Thanks Jakob. I have duly simplified and it works. Very grateful for your help.

alan

Textpattern CMS

Textpattern CMS support forum

#49 2010-12-05 17:48:12

Re: Using jquery for fading in and out articles (like a flash banner)

#50 2010-12-05 21:19:57

Re: Using jquery for fading in and out articles (like a flash banner)

#51 2010-12-05 23:34:55

Re: Using jquery for fading in and out articles (like a flash banner)

#52 2010-12-06 02:38:26

Re: Using jquery for fading in and out articles (like a flash banner)

#53 2010-12-06 08:07:16

Re: Using jquery for fading in and out articles (like a flash banner)

#54 2010-12-06 12:51:57

Re: Using jquery for fading in and out articles (like a flash banner)

#55 2010-12-06 17:50:22

Re: Using jquery for fading in and out articles (like a flash banner)

#56 2010-12-06 21:07:27

Re: Using jquery for fading in and out articles (like a flash banner)

#57 2010-12-07 20:03:29

Re: Using jquery for fading in and out articles (like a flash banner)

Board footer