UFC champion Miesha Tate has a breaking news section at the top of her website. http://mieshatate.com/podcast/
I need that in my life.
How would I go about creating this? Is it possible on webflow?
Doesn’t seem like it, so I will post it in the wish list category.
Edit: I am not a programmer. I don’t even know basic html.
JQuery. Custom Code.
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Simple-News-Feed-Ticker-Breaking-News/
I updated my post. Meant to include the fact I know nothing about any programming languages.
I need simple solutions. I came to webflow after using wix in the past. Enough said. ha
I’ll see if I can throw something together for you.
Here you go.
From your Dashboard… open your Project Settings
when your Site Settings opens… select the Custom Code option
Locate the HEAD CODE copy and paste this code:
(This is custom css code… this styles what you see on the screen.)
<style>
.tickercontainer {
border: 1px solid #000;
background: #fff;
width: 738px;
height: 27px;
margin: 0;
padding: 0;
overflow: hidden;
}
.tickercontainer .mask {
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker {
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left;
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>
Scroll down further and locate FOOTER CODE.
Copy / Paste this code into the box.
This is the actual jquery / js code that creates and runs the news ticker.
Notice it’s actually a word press plug-in that I grabbed.
<script>
/*!
* liScroll 1.0
* Examples and documentation at:
* http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
* 2007-2010 Gian Carlo Mingati
* Version: 1.0.2.1 (22-APRIL-2011)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires:
* jQuery v1.2.x or later
*
*/
jQuery.fn.liScroll = function(settings) {
settings = jQuery.extend({
travelocity: 0.07
}, settings);
return this.each(function(){
var $strip = jQuery(this);
$strip.addClass("newsticker")
var stripWidth = 1;
$strip.find("li").each(function(i){
stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
});
var $mask = $strip.wrap("<div class='mask'></div>");
var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width
$strip.width(stripWidth);
var totalTravel = stripWidth+containerWidth;
var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye
function scrollnews(spazio, tempo){
$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
}
scrollnews(totalTravel, defTiming);
$strip.hover(function(){
jQuery(this).stop();
},
function(){
var offset = jQuery(this).offset();
var residualSpace = offset.left + stripWidth;
var residualTime = residualSpace/settings.travelocity;
scrollnews(residualSpace, residualTime);
});
});
};
</script>
<script>
$(function(){
$("ul#demo").liScroll();
});
</script>
Select SAVE
Drop a SECTION onto the FORM
then place a CONTAINER into the SECTION.
IN THE NAVIGATOR… IT WILL LOOK LIKE THIS.
Select the CONTAINER and Add a UNORDERED LIST
It defaults to 3 Items. This is where you “add or change your news”.
To add another item… add a LIST ITEM.
Here - I have 3 items in the UNORDERED LIST.
Select the Unordered List in the Navigator tab. The list will highlight in blue.
With the list selected… click on the SETTINGS tabs
Enter lower case no quotes - “demo” into the ID field.
You are assigning the ID “demo” to the UNORDERED LIST.
You CANNOT preview a website that has custom code (within Webflow).
You will need to EXPORT the code or PUBLISH the website.
Exporting requires an upgraded plan.
To PUBLISH your website… select on the PUBLISH option.
When the site opens… you should see something like this:
Notice that the LI’s are all on 1 line… and appear to be connected.
You can clean this up and separate the LI with some CSS style (see above).
Also notice that - when the mouse hovers the LI’s… the scrolling stops.
You can also add links… directly into each LI.
Here’s the Project you can review (updated: See next post)
https://preview.webflow.com/preview/cc-scrolling-news?preview=e70d12e3e3862c4dbd3d0f4b603ec0d6
and here it is published
http://cc-scrolling-news.webflow.io/
UPDATE: I changed the LI’s… made it look a little more newsie like.
I moved the Project from my Team Plan to my Pro Plan.
Here’s the new location. Clone-able.
How to Add a JQuery Scrolling News Feature to your Webflow website:
https://webflow.com/website/Scrolling-News-JQuery?s=cc-scrolling-news
Refer to the previous post for integration instructions.
Oh wow. Thank you so much!
I will need to wait until Thursday to add the custom code. I’m still on the free plan until then & cannot save the code yet.
I was literally shocked to see that you put in the effort to create this for me. I appreciate it a lot. Thanks again!
