1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Minecraft Vote Page

Discussion in 'Styling and Customization Questions' started by xH3LLRAIZ3Rx, Jul 25, 2015.

  1. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

  2. oO5 Dynasty

    oO5 Dynasty Active Member

  3. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

  4. oO5 Dynasty

    oO5 Dynasty Active Member


    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.
     
  5. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

    it doesnt :(
     
  6. KevinEssence

    KevinEssence Member

    Interested in this too :eek:
     
  7. Ynd21

    Ynd21 Member

    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 :)
     
  8. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

    Thanks :D my players will be happy since that was the only thing I was waiting for to setup Voting
     
  9. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

    How do I stop the Carousel from moving automatically?
     
  10. Ynd21

    Ynd21 Member

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

    Arc_MC Member

    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?
     
  12. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

    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
     
  13. xH3LLRAIZ3Rx

    xH3LLRAIZ3Rx Member

    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">
    
     
  14. Exemption

    Exemption Active Member

    Grr that page is laggy
     
  15. Ynd21

    Ynd21 Member

    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.
     

Share This Page