jquery - Zoom and move/drag interactive SVG in a responsive page -


i'm making responsive page floorplan (interactive svg). when image resized viewport, small on mobile phones. want image height height of viewport, width overflow.

link draft of page should like

i think svg should load in iframe, because i'm working cms (concrete5)

i tried many things, zoomooz plugin , zynga scroller.. interfere interactivity of svg.

i considered making viewport user-scalable="yes", it's not solution, , conflicted fullscreen overlay on page.

// used on template page resize iframe div (viewport - div position - margin    var calcheight = function() {    var x = $("#viv-content");    var position = x.position();    $('#kaart-frame').height($(window).height() - position.top - 5);    $('#kaart-frame').width($(window).width() - position.left - 20);  }    $(document).ready(function() {    calcheight();  });    $(window).resize(function() {    calcheight();  }).load(function() {    calcheight();  });
<!-- template in cms: -->    <iframe id="kaart-frame" src="url_to_floorplan_html" name="kaart-frame" frameborder="0" noresize="noresize" seamless="seamless"></iframe>      <!-- floorplan html: -->    <!doctype html>  <html lang="en">    <head>    <meta charset="utf-8">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>        <script>      //this needed make svg interactive      $.get('1e_interactief.svg', function(data) {        //$(document.body).append(data.documentelement); // erased because use svg code on page        init();            function init() {          //svg interactivity          $('#markersa').click(function() {            parent.openpopup(5);          });        }            $(document).ready(function() {          // initial scale image          $("#svgwrapper").attr('transform', 'scale(2.5)');            $("#svgwrapper").attr('transform', 'scale(0.9)');        });      });    </script>      </head>    <body>          <?xml version="1.0" encoding="utf-8" ?>    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 992.1 566.9" xml:space="preserve">      <g id="svgwrapper">        <g id="kaart">          <!-- svg data erased -->        </g>      </g>    </svg>    </body>    </html>

any ideas or examples how working?

looking @ draft guess can solved without special libraries.

imagine div of 600x600 in div of 200x200 , enable overflow, should result in fluid experience on touch screens.

if apply thought on situation, should result in this:

html

<body>     <p>note: width of iframe should same width of content in iframe</p>      <div id="content" class="scroll">         <iframe id="kaart-frame" src="https://tweakers.net" name="kaart-frame" frameborder="0" noresize="noresize" width="600px"></iframe>     </div>      <p>note: can disable scrolling in iframe adding ' scrolling="no" '.</p> </body>

css

#content {     width: 200px;     height: 300px;     overflow: scroll;     /* css3 */     overflow-y: hidden;     /* ios */     -webkit-overflow-scrolling: touch; }  #kaart-frame {     /* css3 */     overflow-y: hidden;     height: 100%;     /* non-touch: height: 98%; */ }

check out in jsfiddle: https://jsfiddle.net/w41bv8z5/5/

note: can still make #content div dynamic in example. wise let height match content inside iframe.


Comments

Post a Comment

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

this code i'm using find latitude , longitude of place: function coords($address){ echo $url="http://maps.googleapis.com/maps/api/geocode/json?address=".$address; $json = file_get_contents(urlencode($url)); $data = json_decode($json, true); print_r($data['results'][0]['geometry']['location']['lat']); print_r($data['results'][0]['geometry']['location']['lng']); } however returns warning: failed open stream: http request failed! http/1.0 400 bad request if use above code in simple procedure works fine not in function. note: have tried curl_init()... method produced same result? instead of encoding whole url encode address part. following code work fine $add='jamshoro phase 2'; $url="http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($add); $json = file_get_contents($url); $data = json_decode($json, true); print_r($data['r
Read more

java - How to filter a backspace keyboard input -

i have code gives message when key number pressed: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochararray().length - 1]; if (!(ch >= '0' && ch <= '9')) { system.out.println("the char entered not number"); t.consume(); } } }); now if press on wrong button , press backspace remove it, error message. how can add backspace input if statement? i have found answer: txtvalueofclause.addeventfilter(keyevent.key_typed, new eventhandler<keyevent>() { @override public void handle(keyevent t) { char ar[] = t.getcharacter().tochararray(); char ch = ar[t.getcharacter().tochar
Read more

java - Show Soft Keyboard when EditText Appears -

i have code in android app, alert dialog , keyboard, , when dialog shown want keyboard appear. not , not sure why? here code: final alertdialog.builder alert = new alertdialog.builder(this); alert.settitle("title"); alert.setmessage("message"); final edittext input = new edittext(this); input.setinputtype(inputtype.type_class_number); alert.setview(input); input.setonfocuschangelistener(new view.onfocuschangelistener() { @override public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { log.i(tag, "in focus"); inputmethodmanager inputmethodmanager = (inputmethodmanager) getsystemservice(context.input_method_service); inputmethodmanager.showsoftinput(input, inputmethodmanager.show_implicit); } } }); but keyboard not appear though edit text in focus, , tell appear why, doesn't come up? thanks in advance.
Read more