The Horizontal Tiny Scrolling

Sign Update 1: The Horizontal Way is open!

Update 2:
THIS POST MOVED TO THE ADDRESS http://lab.centralscrutinizer.it/the-tiny-scrollings

Bye :)

This entry was posted on Friday, March 31st, 2006 at 12:49 pm. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

68 comments:

On April 17th, 2006, mire said: 1
che script carino, mi casca proprio a fagiuolo :-)
sto facendo un po’ di tweaking per centrare verticalmente il container in maniera crossbrowser e sto litigando un po’ con i css (in firefox il padding nei div .par aumenta la larghezza, in ie i margini orizzontali diventano metaempirici a causa del flow) ma appena avro’ il mio nuovo layout orizzontale online ti faro’ sapere/mettero credits:-)
On June 5th, 2006, Tengu said: 2
I’ve tried using this script one my horizontally scrolling website, but when I try and use it with images for links it doesn’t work! I’ve tried going over the JS to see if I could see what the problem was but really I have no idea.

Please email me, or post on your website if you are able to help in anyway. This is the best script of its kinda I’ve found online and it’d be a shame not to be able to use it.
On July 5th, 2006, “Io ce l’ho orizzontale…” | Central Scrutinizer - [ il web in 285 comode rate ] said: 3
[…] Il sito si spiega da se, per cui non mi perderò in chiacchiere: ho raccolto finora una trentina di siti orizzontali - html (con tabelle innestate e CSS) e flash - e ho creato un blog dedicando ad ogni sito linkato un paio di innocue osservazioni su layout, script aggiuntivi e altre particolarità di interesse per la costruzione di un sito orizzontale ‘ideale’. Ho messo inoltre a disposizione un template completo di script da scaricare (una versione aggiornata dell’esempio incluso nel Horizontal Tiny Scrolling) ed ovviamente un feed da conservare con cura. Consideratela come al solito una versione “pre-alpha-sgarrupata” considerando anche che: 1)Non ho fatto test con altri browser oltre IE 6, Firefox 1.5 ed Opera (per cui ad esempio i 2+ Safaristi all’ascolto sarebbe pregati di fare un cenno in caso di malfunzionamenti) 2)I commenti che scorrono in verticale all’interno di un div con un overflow: auto che fa comparire la barra verticale ( beh, ora non si vede perchè non ci sono commenti) sono una soluzione temporanea; in realtà avevo in mente di disporre i commenti in più colonne utilizzando gli appositi selettori CSS 3 usufruendo del supporto nativo in Firefox 1.5 e questo script per gli altri browser - ma ci sono dei grossi problemi nella gestione di una larghezza orizzontale che sicuramente varierà da post a post. 3)Rattoppi vari imperversano nei vari CSS e JS. 3)Qualcuno mi ha detto (ma la fonte non è molto certa) che ha spedito il link a 4 amici raccomandandogli di farlo pervenire in busta chiusa ad altri 5 amici. Uno di questi, Nadario Adrupal di Bogotà, si è dimenticato di farlo ed il giorno dopo è stato colpito da un fulmine mentre… ah no, scusate. Mi stavo confondendo con il lavoro. […]
On July 6th, 2006, The Horizontal Way | Central Scrutinizer (en. vers.) said: 4
[…] The Horizontal Way (http://www.thehorizontalway.com) The site explain itself, so I don’t lost myself in smalltalks: I collected at this time about thirty horizontal scrolling layout websites - html (with nested tables and CSS) and flash - and I created a blog dedicating for every site linked a couple of personal observations about layout, added scripts and other feautes interesting for the creation of an ‘ideal’ horizontal website. Further, i let at your disposal a downloadable template with scripts (an update version of the example with Horizontal Tiny Scrolling) and naturally an RSS feed to keep with care. You’ll must to consider it a “pre-alpha” version, because: 1)I made test only with IE 6, Firefox 1.5 ed Opera (so for example you, Safari lover, could let me know if somethings doesn’t works so well :) ) 2)Come with vertical scrolling within a div with overflow: auto that displays a vertical bar (well, now there aren’t because nobody comment) are a temporary solution; I would, infact, dispose comments in more colums using the dedicated CSS3 properties already supported in Firefox 1.5 and calling the help of this script for the other browsers - but there are big problems about the control of the body that will change from post to post. 3)Several patches are singing together in the {PHP,CSS,JS} codes. […]
On October 14th, 2006, Shaun said: 5
I am having an interesting error in Safari.

The script works great, however the page never stops loading. It wouldn’t be that much of a problem but the STOP/RELOAD button cannot be used. Don’t know what type of bug this is.

Can you help?
On November 29th, 2006, SigmaLab » Blog Archive » Tiny Scrolling said: 6
[…] Tiny Scrolling is a small script dedicated to support the navigation between the internal links and their destinations. It replace that annoying and confusing jump from various part of a page with a smooth scroll of the page itself. The user will never say: “Ehi, but where am I now?” but “Oh, thanks for accompany me there!”. Also if you go to the next article you’ll find a version for horizontal scrolling. […]
On January 11th, 2007, Bart said: 7
It seems return false; does not work in some versions of Safari. Guess the scripts need to be adapted using EventListeners.
On January 12th, 2007, hazel said: 8
Hi Marco,
Thanks for your work, it’s been a great help.

But, of course, I have a problem ;-)

