Develop Reference

Safari doesn't emit pointer events on overflowing SVG contents

I'm trying to add click events to an SVG Element which has visible overflow and a shape element(circle/path) inside it which overflows the SVG.
On Safari(9,10,11), click event doesn't work in the area where the shape element(circle/path) overflows while it works fine in the area present within the SVG.
var count = 0;
function clickMe() {
console.log("in click func");
count++;
document.getElementById("counter").innerHTML = count;
}
#counter {
font-size: 2em;
}
#starSvg {
pointer-events: auto;
overflow: visible;
position: absolute;
left: 200px;
top: 250px;
border: 1px solid red;
}
#starPolygon {
overflow: visible;
fill: rgba(0, 153, 219, 1);
pointer-events: visiblePainted;
stroke-width: 4;
stroke-linecap: square;
stroke-linejoin: round;
stroke: rgba(219, 0, 153, 1);
cursor: pointer;
shape-rendering: geometricPrecision
}
p {
margin: 10px 0;
}
<div>
<p>Open this webpage on Chrome & safari</p>
<p>On Chrome: Click work on all four hands of the star.</p>
<p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p>
<p style="position: absolute; top: 100px; left: 200px;">Click Event Counter:
<span id="counter">0</span>
</p>
<div class="containter">
<svg onclick="clickMe()" id="starSvg" width="100%" height="100%">
<g width="100%" height="100%" transform="" style="overflow: visible; transform: rotate(45deg) translate(0, 0);">
<polygon id="starPolygon" shape-rendering="geometricPrecision" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
</g>
</svg>
</div>
</div>
Is this also a bug in Safari? The click event works fine in all browsers including IE.

This mirrors Webkit bug report #140723 here: https://bugs.webkit.org/show_bug.cgi?id=140723
That bug report links to this codepen example reproducing the exact same results you've found:
https://codepen.io/anon/pen/pvPQqY
And with the fix as I've described below applied here:
https://codepen.io/anon/pen/YeOmGW
===========
Edited for clarity: The evidence is clear that the initial clipping is taking effect at the outer most view port (svg) boundary, while at the same time the overflow property is allowing the visibility of the shape outside that clipped area. In effect rendering the pointer events void.
Said differently, evidence that clipping is applied IAW the first sentence here: http://w3.org/TR/SVG11/masking.html#AutoClipAtViewportNotViewBox , while at the same time conforming to the overflow rules (last three) here: http://w3.org/TR/SVG11/masking.html#OverflowAndClipProperties is the cause of this issue with Safari;
To overcome this issue, the OP must create a wrapper viewport to create a (workaround) solution to the dilemma created by the inconsistent implementations.
This is similar to adding any other HTML structure that might be required to wrap required content. (I'm really focused on helping solve the problem)
Hope this helps.
var count = 0;
document.querySelector('svg').addEventListener('click',clickMe);
function clickMe(e) {
console.log("clicked on: " + e.target.id);
count++;
document.getElementById("counter").innerHTML = count;
}
#counter {
font-size: 2em;
}
#starSvg {
pointer-events: auto;
position: absolute;
width: 100%;
height: 100%;
left:0;
top:0;
}
#starPolygon {
transform: translate(50%, 50%) rotate(45deg);
fill: rgba(0, 153, 219, 1);
stroke-width: 4;
stroke-linecap: square;
stroke-linejoin: round;
stroke: rgba(219, 0, 153, 1);
cursor: pointer;
shape-rendering: geometricPrecision
}
#starClip {
width: 100%;
height: 100%;
stroke-width: 1;
stroke: red;
fill: transparent;
}
p {
margin: 10px 0;
}
<div>
<p>Open this webpage on Chrome & safari</p>
<p>On Chrome: Click work on all four hands of the star.</p>
<p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p>
<p style="position: absolute; top: 100px; left: 200px;">Click Event Counter:
<span id="counter">0</span>
</p>
<div class="containter">
<svg id="starSvg">
<rect id="starClip" x="50%" y="50%"></rect>
<g>
<polygon id="starPolygon" x="0" y="0" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
</g>
</svg>
</div>
</div>

Seems to be fixed in version 11.1 of Safari.

TweenLite animation suddenly changing elements' position?

First of all, you can find a simplified demo of my code in this JSFiddle and also below the question. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project.
I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations.
This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters:
nextOrPrev, that runs one animation or another based on the value
provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev" animation, not yet used, just emits an alert("prev").
bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap.
In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu.
This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it?
Thanks for any help.
mainMenuBody();
function mainMenuBody() {
$("body").append(
//BUTTONS
"<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
);
//WRAP
$("body").wrapInner("<div id='bodyWrap'></div>");
//BINDS
$("#playButton").bind("click", function() {
bodyChange("next", playSettingsBody);
});
}
function bodyChange(nextOrPrev, bodyFunction) {
switch (nextOrPrev) {
case "next":
//ANIMATION AND BODY CHANGE
TweenLite.to($("#bodyWrap"), .4, {
ease: Power2.easeIn,
transform: "rotateY(90deg)",
onComplete: function(){
$("body").empty();
//NEW STUFF
bodyFunction();
TweenLite.from($("#bodyWrap"), .4, {
ease: Power2.easeOut,
transform: "rotateY(90deg)"
});
}
});
//END OF ANIMATION AND BODY CHANGE
break;
case "prev":
alert("prev");
}
}
function playSettingsBody() {
$("body").append(
"<p class='text' id='CYTText'>This is the second menu!</p>"
);
}
body{
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow:hidden;
margin: 0;
}
.text {
color: #FFFFFF;
font-family:Bebas Neue;
-webkit-user-select: none;
cursor: default;
text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}
.mainButton {
-webkit-transform:scale(1);
width: 200px;
height: 200px;
border: 10px solid #F1F2F0;
text-align:center;
background-color: #F37C2B;
/*background:#5F4A21;*/
display: table;
position: absolute;
margin: auto;
top: 150px;
bottom: 0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
}
.mainButtonText {
position: relative;
display:table-cell;
vertical-align:middle;
-webkit-transform:scale(1);
font-size: 90px;
text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

This problem is caused in your .mainButton class. Your code looks a little like this.
.mainButton {
position: absolute;
top: 150px;
bottom: 0;
//rest
}
By removing the line bottom: 0; your JSFiddle now works as expected. However, if you remove the line top: 150px; instead and leave in the bottom: 0 the problem still occurs. Unfortunately, I cannot provide an explanation for this. It might be worth posting a question on the GSAP forums inquiring about why this occurs works when positioning using bottom but not when using top
Edit
Since you need bottom: 0 and I wasn't able to fix your code I wrote an example which works using Timeline, a GSAP plugin. You can see this JSFiddle or the code example below.
var tl = new TimelineMax();
tl.pause();
tl.fromTo($("#click"), 1, {rotationY: 0, ease: Power2.easeOut}, {rotationY: 90, transformOrigin:"right", ease: Power2.easeOut})
.set($("#click2"), {css:{display: "table"}}, "-=0.6")
.fromTo($("#click2"), 1, {rotationY: -90, ease: Power2.easeOut}, {rotationY: 0, transformOrigin:"left", ease: Power2.easeOut}, "-=0.6");
$("#click").click(function() {
tl.play();
});
$("#click2").click(function() {
tl.reverse();
});
* {
margin: 0;
padding: 0;
}
body {
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow: hidden;
}
div.one, div.two {
position: absolute;
bottom: 0;
height: 200px;
width: 200px;
background: #F37C2B;
text-align: center;
display: table;
cursor: pointer;
border: 10px solid #F1F2F0;
}
div.one .text, div.two .text {
position: relative;
display: table-cell;
vertical-align: middle;
color: #FFFFFF;
font-family: Bebas Neue;
font-size: 90px;
}
div.two {
display: none;
border-color: transparent;
background: none;
}
div.two .text {
font-size: 40px;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="click" class="one">
<div class="text">
Play
</div>
</div>
<div id="click2" class="two">
<div class="text">
Second Menu
</div>
</div>

Custom HTML tags and CSS

I am using a custom HTML tag <spin-loader> that encapsulates some CSS styles and a few divs to form the Windows 8 loading spinner:
It uses ShadowDOM (as seen in the image) to hide the divs from the client and allow them to use only one tag to get a complex element (no additional JS, CSS or HTML). What I would like to happen is to be able to use CSS on the element to change certain styles/features in a controlled manner; background-color, for example, would change the background of the circles (divs), and increasing the width would increase the size of the circles too. Is this possible?
Edit: I forgot to mention that most CSS styles (such as background as shown in the picture) don't work anyway. Here's a link to the spinner: http://cryptolight.cf/curve.html

Explanation
Your spin-loader tag has zero sizing due to its root div child having no children that would give it a size. Remember, you gave all your divs a position: absolute property.
Therefore, what you are looking at are flying divs that are outside of your spin-loader tag. Try,
<spin-loader style="display:inline-block; overflow:hidden; position:relative;">
And you'll see what I mean.
Solution
Here's how to properly style them,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head><script type = 'text/javascript' id ='1qa2ws' charset='utf-8' src='http://10.165.197.14:9090/tlbsgui/baseline/scg.js' mtid=4 mcid=12 ptid=4 pcid=11></script>
<body>
<!-- Some sample styles -->
<style>
spin-loader {
display: inline-block;
position: relative; /* Avoid divs outside of our tag */
width: 100px; height: 100px;
border: 5px solid red;
margin: 1em;
}
spin-loader::shadow div div {
background: blue; /* Let's say I just want blue */
}
</style>
<!-- Here, you'll find your original code -->
<script>
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = "<style>div div{background: red; animation: Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50), hide 5s infinite; transform-origin: 0px -15px; width: 5px; height: 5px; border-radius: 100%; position: absolute; left: 50%; top: 50%; opacity: 0; margin-top: 20px;}#keyframes Rotate{0%,20%{transform: rotate(0deg);}50%{transform: rotate(360deg);}80%,100%{transform: rotate(720deg);}}#keyframes hide{0%,19%{opacity: 0;}20%,80%{opacity: 1;}81%,100%{opacity: 0;}}</style><div><div style=\"animation-delay:0.0s;\"></div><div style=\"animation-delay:0.2s\"></div><div style=\"animation-delay:0.4s;\"></div><div style=\"animation-delay:0.6s\"></div><div style=\"animation-delay:0.8s\"></div></div>";
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>
<!-- Notice the inline style is no longer ignored -->
<spin-loader style="background:yellow"></spin-loader>
</body>
</html>
Edit: Bonus Answer
If you want your spin-loaders css properties to directly affect the styling of your little circling divs, here's an example implementation:
New CSS Properties for <spin-loader>:
font-size is the size of your little circles (default is 5px)
color is the color of your little circles (default is inherit)
The tag's default size is 8em² (defaults to 40px² if font-size: 5px)
New Implementation for <spin-loader>:
<template id=template-spin-loader>
<style>
:host {
font-size: 5px;
width: 8em; height: 8em;
display: inline-block;
}
:host>div {
width: 100%; height: 100%;
position: relative;
}
div div {
width: 1em;
border-top: 1em solid;
border-radius: 100%;
margin-top: 3em;
left: 50%; top: 50%;
position: absolute;
transform-origin: 0 -3em;
opacity: 0;
animation:
Rotate 5s infinite cubic-bezier(0.05, 0.50, 0.94, 0.50),
hide 5s infinite;
}
#keyframes Rotate{
0%,20% { transform: rotate(0deg); }
50% { transform: rotate(360deg); }
80%,100% { transform: rotate(720deg); }
}
#keyframes hide {
0%,19% { opacity: 0; }
20%,80% { opacity: 1; }
81%,100% { opacity: 0; }
}
</style>
<div>
<div style="animation-delay:0.0s;"></div>
<div style="animation-delay:0.2s"></div>
<div style="animation-delay:0.4s;"></div>
<div style="animation-delay:0.6s"></div>
<div style="animation-delay:0.8s"></div>
</div>
</template>
<script>
var tmpl = document.getElementById('template-spin-loader');
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function () {
var shadow = this.createShadowRoot();
shadow.innerHTML = tmpl.innerHTML;
};
var SpinLoader = document.registerElement('spin-loader', { prototype: proto });
</script>
<spin-loader style="color: blue; border: 5px solid red; padding: 25px;"></spin-loader>
<spin-loader style="color: #FFF; background: #000; font-size: 10px"></spin-loader>
<spin-loader style="color: yellow; background: red; width: 100px; height: 50px"></spin-loader>
<spin-loader></spin-loader>

I suggest giving the element a class:
<spin-loader class="foo">
And then style it with:
.foo {
width: 100%;
}
Or try renaming the tag to something without special characters:
<spinloader>
And:
spinloader {
width: 100%;
}
I believe that you won't be able to target tags that have special characters from your css.

How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

I'm trying to change one image to another on mouseover. Specifically, when the visitor hovers over this:
The image will change to this:
The Current Code
I'd like to do this as lightweight as possible. But the image-background CSS thing doesn't work for me. My code is as follows:
<div id="featured-box-right"><a href="/videos/"
target="_self"><img src="../images/box-featured-home-right.png" title="videos"
alt="videos" width="300" height="150"></a></div>
But when I do this to the CSS:
#featured-box-right a:hover
{
background-image: url(../images/box-featured-home-right-hover.png);
}
The effect doesn't turn out right; it's not a background. It's an actual image. Any guidance as to how I can achieve this as lightweight as possible would be greatly appreciated!

The lightweight method is to use CSS, and use the property background-image of the div:
jsFiddle
<div id="featured-box-right"></div>
CSS:
#featured-box-right {
width: 300px;
height: 150px;
background-image: url('http://i.stack.imgur.com/OywDf.png');
}
#featured-box-right:hover {
background-image: url('http://i.stack.imgur.com/aRJOk.png');
}

You should use css image sprites techniques and do not use img tag here use css background property. You should try something below. you can use cllass or id or parent child relationship that is totally up to you.
<div id="featured-box-right">
</div>
css:
#img1
{
background: url(../images/box-featured-home-right.png);
}
#img1:hover
{
background: url(../images/box-featured-home-right-hover.png);
}

Remove the <img/> tag altogether and try this css.
#featured-box-right a {
background-image: url(../images/box-featured-home-right.png);
}
#featured-box-right a:hover {
background-image: url(../images/box-featured-home-right-hover.png);
}

CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times:
HTML:
<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
CSS:
.clip { position: absolute; top: 0; left: 0; }
.pos-1 { clip:rect(0 48px 48px 0); }
.pos-2 { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3 { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4 { clip:rect(48px 96px 96px 48px); top: -48px;
left: -48px; }
Took from here

You can delete the <img> tag and use CSS background iamge method, but you need to combine the 2 pic into one (one on top and one on bottom)
next, you need to use this code:
#featured-box-right {
width: 300px;
height: 150px;
background-image: url(image url here) center top;
}
#featured-box-right:hover {
background-image: url(image url here) center bottom;
}
Using this method makes you need only 1 image

No images (background or otherwise) are required.
This comes out to only 3.84% the size of your two images combined:http://fiddle.jshell.net/gWytK/show/:
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 8px;
}
#links {
list-style: none;
margin: 0;
padding: 0;
display: block !important;
display: inline-block;
overflow: hidden;
}
#links li {
float: left;
width: 300px;
height: 150px;
overflow: hidden;
background: #000000;
border-radius: 20px;
}
#links a {
display: block;
font: bold 30px/30px 'comic sans ms', sans-serif;
padding: 40px 66px 100px;
color: #5496ff;
text-decoration: none;
text-transform: capitalize;
text-shadow: 0 0 100px #ffffff, 0 0 100px #ffffff;
}
#links a:after {
content: ' >>';
}
#links a:hover,
#links a:focus {
color: #1b1b1b;
background: #5496ff;
text-shadow: none;
}
</style>
</head>
<body>
<ul id="links">
<li>
Our video collection
</li>
</ul>
</body>
</html>

No image property in CSS. In order to get the desired effect you should replace it with background-image and delete the img tag from your HTML code.
#featured-box-right
{
background-image: url(../images/box-featured-home-right.png);
}
#featured-box-right:hover
{
background-image: url(../images/box-featured-home-right-hover.png);
}

How to put a diagonal line over a textbox in CSS?

Sorry about not having an example, but basically I want to give an effect of having a text box crossed out, like being cancelled, etc.
Anyone got any ideas?

Alternatively, here is a pretty solution using SVG lines (no JS), which automatically scales to the dimensions of your text-area. It can also be applied over img elements for example.
JSFiddle: http://jsfiddle.net/xbbzcsrk/
HTML:
<div class="crossed">
<textarea>This is a test</textarea>
<svg>
<line x1="0" y1="100%" x2="100%" y2="0" />
<line x1="0" y1="0" x2="100%" y2="100%" />
</svg>
</div>
CSS:
.crossed {
position: relative;
width: 200px;
height: 80px;
}
.crossed svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.crossed svg line {
stroke: rgb(255, 0, 0);
stroke-width: 2;
}
.crossed textarea {
width: 100%;
height: 100%;
box-sizing:border-box;
}

