javascript - CSS style not functioning with jquery -

-

i have html file has 2 images areas mapped , marked imagemapster. want 1 of images superimposed on , above image can dragged around. although quite close achieving intend, going wrong. image drag-able default positon of image below first image. want on top of other. reduced opacity. when page reloaded, seems superimposed fraction of second. statements inside style not working supposed to. can guess being overridden jquery-ui or other styles. can point out how fix this?

locate.html.erb 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="/assets/jquery.imagemapster.min.js"></script> <script src="/assets/threeddata.js"></script>  <style> img {     position: absolute; } #mainimage2 {     opacity: 0.6; } </style>  <h1>data archival library</h1> </div>  <img id="mainimage" src="/assets/pic.png" usemap="#mark"> <map name="mark">     <script type="text/javascript">     document.write('<area href="#bottom" select="red1" shape="rect" coords="'+rowrackcoords.join(",")+'">');     </script> </map>  <div class="ui-widget-content" id="draggable"> <img id="mainimage2" src="/assets/unnamed.png" usemap="#mark2"> <map name="mark2">     <script type="text/javascript">     document.write('<area href="#top" select="red2" shape="rect" coords="'+shelfboxcoords.join(",")+'">');     </script> </map> </div>

.js

$(document).ready(function () {     $('#mainimage').mapster({         singleselect : false,         clicknavigate: true,         mapkey: 'select',         fill : true, altimage: '/assets/pic2.png',         areas : [{key : 'red1', selected : true,}],     }); });  $(document).ready(function () {     $('#mainimage2').mapster({         singleselect : false,         clicknavigate: true,         mapkey: 'select',         fill : true,         fillcolor : '00ff00',         fillopacity : 0.5,         areas : [{key : 'red2', selected : true}],     }); });  $(document).ready(function () {      $(function () {         $("#draggable").draggable();     }); });

first should begin 1 $(document).ready(function () {}); :

$(document).ready(function () {     $('#mainimage').mapster({         singleselect : false,         clicknavigate: true,         mapkey: 'select',         altimage: '/assets/pic2.png',         areas : [{key : 'red1', selected : true,}],     });     $('#mainimage2').mapster({         singleselect : false,         clicknavigate: true,         mapkey: 'select',         fillcolor : '00ff00',         fillopacity : 0.5,         areas : [{key : 'red2', selected : true}],     });     $("#draggable").draggable(); });

i haven't test it, better start point.

edit : removed fill : true, because it's mapster default value


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more