I have an HTML (App) file that reads another HTML (data) file via jQuery.ajax(). It then finds specific tags in the data HTML file and uses text within the tags to display sort-of tool tips.
Here's the App HTML file:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Test</title>
<style type="text/css">
<!--/* <![CDATA[ */
body {
font-family : sans-serif;
font-size : medium;
margin-bottom : 5em;
}
a, a:hover, a:visited {
text-decoration : none;
color : #2222aa;
}
a:hover {
background-color : #eeeeee;
}
#stat_preview {
position : absolute;
background : #ccc;
border : thin solid #aaa;
padding : 3px;
font-family : monospace;
height : 2.5em;
}
/* ]]> */-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#stat_preview").hide();
$(".cfg_lnk").mouseover(function () {
lnk = $(this);
$.ajax({
url: lnk.attr("href"),
success: function (data) {
console.log (data);
$("#stat_preview").html("A heading<br>")
.append($(".tool_tip_text", $(data)).slice(0,3).text())
.css('left', (lnk.offset().left + lnk.width() + 30))
.css('top', (lnk.offset().top + (lnk.height()/2)))
.show();
}
});
}).mouseout (function () {
$("#stat_preview").hide();
});
});
//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<ul>
<li><a class="cfg_lnk" href="data.html">Sample data</a></li>
</ul>
<div id="stat_preview"></div>
</body>
</html>
And here is the data HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Test</h1>
<table>
<tr>
<td class="tool_tip_text"> Some random value 1</td>
<td class="tool_tip_text"> Some random value 2</td>
<td class="tool_tip_text"> Some random value 3</td>
<td class="tool_tip_text"> Some random value 4</td>
<td class="tool_tip_text"> Some random value 5</td>
</tr>
<tr>
<td class="tool_top_text"> Some random value 11</td>
<td class="tool_top_text"> Some random value 21</td>
<td class="tool_top_text"> Some random value 31</td>
<td class="tool_top_text"> Some random value 41</td>
<td class="tool_top_text"> Some random value 51</td>
</tr>
</table>
</body>
</html>
This is working as intended in Firefox, but not in Chrome (Chromium 5.0.356.0).
The console.log (data) displays empty string in Chromium's JavaScript console. Firebug in Firefox, however, displays the entire data HTML.
Am I missing something? Any pointers?
Not sure of the answer, but a few avenues of investigation that I could think of:
Is data an object (rather than a string?) Maybe the Chromium console doesn't know how to display it. You could try an alternative output method to test it, or see if supplying the 'dataType' setting makes any difference.
Is the success callback being called at all in Chromium? It could be a bug, or some browser security feature (like cross-site-scripting protection, or having javascript disabled) that's blocking it.
Experiment with a static version of the HTML/CSS your code is supposed to produce, and make sure it displays properly in both browsers.
Related
I have looked up many examples for cross domain iframe height but none of them were able to solve the issue.
I have an simple HTML given below. I want to resize the iframe inside it according to the height of the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1">
<tr>
<td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0">
</td>
</tr>
</table>
<iframe src="http://mywebapplication.com" width="100%" ></iframe
<table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f">
<tr>
<td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012.
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
What i Have tried
using a second javascript file added to the iframe to send a postMessage back to the parent.
HTML Page containing iframe
<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe>
<script type="text/javascript">
var zino_resize = function (event) {
alert("sds");
var zino_iframe = document.getElementById('zino_iframe');
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//alert(zino_iframe);
if (zino_iframe) {
alert(event.data);
zino_iframe.style.height = event.data + "px";
}
};
if (window.addEventListener) {
window.addEventListener("message", zino_resize, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", zino_resize);
}
window.addEventListener("message", myListener, false);
function myListener(event) {
if (event.origin !== "http://hrcraft.noviavia.com") {
return;
}
//do something
}
The function for sending height is also added on the master page of the mywebapplication.
I have been following this example
http://zinoui.com/blog/cross-domain-iframe-resize
Although the question is in relation to solving an issue with the OP own personal code. Their is a tried and tested library can be used to solve the issue of resizing an iframe to the contents height. This library deals with cross domain and so I think it is worth mentioning.
https://davidjbradshaw.github.io/iframe-resizer/
you place two files one in the parent one in the child (iframe)
in your parent:
<style>iframe{width:100%}</style>
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true})</script>
In your child you just add this file:
iframeResizer.contentWindow.min.js
The library takes care of the resizing and also cross domain. Check the docs.
I'm trying to get element background style which has been written on a different CSS file.
The problem is that I can't get the style which were written in a CSS file.
on the other hand, styling which has been written on the HTML document are possible to get.
CSS code
#try2
{
background-color:yellow;
}
body
{
background-color:gray;
}
td, th{
border: 1px solid black;
}
HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<link rel="stylesheet" type="text/css" href="html.css">
<script type="text/javascript" src="external.js"></script>
</head>
<body>
<table>
<tr>
<td id = "try1" style="background-color:green;"><p id="ChosenColor3"> htmlfile</p></td>
</tr>
<tr>
<td id = "try2"><p id="ChosenColor4"> css file</p></td>
<td><button id="bestRated3" onclick = arrayTest()> ב.מ </button></td>
<td><button id="submitForm" onclick = submit()> end</button></td>
</tr>
<tr>
<td><h1 id="ChosenColor5"> text </h1></td>
</tr>
</table>
</body>
<script>
window.onload=aaa();
function aaa()
{
var x = document.getElementById("try2");
alert(x.style.background);
}
</script>
</html>
As you can see, the message I get is empty. If I will change the ID to "try1" it will be displayed.
The style property lets you read and write the value for each element's style HTML attribute (what is called its inline style) -- it does not take stylesheets into account.
To discover what the real value of a CSS attribute is you have to use window.getComputedStyle instead, for example:
alert(getComputedStyle(x, null).getPropertyValue("background-color"));
See it in action.
Please note that getComputedStyle is not supported by IE 8 or earlier.
Change your alert to alert(x.style.backgroundColor);
style.background and style.backgroundColor are two different things.
Try this
function aaa()
{
var a = document.getElementById("try2").style.backgroundcolor;
alert("Your background color is :"+a);
}
Use this instead:
alert(x.style.backgroundColor);
You have not assigned the value for background. So use something like this:
alert(x.style.background="red");
demo
I have a script that works to switch between two popups that are triggered by an onmouseover event. One feature of this is that the popup persists until the next onmouseover event. I want to have many of these and so the popup to be hidden can not be 'hard coded' as in my script. Is there a way to store in a variable the id of the popup that needs to be undisplayed the next time the popup function is called?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function popup(show,hide){
show.style.display="block"
hide.style.display="none"
}
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr>
<td onmouseover="popup(pop1,pop2)">Show popup 1</td>
<td onmouseover="popup(pop2,pop1)">Show popup 2</td>
</tr></table>
<div class="pop" id="pop1">This is popup 1</div>
<div class="pop" id="pop2">Popup 2 is here</div>
</body>
</html>
or go to http://www.salemharvest.org/Utilities/TestingPHP/testingpopupdivs5.php
One way to generalize it is to use element index to show the associated popup. This will require that the popup elements (pop class elements) is contained by an element, in order to make both the popper and the popup element indexes mapped equally like two arrays of same length.
When showing a popup, the popup element is saved in a variable which will be used later when the mouse is on a different popper element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.cellIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").cells, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 50px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table><tr id="poppers">
<td>Show popup 1</td>
<td>Show popup 2</td>
</tr></table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
</div>
</body>
</html>
I probably should have started with this, but my poppers will actually be rows, not cells. I tried what seemed like simple modifications of Jay's code to do it with rows. I changed it to index rows and then used rowIndex to find the popups, but I am missing something.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
// function by Jay at stackoverflow
addEventListener("DOMContentLoaded", function() {
var lastPopup = null;
function showit(ev) {
var popups = document.getElementById("popups").children;
eleToShow = popups[ev.target.rowIndex];
if (lastPopup && (lastPopup !== eleToShow)) lastPopup.style.display = "none";
eleToShow.style.display = "block";
lastPopup = eleToShow;
}
var poppers = document.getElementById("poppers").rows, i;
for (i = 0; i < poppers.length; i++) {
poppers[i].addEventListener("mouseover", showit, false);
}
}, false);
</script>
<style type="text/css">
.pop {
position: absolute;
display: none;
top: 100px;
left: 200px;
width: 300px;
}
</style>
</head>
<body>
<table id="poppers">
<tr><td>Show popup 1</td></tr>
<tr><td>Show popup 2</td></tr>
<tr><td>Show popup 3</td></tr>
</table>
<div id="popups">
<div class="pop">This is popup 1</div>
<div class="pop">Popup 2 is here</div>
<div class="pop">And then popup 3</div>
</div>
</body>
</html>
I wrote this countdown timer, and it works in everything but IE. I get the restricted website from running scripts. But when I click that it is ok , the script doesn't run.
Is there a proper way to set up a javascript script to run after the pause for user ok?
Or is there a way to write it so it works for IE also.
I am not sending anything via innerHTML as code just numbers so I don't see that as the problem, and I rewrote it using the jQuery .html() function with the same results...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Countdowwn Timer</title>
<style type="text/css">
span#days { font-size:20px;
color:#900;
font-weight:900;
}
span#hours { font-size:20px;
color:#903;
font-weight:900;
}
span#min { font-size:20px;
color:#906;
font-weight:900;
}
span#sec { font-size:20px;
color:#909;
font-weight:900;
}
span#date {font-size:22px;
font-weight:900;
color:#900;
}
span#mar {font-size:22px;
font-weight:900;
color:#03F;}
</style>
<script type="text/javascript">
function theTimer(){
var putday=document.getElementById("days");
var puthour=document.getElementById("hours");
var putmin =document.getElementById("min");
var putsec=document.getElementById("sec");
var marathon=new Date(2012,3,22,10,0,0,0);
var marathonCount=marathon.getTime();
var nowish=Date.now();
var dif=marathonCount-nowish;
var days=Math.floor(dif/(24*60*60*1000));
dif=dif-days*(24*60*60*1000);
var hours=Math.floor(dif/(60*60*1000));
dif=dif-hours*(60*60*1000);
var minutes=Math.floor(dif/(60*1000));
dif=dif-minutes*(60*1000);
var seconds=Math.floor(dif/1000);
putday.innerHTML="this stuffF";
putday.innerHTML=days;
puthour.innerHTML=hours;
putmin.innerHTML=minutes;
putsec.innerHTML=seconds;
var counter = setTimeout("theTimer()", 1000) };
</script>
</head>
<body onload="theTimer()">
<a href ="" style="text-decoration:none">
<center>
<p id="marathon">There are <span id="days"></span> days, <span id="hours"></span> hours, <span id="min"></span> minutes, and <span id="sec"></span> seconds left </p>
</center>
<center>
<p id="marathon">till the beginning of the Next <span id="mar">Marathon</span> on <span id="date">April 22, 2012.</span></p>
</center>
</a>
</body>
</html>
Thank you Naren for your comment about IE9 working.
I tracked it down to using Date.now()
That doesn't work in IE8 (which is one of the trial computer browsers I used) and probably earlier.
If I just do
new Date().getTime();
IE8 handles that.
I want to select table without headers, and it works, but I cannot get it so, that it would copy to clipboard.
Here's the page: http://tuudik.lohv.eu/Asjad/EURXML/
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ECB kursid seisuga: 2011-04-01 </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
<script type="text/javascript">
function selectElementContents(el) {
var body = document.body, range, sel;
if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
range.execCommand('Copy');
} else if (document.createRange && window.getSelection) {
range = document.createRange();
range.selectNodeContents(el);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
sel.execCommand('Copy');
}
}
</script>
</head>
<body>
<table cellpadding="2">
<thead>
<tr>
<th>Valuuta</th>
<th>Kurss</th>
</tr>
</thead>
<tbody id="currencies">
<tr><td>USD</td><td>1,4141</td></tr><tr><td>JPY</td><td>118,56</td></tr><tr><td>DKK</td><td>7,4564</td></tr><tr><td>GBP</td><td>0,88150</td></tr><tr><td>NOK</td><td>7,8055</td></tr><tr><td>RUB</td><td>40,1500</td></tr><tr><td>CAD</td><td>1,3686</td></tr></tbody>
</table>
<input type="button" value="select table"
onclick="selectElementContents( document.getElementById('currencies') );">
</body>
</html>
This works for me on IE8:
var table = document.getElementById('copyHtmlToClipboard');
// Below line is essential !!!
table.contentEditable = 'true';
var controlRange = document.body.createControlRange();
controlRange.addElement(table);
controlRange.execCommand("Copy");
In most browsers it isn't possible to copy to the system clipboard. To do this you need to use a hack. The most common way is to use Flash. ZeroClipboard does this and appears to work quite well.
By the way, execCommand() is a method of document and TextRange objects, not Selection objects, so sel.execCommand("Copy") couldn't possibly work.
UPDATE
I've never actually used ZeroClipboard. Having looked at the docs, it doesn't look like it does what I had hoped (there seems to be no way to copy rich text) and is even more of a gruesome hack than I thought. You could copy the table's content as text via innerHTML using ZeroClipboard, but whether this is acceptable or not depends on what you're hoping the user can do with the copied content.