I was testing a basic track html page from my desktop, and it seems that that the closed captioning works in Firefox and IE, but not Edge or Chrome. Edge shows the CC button and that it's running, but doesn't display any text, while Chrome doesn't even show CC button for me. From a website, they all work except Edge again. Ideas?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CC Track Test</title>
</head>
<body>
<video controls src="movie.mp4">
<track default kind="subtitles" label="caption" srclang="en" src="entrack.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>
VTT:
WEBVTT
0
00:00:02.000 --> 00:00:14.000
This is a test caption.
1
00:00:18.700 --> 00:00:28.500
And this is a second test caption.
I want to add a clock icon in the browser tab (🕘) through some html/css code. Not as a favicon, but as 'text'
So for example before the word 'Do' without changing the Stackoverflow favicon
Is this supported by browsers? If yes, how would this look like in code?
Type this into console:
document.getElementsByTagName("title")[0].innerHTML = "🕘"
Its is the <title> element that governs the tab title in browsers.
<!DOCTYPE html>
<html>
<head>
<title>🕘 Title with clock symbol.</title>
</head>
<body>
The content of the document......
</body>
</html>
So I have an extremely simple popup for a chrome extension that has a single button in the html.
<!DOCTYPE html>
<html>
<head>
<title>Extension popup</title>
</head>
<body>
<button id="dashboard">Button<button>
</body>
</html>
So it is only supposed to show one button but a second empty button is also shown. Inspecting the popup shows that there is indeed another button.
I am mostly wondering whether anyone knows what is going on here?
I have an extension which adds a bar at the top of a webpage. i have inserted the iframe in the content script using
document.body.insertBefore(iframe, document.body.firstChild);
The iframe has a button
<button id="mybutton">Click to help</button>
When the user clicks the button I want to redirect them to a new url in the same window. Is this possible?
The reason I want to do this is on certain websites I would like to change the url to include an additional parameter. I chose the iframe option as it more visible than an extension in the bar. Therefore if there is an alternative way to do this I would be happy to learn about it.
Your iframe.....
<html>
<head>
</head>
<script type="text/javascript">
function changeParent(e){
parent.location="http://google.com.au";
}
function onLoad(){
document.querySelector("#mybutton").onclick = changeParent;
}
</script>
<body onload="onLoad()">
<a id="mybutton">Change Parents URL</a>
</body>
</html>
Would be a good case for info bars if they ever come out of experimental....
http://code.google.com/chrome/extensions/experimental.infobars.html
I am trying to create a modal window with hidden content using thickbox
It opens the window fine , not sure whys its not showing the content inside the id="hiddencontent".
i am following as suggested in the examples for inline http://jquery.com/demo/thickbox/#
-thanks
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
Show Content
<div id="hiddenContent" style="display: none">inline content comes here</div>
</body>
</html>
It seems you don't have css file, you can copy thickbox css on http://jquery.com/demo/thickbox/#sectiona-3 to your page (or save as style.css file).
-- edit --
Yeh, sorry, didn't notice that css is already loaded :(
By the way, just found the solution, try to add p tag inside your hiddenContent div:
<div id="hiddenContent" style="display: none"><p>inline content comes here</p></div>
Hope helps ;)
This is a bug in thickbox. Here is how you can fix it:
Inside thickbox.js
on or about line 221 you should see this line of code:
$("#TB_ajaxContent").append($('#'+params['inlineId']).children());
change it to this:
$("#TB_ajaxContent").html($('#'+params['inlineId']).html())
and then, on or about line 223 you will see this line:
$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
disable the line by adding two slashes before it like this:
//$('#'+params['inlineId']).append($("#TB_ajaxContent").children());
Explanation:
When thickbox copies the content from the hidden div into the thickbox container, it does so by copying all .children() elements. If you have only text inside your hidden div there ARE NO CHILDREN because text is not itself a child element. This is why wrapping your content in a <p> tag will work because now there is a child (the <p> tag).
So if you want to have text only in your hidden div using .html() instead will grab everything in your hidden div. The second line being disabled prevents thickbox from trying to copy the content back to the hidden div when the thickbox closes, which would cause any content within child tags to be duplicated in the hidden div.
There is no need to edit the .js file, the solution is quite simple.
Maybe a bit later :) but I overcomed the issue only changing the ? char in #TB_inline? by &
The issue is on the internal parseQuery tickbox function, that parses match pairs but it blows when the query have a double ? like in the case.
UPDATE: In some cases the <p> fix is also needed ;)
Hope it helps.
The function tb_position() needs to be updated.
this condition
if ( !(jQuery.browser.msie && jQuery.browser.version < 7))
is the reason for error.
jQuery does not support jQuery.browser anymore. For detecting IE6 in this case change the above condition to this
if ( !(/\bMSIE 6/.test(navigator.userAgent)))