The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Continuous marquee code

View previous topic View next topic Go down

Solved Continuous marquee code

Post by Guest on July 8th 2015, 8:55 pm

Hi,
I'm having a problem with my "slides". I'd like the floating to be continuous, but after the last picture there's an empty part. Would it be possible to make it continuous?Mr. Green

Code:
<td width="390px" height="140" align="center">
<marquee behavior="scroll" direction="down" width="390px" height="140" onmouseover="this.stop()" onmouseout="this.start()">
<a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide2-1.png" scrollamount="5"></a>
<img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide3-1.png" scrollamount="5">
<a href="http://top2.igg.com/event/wage_stat/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide4-1.png" scrollamount="5"></a>
<a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide1-2.png" scrollamount="5"></a>
<a href="http://tophun.hungarianforum.com/t2-forum-jelvenyek"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/forumjelveny.png" scrollamount="5"></a>
<a href="http://tophun.hungarianforum.com/t92-allando-ingyen-kaja-free-lunch-event"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide5-1.png" scrollamount="5"></a>
<a href="http://top2.igg.com/event/carnival/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide6-1.png" scrollamount="5"></a>
</marquee>
</td>

Thank you!Mr. Green
Spoiler:

Code:
Link: http://www.tophun.net/
Version: punbb


Guest
Guest


Back to top Go down

Solved Re: Continuous marquee code

Post by Ange Tuteur on July 9th 2015, 12:29 pm

Hi @Diana,

The only thing I can think of doing would be to switch over to a JS marquee, because the HTML marquee's default behavior is to repeat ONCE the last element has left its view point. It'll still work the same without any problems, of course. Smile

Try replacing your marquee code with this :
Code:
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<script type="text/javascript">$(window).load(function(){$('.slider').marquee()});</script>

<div style="width:390px;height:140px;overflow:hidden;text-align:center;" class="slider" data-duplicated="true" data-direction="down" data-duration="5000" data-pauseonhover="true">
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide2-1.png"/></a>
  <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide3-1.png"/>
  <a href="http://top2.igg.com/event/wage_stat/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide4-1.png"/></a>
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide1-2.png"/></a>
  <a href="http://tophun.hungarianforum.com/t2-forum-jelvenyek"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/forumjelveny.png"/></a>
  <a href="http://tophun.hungarianforum.com/t92-allando-ingyen-kaja-free-lunch-event"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide5-1.png"/></a>
  <a href="http://top2.igg.com/event/carnival/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide6-1.png"/></a>
</div>

You can change the speed by editing data-duration ( 5000 = 5 seconds ), and the direction by editing data-direction. There's more information on the options in the repository : https://github.com/aamirafridi/jQuery.Marquee#options

Oh yeah, the data-duplicated attribute is what gets rid of that unsightly gap. Razz

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Continuous marquee code

Post by Guest on July 9th 2015, 2:14 pm

Oo, thank you! I didn't know this code had advanced versions.Lol
Thanks for the explanation too! One little thing, the "Murd3r" image is too close to the previous "Ruezy" image and then the "Murd3r" image is a bit far too from the "50 credit" image. Any chance to make the space equal there too?

I'm overly satisfied already, because it looks almost perfect and that huge empty gap is gone, so it's fine even if things stay the way they are now. Very Happy
Thank you!

Guest
Guest


Back to top Go down

Solved Re: Continuous marquee code

Post by Ange Tuteur on July 9th 2015, 2:27 pm

No problem. Smile I thought it would be possible to remove the gap on the regular <marquee>, but I could find no such method.

You want a space between each image, right ? If so, adding two breaks ( <br/><br/> ) after each image ( except the last ) should work. You don't need one after the last, because the JS marquee automatically adds a 20px gap.

Here it is with the added breaks :
Code:
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<script type="text/javascript">$(window).load(function(){$('.slider').marquee()});</script>

<div style="width:390px;height:140px;overflow:hidden;text-align:center;" class="slider" data-duplicated="true" data-direction="down" data-duration="5000" data-pauseonhover="true" gap="0">
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide2-1.png"/></a>
  <br/><br/>
  <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide3-1.png"/>
  <br/><br/>
  <a href="http://top2.igg.com/event/wage_stat/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide4-1.png"/></a>
  <br/><br/>
  <a href="http://www.youtube.com/user/ToP2entertainment"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide1-2.png"/></a>
  <br/><br/>
  <a href="http://tophun.hungarianforum.com/t2-forum-jelvenyek"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/forumjelveny.png"/></a>
  <br/><br/>
  <a href="http://tophun.hungarianforum.com/t92-allando-ingyen-kaja-free-lunch-event"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide5-1.png"/></a>
  <br/><br/>
  <a href="http://top2.igg.com/event/carnival/"> <img src="http://i1320.photobucket.com/albums/u537/MayaGrayx3/slide6-1.png"/></a>
</div>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Continuous marquee code

Post by Guest on July 9th 2015, 2:38 pm

Oo, it's great now!

Guest
Guest


Back to top Go down

Solved Re: Continuous marquee code

Post by Ange Tuteur on July 9th 2015, 3:48 pm

You're welcome ^^

Topic archived

Have a great day. Very Happy

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum