jquery - Making CSS clip rect responsive -

-

i'm trying implement little here: http://atmapp.io/beta/

i'm clipping google maps object, fit in phone area. works great on 1920x1080 (mainly because hardcoded rect's values). how can make clip: rect responsive?

i've tried jquery, i'm idiot, , i'm miles off:

css

#map-canvas2 {   width:100%;   height: 100%;   position: absolute;   z-index: 9999;   bottom: 0;   clip:rect(191px, 1579px, 732px, 1275px); }

jquery

var oldresx = 1920; var oldresy = 943; var recttop = 191; var rectright = 1579; var rectbottom = 732; var rectleft = 1275; var newrecttop; var newrectright; var newrectbottom; var newrectleft;  var newresx; var newresy;   $(window).resize(function(){     newresy = oldresy - window.innerheight;     newresx = oldresx - window.innerwidth;      newrecttop = recttop + newresy;     newrectright = rectright - newresx;     newrectbottom = rectbottom - newresy;     newrectleft = rectleft + newresx;      //alert(newresx + "x" + newresy);     $("#map-canvas2").css('clip', 'rect('+newrecttop +'px, '+newrectright +'px, '+newrectbottom +'px, '+ newrectleft+'px)');     //alert('rect('+newrecttop +'px, '+newrectright +'px, '+newrectbottom +'px, '+ newrectleft+'px)'); });

edit

for wondering, how map supposed "fit": enter image description here

use clip-path inset basic shape instead of deprecated clip.
don't forget -webkit prefix.

html, body {    width: 100%;    height: 100%;    overflow: hidden;  }    body {    margin: -1px;    border: 1px solid transparent;  }    section {    margin: 1em;    width: 50%;    height: 50%;    border: 1px dotted blue;  }      div {    width: 100%;    height: 100%;    background: red;    -webkit-clip-path: inset(50% 0 4px 1em);    clip-path: inset(50% 0 4px 1em);  }
<section><div></div></section>


Comments

Post a Comment

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; } ...
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(...
Read more

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f...
Read more