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.

Logo animation Halt button

View previous topic View next topic Go down

Solved Logo animation Halt button

Post by Scarlet D. on October 18th 2016, 11:06 pm

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


Last edited by Scarlet D. on October 24th 2016, 1:40 pm; edited 3 times in total

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Logo animation Halt button

Post by vietkanpy on October 19th 2016, 3:49 am

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>

vietkanpy
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Logo animation Halt button

Post by Scarlet D. on October 19th 2016, 11:30 pm

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.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Logo animation Halt button

Post by vietkanpy on October 20th 2016, 3:16 am

@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
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Logo animation Halt button

Post by Scarlet D. on October 20th 2016, 11:40 pm

@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

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Logo animation Halt button

Post by vietkanpy on October 21st 2016, 2:30 am

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

vietkanpy
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Logo animation Halt button

Post by Scarlet D. on October 21st 2016, 11:27 am

@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?

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Logo animation Halt button

Post by SLGray on October 21st 2016, 10:10 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36616
Reputation : 2439
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Logo animation Halt button

Post by vietkanpy on October 22nd 2016, 2:54 am

oh . you want buton stop?

Fix buton stop and play cross banner Smile

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
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Logo animation Halt button

Post by Scarlet D. on October 22nd 2016, 4:07 pm

@vietkanpy wrote:oh . you want buton stop?

Fix buton stop and play cross banner Smile

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

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Logo animation Halt button

Post by SLGray on October 22nd 2016, 11:45 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36616
Reputation : 2439
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Logo animation Halt button

Post by vietkanpy on October 23rd 2016, 3:54 am

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

vietkanpy
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Logo animation Halt button

Post by Scarlet D. on October 23rd 2016, 2:37 pm

@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?

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Logo animation Halt button

Post by vietkanpy on October 23rd 2016, 5:01 pm

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>



vietkanpy
Forumember

Male Posts : 38
Reputation : 14
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: Logo animation Halt button

Post by Scarlet D. on October 24th 2016, 1:40 pm

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

Scarlet D.
Forumember

Male Posts : 121
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Logo animation Halt button

Post by APE on October 26th 2016, 11:47 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules




APE
Manager
Manager

Male Posts : 8598
Reputation : 748
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

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