XF 1.4 Minecraft Vote Page

xH3LLRAIZ3Rx · Jul 25, 2015

how do I do something like this: Vote | Scavenger Craft except only the tab thing, not the carasoul

oO5 Dynasty · Jul 25, 2015

xH3LLRAIZ3Rx said:
how do I do something like this: Vote | Scavenger Craft except only the tab thing, not the carasoul

Slider responsive - ThemesCorp.com

xH3LLRAIZ3Rx · Jul 25, 2015

oO5 Dynasty said:
Slider responsive - ThemesCorp.com

Does it work with Iframe?

oO5 Dynasty · Jul 25, 2015

xH3LLRAIZ3Rx said:
Does it work with Iframe?

You will have to ask the developer that, but i have it on my site, and its one of the best add-ons you can get.

xH3LLRAIZ3Rx · Jul 26, 2015

oO5 Dynasty said:
You will have to ask the developer that, but i have it on my site, and its one of the best add-ons you can get.

it doesnt

KevinEssence · Aug 6, 2015

Interested in this too

Ynd21 · Aug 8, 2015

I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:

<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>

(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes  to get more.

It's a tad sloppy, but it works

xH3LLRAIZ3Rx · Aug 8, 2015

Ynd21 said:

I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:

<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>

(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes  to get more.

It's a tad sloppy, but it works

Thanks

my players will be happy since that was the only thing I was waiting for to setup Voting

xH3LLRAIZ3Rx · Aug 8, 2015

Ynd21 said:

I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:

<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>

(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes  to get more.

It's a tad sloppy, but it works

How do I stop the Carousel from moving automatically?

Ynd21 · Aug 9, 2015

xH3LLRAIZ3Rx said:
How do I stop the Carousel from moving automatically?

Try opening Carousel.js and replace
TRANSITION_DURATION=600 with
TRANSITION_DURATION=99999 (it'll still slide, just takes longer)

Arc_MC · Oct 16, 2015

Ynd21 said:

I was interested in that as well. I took a look at how they were doing it and it's just straight up javascript that isn't to hard to duplicate (already did it for my forums)
You'll want to find on that page the js files, then just look at how they're using html to actually control the javascript

transition.js
carousel.js

Code:

<style media="screen">.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#fff;text-align:center;background:#222;border:3px solid #fff;-webkit-border-radius:23px;-moz-border-radius:23px;border-radius:23px;opacity:.5}.carousel-control.right{left:auto;right:15px}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-15px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-15px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.breadBoxBottom,.breadBoxTop,.titleBar{display:none}.breadcrumb{margin-bottom:10px!important;text-align:center!important;padding-top:8px;padding-bottom:8px}.button{margin-right:5px!important}</style>

<div class="breadcrumb">
<a class="button primary" data-target="#myVote" data-slide-to="0">Ark Vote #1</a>
<a class="button primary" data-target="#myVote" data-slide-to="1">Ark Vote #2</a>
<a class="button primary" data-target="#myVote" data-slide-to="2">7Days Vote #1</a>
<!-- <a class="button primary" data-target="#myVote" data-slide-to="3">Vote #4</a>
<a class="button primary" data-target="#myVote" data-slide-to="4">Vote #5</a> -->
</div>
<div id="myVote" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><center><font size="7px"><a href="http://ark-servers.net/server/1183/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://ark-servers.net/server/1183/vote/" id="frame1" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://arkservers.net/server/69.197.167.85:27015/upvote"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://arkservers.net/server/69.197.167.85:27015/upvote" id="frame2" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item"><center><font size="7px"><a href="http://7daystodie-servers.com/server/18621/vote/"><font color="red">Click Here or vote down below</font></a></font></center><br>
<iframe src="http://7daystodie-servers.com/server/18621/vote/" id="frame3" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<!-- <div class="item">
<iframe src="http://minecraft-mp.com/server/6376/vote/" id="frame4" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div>
<div class="item">
<iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" id="frame5" class="votebox" style="width: 1280px; height: 1200px; overflow-y: hidden;" frameborder="0" scrolling="no" seamless="seamless"></iframe>
</div> -->
</div>
<a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
<a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>
</div>
<script>
$(function() {
$('#myVote').carousel();
});
</script>

(thats the code Im using, I changed out the minecraft stuff for my ARK Server). Theres three slides, you can remove the comment codes  to get more.

It's a tad sloppy, but it works

I know this is a tad old, but that code above doesn't seem to work. When I click the > arrow to go to the next voting page, it just loads a webpage like www.example.com/#myVote instead of showing another voting page. How could this be fixed?

xH3LLRAIZ3Rx · Oct 17, 2015

Arc_MC said:
I know this is a tad old, but that code above doesn't seem to work. When I click the > arrow to go to the next voting page, it just loads a webpage like www.example.com/#myVote instead of showing another voting page. How could this be fixed?

do you have the JS files referenced in the page? if not, add this code to the top of the voting code for that page:

Code:

<xen:require js="js/transition.js" />
<xen:require js="js/carousel.js" />

do note that you have to modify the Template of the page and not the page itself, so go to appearance > Templates > search for page and find the _page_node_# of the page you put the Code in

xH3LLRAIZ3Rx · Oct 17, 2015

and if you don't want the each vote site to auto scroll through, add data-interval="false" to

Code:

<div id="myVote" class="carousel slide">

so then it would equal to

Code:

<div id="myVote" class="carousel slide" data-interval="false">

Exemption · Oct 17, 2015

Grr that page is laggy

Ynd21 · Oct 17, 2015

I took the code down / moved server hosts, I'll put it back up tonight. It is sort of laggy though not going to lie lol.

XF 1.4 Minecraft Vote Page

xH3LLRAIZ3Rx

Active member

oO5 Dynasty

Well-known member

xH3LLRAIZ3Rx

Active member

oO5 Dynasty

Well-known member

xH3LLRAIZ3Rx

Active member

KevinEssence

Active member

Ynd21

Member

xH3LLRAIZ3Rx

Active member

xH3LLRAIZ3Rx

Active member

Ynd21

Member

Arc_MC

Member

xH3LLRAIZ3Rx

Active member

xH3LLRAIZ3Rx

Active member

Exemption

Active member

Ynd21

Member

Similar threads

We value your privacy