I'm having issues with my website rendering on iOS devices. I have an iframe that wont scroll on iOS devices at all (testing on iOS 5.1.1). Here is the site: http://pixel2html.sitesbycoop.com/fanwu/ I just need help on this one...I've tried to -webkit-overflow-srolling:touch; on every parent element possible. Please help, I'm more than happy to give more info if needed.
I'm using jquery to load the iframe in from a click function into the following code:
Markup of iframe container on main page:
<div class="overlay">
<div class="frame-container"></div>
</div>
Markup of Iframe Template
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fan Wu | Welcome</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/foundation.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/port-set-viewer-styles.css" type="text/css" />
</head>
<body class="port-set">
<div class="row" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
<!--content and more markup -->
</div>
</body>
</html>
CSS
.overlay{
position: fixed;
background: rgba(0,0,0,0.9) url('img/loader.gif') no-repeat center center;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
z-index: 100;
display: none;
}
.frame-container {
width: 100%;
height: 100%;
}
.frame-container iframe {
position: fixed;
top: 0px;
z-index: 1000;
border: none;
transition: opacity 1s;
left: -100%;
height: 100%;
width: 100%;
}
.frame-container iframe.active{
opacity: 1 !important;
left: 0;
}
JS
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".image-box").click(function(e){
/* Store link into variable, href */
var href = jQuery(this).find("a").attr("href");
/* Activate overlay */
jQuery(".overlay, body, .close").addClass("active");
/* Set iframe's src attribute to the stored href */
jQuery(".frame-container").html('<iframe style="opacity: 0;" width="100%" height="100%" src="'+href+'"></iframe>');
/* Animate iframe into view */
jQuery('iframe').load(function(){
jQuery(this).addClass("active");
jQuery(".overlay").addClass("remove-graphic");
});
e.preventDefault();
});
jQuery(".close").click(function(e){
jQuery(".overlay, .frame-container, iframe, body, .close").removeClass("active remove-graphic");
e.preventDefault();
});
jQuery(function(){
jQuery(".image-box").preloader();
});
});
Related
I have a webview in my UWP application, that shows some text. Some of the text is clickable (). I have tried adding the following CSS and including that in the HTML, but it does not seem to work.
a:hover {
color: red;
}
Does webview support hover in a UWP application? I have been unable to find any information regarding this.
EDIT:
Here is the HTML.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<style>
body {
font-family: 'Segoe UI';
font-size: 10pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #FFFFFF;
}
.link:hover {
background-color: red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
</head>
<body>
<a class='link'>
<div>
<div class='linenumber'>1</div>
Alpha
</div>
</a>
<a class='link'>
<div>
<div class='linenumber'>2</div>
Beta
</div>
</a>
<script type='text/javascript'>
for (var i = 0; i < document.links.length; i++) {
document.links[i].onclick = function() {
window.external.notify(this.href);
return false;
}
}
</script>
</body>
</html>
}
UWP Webview: CSS :hover support?
UWP Webview support css :hover tag, you could place style in the html like the following. and load html with ms-appx-web uri scheme.
Html
<!DOCTYPE html>
<style>
a:hover{
color:red;
}
</style>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello Html</title>
</head>
<body>
<a href="https://www.google.com" >Click Me</a>
</body>
</html>
Xaml
<Grid>
<WebView Source="ms-appx-web:///TestPage.html"/>
</Grid>
Update
<style>
body {
font-family: 'Segoe UI';
font-size: 18pt;
color: #FFFFFF;
}
.link {
text-decoration: none;
color: #000000;
}
.link:hover{
color:red;
}
.linenumber {
display: inline-block;
width: 50px;
min-width: 50px;
margin-right: 10px;
}
</style>
I've checked the code over meticulously but I cant find anything wrong with it.
I modeled it after the menu here but that's not really working out for me. Basically, all that comes up is ur run of the mill ul.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type ="text/javascript">
<!-- Dropdown menu -->
<script>
$( function() {
$( "#dropMenu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
body{
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1{
font-family:"Lucida Calligraphy","Lucida Fax", Arial;
color: Beige;
text-align:center;
}
#footer{
position: absolute;
bottom: 0;
background-color: rgba(20,90,50,.8);
margin-bottom: 0px;
padding-bottom: 0px;
border-radius:10%;
text-align:center;
color:beige;
margin-bottom: 0px;
}
#square{
height:200px;
width: 350px;
background-color:rgba(20, 90,50);
}
#wrapper{
background-color: rgba(20, 90,50, .5);
margin: auto;
border-radius:6%;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Serenity Landscaping <br /> and Property Management</h1>
<!-- <div id="square"></div> -->
<ul id="menu">
<li><div>Menu</div>
<ul>
<li><div>Home</div></li>
<li><div>Side Biz</div></li>
<li><div>Portfolio</div></li>
<li><div>Contact Us</div></li>
</ul>
</li>
</ul>
<div id="footer"><p>SLPM is owner operated and is dedicated to providing the highest quality service to all customers.
<br/>Services in the landscape and property maintenance field</p></div>
</div>
<script type ="text/javascript">
var windowWidth=$(window).width();
var wrapperWidth=(windowWidth/2);
var windowHeight=$(window).height();
var wrapperHeight=windowHeight;
$("#wrapper").height(wrapperHeight+"px");
$("#wrapper").width(wrapperWidth+"px");
<!-- footer width resizing -->
var footerWidth;
footerWidth = $("#footer").css("width", wrapperWidth);
<!-- footer width resizing -->
<!--alert(wrapperWidth);-->
<!--alert(windowWidth);-->
</script>
</body>
</html>
The first issue I have seen is you are using wrong id for initializing your menu.
I have created a fiddle for your code and did some minor change and it is working fine.
There were only silly mistakes.
Here is working fiddle.
Working Fiffle
want to have parallax effect for that I am using plugin.currently I am using enllax.js for parallax effect as plugin but not getting any effect of parallax.Can any one tell me what's wrong in code.
Thanks in advance.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<title>jQuery Parallax Plugin Demo</title>
<link rel="stylesheet" href="s.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="scripts/jquery.enllax.js"></script>
<script type="text/javascript">
(function($){
//Plugin activation
$(window).enllax();
$('#a').enllax();
$('#first').enllax({
type: 'background', // 'foreground'
ratio: 0.5,
direction: 'vertical' // 'horizontal'
});
$('#second').enllax({
type: 'background', // 'foreground'
ratio: 1.0,
direction: 'vertical' // 'horizontal'
});
$('#third').enllax({
type: 'background', // 'foreground'
ratio: 1.5,
direction: 'vertical' // 'horizontal'
});
$('#fourth').enllax({
type: 'background', // 'foreground'
ratio: 2.0,
direction: 'vertical' // 'horizontal'
});
})(jQuery);
</script>
</head>
<body>
<div id="a">
<div id="first" class="dem1" data-enllax-ratio=".5" data-enllax-direction="horizontal" style="z-index:99">
This is my first div to display image.
<img src="images/r1.jpg" data-enllax-ratio=".5" data-enllax-type="foreground"/>
</div>
<div id="second" class="dem1" data-enllax-ratio="1.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my second div to display image.
<img src="images/r2.jpg" data-enllax-ratio="1.0" data-enllax-type="foreground"/>
</div>
<div id="third" class="dem1" data-enllax-ratio="1.5" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my third div to display image.
<img src="images/rc.jpg" data-enllax-ratio="1.5" data-enllax-type="foreground"/>
</div>
<div id="fourth" class="dem1" data-enllax-ratio="2.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
<img src="images/rr.jpg" data-enllax-ratio="2.0" data-enllax-type="foreground"/>
This is my fourth div to display image.
</div>
</div>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
color: #444;
line-height: 1.4;
overflow-x: hidden;
/* background: url(http://subtlepatterns.com/patterns/geometry2.png);*/
}
.text-center {
text-align: center;
}
}
.dem1 {
height: 400px;
background-size: cover;
box-sizing: border-box;
padding: 100px;
}
}.box {
width: 90%;
margin: 0 auto;
background: #efefef;
padding: 100px;
box-sizing: border-box;
border: 1px solid #ddd;
box-shadow: 0 0 1px #777;
margin-bottom: 15px;
}.b2 {
background: #dedede;
}.dl {
margin-top: 200px;
padding: 100px;
}
.fork-mmk {
position: fixed;
top: 0px;
right: 0px;
z-index: 99999;
}
If you use the simple activation, you don't need anything else.
So, I'd recommend you only use:
<script type="text/javascript">
(function($){
$(window).enllax();
});
</script>
And via data-attribute you config your enllax element. You can see his Github project https://github.com/mmkjony/enllax.js
I'm using dragging by jquery ui and have a strange effect. On start dragging an object it replacing to a new position depend of cursor offset on start dragging. Here example
Can somebody help me? Thank you
Your html should look like this:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="show_dlg" style="display: block;"><div id="zoomimg"><img src="http://mmyers.cloudaccess.net/accelerometer/images/638/1600/piece/Kane_Gold_6.jpg" class="ui-draggable ui-draggable-handle" style="position: absolute;"></div></div>
</body>
</html>
I have just removed this part:
-webkit-transform: rotate3d(-0.862, -0.744, 0, 22.7734933639967deg); transform: rotate3d(-0.862, -0.744, 0, 22.7734933639967deg); margin-left: -500px; margin-top: -500px; width: 1500px; height: 1500px; max-width: none; left: -179.902038574219px; top: -190.568115234375px;
as this is what was causing the problem
(I have been reading up on the topic of iOS mobile safari and how it displays some positioning and css styles differently.)
I am still trying to solve the issue which is having the background content to take up the entire display height on the iPad, I was hoping to achieve the same style as I have for the desktop and when I shrink the browser to tablet view. Instead the content just has a 100% width.
The background content has it's own tags. I am using media queries so that on mobile there is no background content and temporarily I have turned tablet display to none. If I turn display to block, I find I can shrink the browser and the background video or image takes up the entire height matching the top-section but On iOS it does not. -
Any comments or advice will be much appreciated.
meta data:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
HTML:
<div class="top-section">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/screentest1.webmhd.webm" type="video/webm">
<source src="videos/screentest1.mp4" type="video/mp4"> Video not supported
</video>
<div id="video_pattern">
</video>
</DIV>
</div>
CSS:
#video_background {
display: none;
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
#video_pattern { background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari */
background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* Standard syntax */;
position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100%; z-index: 1; }
.top-section{
background-size: cover;
background-repeat: repeat;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 2;
text-align: center;
padding: 0;}
I think it's a bug, I can't get right 100% height by CSS.
window.innerHeight is the most reliable way to get the real viewport height.
Here is my hack to reset viewport height.
It's in closure and no dependent.
(function(){
var setViewportHeight = (function(){
function debounced(){
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}
var cancelable = null;
return function(){
cancelable && clearTimeout(cancelable);
cancelable = setTimeout(debounced, 100);
};
})();
// ipad safari
if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){
window.addEventListener("resize", setViewportHeight, false);
window.addEventListener("scroll", setViewportHeight, false);
window.addEventListener("orientationchange", setViewportHeight, false);
setViewportHeight();
}
})();
If we could see this live it would be helpful but you may need to apply styles to your body and html tags. Like this fiddle:
http://jsfiddle.net/Davidicus/2eaaP/
try adding
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Im pretty sure that iOS will force all video to play in the default player so there is no fix for you there yet.