Greetings! I was wondering if the mouse over relative scrolling in this jQuery demo can be done in CSS3 only? If so, how? Thanks in advance.
Thanks so much Paul O’B. I appreciate your time and effort with this.
You guys are AWESOME! Thanks for all the feedback and thanks Paul O’B for the code. It is greatly appreciated.
Can I combine a hover scroll like this one (http://www.labusdesign.com/hoverscroll/hoverscroll.html) with your “thecssninja” accordion? You couldn’t have the accordion activate on hover though - everything would be like wobbly stilts on rollerskates. Each menu item would have to have a JS onclick event (or is there a CSS3 onclick event equivalent?) to activate the CSS3 transition accordion drop down right?
Thanks again.
Very simple answer to this, tell them that as there are still browsers in use which don’t support CSS3 (like Internet Explorer) which hold a significant market share. If you were to use CSS3 you can guarantee them that a large portion of their audience are not going to be able to see the site as they intended. JavaScript is ubiquitous and while a few people have it disabled, it’s much easier to make it functional than to depend on CSS3 (and :target would be a prime example). It’s ultimately their choice but explaining that they may lose potential clients as a result of their poorly informed decision to go with an unfinished standard (which wasn’t intended for that kind of mechanism) put’s the ball in their court - after all, it’s entirely up to them if they want their traffic to suffer as a result of egotism. 
If your client wants the “latest and greatest” you could always play the accessibility/usability cards?
I am pretty certain that that could not be achieved in CSS3 without any scripting.
Even if it could, I would strongly advise against using it. It’s a usability nightmare and a complete accessibility fail. Scrolling should be done with traditional methods, ie a scrollbar.
I agree with the above comments but you can do the moevement with two lines of css3 but it doesn’t provide the right functionality.
Safari only:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test{
width:100%;
position:relative;
}
.scroll{
margin:0;
padding:0 0 0 100px;
position:relative;
overflow:hidden;
border-top:5px solid #000;
border-bottom:5px solid #000;
background:#f2f2f2;
height:320px;
}
ul {
margin:0;
list-style:none;
padding:1px 0;
-webkit-transition: margin 4s ease-in-out;
}
li {
width:100px;
height:40px;
line-height:30px;
-webkit-transition: margin 1s;
}
a {
display:block;
height:28px;
background:red;
border:1px solid #000;
color:#fff;
text-decoration:none;
margin:5px 0 0;
}
ul:hover {
margin-top:-300px;
}
li:hover {
width:150px;
margin-left:-50px;
color:#b00
}
p {
width:50px;
height:25px;
line-height:25px;
text-align:center;
background:blue;
color:#fff;
margin:0;
}
</style>
</head>
<body>
<div class="scroll">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
</ul>
</div>
</body>
</html>
You can create some neat effects with transitions but you have to be careful that you don’t end up re-inventing the blink tag
The recent CSS3 Live course covered transitions and animations and was quite fun.
Hi,
The cssninja accordion already works when clicked but it uses the :target pseudo class to do this by increasing the height of the destination. However that won’t really be compatible with the hover scroll js as the elements that scroll are within an element that is overflow:hidden and “in-page” links don’t work properly within elements that are overflow:hidden. They do work but once you’ve reach the target any content outside the element is not reachable again.
You’d need to set up an onclick routine for the accordion to increase the elements height when clicked but still let css3 handle the animation. I’m wondering if it might be just a step to far to have the accordion scroll and then open onclick. It might make it even harder to navigate.
Using your hover scroll you could add that to my original demo and use that to scroll a normal menu but let css3 just do the horizontal animation as a compromise.
e.g. (Safari only at present)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var mosX = 0
var mosY = 0
viewportTop = 0
viewportLeft = 0
containerTop = 0
containerLeft = 0
//Gets the mouse position on the page
function getMouseXY(e) {
if (IE) {
mosX = event.clientX + document.body.scrollLeft
mosY = event.clientY + document.body.scrollTop
} else {
mosX = e.pageX
mosY = e.pageY
}
if (mosX < 0){mosX = 0}
if (mosY < 0){mosY = 0}
return true
}
//The main function that is called in the mouseover event of your viewport element(s)
function hsscroll(theLink){
viewport = theLink.id;
container = document.getElementById(viewport).getElementsByTagName("DIV")[0].id;
var vel=document.getElementById(viewport);
var viewportLeft=0,viewportTop=0;
if (vel.offsetParent)
{
do
{
viewportLeft+=vel.offsetLeft;
viewportTop+=vel.offsetTop;
}
while(vel=vel.offsetParent);
}
var cel=document.getElementById(container);
var containerLeft=0,containerTop=0;
if (cel.offsetParent)
{
do
{
containerLeft+=cel.offsetLeft;
containerTop+=cel.offsetTop;
}
while(cel=cel.offsetParent);
}
if (document.getElementById(theLink.id).className=="hs-vertical"){
if (document.getElementById(container).offsetHeight>document.getElementById(viewport).offsetHeight){
varA = ((mosY-viewportTop)/document.getElementById(viewport).offsetHeight);
varB = document.getElementById(container).offsetHeight - document.getElementById(viewport).offsetHeight;
contop = (varA*varB)^-1;
document.getElementById(container).style.top = contop+"px";
}
}
}
</script>
<style type="text/css">
.test {
width:100%;
position:relative;
}
.scroll {
margin:0;
padding:25px 0 25px 100px;
position:relative;
overflow:hidden;
border-top:5px solid #000;
border-bottom:5px solid #000;
background:#f2f2f2;
height:320px;
}
ul {
margin:0 0 0 100px;
list-style:none;
padding:1px 0;
}
li {
width:100px;
height:40px;
line-height:30px;
-webkit-transition: all .4s;
}
a {
display:block;
height:28px;
color:#000;
text-decoration:none;
margin:5px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
border-radius:5px;
background: #e3e3e3;
list-style: none;
border: 1px solid #b2b2b2;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(1, #f8f8f8));
-webkit-box-shadow: #aaa 0px 4px 10px;
-moz-box-shadow: #aaa 0px 4px 10px;
box-shadow: #aaa 0px 4px 10px;
text-align:center;
-webkit-background-clip:padding-box;
-moz-text-shadow:2px 2px 2px #333333;
-webkit-text-shadow:2px 2px 2px #333333;
text-shadow:2px 2px 2px #333333;
}
li:hover {
width:150px;
margin-left:-50px;
color:#b00
}
p {
width:50px;
height:25px;
line-height:25px;
text-align:center;
background:blue;
color:#fff;
margin:0;
}
#vertical_viewport {
position: absolute;
width: 257px;
height: auto;
z-index: 3;
bottom: 5px;
left: 4px;
right: 3px;
top: 5px;
overflow: hidden;
}
#inner{
position: absolute;
width: 257px;
height: 800px;
z-index: 3;
padding:25px 0;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div id="vertical_viewport" class="hs-vertical" onmousemove="javascript:hsscroll(this)">
<div id="inner">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
<li><a href="#">link 6</a></li>
<li><a href="#">link 7</a></li>
<li><a href="#">link 8</a></li>
<li><a href="#">link 9</a></li>
<li><a href="#">link 10</a></li>
<li><a href="#">link 11</a></li>
<li><a href="#">link 12</a></li>
<li><a href="#">link 13</a></li>
<li><a href="#">link 14</a></li>
<li><a href="#">link 15</a></li>
<li><a href="#">link 16</a></li>
<li><a href="#">link 17</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I don’t really have time to play with that anymore today but I’m sure it can be improved
Thanks for the input/help guys. Unfortunately this is one of those cases where the customer is insisting despite the usability consequences. 
You can do the basic accordion effect in a couple of lines of css3. You can find examples here:
http://www.paulrhayes.com/experiments/accordion/
http://development.tobypitman.com/css/css3accordian.html
http://www.tobypitman.com/dynamic-css3-animated-accordian-menu/
http://rilwis.googlecode.com/svn/trunk/accordion.html
http://www.thecssninja.com/demo/css_accordion/#Section1
I’m not sure why everyone keeps saying that you need masses of code for transitions/animations in css3 because usually it’s one line of code to do the effect.
The benefit of css3 animations and transitions is that they are hardware accelerated unlike javascript and is one of their main strong points. In most cases you would need javascript to organise timings and start and stop of the animations but let css3 actually handle the animation.
You can’t do everything of course and CSS3 is more concerned with the appearance changes rather than the function (which would be javascript’s territory).
Here is a live version of the scrolling menu I posted earlier although you’d have to be a ninja with the mouse to ever hit the right link. I couldn’t see a way to stop it at the right point and would proaby need javascropt assistance. (Note the above demos are Safari only but would probably work in Firefox 4 if the correct code was added.)
Thanks again for the great advise guys. I really appreciate it.
Like I said, this is for internal only (intranet) web bases desktop app in which only the latest beta releases of Firefox will be used - currently at beta 4.3 (with support for CSS3 transitions) last time I checked. IE or any other browser and backwards compatibility need not be a concern.
Maybe I can renew their faith in jQuery by building this with the latest and greatest of what jQuery has to offer? Anyone know of any good jQuery plug-ins that match the “vertical hover-scrolling accordion menu” description?
Agreed. I have made every effort to describe the pitfalls. This customer likes to latch onto the latest and greatest technologies like “CSS3” and run with it just because it demonstrates to piers that they are “forward thinking”, innovative and cutting edge. They are also convinced jQuery sucks (despite what I tell them) because of previous poorly implemented jQuery projects and they are not technically savvy (they think they are).
Maybe having a completed working example built with jQuery would trump the lack of CSS3 usage? 
Hey, they are willing to pay for as long as it takes to get it done so why not?
What they want is a “vertical hover-scrolling accordion menu”. 
The accordion menu CAN be done with CSS3. Not sure how that would combine with the vertical hover-scrolling JS though…
It may help to know that this will be an internal browser based desktop app that will use Firefox beta 4.3+ (read latest and greatest) exclusively. No IE or anything else.
Ideas anyone? Anyone? Beuler?
Is there a particular reason why you don’t want to use jQuery? At least jQuery has some usability and accessibility backbone to it (it degrades gracefully).
It could certainly be done with CSS3 (with a lot of extrenous markup) but I would say you will be much better off using JavaScript for that task.
PS: If your client is making demands that aren’t feasible, part of the designers job is to educate them (we are the knowledgeable people after all)!
A novelty for a few seconds, then it gets irritating. Don’t force your users to make more of an effort to access your content than is necessary.
This thing adds effort. To do this in CSS3 you might be able to do it with the transitions/animations stuff (which is still in its infancy and poorly supported), but the amount of work it would require to get it like this is probably monolithic. You’d probably also require loads of extra markup and the CSS would be extremely long and fragile.