Script integration
3 posters
Page 1 of 1
Script integration
Hello everyone,
I found a lovely script that would fit my upcoming forum, but I cannot really make it work.
It's supposed to be like this. :S
I managed to make it appear somehow, but I'd like to place the color changer part to the banner place (yellow part). I suppose the ".branding" thing should be added somewhere... but where?
And last but not least the balloons don't want to fly. But I'd like them to fly. Any tips to make them move?
Could anyone help me, please?
punbb http://graphicballoon.huhohi.com/
Edit: After logging out they cannor be seen, but they are there when I'm logged in. :O
I found a lovely script that would fit my upcoming forum, but I cannot really make it work.
It's supposed to be like this. :S
I managed to make it appear somehow, but I'd like to place the color changer part to the banner place (yellow part). I suppose the ".branding" thing should be added somewhere... but where?
And last but not least the balloons don't want to fly. But I'd like them to fly. Any tips to make them move?
Could anyone help me, please?
punbb http://graphicballoon.huhohi.com/
Edit: After logging out they cannor be seen, but they are there when I'm logged in. :O
Last edited by Mimóza on Sat 13 Feb - 10:01; edited 1 time in total
Take Notes- Helper
- Posts : 2337
Reputation : 324
Language : English
Location : Forumountain
Re: Script integration
Well... yes.
It was divided nicely so I just put them to their places.
CSS to CSS
HTML to overall_header
JS - JS on the homepage
The wrong appear is due to the wrong placing in the HTML I assume. Let's say, I can solve that somehow... maybe. But I don't understand why the script is not working properly, so why the balloons don't fly.
It was divided nicely so I just put them to their places.
CSS to CSS
HTML to overall_header
JS - JS on the homepage
The wrong appear is due to the wrong placing in the HTML I assume. Let's say, I can solve that somehow... maybe. But I don't understand why the script is not working properly, so why the balloons don't fly.
Re: Script integration
Can you please post the codes here?
Take Notes- Helper
- Posts : 2337
Reputation : 324
Language : English
Location : Forumountain
Re: Script integration
Hi @Mimóza,
Try pasting the following HTML in the area you want the balloons to show up :
Some small adjustments might need to be made to fix the content size. By default the container is positioned fixed, but I changed it to an absolute position. So, let me know where you place it, because you'll need to set the parent container to
. If any problems arise, such as overlapping, try placing the HTML that's being overlapped before the last closing
tag.
If you need any help let me know.
Try pasting the following HTML in the area you want the balloons to show up :
- Code:
<style>@import url(http://fonts.googleapis.com/css?family=Raleway);.balloon,.balloon:active{cursor:crosshair}.intro{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:-ms-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;-webkit-align-items:center;-ms-align-items:center;align-items:center;background:#ebebec}.balloon{position:absolute;bottom:-5%;opacity:.9;border-radius:50%;width:18px;height:25px;z-index:2}.balloon:after{position:relative;background:inherit;top:18px;left:8px;display:block;content:'';height:.6rem;width:.2rem;border-radius:100%}.balloon:hover{font-size:2.1em;opacity:.7}.balloon:nth-child(1){background:#ebff14;bottom:55%;left:50%;-webkit-animation:once-a 8s 1 ease-in forwards;animation:once-a 8s 1 ease-in forwards}@-webkit-keyframes once-a{0%{bottom:55%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}@keyframes once-a{0%{bottom:55%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}.balloon:nth-child(2){background:#2714ff;bottom:35%;left:20%;-webkit-animation:once-b 8s 1 ease-in forwards;animation:once-b 8s 1 ease-in forwards}@-webkit-keyframes once-b{0%{bottom:35%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}@keyframes once-b{0%{bottom:35%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}.balloon:nth-child(3){background:#bd60ff;bottom:15%;left:30%;-webkit-animation:once-c 11s 1 ease-in forwards;animation:once-c 11s 1 ease-in forwards}@-webkit-keyframes once-c{0%{bottom:15%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes once-c{0%{bottom:15%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(4){background:#ff2714;bottom:5%;left:55%;-webkit-animation:once-d 14s 1 ease-in forwards;animation:once-d 14s 1 ease-in forwards}@-webkit-keyframes once-d{0%{bottom:5%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes once-d{0%{bottom:5%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(5){background:#14ebff;bottom:10%;left:75%;-webkit-animation:once-e 10s 1 ease-in forwards;animation:once-e 10s 1 ease-in forwards}@-webkit-keyframes once-e{0%{bottom:10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes once-e{0%{bottom:10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(6){background:#ff8abb;bottom:-10%;left:45%;-webkit-animation:balloon 13s 2s infinite ease-in;animation:balloon 13s 2s infinite ease-in}@-webkit-keyframes balloon{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}@keyframes balloon{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(8deg)}20%{-webkit-transform:rotate(4deg)}50%{-webkit-transform:translateX(5px) rotate(-12deg)}75%{-webkit-transform:translateX(-2px) rotate(10deg)}100%{bottom:110%;-webkit-transform:rotate(-8deg)}}.balloon:nth-child(7){background:#ffab35;bottom:-10%;left:20%;-webkit-animation:balloon2 15s 3.2s infinite ease-in;animation:balloon2 15s 3.2s infinite ease-in}@-webkit-keyframes balloon2{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}@keyframes balloon2{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:rotate(-8deg)}50%{-webkit-transform:translateX(-10px) rotate(10deg)}75%{-webkit-transform:translateX(5px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(8deg)}}.balloon:nth-child(8){background:#2714ff;bottom:-10%;left:75%;-webkit-animation:balloon3 19s 10s infinite ease-in;animation:balloon3 19s 10s infinite ease-in}@-webkit-keyframes balloon3{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes balloon3{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(0)}20%{-webkit-transform:translateX(-4px) rotate(4deg)}50%{-webkit-transform:translateX(8px) rotate(-8deg)}75%{-webkit-transform:translateX(-10px) rotate(10deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(9){background:#ebff14;bottom:-10%;left:55%;-webkit-animation:balloon4 12s 6s infinite ease-in;animation:balloon4 12s 6s infinite ease-in}@-webkit-keyframes balloon4{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}@keyframes balloon4{0%{bottom:-10%;-webkit-transform:translateX(0) rotate(-4deg)}40%{-webkit-transform:translateX(-8px) rotate(10deg)}85%{-webkit-transform:translateX(10px) rotate(-8deg)}100%{bottom:110%;-webkit-transform:translateX(0) rotate(0)}}.balloon:nth-child(10){bacground:#bd60ff;bottom:-10%;left:65%;-webkit-animation:balloon4 12s 10s infinite ease-in;animation:balloon4 12s 10s infinite ease-in}.balloon:nth-child(11){background:#14bd22;bottom:-10%;left:85%;-webkit-animation:balloon2 12s 4s infinite ease-in;animation:balloon2 12s 4s infinite ease-in}.balloon:nth-child(12){background:#14ebff;bottom:-10%;left:10%;-webkit-animation:balloon3 14s 7s infinite ease-in;animation:balloon3 14s 7s infinite ease-in}.balloon:nth-child(13){background:#ff2714;bottom:-10%;left:30%;-webkit-animation:balloon 13s 10.5s infinite ease-in;animation:balloon 13s 10.5s infinite ease-in}.fade{opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s}</style>
<section class="intro" id="intro">
<section class="balloons-conatiner" id="balloons-container">
<div class="balloon yellow" ></div>
<div class="balloon blue" ></div>
<div class="balloon purple" ></div>
<div class="balloon red" ></div>
<div class="balloon cyan" ></div>
<!-- infinite-->
<div class="balloon pink" ></div>
<div class="balloon orange" ></div>
<div class="balloon blue" ></div>
<div class="balloon yellow" ></div>
<div class="balloon purple" ></div>
<div class="balloon green" ></div>
<div class="balloon cyan" ></div>
<div class="balloon red" ></div>
</section>
</section>
<script>function pop(n){var o=n.target;o.classList.contains("yellow")?intro.style.background="rgb(235,255,20)":o.classList.contains("blue")?intro.style.background="rgb(39,20,255)":o.classList.contains("purple")?intro.style.background="rgb(189,96,255)":o.classList.contains("red")?intro.style.background="rgb(255,39,20)":o.classList.contains("cyan")?intro.style.background="rgb(20,235,255)":o.classList.contains("pink")?intro.style.background="rgb(255,138,187)":o.classList.contains("green")?intro.style.background="rgb(20,189,34)":o.classList.contains("orange")&&(intro.style.background="rgb(255,171,53)"),o.style.display="none",n.preventDefault(),n.stopPropagation()}for(var balloonsContainer=document.getElementById("balloons-container"),balloons=balloonsContainer.childNodes,i=0;i<balloons.length;i++){var balloon=balloons[i];balloon.addEventListener("click",pop,!1)}</script>
Some small adjustments might need to be made to fix the content size. By default the container is positioned fixed, but I changed it to an absolute position. So, let me know where you place it, because you'll need to set the parent container to
|
|
If you need any help let me know.
Re: Script integration
Forumedic, I put the exact same codes you can see in Editor mode on the page I linked in my first post.
But now changed the HTML to what @Ange Tuteur gave me. Thank you so much!
It is working great now!!! But... as the code colors the background, the default yellow background color and image are gone. I assume it is because the balloon code overwrites the basic settings? How could it be corrected? Adding a new class or id to the ballon? Or? Could you help me, please?
But now changed the HTML to what @Ange Tuteur gave me. Thank you so much!
It is working great now!!! But... as the code colors the background, the default yellow background color and image are gone. I assume it is because the balloon code overwrites the basic settings? How could it be corrected? Adding a new class or id to the ballon? Or? Could you help me, please?
Re: Script integration
Hi again,
Try adding this CSS to your stylesheet :
I took the default background attributes from your guest message and made all of them important, except for the background color ( because it changes by the balloons ). I also hid the overflow because I noticed some of the balloons were exiting their parent container.
Try adding this CSS to your stylesheet :
- Code:
#branding #intro {
background-color:#FFDF50;
background-image:url(http://i1370.photobucket.com/albums/ag257/AppleDrink/aimforthesky.png) !important;
background-position:bottom center !important;
background-repeat:no-repeat !important;
overflow:hidden;
}
I took the default background attributes from your guest message and made all of them important, except for the background color ( because it changes by the balloons ). I also hid the overflow because I noticed some of the balloons were exiting their parent container.
Similar topics
» Game servers list and status integration
» Forum user integration
» Suggested Script (Need Someone that can read script)
» User Integration from CBOX.ws on Forumotion???
» Popup login with Email integration
» Forum user integration
» Suggested Script (Need Someone that can read script)
» User Integration from CBOX.ws on Forumotion???
» Popup login with Email integration
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum