I make this jsfiddle:
http://jsfiddle.net/andycds/vds8f/1/
It places many layers over a map, using Google Maps API. I call
addLayer()
several times, with the same layer, just to be concise.
If you resize de edges of the map, making it bigger, parts of the screen disappear (only in Chrome).
It's a bug on Chrome, Google Maps API or in my code?
I think this a bug in the Chrome with the jsfiddle, when the browser try to render the map.
try to delimit the area of the map
html {
height: 200px;
}
body {
height: 200px;
margin: 0;
padding: 0;
}
#wrapper {
font-family: Helvetica, Arial, sans-serif;
position: absolute;
z-index: 999;
background: #77C;
color: #FFF;
padding-left: 10px;
height: 30px;
line-height: 30px;
}
#map_canvas {
height: 200px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
All embedded google maps render strange for me in chrome. I've even done a fresh install of chrome. Can you got to this page:
https://developers.google.com/maps/documentation/javascript/basics
and see if the maps there render correctly. If not you know it's the browser and not your map code.
Related
Hello
I am building a chat room site, however it runs into a problem on iPhone (or possibly safari I have not checked yet).
When you start typing in the input which is position: fixed to the bottom, the screen zooms in, and you have to manually zoom out to see the send button. I know this was not very explanatory, so I will put my code here:
Sloppy code that works sometimes (except now)
input {
font-size: 150%;
width: 83vw;
height: inherit;
}
form {
position: fixed;
bottom: 0px;
left: -2px;
height: 6vh;
margin-bottom: 0px;
}
form button {
width: calc(17vw + 2px);
font-size: 150%;
position: fixed;
right: -2px;
height: inherit;
}
This is not anything to do with your code. I am a long time iphone user and could say that iphone does this automatically. When the keybord is initiated it automatically zoom to a point where you can see what you are typing effectievly.
I have looked online for this info and have got close but it is not really what I need and Im not sure if it's possible to do or not? so thought I would ask you??
On my main search page, I have lots of HTML link which comes from a database on the server and links to different web sites. ( at the moment the links go directly to there website via the target self)
So what I would like to do is when you click on the link it
loads up a Model popup and iframe with the website itself instead of going directly to there website and leaving mysite. And then press the grey area or X to delete it and then shows the main page.
As I said I got close ie getting the model popup to work but the links would not work
hope you can advise what is the best way to do this?
Thanks
Tim
Use target with name of iframe. Modal should be shown with onClick="showModal()".
Just make sure you have access via CORS to these sites. SO Question about that
function showModal()
{
$('#modal').show();
}
function hideModal()
{
$('#modal').hide();
}
#modal {
position: fixed;
left: 10%;
top: 10%;
height: 300px;
width: 80%;
background-color: white;
display: none;
}
.close {
position: absolute;
right: -5px;
top: -5px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
text-align: center;
}
iframe {
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal">
<div class="close" onClick="hideModal()">×</div>
<iframe name="modal_iframe" src="demo_iframe.htm"></iframe>
</div>
Stack Overflow<br/>
W3
I am trying to print an html document to my epson-3700 printer via zapier and google cloud print. When I print to PDF from zapier everything works out fine, the pdf is the correct size and when I print the newly created PDF it prints out just how I want it, however when I try to print from zapier directly to google cloud print on my printer it makes a huge margin around the whole page which causes the printing to be cut off.
I have tried adjusting all sorts of zapier settings and settings from my PC (manage your device) and they all dont seem to do anything. There must be something wrong with my code...?
I have been working on this for a good 10 hours and cannot seem to get it, any help is much appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
width: 4.75in;
height: 6.5in;
margin: 0 0 0 0;
}
html, body {
margin: 0;
padding: 0;
width: 4.75in;
height: 6.5in;
}
div.absolute1 {
position: absolute;
top: 5mm;
left: 5mm;
font-size: 10pt;
}
div.absolute2 {
position: absolute;
top: 1.5mm;
right: 1.5mm;
width: 43mm;
}
div.absolute3 {
position: absolute;
top: 63mm;
right: 70mm;
font-size: 8pt;
font-family: "Courier", courier;
text-align: right;
}
div.absolute4 {
position: absolute;
top: 70mm;
left: 40mm;
font-size: 11pt;
}
</style>
</head>
<body>
<div class="absolute1">
company name <br>
address <br>
address line 2<br>
</div>
....
i solved it basically by moving the positions to the middle right and making a margin around a full letter sized paper, It doesnt work out the same when I print to PDF which is what i was trying to avoid but this will do the trick.
I dont think zapier can recognize different page sizes although it has the option to select a page size... not entirely sure what is going on here but here is my code for anyone else with the same problem:
note that my printer feeds paper from the middle rather than to one side so if your page adjust is to one side you will need to adjust accordingly
also note I am not a developer so my code is probably not the best
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
margin: 46mm 0mm 46mm 118mm;
padding: 0;
width: 4.75in;
height: 6.5in;
}
body {
margin: 0;
padding: 0;
}
div.returnaddress {
position: absolute;
top: 7mm;
left: 7mm;
font-size: 9pt;
}
div.postage {
position: absolute;
top: 3mm;
right: 5mm;
width: 40mm;
}
div.packagenumber {
position: absolute;
top: 53mm;
right: 55mm;
font-size: 8pt;
font-family: "Courier", courier;
text-align: right;
}
div.recipientaddress {
position: absolute;
top: 60mm;
left: 50mm;
font-size: 11pt;
}
</style>
</head>
<body>
<div class="returnaddress">
COMPANY NAME <br>
COMPANY ADDRESS <br>
ADDRESS 4Z8<br>
</div>
<div class="packagenumber"> PACKAGE NUMBER
</div>
<div class="recipientaddress"> RECIPIENT ADDRESS
</div>
<div class="postage">
<svg
....
I am in NO SHAPE or form a coder, but have made some tweaks to my BigCartel site that is expected to come out in the next few weeks. I have a clothing line, and I wanted enable consumers who have selected a product, to be able to hover over the image of the product to view it magnified... (here is an example from Nike of what I mean: http://store.nike.com/us/en_us/pd/breathe-womens-short-sleeve-running-top/pid-11319700/pgid-11619220 ) I wanted to know what code to use to make the image/product that a consumer has clicked on and is viewing larger/magnify when hovering over a certain area... I saw some codes uploaded, but SINCE I am not a professional coder, I was wondering WHERE to insert it in the custom coding . I have a CSS option, and HTML and I don't know if I should go to "Products" or the over all coding...(Sorry for the rookie question)...
I also want to know (If I can slide this question in there as well) How to speed up the speed of the slide show on my BigCartel site, and possibly even change it to a dissolve option... And, again, where would I insert that code..
I've made some minor changes on my own, but again, I am NO CODER and there are a few additional tweaks, I would love to make to not make my site so "cookie cutter" The good folks at BigCartel, sent me this link to search and ask questions on. Thanks so much in advance for your help!
Have you tried this this always works for me https://codepen.io/ccrch/pen/yyaraz
JS
$('.tile')
// tile mouse actions
.on('mouseover', function(){
$(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
})
.on('mouseout', function(){
$(this).children('.photo').css({'transform': 'scale(1)'});
})
.on('mousemove', function(e){
$(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
})
// tiles set up
.each(function(){
$(this)
// add a photo container
.append('<div class="photo"></div>')
// some text just to show zoom level on current item in this example
.append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
// set up a background image for each tile based on data-image attribute
.children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
})
HTML
<div class="tiles">
<div class="tile" data-scale="1.1" data-image="http://ultraimg.com/images/0yS4A9e.jpg"></div>
<div class="tile" data-scale="1.6" data-image="http://ultraimg.com/images/hzQ2IGW.jpg"></div>
<div class="tile" data-scale="2.4" data-image="http://ultraimg.com/images/bNeWGWB.jpg"></div>
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700);
body {
background: #fff;
color: #000;
margin: 0;
}
.tiles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tile {
position: relative;
float: left;
width: 33.333%;
height: 100%;
overflow: hidden;
}
.photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-out;
}
.txt {
position: absolute;
z-index: 2;
right: 0;
bottom: 10%;
left: 0;
font-family: 'Roboto Slab', serif;
font-size: 9px;
line-height: 12px;
text-align: center;
cursor: default;
}
.x {
font-size: 32px;
line-height: 32px;
}
.rk-adjust {
position: relative;
cursor: pointer;
font-size: 2em;
margin: 7px 0;
&__tap {
position: absolute;
width: 4000px;
height: 3000px;
top: -1500px;
left: -2000px;
}
&__adjustment {
width: 100%;
display: flex;
align-items: center;
padding-left: 9px;
padding-right: 0;
background: rgba(255,0,255,0);
height: 34px;
&:hover {
background-color: rgba(255,0,255,0);
}
}
}
When I try to hover, background color changes but extra weird lines appear on top of hovering box. Please tell me if its known issue. If not, suggest some workaround?
If the problem appears with Win 7 and IE10/11, then try Internet Options, Advanced in IE and set Use software rendering instead of GPU rendering. (Or vice-versa, maybe).
Hope that helps - I also had lots of problems with these effects especially in contentEditable elements.
Win 10, IE11 / Edge is fine in my experience.