Demo

Javascript horizontal scroll text

Edit2: if you want the text to scroll from left to right, use the following script: Solution 2: Wait page load before execute script. Solution 1: If you are looking for a marquee effect that stops on hover Solution 2: Use clearInterval() to pause the text and setInterval() to resume again Solution 3: Solution 4: we can also use javascript event on element for stop and restart marquee.

Javascript horizontal scroll text

I want horizontal scroll on my app. there are multiple example, but I found one that fit my need. But when i try it it just don’t work as it should. please look and tell me what the problem is:

    div.marquee < white-space:no-wrap; overflow:hidden; >div.marquee > div.marquee-text    
 
   

update There is no error in console:

You forgot to include jQuery in your website. Otherwise, it works as expected (at least I think so).

$(document).ready(function() < var marquee = $('div.marquee'); console.log(marquee); marquee.each(function() < var mar = $(this),indent = mar.width(); mar.marquee = function() < indent--; mar.css('text-indent',indent); if (indent < -1 * mar.children('div.marquee-text').width()) < indent = mar.width(); >>; mar.data('interval',setInterval(mar.marquee,1000/60)); >); >);

div.marquee < white-space:no-wrap; overflow:hidden; >div.marquee > div.marquee-text

Edit: added $(document).ready() to ensure that elements will be loaded.

Edit2: if you want the text to scroll from left to right, use the following script:

$(document).ready(function() < var marquee = $('div.marquee'); console.log(marquee); marquee.each(function() < var mar = $(this),indent = mar.width(); mar.marquee = function() < indent++; mar.css('text-indent',indent); if (indent >marquee.width()) < indent = -1 * mar.children('div.marquee-text').width(); >>; mar.data('interval',setInterval(mar.marquee,1000/60)); >); >); 

Wait page load before execute script.

Javascript — Change text after scrolling, Hello I got a question regarding changing a text after a user scrolled the page. How can I change the text of my h1 from YES to NO when a user …

Javascript find and scroll to text

I need a bit of Javascript that will find some text in the html page and then scroll to that point.

So something like «Are you a Lib Dem or Tory supporter and how do you feel about the deal?» would scroll down to the bottom of the page for this bbc news page: http://news.bbc.co.uk/1/hi/uk_politics/election_2010/8676607.stm

Im hoping there is a built in function for both the find text and scroll.

Try this. It works on the site you provided:

$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top); 

It finds last, deepest element that contains given phrase on the page and scrolls to it.

If you want to do the same thing without jQuery you need to use XPath becasue CSS didn’t get contains() selector.

window.scrollBy(0, document.evaluate("//*[text()[contains(., 'Lib Dem')]][last()]", document.body).iterateNext().getBoundingClientRect().top); 

If you need to scroll to the first occurrece, not the last one, delete [last()] from this code.

You can also use what google is using to scroll to and highlight specific portions of a search result when you visit the page.

It generates a URL like this:

It is kind of nifty. The syntax seems to be:

https://example.com/#:~:beginning_of_text,end_of_text 

See the following blog post for a few more details:

It is supported by version 80 and beyond chromium based browsers. So, limited support right now, but depending on your use case, it could be useful.

JavaScript Scrolling | W3docs JavaScript Tutorial, Show or hide extra controls or information depending on where the user is in the document. Load more data, scrolling down up to the end of the page. …

Javascript code to stop text scrolling on mouseover and to start text scrolling on mouseout

The following is the javascript code for text scrolling. Can you please extend the javascript so that scrolling will be stopped when the mouse is on text and will start again once the mouse is out of text. Thanks in advance.

   #scroll < position : absolute; white-space : nowrap; top : 0px; left : 200px; >#oScroll function scroll(oid,iid) < this.oCont=document.getElementById(oid) this.ele=document.getElementById(iid) this.width=this.ele.clientWidth; this.n=this.oCont.clientWidth; this.move=function()< this.ele.style.left=this.n+"px" this.n-- if(this.n<(-this.width))> > var vScroll function setup() < vScroll=new scroll("oScroll","scroll"); setInterval("vScroll.move()",20) >onload=function()  
   

If you are looking for a marquee effect that stops on hover

Use clearInterval() to pause the text and setInterval() to resume again

   #scroll < position: absolute; white-space: nowrap; top: 0px; left: 200px; >#oScroll var intervalHandle = null; function pauseScroll() < clearInterval(intervalHandle); >function resumeScroll() < intervalHandle = setInterval("vScroll.move()", 20); >function scroll(oid, iid) < this.oCont = document.getElementById(oid) this.ele = document.getElementById(iid) this.width = this.ele.clientWidth; this.n = this.oCont.clientWidth; this.move = function () < this.ele.style.left = this.n + "px" this.n-- if (this.n < (-this.width)) < this.n = this.oCont.clientWidth >> > var vScroll function setup() < vScroll = new scroll("oScroll", "scroll"); intervalHandle = setInterval("vScroll.move()", 20) >onload = function ()  
 
   

  This is a test marquee to pause on hover onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 1, 0);" 

we can also use javascript event on element for stop and restart marquee.

       
 
News 1 News 2 News 3 News 4 . More news here
 
News 1 News 2 News 3 News 4 . More news here1
 
    

Javascript — Automatic scrolling text right to left in a div, Hey I want to make text scroll from right to left in a div i have. Automatic scrolling text right to left in a div. Ask Question Asked 9 years, 8 …

Display scrolling text message

I would like to use a java script to scroll a text message on a webpage: This is the code I use but it doesn’t scroll; could someone help me?

Here is the link to jsfiddle.

You are using undefined function avvia() and your body element is broken.. Also the setTimeout’s first parameter has to be the callback function itself, not a code to be evaluated..

I repaired it here: http://jsfiddle.net/TkE3W/7/

HTML\\JavaScript, goto this link and see the text sliding after regular intervals well i want to learn to make this so that i could make this HTML\JavaScript — News …

Источник

JavaScript Scroll

This page contains code that you can use to create a JavaScript scroll. This is a JavaScript marquee that displays scrolling text. The text scrolls in any direction you need; horizontally (from right to left, left to right), or vertically (down to up, or up to down). The JavaScript scroll was originally created by Netscape and is distributed using the Mozilla Public License. It should work on most browsers.

This JavaScript scrolling script comes in two parts: The first part is an external .js file, which contains the scrolling text code. The second part is the customizable part, where you enter your own parameters.

Here are some samples, just to get you started.

Instructions

If you prefer not to download the file, you can copy/paste the contents into a file (see bottom of this article).

Once you’ve done that, you can use any of the following codes to display your JavaScript scroller. These codes simply provide the parameters for the xbMarquee.js file. These parameters determine things such as the scroll direction, the text to scroll, the speed of the marquee etc. You only need to reference xbMarquee.js once on any page that uses the code (regardless of how many marquees are on that page).

Right to Left

This marquee scrolls from right to left.

Left to Right

This text scrolls from left to right.

Faster

This text scrolls from right to left, but much faster than the previous examples.

Scrolling Up

This text scrolls upwards. The height of the marquee has changed too — from 29px to 200px .

Scrolling Down

This text scrolls downwards.

Contents of xbMarquee.js

Below are the full contents of xbMarquee.js . You will need this for the above marquee examples to work.

Источник