The scroll seems to be very slow in IE/Win for me. The site’s here:
http://www.irregular-choice.co.uk/

PS. Is your WP Akismet plugin enabled? Might help with the spam?
On January 19th, 2007, Marco Rosella said: 9
Shaun, Bart, Hazel, I wrote you an email. :-)
On April 17th, 2007, Ernest Voskuyl said: 10
I tried the horizontal way with Safari, but I must find out why it doesn’t works as in Firefox. I will try it also with Camino.
A+
On April 18th, 2007, Shaun said: 11
Hey Marco,

Just commenting again…

It seems to still snap back to the initial page view after it scrolls to the selected location. I am using FF 2.0 and Safari on OS X 10.4.9

Also, it seems to scroll very slowly in FF. Whe n I try out your included sample page it scrolls faster but still snaps back.
On April 18th, 2007, Shaun said: 12
Hello again!

I managed to fix the “snap back” problem. There was a line in the scroll: function(targ{ error…

if (agt.indexOf(’mac’)!=-1) { location.hash = location.hash;
}else {

I merely commented it out and the snaping thing works on All browsers.

Still having a problem in FF 2.0 on OS X. The scrolling speed is extremely slow. it takes almost 1 full min to get to the next section. I tried playing with the variables but it does not help. Never had this problem before v.05

thanks again though for your great work… I hope this helps others as well
On April 18th, 2007, Shaun said: 13
I commented out the location.hash = location.hash to be specific
On May 18th, 2007, Pino said: 14
Ciao
e complimenti per il layout,
ho provato ad utilizzare lo scroll
ma su IE7 non mi funziona
http://www.willcostudio.com/if/ifpeople.php

hai mica un suggerimento per mettermi sulla buona strada?
Grazie
Pino
On May 23rd, 2007, Simone said: 15
Ciao!
Lo scroll in avanti (verso destra) va lentissimo mentre quello a sinistra funziona perfettamente.

Inoltre, durante lo scroll in avanti, se premo sul “back to home” il browser crea un reload sulla pagina che, nel caso di pagine *.ASP provoca un errore 404 Page Not Found, mentre non succede sulla pagina *.HTML.

Suggerimenti!?
On June 1st, 2007, Jeremy said: 16
Hi,
I am also having problems with extremely slow scrolling in Firefox 2.0.0.4 in OSX. No matter how low I set the speed setting, it still scrolls slowly. Has anyone had any success fixing this? Any help would be greatly appreciated.

Thanks again for the great script.
On July 23rd, 2007, DJ said: 17
Love tiny scrolling! However, on IE the forward scroll does not work but the backward scroll does. I know this is something simple but I can’t seem to find it. Any ideas?
On August 25th, 2007, ilaria said: 18
ciao marco, mi chiamo ilaria. sono ingegnere elettronico e cm passatempo ho un sito. ecco io vorrei usare modificandolo il tuo layout orizzontale e vorrei farlo per rifare il mio sito. posso usare il codice?
fammi sapere.
magari via mail.
ti ringrazio in ogni caso.
Ilaria
On August 25th, 2007, ilaria said: 19
ti chiedo scusa nuovamente. io ho scaricato il file THW_template_0.6.zip. penso sia di tua invenzione. giusto?
On August 27th, 2007, SoloSalsero said: 20
A mi no me funciona, alguien que me ayude en español. Help me please! It don’t work with me!!
On October 10th, 2007, Florian said: 21
Hi Marco,

first: your script is wonderful ;-)
but I have a problem: I like to built a site,with two frames were the navigation is fix in the top frame, the horizontal scrowling should run in the lower frame.
I’m not so great in programming… How can I change the target in your script, to let run it from a navigation from the upper frame ?
Thank you!
On October 26th, 2007, juan said: 22
firstly: thank you, Marco, for developing the horizontal scroller and giving it as an open source code :) its very nice of you :)

