I have this iframe that has a scroll inside and I need to support accessibility which works fine on android the problem is only on ios.
when I am at the top of the page inside the iframe I turn on the voiceover and wherever I press it focuses on the right element.
the thing is when I scroll I can't use accessibility by touch only by swipe.
I found a "solution" for this problem, if I set the height to 10000px the accessibility works on touch.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.container {
width: 400px;
height: 400px;
background-color: yellowgreen;
}
iframe {
height: 100%;
width: 90%;
border: none;
display: block;
background-color: aqua;
}
</style>
<title>test</title>
</head>
<body>
<div class="container">
<iframe
class="iframe"
scrolling="yes"
frameborder="0"
src="./test.html"
></iframe>
</div>
</body>
</html>
test.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
</head>
<body>
<div
style="display: flex; flex-direction: column; width: 100%; height: 100%"
>
<h1>0</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
</div>
</body>
</html>
Related
I currently have a picture that changes when you hover over it in Google Sites. I am unsure how to change the code to make it a clickable link as well.
Here is my current code for my hover, but when I was adding a clickable link it was not working. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
.card {
width: 480px;
height: 270px;
background: url("https://drive.google.com/uc?export=view&id=1WfOqgae29zjdR5pRYhIBdBG7HC5KjJyw") no-repeat;
}
.card:hover {
width: 480px;
height: 270px;
background: url("https://drive.google.com/uc?export=view&id=1rwRRGYIFW3oCwQ1H6e-er3S4f8k7yh5y") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
I have sidebar having body height 100%. If i use md-select inside md-content, the options are displaying at top of the page.
How do i fix the issue?
body,
body > div {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
}
I have fixed the issue by applying the display: flex to body element,
html, body {
height: 100%;
}
body {
display: flex;
}
Refer This
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
<md-input-container flex >
<label >Type</label>
<md-select ng-model="txtType" style="width:250px;">
<md-option>First</md-option>
<md-option>Second</md-option>
</md-select>
</md-input-container>
</body>
</html>
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 am trying to use Google's Material desingn.
I have a component below whose path is epimss_design/lib/component/menu/main-menu-form.html; epimss_design is the app's name.
<!DOCTYPE html>
<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../packages/core_elements/core_drawer_panel.html">
<link rel="import" href="../../../../packages/core_elements/core_icon_button.html">
<link rel="import" href="../../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../../packages/paper_elements/roboto.html">
<link rel="import" href="../../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../../packages/paper_elements/paper_icon_button.html">
<polymer-element name="main-menu-form">
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#core_drawer_panel {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 10px;
}
#section {
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
background-color: rgb(250, 250, 250);
}
#section1 {
height: 100%;
box-sizing: border-box;
background-color: rgb(221, 221, 221);
}
#core_toolbar {
right: 0px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
background-color: rgb(79, 125, 201);
}
</style>
<template>
<core-drawer-panel id="core_drawer_panel">
<section id="section" drawer></section>
<section id="section1" main>
<core-toolbar id="core_toolbar">
<core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
<div id="div" flex>Toolbar</div>
</core-toolbar>
</section>
</core-drawer-panel>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html';
//import 'package:epimss_polymer/.dart';
#CustomTag( 'main-menu-form' )
class MainMenuForm extends PolymerElement
{
MainMenuForm.created() : super.created();
void menuAction()
{
print ( 'Menu tapped' );
}
}
</script>
</polymer-element>
The entry_point epimss_design.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ePIMSS</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<link rel='import' href='packages/epimss_design/component/menu/main-menu-form.html'>
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
<!-- <script src="packages/browser/dart.js"></script> -->
<link rel="stylesheet" href="epimss_design.css">
</head>
<body unresolved>
<main-menu-form></main-menu-form>
</body>
</html>
When I run the application I am consistently getting the following error
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element':
'#packages/epimss_design/component/menu/menu' is not a valid selector. (http://127.0.0.1:8080/epimss_design.html:1509)
Exception caught during observer callback: Error: Failed to execute 'querySelector' on 'Element': '#packages/epimss_design/component/menu/menu' is not a valid selector.
at Error (native)
at core-iconset-svg.Polymer.iconById (http://127.0.0.1:8080/epimss_design.html:1509:59)
at core-iconset-svg.Polymer.cloneIcon (http://127.0.0.1:8080/epimss_design.html:1513:25)
at core-iconset-svg.Polymer.applyIcon (http://127.0.0.1:8080/epimss_design.html:1557:24)
at core-icon.Polymer.updateIcon (http://127.0.0.1:8080/epimss_design.html:1461:17)
at core-icon.g.invokeMethod (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:13320)
at core-icon.g.notifyPropertyChanges (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:11606)
at Object.Observer.report_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:12616)
at Object.createObject.check_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:18105)
at c (http://127.0.0.1:8080/packages/web_components/platform.js:12:5467) (http://127.0.0.1:8080/packages/web_components/platform.js:12)
The last menu in the exception is meaningless to me. I have no clue where it is coming from. I expect the last menu to be main-menu-form, the name of the component. I hope it makes sense to someone.
Thanks
It seems to be caused by this bug https://code.google.com/p/dart/issues/detail?id=19770
see also https://groups.google.com/a/dartlang.org/forum/#!topic/web/Jbiml0hFH40
The transformer seems to have an error in how it handles the src attribute of the img element (in core-icon)
UPDATE
These attributes need special treatment because they are evaluated by the browser before Polymer has a chance to evaluate the binding. The solution provided by Polymer is to bind to the attributes _src and _img instead.
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();
});
});