Help me click a star
Load a page:
<div class="game-rating" data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
When mouse a star 1 :
<div class="game-rating rate-1 " data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
When mouse a star 2 :
<div class="game-rating rate-2 " data-ajax-url="/rate/image/403632/">
<span data-rating="2"></span>
<span data-rating="4"></span>
<span data-rating="6"></span>
<span data-rating="8"></span>
<span data-rating="10"></span>
</div>
star 1 ,2,3,4,5 I have click auto a star 1 can you help me create a
script to tampermonkey ? or javascript ?**
Sorry my bad english
Related
I am working on a web app, where i faced a problem. The problem is, I have a span element, and inside that span element there are two more span elements. Simply, two children of the parent span element. One of the children is shown in the parent element, When someone click on the shown children element then, it will get the index value of that children and will hide it, and will show the next sibling. I have written some code, but it just work on one click, and when i click the next sibling when it has been shown, then the first sibling never get shown. Below is my code :
HTML
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
$(".ajlsst-wrap").click(function(){
var _index = $(this).find(".ajls-save-sec").index();
console.log(_index);
if(_index == 0){
$(this).find(".ajls-save").hide();
$(this).find(".ajls-saved").show();
}
else{
$(this).find(".ajls-saved").hide();
$(this).find(".ajls-save").show();
}
})
I also have a problem , that is, the index of first child is always detect not of the second one which is shown on click, i don`t know why.
Do it this way
$(".ajls-save-sec").click(function(){
$(this).hide().siblings().show()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved" style="display:none">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
Hope you get the concept.
You can directly use $(".ajls-save-sec").click instead of $(".ajlsst-wrap").click
You can use the simple next code
$(".ajls-save-sec").click(function(){ // no need for $(".ajlsst-wrap")
$(this).parent().find(".ajls-save-sec").show(); // show all spans
$(this).hide(); // hide the clicked one
})
.ajls-saved{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
I have a dynamic list of properties on a search results page, the problem I am having on each individual search result is that if it is a certain property type i.e. Land it does not need the bedrooms and bathrooms fields within that search result to show, but if it is a Villa, the fields would show.
I would need to show and hide fields on the page load in JS like my example above on each individual search result as if I do a general JS function for Land hiding the div classes for bedrooms and bathrooms, there could also be a Villa on the page needing those fields.
If anyone could help with some JS to help me solve this issue above, it would be much appreciated!
Heres some of the Html Results below, you will see there are multiple property types, so different fields should be show/hidden
<div class="property-listing">
<ul>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=NEW LISTING&imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
<span class="images-count">
<i class="fa fa-link"></i>
MidasS
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>115.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
Villa in Javea
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
<p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>2</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=REDUCED&imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
<span class="images-count">
<i class="fa fa-link"></i>
PRO1011
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>155.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
Apartment in Famagusta
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
<p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>0</strong>Bedrooms</span>
<span id="spbaths"><strong>0</strong>Bathrooms</span>
<span id="sppool"><strong>No</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
<img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
<span class="images-count">
<i class="fa fa-link"></i>
cyc130
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>175.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
Country House in Not Specified
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
<p>;.lkijuhygtfrdeswaq</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>3</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<br> <br>
<div class="pagination">
<span class="disabled"><i class="fa fa-chevron-left"></i></span>
1
2
3
4
<i class="fa fa-chevron-right"></i>
</div>
</ul>
</div>
I'm just gonna go ahead and make up my own HTML structure to demonstrate the simple if/else statement you would make with jQuery.
function hideFields() {
$(".result").each( function() {
if ( $(this).hasClass("land") ) {
$(this).children(".bedroom").hide();
$(this).children(".bathroom").hide();
}
else if ( $(this).hasClass("villa") ) {
$(this).children(".land-area").hide();
}
});
}
hideFields();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="result villa"><b>Villa</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
<br>
<div class="result land"><b>Land</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
Your HTML seems confusing for multiple reasons, which you can easily fix to use this method:
1) sppools, spbaths, spbeds should indeed be classes rather than IDs. This is due to IDs being unique identifiers - they should hence not appear more than once on each page, whereas classes identify a "type" (class) of item, which may appear multiple times. Multiple instances of the same ID will mess with your CSS and JS.
2) There is no clear definition within each result of what type of result this is (or I can't seem to find it, at least?).
Words like "villa" or "house" indeed appear in the title-tag, but having to search within these is an inefficient way of performing the action.
Instead, make your code show the type of content as a class on each li-item or the initial div-item.
The loader is not enabled in my bxslider, how to enable it
bx slider version 1.4
JavaScript code
$(document).ready(function() {
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
pause: 5000,
speed: 2000,
autoStart:false,
preloadImages:'all',
});
});
In Html the list element contain inner elements
<div class="baner-slider">
<ul class="bxslider">
<li>
<span class="baner baner-1 ">
<span class="bg-shadow">
<span class="h1">g</span>
<span class="h4">We es</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-2 ">
<span class="bg-shadow">
<span class="h1">Nd</span>
<span class="h4">edefefe</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-3">
<span class="bg-shadow">
<span class="h1">ry</span>
<span class="h4">Ags .</span>
learn more
</span>
</span>
</li>
<li>
<span class="baner baner-4">
<span class="bg-shadow">
<span class="h1">A</span>
<span class="h4">A Academia.</span>
learn more
</span>
</span>
</li>
</ul>
<div class="arrow" id="arrw">
<img src="img/icons/arrw.png" alt="">
</div>
<div class="event-wrap hidden-xs hidden-sm">
<h4>Visit us at booth #507 at PAG 2017</h4>
</div>
The issue is solved when i added img tag inside li
Thanks to zer00ne for help
I have a wordBox Where user will drag touch and drag to select words.
I am using touchmove eventlistener to change background/color of the word in wordBox. But touchmove only changing color/background of the text from where it started.
var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
function select(evt) {
var id = this.id;
document.getElementById(this.id).style.background = "#ffffff";
document.getElementById(this.id).style.color = "#0070C4";
for (var i = 0; i < spans.length; i++) {
mouseMove = spans[i].addEventListener("touchmove", function(sp) {
document.getElementById(sp.toElement.id).style.background = "#ffffff";
document.getElementById(sp.toElement.id).style.color = "#0070C4";
});
}
}
function start() {
//GENERATE RANDOM WORDBOX
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
spans[i].addEventListener("touchmove", select);
}
}
start();
html {
background: #0070C4;
color: #fff;
}
span {
padding: 8px 6px;
}
<div id="wordBox">
<div class="column1">
<span id='r1'></span>
<span id='r2'>></span>
<span id='r3'>></span>
<span id='r4'>></span>
<span id='r5'>></span>
<span id='r6'>></span>
<span id='r7'>></span>
<span id='r8'>></span>
<span id='r9'>></span>
<span id='r10'>></span>
<span id='r11'>></span>
<span id='r12'>></span>
<span id='r13'>></span>
<span id='r14'>></span>
<span id='r15'>></span>
<span id='r16'>></span>
<span id='r17'>></span>
<span id='r18'>></span>
<span id='r19'>></span>
<span id='r20'>></span>
</div>
<div class="column2">
<span id='r21'>></span>
<span id='r22'>></span>
<span id='r23'>></span>
<span id='r24'>></span>
<span id='r25'>></span>
<span id='r26'>></span>
<span id='r27'>></span>
<span id='r28'>></span>
<span id='r29'>></span>
<span id='r30'>></span>
<span id='r31'>></span>
<span id='r32'>></span>
<span id='r33'>></span>
<span id='r34'>></span>
<span id='r35'>></span>
<span id='r36'>></span>
<span id='r37'>></span>
<span id='r38'>></span>
<span id='r39'>></span>
<span id='r40'>></span>
</div>
<div class="column3">
<span id='r41'>></span>
<span id='r42'>></span>
<span id='r43'>></span>
<span id='r44'>></span>
<span id='r45'>></span>
<span id='r46'>></span>
<span id='r47'>></span>
<span id='r48'>></span>
<span id='r49'>></span>
<span id='r50'>></span>
<span id='r51'>></span>
<span id='r52'>></span>
<span id='r53'>></span>
<span id='r54'>></span>
<span id='r55'>></span>
<span id='r56'>></span>
<span id='r57'>></span>
<span id='r58'>></span>
<span id='r59'>></span>
<span id='r60'>></span>
</div>
<div class="column4">
<span id='r61'>></span>
<span id='r62'>></span>
<span id='r63'>></span>
<span id='r64'>></span>
<span id='r65'>></span>
<span id='r66'>></span>
<span id='r67'>></span>
<span id='r68'>></span>
<span id='r69'>></span>
<span id='r70'>></span>
<span id='r71'>></span>
<span id='r72'>></span>
<span id='r73'>></span>
<span id='r74'>></span>
<span id='r75'>></span>
<span id='r76'>></span>
<span id='r77'>></span>
<span id='r78'>></span>
<span id='r79'>></span>
<span id='r80'>></span>
</div>
<div class="column5">
<span id='r81'>></span>
<span id='r82'>></span>
<span id='r83'></span>
<span id='r84'>></span>
<span id='r85'>></span>
<span id='r86'>></span>
<span id='r87'>></span>
<span id='r88'>></span>
<span id='r89'>></span>
<span id='r90'>></span>
<span id='r91'>></span>
<span id='r92'>></span>
<span id='r93'>></span>
<span id='r94'>></span>
<span id='r95'>></span>
<span id='r96'>></span>
<span id='r97'>></span>
<span id='r98'>></span>
<span id='r99'>></span>
<span id='r100'>></span>
</div>
<div class="column6">
<span id='r101'>></span>
<span id='r102'>></span>
<span id='r103'>></span>
<span id='r104'>></span>
<span id='r105'>></span>
<span id='r106'>></span>
<span id='r107'>></span>
<span id='r108'>></span>
<span id='r109'>></span>
<span id='r110'>></span>
<span id='r111'>></span>
<span id='r112'>></span>
<span id='r113'>></span>
<span id='r114'>></span>
<span id='r115'>></span>
<span id='r116'>></span>
<span id='r117'>></span>
<span id='r118'>></span>
<span id='r119'>></span>
<span id='r200'>></span>
</div>
<div class="column7">
<span id='r201'>></span>
<span id='r202'>></span>
<span id='r203'>></span>
<span id='r204'>></span>
<span id='r205'>></span>
<span id='r206'>></span>
<span id='r207'>></span>
<span id='r208'>></span>
<span id='r209'>></span>
<span id='r210'>></span>
<span id='r211'>></span>
<span id='r212'>></span>
<span id='r213'>></span>
<span id='r214'>></span>
<span id='r215'>></span>
<span id='r216'>></span>
<span id='r217'>></span>
<span id='r218'>></span>
<span id='r219'>></span>
<span id='r220'>></span>
</div>
<div class="column8">
<span id='r221'>></span>
<span id='r222'>></span>
<span id='r223'>></span>
<span id='r224'>></span>
<span id='r225'>></span>
<span id='r226'>></span>
<span id='r227'>></span>
<span id='r228'>></span>
<span id='r229'>></span>
<span id='r230'>></span>
<span id='r231'>></span>
<span id='r232'>></span>
<span id='r233'>></span>
<span id='r234'>></span>
<span id='r235'>></span>
<span id='r236'>></span>
<span id='r237'>></span>
<span id='r238'>></span>
<span id='r239'>></span>
<span id='r240'>></span>
</div>
<div class="column9">
<span id='r241'>></span>
<span id='r242'>></span>
<span id='r243'>></span>
<span id='r244'>></span>
<span id='r245'>></span>
<span id='r246'>></span>
<span id='r247'>></span>
<span id='r248'>></span>
<span id='r249'>></span>
<span id='r250'>></span>
<span id='r251'>></span>
<span id='r252'>></span>
<span id='r253'>></span>
<span id='r254'>></span>
<span id='r255'>></span>
<span id='r256'>></span>
<span id='r257'>></span>
<span id='r258'>></span>
<span id='r259'>></span>
<span id='r260'>></span>
</div>
<div class="column10">
<span id='r261'>></span>
<span id='r262'>></span>
<span id='r263'>></span>
<span id='r264'>></span>
<span id='r265'>></span>
<span id='r266'>></span>
<span id='r267'>></span>
<span id='r268'>></span>
<span id='r269'>></span>
<span id='r270'>></span>
<span id='r271'>></span>
<span id='r272'>></span>
<span id='r273'>></span>
<span id='r274'>></span>
<span id='r275'>></span>
<span id='r276'>></span>
<span id='r277'>></span>
<span id='r278'>></span>
<span id='r279'>></span>
<span id='r300'>></span>
</div>
<div class="column11">
<span id='r301'>></span>
<span id='r302'>></span>
<span id='r303'>></span>
<span id='r304'>></span>
<span id='r305'>></span>
<span id='r306'>></span>
<span id='r307'>></span>
<span id='r308'>></span>
<span id='r309'>></span>
<span id='r310'>></span>
<span id='r311'>></span>
<span id='r312'>></span>
<span id='r313'>></span>
<span id='r314'>></span>
<span id='r315'>></span>
<span id='r316'>></span>
<span id='r317'>></span>
<span id='r318'>></span>
<span id='r319'>></span>
<span id='r320'>></span>
</div>
<div class="column12">
<span id='r321'>></span>
<span id='r322'>></span>
<span id='r323'>></span>
<span id='r324'>></span>
<span id='r325'>></span>
<span id='r326'>></span>
<span id='r327'>></span>
<span id='r328'>></span>
<span id='r329'>></span>
<span id='r330'>></span>
<span id='r331'>></span>
<span id='r332'>></span>
<span id='r333'>></span>
<span id='r334'>></span>
<span id='r335'>></span>
<span id='r336'>></span>
<span id='r337'>></span>
<span id='r338'>></span>
<span id='r339'>></span>
<span id='r340'>></span>
</div>
</div>
JSFIDDLE
I also tried mouse events but getting desired results. How can i achieve this?
Use Document.elementFromPoint() with clientX and clientY to select the current element
The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.
var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
var started = false;
function clearAll() {
started = true;
for (var i = 0; i < spans.length; i++) {
spans[i].style.background = "";
spans[i].style.color = "";
}
}
function select(e) {
e.preventDefault();
if (started) {
var changedTouch = e.changedTouches[0];
var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
if (elem.tagName === 'SPAN') { //this condition could also be more accurate based on your specificity of the element
elem.style.background = "#ffffff";
elem.style.color = "#0070C4";
}
}
}
function mouseMoveHandler(e) {
e.preventDefault();
if (started) {
this.style.background = "#ffffff";
this.style.color = "#0070C4";
}
}
function reset() {
started = false;
}
function start() {
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
spans[i].addEventListener("touchstart", clearAll);
spans[i].addEventListener("mousedown", clearAll);
spans[i].addEventListener("touchmove", select);
spans[i].addEventListener("mousemove", mouseMoveHandler);
spans[i].addEventListener("touchend", reset);
spans[i].addEventListener("mouseup", reset);
}
}
start();
html {
background: #0070C4;
color: #fff;
}
span {
padding: 8px 6px;
}
<div id="wordBox">
<div class="column1">
<span id='r1'>></span>
<span id='r2'>></span>
<span id='r3'>></span>
<span id='r4'>></span>
<span id='r5'>></span>
<span id='r6'>></span>
<span id='r7'>></span>
<span id='r8'>></span>
<span id='r9'>></span>
<span id='r10'>></span>
<span id='r11'>></span>
<span id='r12'>></span>
<span id='r13'>></span>
<span id='r14'>></span>
<span id='r15'>></span>
<span id='r16'>></span>
<span id='r17'>></span>
<span id='r18'>></span>
<span id='r19'>></span>
<span id='r20'>></span>
</div>
<div class="column2">
<span id='r21'>></span>
<span id='r22'>></span>
<span id='r23'>></span>
<span id='r24'>></span>
<span id='r25'>></span>
<span id='r26'>></span>
<span id='r27'>></span>
<span id='r28'>></span>
<span id='r29'>></span>
<span id='r30'>></span>
<span id='r31'>></span>
<span id='r32'>></span>
<span id='r33'>></span>
<span id='r34'>></span>
<span id='r35'>></span>
<span id='r36'>></span>
<span id='r37'>></span>
<span id='r38'>></span>
<span id='r39'>></span>
<span id='r40'>></span>
</div>
<div class="column3">
<span id='r41'>></span>
<span id='r42'>></span>
<span id='r43'>></span>
<span id='r44'>></span>
<span id='r45'>></span>
<span id='r46'>></span>
<span id='r47'>></span>
<span id='r48'>></span>
<span id='r49'>></span>
<span id='r50'>></span>
<span id='r51'>></span>
<span id='r52'>></span>
<span id='r53'>></span>
<span id='r54'>></span>
<span id='r55'>></span>
<span id='r56'>></span>
<span id='r57'>></span>
<span id='r58'>></span>
<span id='r59'>></span>
<span id='r60'>></span>
</div>
<div class="column4">
<span id='r61'>></span>
<span id='r62'>></span>
<span id='r63'>></span>
<span id='r64'>></span>
<span id='r65'>></span>
<span id='r66'>></span>
<span id='r67'>></span>
<span id='r68'>></span>
<span id='r69'>></span>
<span id='r70'>></span>
<span id='r71'>></span>
<span id='r72'>></span>
<span id='r73'>></span>
<span id='r74'>></span>
<span id='r75'>></span>
<span id='r76'>></span>
<span id='r77'>></span>
<span id='r78'>></span>
<span id='r79'>></span>
<span id='r80'>></span>
</div>
<div class="column5">
<span id='r81'>></span>
<span id='r82'>></span>
<span id='r83'></span>
<span id='r84'>></span>
<span id='r85'>></span>
<span id='r86'>></span>
<span id='r87'>></span>
<span id='r88'>></span>
<span id='r89'>></span>
<span id='r90'>></span>
<span id='r91'>></span>
<span id='r92'>></span>
<span id='r93'>></span>
<span id='r94'>></span>
<span id='r95'>></span>
<span id='r96'>></span>
<span id='r97'>></span>
<span id='r98'>></span>
<span id='r99'>></span>
<span id='r100'>></span>
</div>
<div class="column6">
<span id='r101'>></span>
<span id='r102'>></span>
<span id='r103'>></span>
<span id='r104'>></span>
<span id='r105'>></span>
<span id='r106'>></span>
<span id='r107'>></span>
<span id='r108'>></span>
<span id='r109'>></span>
<span id='r110'>></span>
<span id='r111'>></span>
<span id='r112'>></span>
<span id='r113'>></span>
<span id='r114'>></span>
<span id='r115'>></span>
<span id='r116'>></span>
<span id='r117'>></span>
<span id='r118'>></span>
<span id='r119'>></span>
<span id='r200'>></span>
</div>
<div class="column7">
<span id='r201'>></span>
<span id='r202'>></span>
<span id='r203'>></span>
<span id='r204'>></span>
<span id='r205'>></span>
<span id='r206'>></span>
<span id='r207'>></span>
<span id='r208'>></span>
<span id='r209'>></span>
<span id='r210'>></span>
<span id='r211'>></span>
<span id='r212'>></span>
<span id='r213'>></span>
<span id='r214'>></span>
<span id='r215'>></span>
<span id='r216'>></span>
<span id='r217'>></span>
<span id='r218'>></span>
<span id='r219'>></span>
<span id='r220'>></span>
</div>
<div class="column8">
<span id='r221'>></span>
<span id='r222'>></span>
<span id='r223'>></span>
<span id='r224'>></span>
<span id='r225'>></span>
<span id='r226'>></span>
<span id='r227'>></span>
<span id='r228'>></span>
<span id='r229'>></span>
<span id='r230'>></span>
<span id='r231'>></span>
<span id='r232'>></span>
<span id='r233'>></span>
<span id='r234'>></span>
<span id='r235'>></span>
<span id='r236'>></span>
<span id='r237'>></span>
<span id='r238'>></span>
<span id='r239'>></span>
<span id='r240'>></span>
</div>
<div class="column9">
<span id='r241'>></span>
<span id='r242'>></span>
<span id='r243'>></span>
<span id='r244'>></span>
<span id='r245'>></span>
<span id='r246'>></span>
<span id='r247'>></span>
<span id='r248'>></span>
<span id='r249'>></span>
<span id='r250'>></span>
<span id='r251'>></span>
<span id='r252'>></span>
<span id='r253'>></span>
<span id='r254'>></span>
<span id='r255'>></span>
<span id='r256'>></span>
<span id='r257'>></span>
<span id='r258'>></span>
<span id='r259'>></span>
<span id='r260'>></span>
</div>
<div class="column10">
<span id='r261'>></span>
<span id='r262'>></span>
<span id='r263'>></span>
<span id='r264'>></span>
<span id='r265'>></span>
<span id='r266'>></span>
<span id='r267'>></span>
<span id='r268'>></span>
<span id='r269'>></span>
<span id='r270'>></span>
<span id='r271'>></span>
<span id='r272'>></span>
<span id='r273'>></span>
<span id='r274'>></span>
<span id='r275'>></span>
<span id='r276'>></span>
<span id='r277'>></span>
<span id='r278'>></span>
<span id='r279'>></span>
<span id='r300'>></span>
</div>
<div class="column11">
<span id='r301'>></span>
<span id='r302'>></span>
<span id='r303'>></span>
<span id='r304'>></span>
<span id='r305'>></span>
<span id='r306'>></span>
<span id='r307'>></span>
<span id='r308'>></span>
<span id='r309'>></span>
<span id='r310'>></span>
<span id='r311'>></span>
<span id='r312'>></span>
<span id='r313'>></span>
<span id='r314'>></span>
<span id='r315'>></span>
<span id='r316'>></span>
<span id='r317'>></span>
<span id='r318'>></span>
<span id='r319'>></span>
<span id='r320'>></span>
</div>
<div class="column12">
<span id='r321'>></span>
<span id='r322'>></span>
<span id='r323'>></span>
<span id='r324'>></span>
<span id='r325'>></span>
<span id='r326'>></span>
<span id='r327'>></span>
<span id='r328'>></span>
<span id='r329'>></span>
<span id='r330'>></span>
<span id='r331'>></span>
<span id='r332'>></span>
<span id='r333'>></span>
<span id='r334'>></span>
<span id='r335'>></span>
<span id='r336'>></span>
<span id='r337'>></span>
<span id='r338'>></span>
<span id='r339'>></span>
<span id='r340'>></span>
</div>
</div>
Fiddle Demo
A note of caution for clientX / clientY and document.elementFromPoint – clientX is normally the distance to the viewport, excluding the scroll offset. elementFromPoint uses the same position reference. Chrome on Android (version 50.0.2661.89) positions appear to include the scroll offset. The Internet browser on Android and Safari on iOS appear to use the correct reference point. Desktop browsers (Chrome, Firefox, IE9 & up, Edge, and Safari) appear to also use the correct reference point.
If you’re just using clientX and elementFromPoint, there shouldn’t be any issue as the same reference point is being used. I ran into trouble as I was adding the offset back in to position a new element. It worked fine until I zoomed the display on an Android phone and shifted the display towards the left. My new element was positioned correctly on most browsers, but not on Chrome on Android.