Automatic scrolling text right to left in a div - javascript

Hey I want to make text scroll from right to left in a div i have. I want this to happen automatically and at a constant flow.
Now when i first started with HTML the tag was used to do this, I've looked around a few websites and it seems that this tag still seems to be going. My question is really if this is the best way of achieving this affect or is there a better way of doing it? for example, javascript,Jquery and/or css Maybe even something in HTML5?
This shows what i am looking - http://www.gftuk.com/
Notice the scrolling stops when the user hovers over the text.
Thanks for the time.

<marquee>hello world</marquee>

Personally, I think the best way to achieve this would be to use jquery. There are a few plugins out there which do the job nicely.

If you want to automatic with "scroll" text ( structure of DOM is not complex) .
<marquee>This text will scroll from right to left</marquee>
But you will see with "marquee" the scroll is not smooth.
So you can use simplyScroll plugin
http://logicbox.net/jquery/simplyscroll/
( I see it in this code of your link : http://www.gftuk.com/. in next time, please open dev tools or firebugs and see source code of any pages when you want to have the same effects )
Hope it helps you

Related

McMaster-Carr's 'scrolling box' layout

McMaster-Carr, a few years back, completely redesigned their website and they now have these very cool 'scrolling box' sections for each product. I've been trying to duplicate that same effect only using css and html, but have had no luck so far.
Some key things I cannot accomplish using only html + css:
hidden scrollbars with the ability to still scroll
section headers that stop when scrolled to the top of a containing div
I've tried looking through their source code but I really want to start from scratch and recreate the effect, hopefully finding a much simpler way to recreate it.
If anyone has seen anything like this before or knows how to go about creating this type of layout, please help.
Here's a link to a page on the McMaster-Carr website that demonstrates that scrolling box layout:
http://www.mcmaster.com/#nylon-gears/=g1p46z
The technique j08691 linked to is the common way to do it - you'll have to use a bit of JS to find out where how much the site is scrolled. If you look at the source of the persistent header example, there is a line like
scrollTop = $(window).scrollTop()
simply replace this by the top position of your parent div (assuming it is, like in McMaster, fixed on the site)
scrollTop = $("div.MyParentDiv").position().top

How to achieve custom jQuery page scroll api as in this example?

I recently came across one of Google's projects "What do you love" and saw a nice feature there.
If you visit http://www.wdyl.com/#monkeys
On your left you will see a small box that allows you to scroll the page "Quiet Cool" I thought when I saw it ))) I looked over the internet to find jQuery plugins or Tutorials on how to do similar thing (jQuery/javascript is not my strong side), but I couldn't find any.
So could anyone please explain how to make similar "Api/Feature" and provide code snippets if possible, that would really help. Ohh an jQuery solution is preferable.
As is so frequently the case, your best bet is to open your browser's Developer Tools and look at what's actually going on there! In this case, it looks like a static background (the grey boxes) with a blue frame on top of it, somehow made draggable, that calls one of the window scrolling functions after doing a bit of proportions arithmetic to determine how far to scroll.
Here is a simple demo I put together to show you how to animate the scroll of a page: http://jsfiddle.net/jasper/3cnKn/1/
In my example, the basic idea is to bind to a click event for some links and animate the scrollTop of the html element:
$('#nav').find('a').on('click', function (event) {
event.preventDefault();
$('html').animate({scrollTop : $(this).attr('data-scrollTop')}, 500);
});

Marquee on mouseover and overflow

I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?
Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow
Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?

Can someone help fix the non-scrolling scroll bar?

I am trying to use the slimScroll scrollbar plugin, but I had to modify it. I am trying to make it so that you pass the plugin the div that needs scrolling and using the same space as that (in the parent) the scrollbar appears. I have gotten it to add the scrollbar where i want in the dom, but it isnt scrolling. I dont know why. Can anyone help?
Code is here for you to play with/correct.
http://jsfiddle.net/rgmrw/5/
Thanks!
EDIT: The solution should also not add any divs/wrap existing ones. (Doing so messes up other existing javascript code)
Yes, I fixed it;
I actually didn't do anything, I was messing around in code but couldn't get it to work properly, so i copy pasted the code again from the original plugin at http://rocha.la/jQuery-slimScroll and it worked out of the box :)
http://jsfiddle.net/rgmrw/9/
The answer is that you cannot $(el).scrollTop() an element that isnt cutting off its children elements, even if a parent is.
Basic Concept Demo: http://jsfiddle.net/DY9CT/
Plugin Demo: http://jsfiddle.net/rgmrw/11/

"Type-writer Scrolling" in a web-page (JavaScript, CSS, and/or HTML)

I'm trying to work out how to do "type-writer scrolling" in JavaScript for a textarea in a web-page, but I'm having no luck. Essentially, what I'm trying to do is make a textarea that, when a new line is created, scrolls the document automatically so as to keep the new line in the same position as the previous line. I've seen something similar in desktop applications such as Write Monkey, but can't work out how to do it in JavaScript.
Thanks in advance for any suggestions!
Have a look at this page http://www.mediacollege.com/internet/javascript/page/scroll.html it shows basic scrolling methods
You could either scroll down by the height of your line (line-height css property) or scrollTo a specific point on the page
I have achieved something close to this, automatically expanding a textarea the way it is done on Facebook, but that was based on a conservative estimate, considering font size, box width, etc, to determine how many lines have probably wrapped. What you are describing is more exact -- down to the character.
The challenge here lies in knowing exactly how many lines are currently in the textarea and I can think of no way to do this. When you say, "a new line is created," you're talking about automatic wrapping and there is no way to read that or to trigger from it. It is part of the browser's hard-coded interpretation of many things, including your CSS.
If you went through with the whole typewriter theme, you would have a bell and the user would hit RETURN when they needed to, then you'd have your cue to scroll, but that sounds like a sure way to remind people why we no longer use typewriters.

Categories