[Library Support] Change Name Of "News" (Updated: 2/29/16)

[cbeez]

It cleared up before I ever added the header. Thanks.

[®i©hie]

May 7, 2016 14:36:08 GMT -8 cbeez said:

It cleared up before I ever added the header. Thanks.

Glad to see it's been resolved!

[artdoc]

I see I can make the News taller to hold an image, and sure, I can change the name, but the space where the name goes stays the same! I can't fit more than four characters. How do I extend that space?

bpbasecamp.freeforums.net

[®i©hie]

Jun 17, 2016 7:19:42 GMT -8 artdoc said:

I see I can make the News taller to hold an image, and sure, I can change the name, but the space where the name goes stays the same! I can't fit more than four characters. How do I extend that space?

bpbasecamp.freeforums.net

Updated!

V. 1.3.0 - You can now set the width, as well as the height.

artdoc try the latest version i just posted.

[artdoc]

"try the latest version i just posted."

I went to your page of plug-ins, found it, installed it, ended up with the same q.2 version! I did this twice, never found that I had V 1.3! I'll try again in a few days. Thanks.

[®i©hie]

Jun 18, 2016 14:53:14 GMT -8 artdoc said:

"try the latest version i just posted."

I went to your page of plug-ins, found it, installed it, ended up with the same q.2 version! I did this twice, never found that I had V 1.3! I'll try again in a few days. Thanks.

it should be updated in the plugin library by mon. since PB staff have to review it first.

[Matte]

®i©hie I know you're not very active here anymore (and this topic/plugin hasn't been updated for years), but I'm posting this with the hope that someone else might have some kind of explanation for me.


This only happens when using the "slide" animation. The "flip" animation works fine. A news item that's long enough to wrap to a second line has its first line overflow past the right side of the container, as if the "slide" animation is ignoring the new width of the news feed title, as shown below. Note: I took this screenshot after applying some CSS changes, but this was tested both before and after doing so and results were the same.

"flip" animation on top (displays normally), "slide" animation on bottom (first line is cut off at the end)


This does not happen when this plugin is not active, so it has to be some kind of interaction between the plugin and the "slide" news animation.

Has anybody else had this issue when using this plugin?

[Chris]

Mar 31, 2023 18:36:10 GMT -8 Matte said:

This does not happen when this plugin is not active, so it has to be some kind of interaction between the plugin and the "slide" news animation.

On pageload there is coding that takes measurements to prepare for the slide animation. The issue here is that those measurements are totally thrown out of wack by changing the news title from "News" to "Announcements" making it wider (but those measurements were already taken)

SPOILER: Click to show

standard_home = function() {
   $(document).ready(function() {
       var e = $("#news .arrow")
         , t = $("#news .title")
         , n = $("#news .items")
         , i = $("#news .left")
         , o = $("#news .right")
         , a = $("#news .front")
         , r = $("#news .back")
         , s = 0
         , l = pb.data("news_items")
         , c = pb.data("news_speed")
         , d = 1 == proboards.data("news_relative") ? 1 : 0
         , u = ""
         , h = ""
         , p = 0;
       if ("flip" == pb.data("news_animation")) {
           var f = (b = $("#news .item")).length;
           if (b.each(function() {
               p = $(this).outerHeight() > p ? $(this).outerHeight() : p
           }),
           $.set_heights(p, e, t),
           $("#news .hidden").hide(),
           a.height() < p) {
               var m = p - a.height();
               a.attr("style", "padding-top: " + m / 2 + "px;")
           }
           function g(e) {
               clearTimeout(h),
               u = n.hasClass("flip") ? a : r;
               var t = l[function(e) {
                   "forward" == e ? s == l.length - 1 ? s = 0 : s++ : 0 == s ? s = l.length - 1 : s--;
                   return s
               }(e)].text;
               if (u.html(t),
               u.attr("style", ""),
               u.height() < p) {
                   var i = p - u.height();
                   u.attr("style", "padding-top: " + i / 2 + "px;")
               }
               n.toggleClass("flip"),
               v(t)
           }
           function v(e) {
               d && (c = 1500 + 50 * e.length),
               h = setTimeout(function() {
                   g("forward")
               }, c)
           }
           1 < f ? (o.on("click", function() {
               g("forward")
           }),
           i.on("click", function() {
               g("backward")
           }),
           n.on("mouseenter", function() {
               clearTimeout(h)
           }),
           n.on("mouseleave", function() {
               v(a.text())
           }),
           v(a.text())) : $.one_entry(t, e)
       } else {
           proboards.data("news_speed") && $("#news").slidable({
               autoChange: proboards.data("news_speed"),
               items: ".items",
               relative: 1 == proboards.data("news_relative")
           });
           var b = $("#news .itemSlide")
             , A = $("#news .items.panel > div");
           f = b.length;
           p = A.outerHeight(),
           $.set_heights(p, e, t),
           b.each(function() {
               if ($(this).outerHeight() < p) {
                   var e = p - $(this).outerHeight();
                   $(this).css({
                       height: p + "px",
                       "padding-top": e / 2 + "px"
                   })
               }
           }),
           1 == f && $.one_entry(t, e)
       }
       $(".guests-online-link").on("click", function(e) {
           e.preventDefault(),
           proboards.guestsOnlineDialog()
       })
   }),
   $.one_entry = function(e, t) {
       t.remove(),
       e.css({
           "border-color": e.parents("#news").css("border-color"),
           width: "40px"
       })
   }
   ,
   $.set_heights = function(e, t, i) {
       t.attr("style", "height: " + e + "px; cursor: pointer;"),
       $("#news, #news .items.panel").attr("style", "height: " + e + "px;"),
       i.attr("style", "line-height: " + e + "px !important; height: " + e + "px")
   }
}