the second issue: I also had problems with the speed but i realized that it was caused by missing WIDTH value in in the BODY tag on my page … when I set the width value (px) everything works fine (tested on pc - IE7, FF2, Opera9) …

the third issue: the only bug I have found -
set the speed to some very slow value and make the page scrolling either left or right by clicking any of the “chapter hrefs”.
now page is scrolling and you click any of the “chapter hrefs” again, it changes (or not) the scroll according to the second click but!!! when its finished, the whole SCRIPT does not work at all - I mean no scrolling, you click a “href” and page reloads and says ERROR …
(tested on pc - IE7, FF2, Opera9)
On November 4th, 2007, Johny said: 23
Thanks a lot man. Great script for scrolling. I have used it for the gallery on http://vystava.ulet.sk/1-kategoria/
On December 4th, 2007, Iain Fraser said: 24
Hello Marco

Thank you for the side scrolling script. We have just taken over one of our client’s websites and the previous developer had used your script to perform the side scrolling. One thing I have noticed (and this appears to happen on other implementations as well) is that if you’re using Firefox and you quickly click two links in succession, strange things can happen like the page reloading or getting a 404 from the server.

I tracked this down to a race condition that happens when location.hash gets set to HtinyScrolling.hash on the final iteration of the scroll function. Both instances of the scroll function try to do this at the same time but by the time the second one gets to do it HtinyScrolling.hash equals null - which breaks the whole thing. This is solved by putting an if statement around the offending code to test whether HtinyScrolling.hash does not equal null before setting location.hash like so (replace from lines 89 to 91 of current version):

if(typeof XULDocument != ‘undefined’) {
if(HtinyScrolling.hash != null){
window.location.hash = “#”+HtinyScrolling.hash;
}
}

Once again, thanks for a great script!
-Iain
On December 4th, 2007, Iain Fraser said: 25
Sorry mate, looks like the comment failed for some reason… I have a bug fix for you. Please email me for details :)
On December 17th, 2007, Dax said: 26
The script works great, except that my Firefox Error Console tells me that the object cannot be found on line 213 of the script. I’ve been trying to find what exactly this object is, but I’ve been unable to retrace why I receive this error. Just thought you might want to look into that.
Thanks for sharing the script!
On January 12th, 2008, TOM said: 27
Hi! Good script. Is it possible to work with wordpress or joomla with this script? Is there a template to work with WordPress?
On March 12th, 2008, travis said: 28
I’m getting a strange jumping issue in Safari, and i notice that on THW you’ve managed to disable the scrolling arrow buttons in Safari… yet for the life of me i can’t seem to see how you targeted that browser specifically, and i see that in the downloadable version of the script with examples files the arrows still appear in Safari - could you shed some light on how you’ve disabled them in that particular browser?
On March 26th, 2008, Jake said: 29
Awsome script, people are loving this layout/site with the scrolling.

Having an issue in IE: Line 214 “object required”… Any ideas?

Thank you
On March 27th, 2008, Kate said: 30
Hi there. I’m a total newbie, so could someone please tell me how I can make this script scroll the container div, instead of it scrolling the entire page? Thanks.
On April 10th, 2008, Danny said: 31
Hi there Marco. Thanks for this great script. I have the same question though as DJ in comment nr 17. In IE the backward scroll works smoothly, but the links to forward anchors jump. Can this be explained or better.. can it be fixed? I will be looking at your site to see how this script develops.
Thanks again….Danny
On May 12th, 2008, wurzl said: 32
Hi Marco! Your horizontal tiny scrolling script rocks!! But I too have got the problem with very slow speed (FF2 and IE7) when I’m scrolling from left to right. When I’m scrolling from right to left the speed is just fine. Maybe somebody please can help me out? Thanks a lot!
On May 18th, 2008, miffo said: 33
hi, i have a big problem with your script on joomla template named yt_portfolia from demo.yootheme.com. I tried already anything, but it still print some errors, when the lines where the error is i tried to erase, the firefox error console print error on other line. I am wery sad from that, i dont know what i have to do. Please, can you help me anybody? Have you ever experience with this combination ? thw + joomla template ? Thanks alot
On July 7th, 2008, Horizontal layout trends | StylizedWeb.com said: 34
[…] to give the user multiple options for navigation. The script I used for the navigation can be found here This gives you not only a smooth scroll effect but the use of the mouse wheel in IE and […]
On July 30th, 2008, John said: 35
Hi, I love your script. However, I ‘ve the same scrolling problem as wurzl. From right to left, it’s fine. Butt from left to right its very slow…. someone any ideas ? Thanx
On August 9th, 2008, Pwhndvve said: 36
Honi soit legate left buy cytotec dead hand estivities.
On August 13th, 2008, Uffe Pep said: 37
Solution to the object required problem: Delete the following lines from the “var Scrolltips ”