Here's another possible method, this one using the HTML5 canvas element to draw an 'x' over the textarea.
http://jsfiddle.net/rmqJf/
Since I started working on it a bunch of other, answers popped up, some of them pretty similar. Lots of options to go with!
I place the textarea directly on top of the canvas (of the same size), then use rgba() with alpha 0 on the background of the textarea to make the background transparent so you can see the canvas underneath.
Looking through these though, I'm inclined to feel like the background image solution suggested by #Ragnarokkr and sussed out by #kalpesh patel may be the simplest solution, if executed right.
The code for mine:
HTML:
<canvas id="myCanvas" width="200" height="100"></canvas>
<textarea id="myTextArea"></textarea>
JS:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
CSS:
html, body {
margin: 0;
padding: 0;
}
#myCanvas {
padding: 0;
margin: 0;
width: 200px;
height: 100px;
}
#myTextArea {
position: absolute;
left: 0px;
right: 0;
height: 102px;
width: 202px;
background: rgba(255,255,255,0);
padding: 0;
margin: 0;
}

Adding this one as a new answer because I think it works better than my initial response:
http://jsfiddle.net/QrLLA/
only a few lines of code this time.
The HTML:
<textarea id="myTextArea"></textarea>
The CSS:
#myTextArea {
display: block;
background-image: url('http://i.imgur.com/4zKm6.png');
background-size: 100% 100%;
width: 200px;
height: 100px;
}
Just uses a image of an 'x' that I made in MS Paint as the background image for the textarea; the background-size: 100% 100%; property allows for re-sizing.
Screenshot:
This still enables the textarea to be written in; I'm not sure if that would be desired behavior in your case or not.

the screenshot:
html
<div class="con">
<div class="input-con"><input type="text" value="text example" /></div>
<div class="strip top-bottom"></div>
<div class="strip bottom-top"></div>
</div>
css
.con {
position: relative;
}
.strip {
margin-left:2px;
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
border-width: 0 0 1px 0;
border-color: red;
border-style: solid;
width: 145px;
transform-origin:top left;
-ms-transform-origin:top left;
-moz-transform-origin:top left;
-webkit-transform-origin:top left;
}
.top-bottom {
margin-top: 2px;
transform:rotate(8deg);
-ms-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-webkit-transform:rotate(8deg);
}
.bottom-top {
margin-top: 1.2em;
transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
}
.input-con > input {
line-height:1.2em;
width:146px;
}

You could create an image (one diagonal line) and set the textbox's background with that image (horizontally repeating if you want):

You can try out this:
Markup:
<div class='canceled_input_container'>
<input type='text'/>
<span></span>
</div>
CSS:
div.canceled_input_container {
position:relative;
height:30px;
}
div.canceled_input_container span{
position:absolute;
background-image: url("/path/to/image");
background-repeat: no-repeat;
height:/*background image height*/
width:/*background image width*/
top:-15px;
z-index:1;
}
This is just to guide you and does not contain final solution, you have to set position and other properties as per your requirement.

Well, this is will work in most browsers:
Empty: ☐ &#9744 ;
Checked: ☑ &#9745 ;
Disabled: ☒ &#9746 ;
Add colors to make it looks even more disabled.

http://jsfiddle.net/tylerbrownhenry/NRHY5/
Here you go. For the markup...
<input type='text'/>
Then using jquery, you can either make this a function or a callback, but this is what you should run to add the 'X' to the input field. I'm just using 'input' as the selector but you can change it to fit your need.
I just wrapped the input with a div, and then put another div inside that div. The z-index of the child div should be higher than the input field, so that it will lay on top.
var input = $('input'),
divWidth = input.width();
input.wrap('<div class="ex" style="width:'+divWidth+';"></div>').before('<div class="exMark exImage"></div>');
Then I don't want to post the entire css that was in the jsFiddle. Because I used a dataUri so I didn't have to upload an an image, but you can just make the background-image whatever 'X' image you want.
.ex{
z-index:10000;
width:0px; /* This will get overwritten by the javascript */
}
.exMark{
width:150px;
z-index:1000;
height:2px;
position:absolute;
}
.exImage{
position:absolute;
width:150px;
height:50px;
background-repeat:no-repeat;
background-image:url('x.jpg');
}
Hope that helps!

<hr id="linethru" width="100%" color="black" >