The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Script integration

View previous topic View next topic Go down

Solved Script integration

Post by Mimóza on 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
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Script integration

Post by Genesis on February 8th 2016, 4:14 pm

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

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Script integration

Post by Mimóza on 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
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Script integration

Post by Genesis on February 9th 2016, 5:47 pm

Can you please post the codes here?

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Script integration

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Script integration

Post by Mimóza on 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
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Script integration

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Script integration

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

More than perfect! Thank you very much!!! Have a great day!! Very Happy

Mimóza
Forumember

Female Posts : 541
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Script integration

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

You're welcome ! ^^

Topic archived

Have a good weekend. Beer

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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