html - How to pop a balloon precisely over an image grid that is responsive cross-browser safe? -
i trying have balloon pop above image depending value passed page through php code.
the problem solution bit messy on safari, , amm not sure why getting errors there. slider showing way much right. tested firefox, ie, , chrome, , render semi-ok, safari worst job doing so.
here’s on jsfiddle.
and code, jquery:
$().ready(function () { var score = 64; var = 0; $('.hers').find('.cll').each(function () { if (score != null) { if (i == score) { var me = $(this); me.append(' ' + score); bubbleme(me); $(window).resize(function () { bubbleme(me); }); } i++; } }); function bubbleme(me) { $('.bubbleimage').css('left', me.position().left - 7); $('.bubbleimage').css('top', me.position().top - 7); $('.bubbleimage').css('background-image', 'url("http://olthofhomes.com/dev/communities/img/slider_30_60.png")'); $('.bubbleimage').css('background-repeat', 'no-repeat'); } }); css:
.cll, .cll:empty { position: relative; width: calc(100% / 155); height: auto; display: inline-block; color: #000; z-index: 101; font-weight: bold; } .bubbleimage { position: absolute; width: 60px; height: 80px; left: 0px; top: 0px; z-index: 100; } html (generated 155 or div's using php, , each have 100% / 155th width)
<div class="hers" style="margin-left: 5px;"> <br /> <br /> <br /> <br /> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="cll"></div> <div class="bubbleimage"></div> <a href="#hersindex"><img src="http://olthofhomes.com/dev/images/hers.jpg" class="imghers" width="100%"></a> </div>
i have used jquery slider instead. should cross-browser safe.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script> $(function() { $("#slider").slider({ min: 0, max: 160, value: <?php echo $model['hersscore']; ?> }); $('#slider .ui-slider-handle').text("<?php echo $model['hersscore']; ?>"); }); </script> <div id="slider"></div> <img src="hers.jpg" id="slider_image"> </div> some css
<style> .container99 { width: 100%; height: auto; border: 0px solid black; position: relative; } #slider { width: 100%; position: absolute; top: calc(50% - 5px); height: 0px; border: 0; } #slider_image { width: 100%; height: auto; } .ui-slider { outline:none; } #slider .ui-slider-handle { background-image: url(communities/img/slider_30_60.png); background-size: 100% 100%; background-color: green; border: 0; width: 30px; padding: 0 0 0 7px; margin: 0 0 0 0; color: #fff; } </style> html css dynamic safari responsive-design
No comments:
Post a Comment