Logo animation Halt button

Technical Details

Forum version : #PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Other
Who the problem concerns : All members
When the problem appeared : When I made the animation for the Logo
Forum link : http://onepiecegr.forum-pro.org/

Description of problem

Hey there!

I've recently had an issue with my logo. You see I made the logo animation with css, the script for the logo is:

Code:

#pun-intro.clearfix {
height: 260px;
width: auto;
padding-right: 300px;
margin-right: 0px;
background: url('http://orig14.deviantart.net/f27b/f/2016/099/0/8/full_op_story_by_patty110692-d9ya8vt.png') repeat-x;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
-webkit-animation: backgroundScroll 200s linear infinite;
animation: backgroundScroll 200s linear infinite;
}

@-webkit-keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}
 
@keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}

Now some members complain about how this animation makes the forum much heavier than their oldy computers can handle (I too have the same problem with my old laptop too).
So, all I want is a button like a switch that will stop the animation of my logo until the user presses it again (just like pause and play buttons). Additionaly I'd like the script to remember whether the user had the animation turned on or off (via cache or cookies i suppose)

Thanks in advance

css

Code:

#pun-intro{
height: 260px;
width: auto;
padding-right: 300px;
margin-right: 0px;
background: url('http://orig14.deviantart.net/f27b/f/2016/099/0/8/full_op_story_by_patty110692-d9ya8vt.png') repeat-x;
      -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#pun-intro.showbanner {
height: 260px;
width: auto;
padding-right: 300px;
margin-right: 0px;
background: url('http://orig14.deviantart.net/f27b/f/2016/099/0/8/full_op_story_by_patty110692-d9ya8vt.png') repeat-x;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
-webkit-animation: backgroundScroll 200s linear infinite;
animation: backgroundScroll 200s linear infinite;
}
@-webkit-keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}
 
@keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}

button click cross banner ( jquery ) . you can code to head

Code:


<button id="hotrofmshowbanner">Cross banner</button>
<script type="text/javascript">
//<![CDATA[
/* javascript Scrolling Effect Banner www.hotrofm.net - not delete*/
$(function() {
    $("#hotrofmshowbanner")
        .click(function() {
            $('#pun-intro').attr('class', "showbanner");
            my_setcookie("showbanner", "showbanner1", true);
        });
});
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner1") {
      $('#pun-intro').attr('class', "showbanner");
    }
});
//]]>
</script>

hey there @vietkanpy . I tried to apply those code but for some reason it seems it bugs my javascript scripts, this usually happens when something in the code i applied is wrong. Also my banner is applied with css to #pun-intro .clearfix, does this really matter?

Scarlet D. wrote:hey there @vietkanpy . I tried to apply those code but for some reason it seems it bugs my javascript scripts, this usually happens when something in the code i applied is wrong. Also my banner is applied with css to #pun-intro .clearfix, does this really matter?

fix add clearfix

demo online : http://kenhchiase24h.geekaddict.net/

Code:

<button id="hotrofmshowbanner">Cross banner</button>
<script type="text/javascript">
//<![CDATA[
/* javascript Scrolling Effect Banner www.hotrofm.net - not delete*/
$(function() {
    $("#hotrofmshowbanner")
        .click(function() {
            $('#pun-intro').attr('class', "clearfix showbanner");
            $("#hotrofmhidebanner").hide();
            my_setcookie("showbanner", "showbanner1", true);
        });
});
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner1") {
      $('#pun-intro').attr('class', "clearfix showbanner");
    }
});
//]]>
</script>

vietkanpy wrote:

Scarlet D. wrote:hey there @vietkanpy . I tried to apply those code but for some reason it seems it bugs my javascript scripts, this usually happens when something in the code i applied is wrong. Also my banner is applied with css to #pun-intro .clearfix, does this really matter?

fix add clearfix

demo online : http://kenhchiase24h.geekaddict.net/

Hmmm, something is still not quite right with the script, i see your demo version and the script succeded on halting the banner animation only the first time i pressed the button, now when i press the scrolling banner keeps scrolling

I speak English poorly, I have to use translaste.google, I do not quite understand what you mean

vietkanpy wrote:I speak English poorly, I have to use translaste.google, I do not quite understand what you mean

The script only succeeds to stop the banner animation just one time, when i refresh the page it just keeps working and the button becomes unusable.

is that better?

It sounds like there is an issue with the cookie.  A cookie is the part that stores the options you click.

oh . you want buton stop?

Fix buton stop and play cross banner

Demo : http://kenhchiase24h.geekaddict.net/

Code:

<button id="hotrofmshowbanner">Cross banner</button>
<button id="hotrofmhidebanner" style="display:none">stop Cross banner</button>
<script type="text/javascript">
//<![CDATA[
/* javascript Scrolling Effect Banner www.hotrofm.net - not delete*/
$(function() {
    $("#hotrofmshowbanner")
        .click(function() {
            $('#pun-intro').attr('class', "clearfix showbanner");
            $("#hotrofmhidebanner").show();
            $("#hotrofmshowbanner").hide();
            my_setcookie("showbanner", "showbanner1", true);
        });
});
$(function() {
    $("#hotrofmhidebanner")
        .click(function() {
            $('#pun-intro').attr('class', "clearfix");
            $("#hotrofmhidebanner").hide();
            $("#hotrofmshowbanner").show();
            my_setcookie("showbanner", "showbanner2", true);
        });
}); 
 
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner1") {
      $('#pun-intro').attr('class', "clearfix showbanner");
      $("#hotrofmhidebanner").show();
      $("#hotrofmshowbanner").hide();
    }
});
 
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner2") {
      $('#pun-intro').attr('class', "clearfix");
      $("#hotrofmhidebanner").hide();
      $("#hotrofmshowbanner").show();
    }
});
 
//]]>
</script>

vietkanpy wrote:oh . you want buton stop?

Fix buton stop and play cross banner

Demo : http://kenhchiase24h.geekaddict.net/

Code:

<button id="hotrofmshowbanner">Cross banner</button>
<button id="hotrofmhidebanner" style="display:none">stop Cross banner</button>
<script type="text/javascript">
//<![CDATA[
/* javascript Scrolling Effect Banner www.hotrofm.net - not delete*/
$(function() {
    $("#hotrofmshowbanner")
        .click(function() {
            $('#pun-intro').attr('class', "clearfix showbanner");
            $("#hotrofmhidebanner").show();
            $("#hotrofmshowbanner").hide();
            my_setcookie("showbanner", "showbanner1", true);
        });
});
$(function() {
    $("#hotrofmhidebanner")
        .click(function() {
            $('#pun-intro').attr('class', "clearfix");
            $("#hotrofmhidebanner").hide();
            $("#hotrofmshowbanner").show();
            my_setcookie("showbanner", "showbanner2", true);
        });
}); 
 
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner1") {
      $('#pun-intro').attr('class', "clearfix showbanner");
      $("#hotrofmhidebanner").show();
      $("#hotrofmshowbanner").hide();
    }
});
 
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner2") {
      $('#pun-intro').attr('class', "clearfix");
      $("#hotrofmhidebanner").hide();
      $("#hotrofmshowbanner").show();
    }
});
 
//]]>
</script>

Perfect! Thanks a lot mate! the problem is now solved, althought when i put it in my forum, the button doesn't appear, i hope i will find a way


edit: Your script seems to work perfectly to your forum but when i put it in my forum it bugs out several other javascript scripts. Hm....

Is this solved?  You have marked it with the solved icon, but in your last post, you seem to have questions.

you delete css post #1 replace css.post #2

SLGray wrote:Is this solved?  You have marked it with the solved icon, but in your last post, you seem to have questions.

nah sorry, not yet, i just forgot to change it back to unsolved when i've seen it doesn't actually works.

vietkanpy wrote:you delete css post #1 replace css.post #2

@vietkanpy what do you mean with that? I just see one css script here that you posted me, can you please explain further?

Administration Panel >> display >> css

seach and delete

Code:

#pun-intro.clearfix {
height: 260px;
width: auto;
padding-right: 300px;
margin-right: 0px;
background: url('http://orig14.deviantart.net/f27b/f/2016/099/0/8/full_op_story_by_patty110692-d9ya8vt.png') repeat-x;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
-webkit-animation: backgroundScroll 200s linear infinite;
animation: backgroundScroll 200s linear infinite;
}

@-webkit-keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}
 
@keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}

copy code to replace

Code:

#pun-intro{
height: 260px;
width: auto;
padding-right: 300px;
margin-right: 0px;
background: url('http://orig14.deviantart.net/f27b/f/2016/099/0/8/full_op_story_by_patty110692-d9ya8vt.png') repeat-x;
      -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#pun-intro.showbanner {
height: 260px;
width: auto;
padding-right: 300px;
margin-right: 0px;
background: url('http://orig14.deviantart.net/f27b/f/2016/099/0/8/full_op_story_by_patty110692-d9ya8vt.png') repeat-x;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
-webkit-animation: backgroundScroll 200s linear infinite;
animation: backgroundScroll 200s linear infinite;
}
@-webkit-keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}
 
@keyframes backgroundScroll {
from {background-position: 0px 0;}
to {background-position: -15600px 0;}
}

copy code to head

Code:

<button id="hotrofmshowbanner">Cross banner</button>
<button id="hotrofmhidebanner" style="display:none">stop Cross banner</button>
<script type="text/javascript">
//<![CDATA[
/* javascript Scrolling Effect Banner www.hotrofm.net - not delete*/
$(function() {
    $("#hotrofmshowbanner")
        .click(function() {
            $('#pun-intro').attr('class', "clearfix showbanner");
            $("#hotrofmhidebanner").show();
            $("#hotrofmshowbanner").hide();
            my_setcookie("showbanner", "showbanner1", true);
        });
});
$(function() {
    $("#hotrofmhidebanner")
        .click(function() {
            $('#pun-intro').attr('class', "clearfix");
            $("#hotrofmhidebanner").hide();
            $("#hotrofmshowbanner").show();
            my_setcookie("showbanner", "showbanner2", true);
        });
});
 
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner1") {
      $('#pun-intro').attr('class', "clearfix showbanner");
      $("#hotrofmhidebanner").show();
      $("#hotrofmshowbanner").hide();
    }
});
 
$(function() {
    var showbanner = my_getcookie("showbanner");
    if (showbanner === "showbanner2") {
      $('#pun-intro').attr('class', "clearfix");
      $("#hotrofmhidebanner").hide();
      $("#hotrofmshowbanner").show();
    }
});
 
//]]>
</script>

ah! that did the trick! Now i can thank you properly! Thanks a lot friend now everything is working!