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.
Related
I am using the Caveat font for my headers on a page, however the Caveat font only shows up after I refresh the page.
.title {
font-family: 'Caveat' !important;
color: #b8b8b8;
font-size: 12vw;
position: absolute;
top: -25%;
left: 5%;
z-index: 100 !important;
}
.second-title {
font-family: 'Caveat' !important;
color: #b8b8b8;
font-size: 12vw;
position: absolute;
top: -50%;
left: 5%;
z-index: 100 !important;
}
When I restart my local server and then go directly to the page (site.com/about.html for example) it seems to work, but if I restart the server go to the page through a link on the home page, it still has the issue of the font not loading unless I refresh the page.
None of the other fonts or pages seem to have this issue.
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 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.
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.