var left = document.getElementById(’left’);
addEvent(left,’mouseover’, function() {this.dx=setInterval(’scrollTips.arrowScroll(0)’,100);return false;});
addEvent(left,’mouseout’, function() { clearInterval(this.dx); return false;});
var right = document.getElementById(’right’);
addEvent(right,’mouseover’, function() {this.dx=setInterval(’scrollTips.arrowScroll(1)’,100);return false;});
addEvent(right,’mouseout’, function() { clearInterval(this.dx); return false;});

The above lines refer to the blue arrows in the example file that scrolls the window on mouseover. If you are not using these arrows in your page that javascript will try to call them thus giving a object required error.
On August 15th, 2008, Daniel Mark said: 38
Solution to slow scrolling from left to right in Firefox.

Specify the width of the document using CSS, for example:

Works great with Firefox on a mac. Please leave a note if it solves the problem in IE too!
On August 15th, 2008, Daniel Mark said: 39
[code]

[/code]
On August 15th, 2008, Daniel Mark said: 40
oups, seems that writing code here is tricky.

replace ( and ) with

(style type=”text/css”)
(!–
body {

width: 3000px;

}
–>
(/style)
On September 21st, 2008, Kugelbitz said: 41
Is it possible to have vertical scrolling at the page but when the mouse is over a defined DIV Box or Style it scroll’s horizontally?
http://www.dipity.com/user/tatercakes/timeline/Internet_Memes
On September 21st, 2008, Kugelbitz said: 42
Hi there, how I can make this script scroll the container div, instead of it scrolling the entire page? Like in this example
http://www.dipity.com/user/tatercakes/timeline/Internet_Memes
On October 14th, 2008, Zorky said: 43
For me a site is with a horizontal design. And I would very like to use your technology. But! I will not understand in any way, how all of it to set on a site :(
On November 7th, 2008, Alessandro Sartori said: 44
I’m closing works on a new website and I used your script. Actually everything’s fine thx also to fixes posted here in the comments, but I have a silly issue: the horizontal scroll is not working with the mouse wheel. Tested in FF2.0 & Safari. Hope u know what’s wrong with that!
On November 19th, 2008, JaySoto said: 45
I absolutely love this technique and am using it to simulate the “fluid galleries” technique by Evrium http://www.evrium.com. However, I’ve got the same scroll speed issue… the only browser that really works well is Safari. ANYONE figure this one out yet? How about you Marco, any thoughts on this?

Thanks!
On December 4th, 2008, dhtml ile yatay kayd�rma sorunu - Zoque.Forum said: 46
[…] kaydirma sorununu kesinlikle hallediyor. hem link hem de mouseover ile calisabilen bir script: http://www.centralscrutinizer.it/en/…iny-scrolling/ BYK’nin "smooth scroll" demesi uzerine bunlari bulabildim, sagolasin BYK :) bu guzel […]
On December 8th, 2008, Yash said: 47
Hi, I have a fixed position div on the left of my page and so want to make the images scroll only to about 200 pixel to the right of the left border. is there a way to do this?
On December 29th, 2008, 17 mega-creative side scrolling websites. said: 48
[…] it can create awesome sites that far exceed the experiences of flash counterparts. Sursly uses horizontal tiny scrolling to achieve its javascript […]
On December 31st, 2008, kipp said: 49
The JS applet is really cool!

I’m having problems using a flash menu that calls the “/#items ”

Any advice?
On December 31st, 2008, kipp said: 50
The JS applet is really cool!

I’m having problems using a flash menu applet that calls the “/#items ”

Any advice?
On February 8th, 2009, Super Gab said: 51
Hi, I’m trying to use both scripts (H and V) on the same page but the scrolling then goes really really too fast and I can’t slow it down.

Is there something I can try to solve this?
On February 16th, 2009, Lardlad said: 52
I am having trouble adding another onclick to these – ”href=’#first’ onclick=’function();’ ” doesn’t work.
On February 17th, 2009, brent said: 53
Loving this script and creating horizontal websites. I am having problems with a site where the content does flow below the fold. When I use the mousewheel to scroll down the page also scrolls a little left to right. Is there any way to correct this?
On February 17th, 2009, brent said: 54
ok, nevermind. I realize that mousewheel is supposed to scroll it left to right, duh. I just took off the scroll-tips.
On February 19th, 2009, daniel said: 55
i have a problem here..i have two fixed div which is header and footer.once i put width like 4000px. the 2 div is gone,cannot fix inside window.but once i put width 100% everything back to normal,just the smooth anchor become very slow. any solution put fixed div and smooth anchor become fine?
On February 19th, 2009, daniel said: 56
by the way..forgot to mention that only happen on ie 6 and below.
On February 20th, 2009, Useful tips to design horizontal website layout | veryweblog focus on the internet ,new media. said: 57
[…] implement this effect I suggest you to try Marco Rosella’s Horizontal Tiny Scrolling a very useful script to implement animated horizontal scrolling effect. The only thing you have to […]
On February 28th, 2009, Nadiu said: 58
Hi ! great script !! I’m a total newbe with web pages, but I’m self teaching myself with all the great blogs on css, js and html.
I have the same problem as many people here… in safari works great, but in firefox (at least for mac os x) is extremely slow, does anyone have a solution??
I would really appreciate it!
thanks
On March 10th, 2009, Dragon said: 59
Hi I have used this for a scrolling product menu, script works great but no matter what I do I cant slow it down, it just goes to fast for the application. If you go to the collections menu then select clothing and then select tops, you will see the application of the horizontal menu. I would very much like to slow this down, its too fast both in FF and IE, tku.
On March 13th, 2009, brent said: 60
Hey i ran across a problem. This script works great when you are just calling an anchor like <a href=”#anchor”

however when you call a javascript function like and in the function have location.href=”#myanchor”.. it jumps to the anchor instead of scrolling. ANy idea how to correct this?
On March 19th, 2009, Matt Bozelka said: 61
Love it and is so easy to use. However,everything seems to be working fine but when it scrolls to the right in firefox it scrolls extremely slow, but scrolls just fine to the left. In safari it works perfect….. any chance you may know why. Thanks
On March 27th, 2009, Sam said: 62
Hi. I love the script Everything else works perfectly except when i try to use an image as a link. Any solutions for this problem ? Thanks !!
On April 18th, 2009, Ivan Candle said: 63
Hello. I’m glad with this application!! But it works really slow when scrolling horizontally to the right, but it works perfectly well when scrolling horizontally to the left. I’m using anchors as you said. Any help?? Drop me a line saying what I should fix.
Thanks!

Ivan
On May 5th, 2009, Belinda said: 64
Thank god for this script! I have been looking for this for a long time for my photography website so thankyou thankyou thankyou!
BUT how to get it to work in IE? I would LOOOOVVE to hear from anyone who can help please. My customised example is here: http://www.dancephotography.net.au/18.htm ( a work in progress)
Belinda from Australia
On May 6th, 2009, lyndon said: 65
Anyone know why when setting right:0; in the css for the right scrolling div tag, the div tag had an offset in internet explorer but not in fire fox. when i disable the script on the right hover div it postitions itself correctly
I currently have one div container with the left scroller inside this container with css left:0; and the right scroller inside the container with css right:0;
I set the width of the left and right scrolling div tags as 60px and the height the same as the container.
If I change the id of the right div with exactly the same style applied it aligns right correctly, but when it is applied in conjunction with the thw.js script it basically bumps the div away from the right the width of the div tag 60px, only in internet explorer. I have been stumbling on this issue for a couple of weeks and would really appreciate some help before I lose my hair :). tku
On May 17th, 2009, Games Genie said: 66
Waw! Thanks a thousand.
This is what u was looking for all day!
On July 1st, 2009, Portfolio Iteration 0: CSS Foundation « William Trekell Blogs said: 67
[…] address how the site jumps directly to the next panel without any sort of transition. Thanks t0 the Horizontal Tiny Scrolling script by Marco Rosella the individual panels slide smoothly into their counterparts without any […]
On July 8th, 2009, The Tiny Scrolling(s) - from The Lab of the weblog Central Scrutinizer said: 68
[…] published on March 25, 2006 and March 31, 2006 Start with an example is the better way to begin a javascript technique post: click one of the […]

Central Scrutinizer

the personal homesite of Marco Rosella at it fourth version, born after long time, called Procrastination in Six Colors

The Horizontal Tiny Scrolling

68 comments:

Here's the list of topics.

Here's the months' archive. The time is now, remember.