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
  • 2
[ C ] Rotating News Box
Topic Started: Jun 15 2011, 04:04 PM (3,127 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
 
Replies:
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
Okay, well, I am experience and error on my computer, I don't know if you guys are too but http://s4.zetaboards.com/Vultures_Nest/index/ ON the CG Dark, theme... The arrows are in my table on the top, now by the image and text.. ? You see it too?
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Code: Left Arrow CSS
 
float: left;
position: relative;
top: 65px;

Code: Right Arrow CSS
 
float: right;
position: relative;
top: 65px;
Adjust the top:65px; to your liking (increasing 65px will bring the arrow lower, decreasing it will do the opposite).
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
And to move it in, I would do a left 10px and a right 10 px?
Also one more thing!!
Edited by .Vulture, Jun 27 2011, 09:29 PM.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
I would use the GoW pic from your print as i had to cut it a little short as the left arrow button was overlapping it, so it doesn't blend in to the background properly.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
I got it to work!! :) Thanks for all your help guys!! :) Now I just gotta make the image blend each time!! ;)
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
I wans't happy with the length of the code, so i made it shorter. First you need to add the arrow class to teh left and right arrows, then replace the JS with this
Code:
 
<script type='text/javascript'>
$('.slideshow .content:first').addClass("active").show();

$('.slideshow .arrow:not(".busy")').live('click', function(){
$(this).addClass("busy");
arr = $(this).parent().find(".arrow");
arr.addClass("busy");
dir = $(this).hasClass("left") ? "prev" : "next";
start = $(this).hasClass("left") ? ".content:last" : ".content:first";
num = $(this).parent().find('.active')[dir+"All"](".content");
active = $(this).parent().find(".active").removeClass("active");
active.fadeOut(function(){
if(num.length > 0){
active[dir]().fadeIn().addClass("active");
}else{
active.parent().find(start).addClass("active").fadeIn();
};
arr.removeClass("busy");
});
});

slider = setInterval(auto, 5000);

function auto(){
$('.slideshow .right').click();
};

$('.slideshow').mouseenter(function(){
clearInterval(slider);
}).mouseleave(function(){
slider = setInterval(auto, 5000);
});
</script>


It also stops the code having a fit when the arrows are clicked very fast.
Edited by Quozzo, Jun 28 2011, 02:19 PM.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
Wait huh? Okay, if I give you my old code will you add in the other stuff?
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
sure, you only need to add another class to the arrows and replace the JS but i can do that for you.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
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>
<center><div class='slideshow'>
<span class='left left_arrow' style='float: left;
position: relative;
top: 50px;
left: 30px'></span>
<span class='right right_arrow' style='float: right;
position: relative;
top: 50px;
right: 30px'></span>
<div class='contents'>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />GOW3 Report is up! Click the link below to read the full report.</color></div>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />Lets make another test!! :)</div>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />And finally another test!!</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, 4000);

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, 4000);
});
</script>



Thats what, I got i added classes onto it so I could do the hovers1
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
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>
<center><div class='slideshow'>
<span class='left left_arrow arrow' style='float: left;
position: relative;
top: 50px;
left: 30px'></span>
<span class='right right_arrow arrow' style='float: right;
position: relative;
top: 50px;
right: 30px'></span>
<div class='contents'>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />GOW3 Report is up! Click the link below to read the full report.</color></div>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />Lets make another test!! :)</div>
<div class='content'><img src='http://img405.imageshack.us/img405/6926/gow2j.png' />And finally another test!!</div>
</div>
</div>
<div style='clear:both;'></div>

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

$('.slideshow .arrow:not(".busy")').live('click', function(){
$(this).addClass("busy");
arr = $(this).parent().find(".arrow");
arr.addClass("busy");
dir = $(this).hasClass("left") ? "prev" : "next";
start = $(this).hasClass("left") ? ".content:last" : ".content:first";
num = $(this).parent().find('.active')[dir+"All"](".content");
active = $(this).parent().find(".active").removeClass("active");
active.fadeOut(function(){
if(num.length > 0){
active[dir]().fadeIn().addClass("active");
}else{
active.parent().find(start).addClass("active").fadeIn();
};
arr.removeClass("busy");
});
});

slider = setInterval(auto, 5000);

function auto(){
$('.slideshow .right').click();
};

$('.slideshow').mouseenter(function(){
clearInterval(slider);
}).mouseleave(function(){
slider = setInterval(auto, 5000);
});
</script>
Try that instead.
Offline Profile Goto Top
 
.Vulture
Member Avatar
Connect Gaming
[ *  *  * ]
Thanks Cory! :)
Offline Profile Goto Top
 
Roby-ZNR
Member Avatar
Efficacy
[ *  *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 2