News ticker - possible in Blocs?

Hi @JDW

The following link may be of interest to you.

From reading sim’s posts, he did manage to get his ticker working…

MDS

2 Likes

@MDS

Thank you for the kind recommendations. Unfortunately, I am failing to get even the “jQuery Ticker” to work in Blocs 3.3.

I added a Code Widget inside a new Bloc in my document and used the following code which was suggested at the link you provided:

<div class="ticker">
    <strong>News:</strong>
    <ul>
        <li>Ticker item #1</li>
        <li>Ticker item #2</li>
        <li><em>Another</em> ticker item</li>
    </ul>
</div>

I then added the following code to Page Settings HEADER:

<script>
$('.ticker').ticker();
</script>

But when I preview in Blocs, all I see is the following static text:

image

Any thoughts on what I am doing wrong?

Thanks,

James

Which will not work as jQuery (which is $) is loaded at the end of body. We had this before in your other thread.

Yes I did mate. Sorry for the delay in responding, we’ve had visitors and I’ve been on “enforced leave.” Bear in mind though this is in a Blocs 2 site that I’ve yet to transfer to 3 hence the header code as follows:

Purchased from here: Modern News Ticker by CreativeTier | CodeCanyon

HTML code:

   <div class="modern-ticker mt-round">
    <div class="mt-body">
        <div class="mt-label">YOUR LABEL HERE:</div>
        <div class="mt-news">
            <ul class="">
                <li><a href=YOUR LINK TARGET HERE" target="_self">This is my 1st ticker news story</a></li>
                <li><a href=YOUR 2ND LINK TARGER HERE" target="_self">This is my 2nd ticker news story </a></li>
             
                         </ul>
        </div>
        <div class="mt-controls">
        	<div class="mt-prev"></div>
        	<div class="mt-play"></div>
            <div class="mt-next"></div>
        </div>
    </div>
</div>

Code in the header:

link href=“modern-ticker/css/modern-ticker.css” type=“text/css” rel=“stylesheet”
link href=“modern-ticker/themes/theme13.css” type=“text/css” rel=“stylesheet”
script src=“modern-ticker/js/jquery-3.2.1.min.js” type=“text/javascript”></script
script src=“modern-ticker/js/jquery.modern-ticker.min.js” type=“text/javascript”></script

brackets removed so you can see it

I got the normal duplicates warning but the site didn’t break and it needed everything above to work.

Cheers

1 Like

You apparently have not tested it yourself, as it doesn’t work there either. More specifically, I deleted the following code from Page Settings HEADER and moved it into Page Settings FOOTER, and then did a Preview in Blocs, and found the same static text as shown in the screenshot of my previous post:

<script>
$('.ticker').ticker();
</script>

Next, web design is not my full time job. That coupled with a less than stellar memory sometime prevents me from remembering certain details. Post-it notes only go so far. But if indeed that “not a single line of jQuery code will run from Page Settings HEADER,” I am inclined to make a feature request toward this end:

After adding code into Page Settings HEADER, Blocs should scan for jQuery code and alert the user with a dialog when they click the “Done” button to inform them that they need to move the code into Page Settings FOOTER. This is computer software after all – a tool to help mortal man overcome his limitations and flaws. I would like to see such a feature implemented, which no doubt would aid people other than myself as well.

Thanks.

Thank you for the information! I’ve not yet tested your code, but I did click the link you provided and subsequently clicked on the “Live Preview” there. Unfortunately, it doesn’t appear to be responsive. I tested it in FireFox with the browser window width shrunk as narrow as it would go, and I also tested it on an iPhone. The right side gets truncated, and on the iPhone the text is no longer vertically centered but instead gets slammed to the bottom. Is this your experience with the implementation you have on your site currently?

Thank you,

James

Sorry I don’t have the time to fully reconstruct your use case. I just wanted to help and mention the obvious.

This is way beyond what Blocs should do. And as I have shown you, it is possible to use jQuery in the header section if used correctly.

Yes, so from memory I created a bric for the smallest breakpoint and amended the ticker so it has a narrower static intro box.

Just search for responsive news ticker at code canyon. Here’s one I found:

There are several more …

cheers,
Gary

My personal thanks to all who commented. I appreciate the advice.

I now have a free jQuery ticker running on the top page of my website here. Please view it on a desktop or notebook computer because it only displays in the LG breakpoint. I ended up having to put the code in the Footer (in Blocs 3.3) because, for the life of me, I cannot figure out how to get the code to work in the Header. Using relevant portions of @Jannis code doesn’t work.

I wanted to see if I could get the code to work in the Header because when you first load the page, you see all of the ticker contents spill onto the page and then a split-second later it gets cleaned up and put inside its box. I don’t really like that split-second text dump. Not sure if having the code work in the header would fix that glitch. Here’s the code:

FOOTER CODE (works):

<link rel="stylesheet" href="https://kiramek.com/css/breaking-news-ticker.css">
<script src="https://kiramek.com/js/breaking-news-ticker.min.js"></script>

<script>
$('#example').breakingNews({
  effect: 'scroll',
  scrollSpeed: 2,
  fontSize: "16px",
  themeColor: "default", 
  background: "black",
  borderWidth: 1
});
</script>

HEADER CODE (not used because it doesn’t work):

