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;
}

Is it possible to make a see-through window using HTML/JS/CSS?

I need to make a see-through window when user click in a given position of the screen, something like this:
It is, I need to highlight an arbitrary area in the screen (with a fixed width and height) in the position where the user clicks.
I have two options:
Use a plugin to take screenshots (like these).
Create 4 grayed boxes.
I don't like none of these options for different reasons:
The use of these plugins exceds my needs and adds an extra page load time and undesired complexity.
Manage these boxes may be complex in a future and browser compatibility may be an issue.
So, my question is, is there any way to do this in a simple manner using HTML (HTML5 and canvas is ok), CSS and Javascript/Jquery? A specific Jquery plugin will be an option due I could forget the maintenance of this code.

I did this once, I am not sure everyone will agree with my implementation but it worked for me at the time:
Create a div in the location you want, set height and width (for window effect);
position the div in the place you wish and then just add outline to it.
body {
background-image: url(http://lorempixel.com/800/800/nature/5/);
background-size: cover;
}
.windowDiv {
position: absolute;
top: 100px;
left: 100px;
height: 300px;
width: 300px;
outline: 4000px solid rgba(0, 0, 0, 0.5);
}
<div class="windowDiv"></div>
EDIT: use background-color rather than opacity.
2nd EDIT: as A.Wolf suggested you should use outline instead of border for easier positioning.

How to make a jQuery step animation?

I have searched for anything on how to animate a color wheel using jquery to step through the defined colors in order and I can't seem to find anything.
What I'm looking to do is spiral an effect by "opening" slivers of the colors at 45 degrees and open them in order like a spiral and then close them in order. Starting from blank and ending with blank. By open I mean some kind of slide effect (hard to think of the correct term) but think of a loading gif spiral that looks like it's spiraling. (Like the mac rainbow wheel, only making the previous colors disappear after cycling through.)
I'm using jquery and would prefer a jquery solution so I don't have to worry about browser compatibility issues, but I could accept css transitions as a last resort.
I've attached some images to give a better visual idea. I have no code right now but my plan was just to have a div inside the body where the jquery would draw or do this animation. I really don't even know where to start so I don't have anything to build from nor do I really know the exact terminology I'm looking for. Hopefully my images will give a better understanding. Thanks.

I used moredemons's answer as a basis, using CSS triangles. It does the same thing, but it properly separates the CSS so you don't have to edit the JS to edit the colors. The JS is also simpler, doesn't rely on if/elses for all 16 states.
The main benefit of a programatic solution over a gif is that you can customize the colors, sizes, animation rate more easily.
Small, green, blue, fast
Big, red, blue, slow
Big with a different arrangement
Initial HTML All triangles hidden
<div id ="ct" >
<div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
<div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
<br/>
<div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
<div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>
CSS
.triangle {
font-size:0;
border: 50px solid transparent;
display: inline-block;
width: 0;
height: 0;
margin:0;
padding: 0;
}
.triangle-se {
border-color: red red blue blue;
}
.triangle-sw {
border-color: red blue blue red;
}
.triangle-nw {
border-color: blue blue red red;
}
.triangle-ne {
border-color: blue red red blue;
}
.triangle-hide-tl {
border-top-color: transparent;
border-left-color: transparent;
}
.triangle-hide-tr {
border-top-color: transparent;
border-right-color: transparent;
}
.triangle-hide-br {
border-bottom-color: transparent;
border-right-color: transparent;
}
.triangle-hide-bl {
border-bottom-color: transparent;
border-left-color: transparent;
}
JS
setInterval((function(){
var index = 0;
// Which square is going to be modified in each stage (16 stages)
var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
// The clases to add and remove
var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];
return function() {
var el = $('#ct div.triangle').eq(map[index]);
if (index < 8) {
// Showing pieces
el.removeClass('triangle-hide-' + classesToChange[index] );
} else {
// Hiding pieces
el.addClass('triangle-hide-' + classesToChange[index - 8] );
}
index++;
if (index >= 16) {
index = 0;
}
};
})(), 200);

I know my solution is weird a lot, but there's no another solution as I see. I used borders to create 45° corners and jQuery animate with step on fake element.
So, look at this fiddle: http://jsfiddle.net/WYKmQ/1/

You're simply looking for an animated gif.
Why overcomplicate things with javascript when it's not needed.
A gif will show perfectly in any browser.
Here, it took me 3 minutes to do this. Less time than any code.

Update your example >> mi-creativity.com/test/color-wheel
You can achieve the same above effect by using what so called image-sprites, you include all of them in one image, queuing them vertically or horizontally and changing the background-position just like in this example (you can view the page source to know how to do it)
mi-creativity.com/test/fading-sprite-background
The above example uses a jquery plugin called jquery.bgpos.js as will as a .png image
Another way of doing it you can set each of above images as a back-ground image each for a different class wit ha numerical value and you change the div class by making use of toggleClass jquery property like in this example - check the page source -:
mi-creativity.com/test/fading-sprite-background
Which I prefer because it is easier to modify it and add more frames if you want.
P.S: you don;t need another blank frame at the beginning, just move the last frame to the beginning, because if you used two blank frames that would affect the smoothness of the motion

Changing picture on mousemove in javascript

I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?

Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.

You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}

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.