We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
[ C ] Rotating News Box
Topic Started: Jun 15 2011, 04:04 PM (3,128 Views)
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
Board Address: http://s4.zetaboards.com/Connect_Gaming/index/
Board Software: Zetaboards
Description: Okay so if you look at this print. You see that news box type thingy there? Well, I have the print coded, and I am having troubles creating something that will rotate by itself, and bring up a new image that is clickable to the topic with the full report. I was wondering if someone could possibly create this for me? It would only be on this theme, and would need to be placed in the layout correct? I have my div made for it too.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Is it suppose to rotate on every page refresh or suppose to be a slideshow? The print makes it out to be a slideshow with the arrows.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
Yes, a slide show type deal! But it doesn't really need the arrows, just to like fade in an out like every couple seconds, or when hovered on it will stay put and when hovered off it will change
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
o.O I am trying to figure out where to install that.. xD This is a lot of a code.. :p I like the last one!
Edited by .Vulture, Jun 15 2011, 04:29 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Actually, you're wanting a slideshow with text too, right? I think that one only supports images.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
It has text on the demo? :/
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I couldn't get that version to work, I'm going to try and look for a different version.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
Okay, thanks Cory!
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Unfortunately, I couldn't find any good, workable fade-in text slideshows, I found many fade-in image slideshows though.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
i could make it for you, do you want the picture on the left + the text or is the pic the logo? A better idea would be to make the several <div>s appear in t slide show so you can put whatever content you want in there, text/images/links etc.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
I want the image on the left, and text on the right. and they both are together so when they click the arrows or it changes they both move and new text and image comes in.


I found a perfect example, http://www.ign.com/ The top part, it has the image than to the right text, and i can make the text link when I want it too, and the image is clickable to the topic/page
Edited by .Vulture, Jun 27 2011, 04:44 PM.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
try this
Code:
 
<style type='text/css'>
.contents{
width:600px;
margin: 0 20px;
}
.content{
display:none;
float:left;
margin-right:1em;
}
.content img{
float:left;
margin-right:1em;
}
.slideshow .right,.slideshow .left{
cursor:pointer;
}
</style>

<div class='slideshow'>
<span class='left' style='float:left;position:absolute;top:420px;'><<</span>
<span class='right' style='float:right;position:absolute;left:700px;top:420px;'>>></span>
<div class='contents'>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />Howdy all. This is some random text</div>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />Howdy all. This is some random text again</div>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />Howdy all. This is some random text yet again</div>
</div>
</div>
<div style='clear:both;'></div>

<script type='text/javascript'>
$('.slideshow .content:first').addClass("active").show();

$('.slideshow .right').click(function(){
num = $(this).parent().find('.active').nextAll(".content");
$(this).parent().find('.active').fadeOut(function(){
if(num.length > 0){
$(this).parent().find(".active").removeClass("active").next().fadeIn().addClass("active");
}else{
$(this).parent().find(".active").removeClass("active").parent().find(".content:first").addClass("active").fadeIn();
};
});
});

$('.slideshow .left').click(function(){
num = $(this).parent().find('.active').prevAll(".content");
$(this).parent().parent().find('.active').fadeOut(function(){
if(num.length > 0){
$(this).parent().find(".active").removeClass("active").prev().fadeIn().addClass("active");
}else{
$(this).parent().find(".active").removeClass("active").parent().find(".content:last").addClass("active").fadeIn();
};
});
});

slider = setInterval(auto, 5000);

function auto(){
num = $('.slideshow .active').nextAll(".content")
$('.slideshow .active').fadeOut(function(){
if(num.length > 0){
$('.slideshow .active').removeClass("active").next().fadeIn().addClass("active");
}else{
$('.slideshow .active').removeClass("active").parent().find(".content:first").addClass("active").fadeIn();
};
});
}

$('.slideshow').mouseenter(function(){
clearInterval(slider);
}).mouseleave(function(){
slider = setInterval(auto, 5000);
});
</script>
here and tell me what you think.

if you want something a little more advanced then you can try getting one here
Edited by Quozzo, Jun 27 2011, 05:22 PM.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
That's awesome, now is there a way I can make the arrows those images in the print?! :)
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You can remove the text and add a background to the span, also specifying a width and height. Or, you can replace the text with an HTML image.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1