<link rel="stylesheet" href="https://kiramek.com/css/breaking-news-ticker.css">
<script src="https://kiramek.com/js/breaking-news-ticker.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function(event) { 
$('#example').breakingNews(function(){
  effect: 'scroll',
  scrollSpeed: 2,
  fontSize: "16px",
  themeColor: "default", 
  background: "black",
  borderWidth: 1
});
});
</script>

INSTRUCTIONS
Basically, you just add a new bloc/column/code widget in Blocs, then add the following code into the code widget:

<div class="breaking-news-ticker" id="example">
  <div class="bn-label">NEWS</div>
  <div class="bn-news">
    <ul>
      <li><a href="https://headlines.yahoo.co.jp/hl?a=20190702-00000104-dal-life">    2019年7月3日:リレーアタック犯が全国で初逮捕   </a></li>
      <li><a href="https://kiramek.com/pouch/">2019年2月18日:リレーアタック対策用電波遮断ポーチ SP001V, SP002S 新発売!   </a></li>
      <li><a href="https://kiramek.com/japanese/products/RSR.html">2018年10月12日:イモビカッター妨害装置 (リレーアタック対策機能付)トヨタ車用 RSR300, RSR500 新発売!   </a></li>
    </ul>
  </div>
</div>

Use your on URLs inside the “a href” tags and of course your own text instead of my Japanese. Be sure to put plenty of spaces to the left of the first line, otherwise when the page loads it will be in motion and you will miss the first few characters of text. Add spaces after the other lines to ensure there are noticeable gaps to make things easier to read. After that, just open Page Settings > Code > Footer and copy/paste my footer code above, but change the links to “breaking-news-ticker.css” & “breaking-news-ticker.min.js” to your own server (no hot-linking to my server, please). I left links to the CSS on my server above because I edited it and some of you may wish to see my edits.

All said, if anyone knows how to prevent the split-second dump of all news data when the page first loads, that would make this particular ticker perfect. For now, it’s pretty decent, I think, especially because it’s free. And yes, it’s responsive too, although I prefer to keep it visible only in LG on my site. (The movement of the text can be sluggish on some mobile devices, although it’s quite lovely when viewed on my iMac.)

Thanks,

James

If you set up a test page with the code in header, I can check.

Thank you. Here is the Blocs v3.3 document (single page):

Ticker_Document.zip (1.6 MB)

This works for me in header:

<script>
document.addEventListener("DOMContentLoaded", function(event) { 
$('#example').breakingNews({
  effect: 'scroll',
  scrollSpeed: 2,
  fontSize: "16px",
  themeColor: "default",
  background: "black",
  borderWidth: 1
});
});
</script>

In your original header code, you have added an additional function(), which does not belong there.

I wanted to see if I could get the code to work in the Header because when you first load the page, you see all of the ticker contents spill onto the page and then a split-second later it gets cleaned up and put inside its box.

I don’t see this at all in Safari. I doubt it has to do with header or footer.

2 Likes

I had actually tried that exact code (i.e., without the “function()” part) but it didn’t work. Now I know why. For those of you reading through this thread seeking an exact solution, here it is:

Put this in Page Settings HEADER:

<link rel="stylesheet" href="https://kiramek.com/css/breaking-news-ticker.css">
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
$('#example').breakingNews({
  effect: 'scroll',
  scrollSpeed: 2,
  fontSize: "16px",
  themeColor: "default",
  background: "black",
  borderWidth: 1
});
});
</script>

Put a variant of this in Page Settings FOOTER (to your server, not to my “kiramek” server):

<script src="https://kiramek.com/js/breaking-news-ticker.min.js"></script>

Change the code in accordance with the settings you like, the description of which is found on the original ticker page here.

Next, download “breaking-news-ticker.css” from my website and put examine the code to see if you like my changes or want to make your own. Then upload that to your web server and be sure to change the link in the above code to match your server. DO NOT hotlink to the JS or CSS files on my server. After that, put the “breaking-news-ticker.min.js” on your server and change the FOOTER code to match the link location on your server. PLEASE DO NOT hotlink to my server.

Lastly, add a new bloc/column/code widget in Blocs, then add the code I mention in my earlier post inside that Code Widget. It’s just an HTML list, but with appropriate space before and after your list items to make it look easy to read, in accordance with your tastes.

The reason it didn’t work for me originally was because I at that time put the “breaking-news-ticker.min.js” line of code in the header too. You can’t. You must put that one line into the FOOTER.

And by the way, moving the code (all except the “breaking-news-ticker.min.js” line) into the HEADER improved performance considerably. I no longer can see all the ticker content spill onto the page. The ticker just appears. It’s quite nice.

Thank you to @Jannis and others who contributed. I hope this information can help others who wish to add a ticker (for FREE) to a Blocs website.

Best,

James

1 Like

Glad to see you’ve got it sorted.

1 Like

I’ve just followed your procedure on a V3 site and it looks great. Thanks very much.

1 Like

Folks, I just release a Scrolling Text Marque custom Bric, over at the Blocs store. It’s not super complex but well worth adding to your web design arsenal. You can grab it free here.

9 Likes

Great! Thank you very very much. :smiling_face_with_three_hearts:

1 Like

Can you pin this to the top of the thread @Norm?

Hi all,

Can someone tell me how I make the text in “scrolling text marquee” readable. Because no matter what speed I choose it is too fast to recognize even a letter?
:thinking:

THX