Announcement

Collapse
No announcement yet.

Simple Rotating Banner Script

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    Is there anything that I can add to just that banner module to prevent right click. I realize there are work arounds but I would still want to add it
    thanks

    Comment


      #17
      Originally posted by Mitch View Post
      Is there anything that I can add to just that banner module to prevent right click. I realize there are work arounds but I would still want to add it
      thsnkd
      I don't personally recommend this but since you asked...

      Code:
      window.addEventListener('load', function() {
          document.addEventListener('contextmenu', function(e) {
              if ($(e.target).closest('#widget_[COLOR=#FF0000]XXXXX[/COLOR]').length > 0) {
                  alert('Sorry, right click is disabled in this module.');
                  e.preventDefault();
                  return false;
              }
              return true;
          });
      });
      Change XXXXX to the corresponding widget id of the target module.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #18
        So I put this in CSS and nothing happened.

        I got this ID from inspect
        id= widget_336.
        I put 336 into your code

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          It's not CSS. It's Javascript. So put it inside <script> </script> tags.

        #19
        Sorry but i'm not sure. So the code goes between the script tags like I did here? Then it gets pasted to the module?

        Code:
        <script>
        window.addEventListener('load', function() {
           document.addEventListener('contextmenu', function(e) {
              if ($(e.target).closest('#widget_336').length > 0) {
                 alert('Sorry, right click is disabled in this module.');
                 e.preventDefault();
                 return false;
              }
              return true;
           });
        });
        </script>
        Last edited by glennrocksvb; 11-12-2018, 06:14 PM. Reason: Fixed code formatting using [code] tags

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          Yes...

        #20
        Okay that worked.. Thanks Glenn

        More coffee coming sir

        Comment


        • glennrocksvb
          glennrocksvb commented
          Editing a comment
          Cool!

        #21
        Hi Glenn

        Thanks for the code, its working great!

        Comment


          #22
          question about this mod...

          only works with several images but just one link?
          or u can put, may be, 10 images with 10 links?

          Comment


            #23
            Originally posted by yamijhon View Post
            question about this mod...

            only works with several images but just one link?
            or u can put, may be, 10 images with 10 links?
            Yep 10 images, 10 links, you get a link per image

            Comment


              #24
              Originally posted by Barkyj View Post

              Yep 10 images, 10 links, you get a link per image
              thanks Barkyj

              Comment


                #25
                You can put as many images as you want. As Barkyj said, you get a link per image. Just update the bannerImages Javascript variable found in post #1 with the appropriate set of image src and link. Follow the format of the sample provided and take note of the code comments in // or /* */ characters.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #26
                  Originally posted by glennrocksvb View Post
                  You can put as many images as you want. As Barkyj said, you get a link per image. Just update the bannerImages Javascript variable found in post #1 with the appropriate set of image src and link. Follow the format of the sample provided and take note of the code comments in // or /* */ characters.
                  tnx 2 u also dude...
                  but, another question, the size of each image is auto or i need to put some extra code?

                  Comment


                    #27
                    I sized my images before I uploaded them, 1160x200 is what I used, unsure what happens if the images are too big though.

                    Comment


                      #28
                      It should automatically scale down to whatever available space.
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #29
                        ok, i'm stuck with this...
                        i tried to put the code in header and footer, none of those works, am i doing something wrong?

                        Code:
                        <div class="h-align-center">
                            <!-- Insert default image and link here -->
                            <a id="rotateBannerLink" href="http://www.directemar.cl" target="_blank"><img id="rotateBannerImg" src="http://www.denunciasbuceo.cl/foro/banners/direct.jpg" alt="" /></a>
                        </div>
                        <script>
                        (function() {
                            // list down all possible images and links here
                            var bannerImages = [
                                    {
                                        link: 'http://www.dt.gob.cl',
                                        src: 'http://www.denunciasbuceo.cl/foro/banners/dt.jpg'
                                    },
                                    {
                                        link: 'http://mma.gob.cl',
                                        src: 'http://www.denunciasbuceo.cl/foro/banners/mma.jpg'
                                    },
                                    {
                                        link: 'http://www.sernapesca.cl',
                                        src: 'http://www.denunciasbuceo.cl/foro/banners/sern.jpg'
                                    },
                                    {
                                        link: 'http://www.ssffaa.cl',
                                        src: 'http://www.denunciasbuceo.cl/foro/banners/subs ffaa.jpg'
                        
                                    },
                                    /* no trailing comma here at the last item */            
                                ],
                                link = document.getElementById('rotateBannerLink'),
                                image = document.getElementById('rotateBannerImg');
                        
                            // function to get a random banner from the list of banners
                            function rotateBanner() {
                                var index = Math.floor(Math.random() * bannerImages.length);
                                image.src = bannerImages[index].src;
                                link.href = bannerImages[index].link;
                            }
                        
                            if (link && image) {
                                // rotate the banner every 3 seconds
                                window.setInterval(rotateBanner, 3000); //1000 (msec) = 1 sec (adjust as needed)
                            } else {
                                console.log('Error: Link and/or image does not exists. Make sure the <a> and <img> IDs are correct.');
                            }
                        
                        })();
                        </script>
                        edit: now is working... but i can't put in center, it appears to left side of forum, some help please??
                        Last edited by yamijhon; 06-13-2019, 08:00 PM. Reason: is working, but not at all

                        Comment


                          #30
                          Can you post or PM a link to your site? The image should be centered because of the h-align-center class in the div container. There might be other CSS that's overriding the slideshow CSS.
                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"