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.

Scrolling Banner

View previous topic View next topic Go down

Solved Scrolling Banner

Post by Anzo on September 28th 2015, 10:58 am

Hi, Very Happy

I have a big banner that I want to scroll from left to right infinitely, like a loop that doesn't end. I was hoping that someone would provide me with the JS required to do so.

This is the banner: http://i.imgur.com/mSG0qT3.png

Something like this?


Last edited by Anzo on September 29th 2015, 1:40 pm; edited 1 time in total

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Scrolling Banner

Post by SLGray on September 28th 2015, 10:59 am

Where are you adding this banner?


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


SLGray
Administrator
Administrator

Male Posts : 35674
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Scrolling Banner

Post by Zed is Not Dead on September 28th 2015, 11:08 am

couldn't you just go into Admin Pannel, Display, Generalities post the image in a code like this

Code:
[scroll][img]your image link here[/img][/scroll]

Then hit save?

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Scrolling Banner

Post by KpuCk0 on September 28th 2015, 11:42 am

ACP > Messages and e-mails > Announcements, then make the options for your own and how they looks good on your forum.

KpuCk0
Graphic Designer
Graphic Designer

Male Posts : 747
Reputation : 150
Language : Bulgarian, English
Location : Bulgaria

http://www.lfszone.com

Back to top Go down

Solved Re: Scrolling Banner

Post by Anzo on September 28th 2015, 1:21 pm

@SLGray inside the red rectangular shape http://i.imgur.com/CxxmtLq.png
AP > Display > Pics Management > Advanced Mode > Forum main logo. That's where it is right now.

This is the forum: http://daskintest.forumarabia.com/

@Zed is Not Dead it's forum banner not homepage message.

@KpuCk0 It's not for announcements.

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Scrolling Banner

Post by Ange Tuteur on September 28th 2015, 1:42 pm

Hi @Anzo,

Try creating a script in all the pages with the following :
Code:
(function() {
  var marquee = document.createElement('MARQUEE'),
      attributes = {
        id : 'bannerScroller',
        direction : 'left',
        innerHTML : '<img src="http://i.imgur.com/s5gt9CW.png"/>'
      },
      i;

  for (i in attributes) marquee[i] = attributes[i];

  $(function() {
    var logo = document.getElementById('logo');
    if (logo) {
      logo.parentNode.insertBefore(marquee, logo);
      logo.style.display = 'none';
    }
  });
}());

You can place the images you want in the marquee by setting the innerHTML content :
Code:
innerHTML : '<img src="http://i.imgur.com/s5gt9CW.png"/>'

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner

Post by Anzo on September 28th 2015, 1:48 pm

Hm well it's scrolling but I want it to repeat itself not start over when finished. Like I don't want it to start from right side and then move to the left side, the blue background shouldn't be visible. Just like normal banners where they cover the entire area only it scrolls and connects with the next repetition when over.

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Scrolling Banner

Post by Ange Tuteur on September 28th 2015, 2:09 pm

In that case you can try this instead :
Code:
(function() {
  var marquee = document.createElement('DIV'),
      settings = {
        duration : 5000,
        direction : 'left',
        duplicated : true,
        pauseOnHover : true,
        gap : 0
      };

  marquee.innerHTML = '<img src="http://i.imgur.com/s5gt9CW.png"/>';

  $(function() {
    var logo = document.getElementById('logo');
    if (logo) {
      logo.parentNode.insertBefore(marquee, logo);
      logo.style.display = 'none';
http://illiweb.com/rs4/16/frm//jquery/marquee/jquery.marquee.min.js
     
      if ($(document).marquee) $(marquee).marquee(settings);
      else {
        $.getScript('http://illiweb.com/rs4/16/frm//jquery/marquee/jquery.marquee.min.js ', function() {
          $(marquee).marquee(settings);
        });
      }
    }
  });
}());

It's a jQuery marquee, the same used for the recent topic scrolling.

You can find the settings here :
https://github.com/aamirafridi/jQuery.Marquee

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner

Post by Anzo on September 28th 2015, 3:46 pm

Hm, okay Very Happy

But, can i have it start from left and then start scrolling? right its starting from right and scrolling to left, meaning the BG is blue/empty until the banner start scrolling.

Like i want it to start from where the red arrow is: http://i.imgur.com/gFHXQ0E.png

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Scrolling Banner

Post by Ange Tuteur on September 28th 2015, 3:48 pm

Sure, just edit the settings object :
Code:
      settings = {
        duration : 5000,
        direction : 'left',
        duplicated : true,
        pauseOnHover : true,
        gap : 0
      };

Change 'left' to 'right' Wink

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner

Post by Anzo on September 28th 2015, 4:23 pm

That's not what I meant

You see, when you first load the page, you see the blue background and then the banner starts showing slowly from left/right and scroll from there. Instead, I want it to start like a normal banner, fully on the screen, and only after it should start scrolling.

I'm not sure If I'm describing this correctly lol

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Scrolling Banner

Post by Ange Tuteur on September 29th 2015, 11:57 am

Hm.. I understand what you're saying. You can set a delay with window.setTimeout() but as for getting the image a head start on the marquee, I'm not sure. blackeye

This is the script with a delay though :
Code:
(function() {
  var marquee = document.createElement('DIV'),
      settings = {
        duration : 5000,
        direction : 'right',
        duplicated : true,
        pauseOnHover : true,
        gap : 0
      };

  marquee.innerHTML = '<img src="http://i.imgur.com/s5gt9CW.png"/>';

  $(function() {
    var logo = document.getElementById('logo');
    if (logo) {
      logo.parentNode.insertBefore(marquee, logo);
      logo.style.display = 'none';
     
      window.setTimeout(function() {
        if ($(document).marquee) $(marquee).marquee(settings);
        else {
          $.getScript('http://illiweb.com/rs4/16/frm//jquery/marquee/jquery.marquee.min.js ', function() {
            $(marquee).marquee(settings);
          });
        }
      },1000);
    }
  });
}());

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Scrolling Banner

Post by Anzo on September 29th 2015, 1:39 pm

Okay, thank you Very Happy

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Scrolling Banner

Post by SLGray on September 29th 2015, 6:57 pm

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 35674
Reputation : 2375
Language : English
Location : United States

http://fmthemes.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