I have a page with iframe. The iframe contains input elements. When the user places the cursor into the first input textbox in the iframe and presses the tab key, the focus jumps out from the iframe and the next element in the parent page gets the focus. (instead remaining in the iframe, and place to focus on the 2nd input element.)
I've tried to place tabIndex attribute for the input elements with no effect.
I would like to ensure the input elements in the iframe can be accessed by pressing tab key.
* Begin Edit
Risking the minuses, but I have to share my opinion...
I recognized answering this question is this is not obvious.Regarding the UX consequences of this behavior: Seeing the browsers and html/css we still have these white holes what are teleport us to the stone-age of UI/IX: the 80s and early 90s...
Just place yourself into the situation of an end user, who tries to navigate between UI elements using the tab key...
End Edit *
...sorry if one felt be offended because there is not obvious answer for this in the age of HTML 6+... I think instead we should solve or workaround this to ensure enduser UX.... or is not this reproducable? Please let me know if I missed something.
Please consider this simple example that contradicts your claim. Tab works correctly navigating through form elements of both child frame and parent frame.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Outer Frame</title>
<style>
.iframe-wrapper {
height: 80px;
}
</style>
</head>
<body>
<div class="iframe-wrapper">
<iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe>
</div>
<input type="button" value="No, press me!">
</body>
</html>
And inner-frame.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inner Frame</title>
<style>
.wrapper {
border: 2px solid #f0f0f0;
}
</style>
</head>
<body>
<div class="wrapper">
<div>Hello, world. I am iframe.</div>
<input type="text" name="" id="" value="Write in me">
<input type="button" value="Press me">
</div>
</body>
</html>
Tested on Windows with Chrome, Firefox and IE - all latest versions.
I've also made a JS fiddle to demonstrate it. But for some reason for iframe to render you need to press Run first. http://jsfiddle.net/zecu3yvn/
Related
I have some Html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
</head>
<body>
Enter UserName <input type="text" name="user"><br>
Enter Password <input type="password" class="password-input" name="pass">
</body>
</html>
that I am running on browser after ctrl+shift+i in inspecor I want to override some other code in complete body tag.
in above after I dont want to see this body tag code some override code i want see.
is this possible?
This is not possible.
Hide Javascript
If your concern is having a tidier HTML because Javascript code takes too much space, just <script src="externalFile.js"></script>
If your concern is you want to hide your code, because you don't want others to read it and understand it, you could minify and obfuscate the code, for example with UglifyJS. However the inspector can undo the minification by prettifying the code. Obfuscation however cannot be totally undone depending on techniques used.
Hide HTML
If this question is not about javascript and you want to reduce the number of html lines:
<object data="externalHTMLFile.html"></object>
or
<iframe src="externalHTMLFile.html"></iframe>
There are also other ways.
But you cannot simply hide some html from the inspector or remove the ability from the user to open the external HTML file and read all the HTML.
I'm building a course site for my students, with different 'chapters' accessed from different links. I would like to be able to have two or more popups of the same page so I can view different parts of the same chapter side by side. Is this possible in highslide (I don't think it is...). Any solution, using highslide or not, would be appreciated!
Here's a jsfiddle demo that lets you open multiple HTML popups. In this case, both links are opening the same page of stuff, but that's just to keep the demo setup simple - normally you would have each link opening a different iframed page, but for your specific requirement, I guess you'd be opening the same page twice, just like this demo. Open the first link, then drag it by the header to one side, and open the second link.
http://jsfiddle.net/MisterNeutron/Qk6U6/1/
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo by MisterNeutron</title>
<script type='text/javascript' src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script type='text/javascript'>
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
</head>
<body>
<div>
<a id="thumb1" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">First iframe</a>
<br><br>
<a id="thumb2" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">Second iframe</a>
</div>
</body>
</html>
I have used Dreamweavers menues to do give my site a dropdown list that I can then edit. Perhaps "open in new window" when you click the link will work. I have found that most clicks will default to open in the same window.
I set my DIV as contenteditable = true so I can capture image from clipboard. I managed to paste the image. When I right click and check View Selection Source, I able to see the base64 value. Once i copy and save the base64 value, I managed to see the image I paste earlier. How do I get the View Selection Source value programatically.? Any advice or any link for references is highly appreciated.
HTML
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
Image
Find the img element in your contenteditable element, and grab its src attribute.
Note that this doesn't work with Safari.
You can detect webkit-fake-url pseudo-protocol and branch your code to inform the user that you can't grab their image on their browser.
I have a very strange problem with IE8; I have reduced this as much as possible to the extract below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function dismissOperation() {
alert("Would dismiss");
}
</script>
</head>
<body >
<input type="text" />
<input type="text" onfocus="alert('text box got focus')" />
<button onclick="dismissOperation()" onfocus="alert('Dismiss button got focus')">Dismiss</button>
</body>
</html>
The problem is that when a value is entered into the first textbox followed by return/enter, the button receives focus and the click event is delivered (on the button).
As a test, I added a second text entry box (as above). With the second box added, the focus still goes straight to the button when a value is entered into the first box.
What is causing the focus to go to the button and the click being delivered? Is there any workaround to this?
By default button element is considered as a submit button and that could be the reason for this. Give attribute type="button" for your button element.
I've run across a strange layout bug that appears to be triggered by the text-transform CSS property when an inline-block is nested within a block element. I saw the problem on Safari (5.1.2) as well, but this minimal test case only triggers on Chrome (17.0.963.56).
The particularly interesting bit is that opening the developer tools and keeping it on the Elements tab triggers the correct layout. My best guess is that the combination of CSS rules and DOM structure is causing the webkit engine to miss performing a reflow of the page.
<!DOCTYPE html>
<html>
<head>
<title>Menu Widget Test</title>
<style type="text/css">
.container
{
border: 1px solid black;
display: inline-block;
}
.title
{
text-transform: uppercase; /* <-- Remove this and it works */
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("firstName").innerHTML = "John";
document.getElementById("lastName").innerHTML = "Smith";
}, false);
</script>
</head>
<body>
<div> <!-- Remove this DIV element, and it works -->
<span class="container">
<span class="title">
<span id="firstName"></span>
<span id="lastName"></span>
</span>
</span>
</div>
</body>
</html>
Here are two screenshots that show the two ways that it renders on Chrome, depending on whether or not the text-transform rule is removed, or the div element is removed.
I would like to use the text-transform property, but I am wondering if this is a known bug and what I can do to ensure that I do not trigger the behavior. Even being able to explicitly trigger a reflow event might be good enough.
I had the same problem and resolved it with white-space:nowrap;.
There seem to be a kind of race condition in the loading of css. The following file reproduces the bug here on Chrome (17.0.963.65) on osx 10.6.8.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Schizophrenic layout</title>
<style type="text/css">
body { background-image:url('gray.png'); }
#d0{display:inline-block;}
#d1{text-transform:uppercase;}
#d2{text-transform:uppercase;}
</style>
<script type="text/javascript">
function fill (id, text)
{
var e = document.getElementById (id);
var t = document.createTextNode (text);
e.appendChild (t);
}
function main ()
{
fill ("d1", "First line");
fill ("d2", "Second line");
}
window.onload = main;
</script>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
Note that the bug is present even if gray.png is not a 404. You may have to reload the page a few time to witness the bug. Also if you don't GET the file over http, the bug shows only once, the first time you load the page from the disk.
There are various ways to make the bug disappear by tweaking the css. Removing only the background-image makes it disappear. Removing only the display makes it disappear. Removing only the two text-transform make it disapear. In the latter case the correct layout can be achieved by adding
e.style.textTransform = "uppercase";
at the end of the fill function which is, of course, a very ugly workaround.