function(o) {
   o.widget("ui.slidable", {
       options: {
           autoChange: 5e3,
           navigation: ".navigation",
           items: ".items",
           relative: !1,
           padding: 10
       },
       _create: function() {
           var t = this;
           o(this.options.items).width(o(this.options.items).width() - 2 * this.options.padding),
           this.width = o(this.options.items).width(),
           this.actualWidth = this.width + 2 * this.options.padding;
           var e = o(this.options.items, this.element).children();
           if (this.itemContainer = o("<div></div>").css({
               position: "absolute",
               left: this.actualWidth + "px",
               width: this.actualWidth * e.length + "px"
           }),
           o(this.options.items, this.element).append(this.itemContainer),
           this.itemContainer.append(e),
           o(this.itemContainer).children().css({
               width: this.width + "px",
               float: "left"
           }),
           0 < o(this.options.navigation, this.element).length) {
               this.navigationContainer = o(this.options.navigation, this.element);
               var i = o('<span class="arrow left"><span></span></span>').bind("click", function(e) {
                   t._change(0)
               });
               o(this.navigationContainer).prepend(i),
               i = o('<span class="arrow right"><span></span></span>').bind("click", function(e) {
                   t._change(1)
               }),
               o(this.navigationContainer).append(i)
           } else
               o("#news .arrow.left").bind("click", function(e) {
                   t._change(0)
               }),
               o("#news .arrow.right").bind("click", function(e) {
                   t._change(1)
               });
           !1 !== this.options.autoChange && (this.options.autoChange < 1e3 && (this.options.autoChange = 1e3),
           this.itemContainer.bind("mouseenter", function(e) {
               clearTimeout(t.autoChangeTimeout)
           }),
           this.itemContainer.bind("mouseleave", function(e) {
               t.autoChangeTimeout = setTimeout(function() {
                   t._change()
               }, t.options.autoChange)
           })),
           t._change(2)
       },
       _change: function(e) {
           var t = this;
           clearTimeout(this.autoChangeTimeout),
           (e = void 0 === e ? this.index + 1 : 2 == e ? 0 : 0 == e ? this.index - 1 : this.index + 1) < 0 ? e = this.itemContainer.children().length - 1 : e > this.itemContainer.children().length - 1 && (e = 0);
           var i = e * this.actualWidth * -1;
           if (this.itemContainer.stop().animate({
               left: i + "px"
           }, 750),
           this.index = e,
           this.options.relative) {
               var n = o(this.itemContainer).children("div").eq(e).text();
               this.options.autoChange = this.calcChangeSpeed(n)
           }
           !1 !== this.options.autoChange && (this.autoChangeTimeout = setTimeout(function() {
               t._change()
           }, this.options.autoChange))
       },
       calcChangeSpeed: function(e) {
           return 1500 + 50 * e.length
       }
   }),
   o.extend(o.ui.slidable, {
       version: "1.8.2"
   })
}(jQuery)

[Matte]

Mar 31, 2023 23:05:46 GMT -8 Chris said:

On pageload there is coding that takes measurements to prepare for the slide animation. The issue here is that those measurements are totally thrown out of wack by changing the news title from "News" to "Announcements" making it wider (but those measurements were already taken)

Interesting. So I just can't use the slide animation if my news item is too long, unless I don't want to use the plugin. That solves my issue then, thanks!