The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Script integration

3 posters

Go down

Solved Script integration

Post by Mimóza February 6th 2016, 8:41 pm

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? Very Happy
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? Very Happy 
Could anyone help me, please? Very Happy

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 February 13th 2016, 10:01 am; edited 1 time in total
Mimóza
Mimóza
Forumember

Female Posts : 679
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Script integration

Post by Take Notes February 8th 2016, 4:14 pm

Did you use the same code from what the creator of the script used?
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Solved Re: Script integration

Post by Mimóza February 9th 2016, 5:46 pm

Well... yes. Very Happy 
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. Very Happy But I don't understand why the script is not working properly, so why the balloons don't fly. blackeye
Mimóza
Mimóza
Forumember

Female Posts : 679
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Script integration

Post by Take Notes February 9th 2016, 5:47 pm

Can you please post the codes here?
Take Notes
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

Back to top Go down

Solved Re: Script integration

Post by Ange Tuteur February 9th 2016, 6:07 pm

Hi @Mimóza,

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
Code:
position:relative;
. If any problems arise, such as overlapping, try placing the HTML that's being overlapped before the last closing
Code:
</section>
tag.

If you need any help let me know.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Script integration

Post by Mimóza February 11th 2016, 9:13 am

Forumedic, I put the exact same codes you can see in Editor mode on the page I linked in my first post. Very Happy

But now changed the HTML to what @Ange Tuteur gave me. Thank you so much! Very Happy
It is working great now!!! Very Happy 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? Very Happy Could you help me, please? cheers
Mimóza
Mimóza
Forumember

Female Posts : 679
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Script integration

Post by Ange Tuteur February 11th 2016, 3:16 pm

Hi again,

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Script integration

Post by Mimóza February 13th 2016, 10:00 am

More than perfect! Thank you very much!!! Have a great day!! Very Happy
Mimóza
Mimóza
Forumember

Female Posts : 679
Reputation : 278
Language : Hungarian, English

https://graphicballoon.forumotion.com/

Back to top Go down

Solved Re: Script integration

Post by Ange Tuteur February 13th 2016, 1:44 pm

You're welcome ! ^^

Topic archived

Have a good weekend. Beer
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum