Develop Reference

Custom cursor creating shivering svg

I am trying the customise the cursor when it is over some svg files to indicate to the user the possibility to click.
I stated for a tuto from https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitals, changed jquery part to javacript and added the cursor's customisation (css and JS)
Unfortunately when I add those 2 lines of code :
customCursor.style.top = (e.pageY-10)+"px";
customCursor.style.left = (e.pageX-10)+"px";
it makes the svg image hover "shivering"(sorry i do not find a better word to describe it). Some time the element is not even highlighted and also I have noticed the behavior is even different on chrome and firefox
See the code
If I remove even one of those line the svg file looks good, no more cursor customisation but it behave good.
I am running out of ideas and I need fresh ones to solve it....
Thanks in advance for your help.

At the moment the cursor is intercepting pointer events and causing the hover to be removed. That then gets rid of the cursor, reinstating the hover etc etc etc.
Give the cursor the CSS property pointer-events: none;
cursor {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid red;
border-radius: 50%;
z-index:10;
pointer-events: none;
}

clickable area of a button that scales down on click

I have an element which is acting as a button with a little Javascript and CSS. I'll strip it down to the most bare example, so you can see the problem. The issue originates from the fact that the element is scaled down when it's clicked. Javascript interprets the clickable area of the button as its scaled down size, not the original size. This occurs in all modern desktop browsers.
Here are the important parts. HTML:
<div id="refresh">more</div>
CSS:
#refresh {
background-color: #FFF;
cursor: pointer;
transition: all 150ms ease-out;
}
#refresh:active {
transform: scale(0.8);
}
JS:
var refreshBtn = document.getElementById("refresh");
function newImg() {
// updates an image elsewhere
}
// an event listener based on
// http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
addEvent(refreshBtn, 'click', newImg);
So my image gets updated when I click on the area occupied by the scaled down button, defined by transform: scale(0.8). If I click outside of that area, in the outer 20% of my button, my JS does not update the image. The proper click transitions occur and the cursor displays correctly as a pointer, but the JS does not count this area as part of the onclick event.
This was covered here, but I find the solution unappealing:
Non-clickable area on transforming anchor
The same solution is offered here:
increasing clickable area of a button
Here's the CSS I used as outlined in those answers:
#refresh:before {
position: absolute;
content: '';
top: -12%;
right: -12%;
left: -12%;
bottom: -12%;
}
These ensure that Javascript now recognizes a bigger clickable area instead of the scaled-down area, but in turn the pointer and the CSS hover effects now react to hovering and clicking well outside the original button element. I consider it an ugly solution. Surely someone else has run into this problem before. Are there any nicer solutions?
Update: Here is a jsfiddle of the situation I've explained: http://jsfiddle.net/cx9ur44e/4/

To solve the issue of the size, you would need to add the click even to a wrapper of the button that will keep the size even if the button is active.
<div id="wrapper>
<div id="refresh">more</div>
</div>

css :hover, touch-screen and single page applications

I'm making a single-page application with HTML, CSS and Javascript (no jQuery or similar). This application is made of many UI pages that can change via Javascript. The user experience is fine using the mouse on computers, but not so nice with touchscreens (mobile, etc.).
There are many buttons with a CSS hover graphic effect. If I change page tapping one button on a touch screen, the pointer stays there triggering the CSS hover of next elements appearing in the same position when the page is "changed". This effect is very annoying, but I can't figure out how to fix it.
The code is very simple:
CSS
button {
background-color: #XXXXXX;
}
button:hover {
background-color: #ZZZZZZ;
}
HTML
<button onclick="changepage()"></button>

You can use modernizr with Touch Events detection, than use
html.no-touch button:hover {
background-color: #ZZZZZZ;
}
Without modernizr you can add this simple code to append no-touch/touch class to html tag
<script type="text/javascript">
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(navigator.userAgent)) {
document.getElementsByTagName('html')[0].className += ' touch';
}else{
document.getElementsByTagName('html')[0].className += ' no-touch';
}
</script>

Thank you anyway! Finally I made a very simple script that works perfectly...it is good even for touch computers that have a mouse too (like mine), and of course for mobile phones. There is no need to detect devices! The solution is to add a very small div under the cursor pointer after the page changes, by calling the function refresh_hover(). This div 1px x 1px is removed as soon as the user clicks on it or the cursor goes out from it. In this way the hover effect is removed when the content changes behind the pointer, but then restored when the user does something! You will probably think that is very stupid, but is simple and works very well!
Here it is:
function refresh_hover(){
if(!event){
return false;
}
var x = event.clientX;
var y = event.clientY;
var div = document.getElementById('mouse_div');
if(!div){
document.body.innerHTML=document.body.innerHTML
+'<div style="position: fixed; z-index: 1000; height: 1px; width: 1px; display: block;" id="mouse_div" onmouseout="this.style.display=\'none\'" onclick="this.style.display=\'none\'"></div>';
div = document.getElementById('mouse_div');
}
div.style.display='block';
div.style.top=y+'px';
div.style.left=x+'px'
}

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:

I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo

Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.

You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html

Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.

CSS and JS - Extend background image beyond div

I'm currently trying to find a workaround to having arrows on Niall Doherty's Coda Slider 2 to highlight the selected tab. Initially I tried doing this with images on the header image, although whilst it looked fine in Safari on my Mac, it wasn't central on other devices (see www.lukekendalldesign.co.uk/pss/productsandservices)
I tried creating this using CSS arrows but that proved rather difficult, so I've found a workaround using a background image, but I've come across yet another problem.
http://cl.ly/HovO (Sorry, I can't upload images - newbie!)
Please refer to the above linked screenshot. The lighter grey triangle that matches the background is part of the header image. The black triangle is positioned using the following CSS code:
.coda-nav ul li a.current {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
color: white;
height: 60px;
z-index: 20000;
background: url(../images/triangle.png) no-repeat 50% 100%;
position: relative;
overflow: visible;
}
What I'm trying to do, is position this black arrow where the grey image arrow is (if that makes sense at all?) How can I do this?
I have tried adding margins and padding, however it extends the grey background and doesn't push the background image black triangle down.
Whilst I have found solutions similar, none seem to apply because the class .current is applied using the following JS:
// If we need a tabbed nav
$('#coda-nav-' + sliderCount + ' a').each(function(z) {
// What happens when a nav link is clicked
$(this).bind("click", function() {
navClicks++;
$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
offset = - (panelWidth*z);
alterPanelHeight(z);
currentPanel = z + 1;
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});
});
I would very much appreciate any help anyone can offer me on this - as it's a JS issue it's something that's a bit out of my depth! :(

I have tried this in Firefox using fire bug on windows. I think there are 2 problems. The first is that the margin on the ul element should be 167px (the black arrow is not in a nice place in the image (middle is at 232 px did you mean this?).
The the arrow just needs moving down which I did by setting the back ground position to be:
url("../images/triangle.png") no-repeat scroll 50px 60px transparent hope this helps.