I've got a MySQL database and have a few Google charts querying the data.
I'm looking for a way to display the charts in a neater way. I currently have each chart on a separate page, so I'm wondering if an Iframe is the way to go?
I'm hoping to click on a vertical list menu and see the different charts populate the Iframe.
This works, but I have some problems:
placing the Iframe to the right of the menu at the top of the page,
the menu's css also wont work,
a new page also fires, when I click of the menu.
<!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>
<title>Graph Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="./js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Graph navigation page</h1>
<hr />
<iframe frameborder="0" width="65%" height="800" style="float:centre" src="http://mysite" name="graphs" id="graphs">
<p>iframes are not supported by your browser.</p>
</iframe><br />
<ul>
<li>Graph1</li>
<li>Graph2</li>
</ul>
Just use float: right
<iframe frameborder="0" width="65%" height="800" style="float:right" src="http://mysite" name="graphs" id="graphs">
<p>iframes are not supported by your browser.</p>
</iframe><br />
Related
I am trying to add an alternate stylesheet to my XHTML page, but it doesn't work. I have done it with HTML, which works perfectly, but XHTML just doesn't do what I want.
The code looks like this:
<head>
<title>some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/main.css" title="normal"/>
<link rel="alternate stylesheet" type="text/css" href="css/blue.css" title="blue"/>
</head>
<body>
<div class="header">
<div class="styles">
<a id="normal" href="#" onclick="setActiveStyleSheet('normal');"><img src="tomain.png" width="20" alt="change style"/></a>
<a id="blue" href="#" onclick="setActiveStyleSheet('blue');"><img src="toblue.png" width="20" alt="change style"/></a>
</div>
</div>
<--!other stuff-->
</body>
Of course in the CSS file I added .header next to the header tag, etc. Everything else works fine for the HTML and XHTML with the same CSS files, I just can't change styles so I think the problem is with the XHTML, and not the CSS.
Bear with me, i am very new to web programming.
here is my simple code:
<?xml version='1.0' encoding='UTF-8' ?>
<!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>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlton Banks</title>
</head>
<body>
<h1>CLICK ON CARLTONS HEAD!</h1>
<a href="http://youtu.be/zS1cLOIxsQ8" target="_blank">
<img src="hey.jpg" alt="A picture" style="width:300px">
</a>
</body>
</html>
Here is the extremly simple css file:
body{
h1: green
}
When opening the site on a browsers nothing at all shows up, just this error message:
This page contains the following errors:
error on line 7 at column 10: Opening and ending tag mismatch: link line 0 and head
Below is a rendering of the page up to the first error.
As you are using XHTML, all tags needs to be closed.
The link tag should have a slash at the end to close it:
<link rel="stylesheet" type="text/css" href="style.css" />
The same for the image tag:
<img src="hey.jpg" alt="A picture" style="width:300px" />
The CSS is incorrect. I think that this is what you are trying to do:
body h1 {
color: green;
}
I have a webpage inside which I show a webpage(a Tableau dashboard) inside an iframe.
This iframe should refresh every 1 minute so that the dashboard can fetch updated data from the database.
However, during this refresh a blank screen/refreshing screen comes up. So I am trying to have 2 iframes with the same source and loading the alternate one with the src and swapping them.
But still I cant get the second iframe to load in the background when the first one is displaying, so I get a blank screen between each swap.
Any advice on what am mising? Thank you!
My code so far
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE, NO-STORE,MUST-REVALIDATE,MAX-AGE=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function refreshiframe()
{
var x=document.getElementById("xx");
var y=document.getElementById("yy");
if(x.style.display=="none"){
y.style.display="none";
x.style.display="block";
$('#myframe2').attr('src',"http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no&:refresh=y");
}
else{
x.style.display="none";
y.style.display="block";
$('#myframe').attr('src',"http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no&:refresh=y");
}
}
</script>
<style type="text/css">
#xx{
display:block;
}
#yy{
display:none;
}
</style>
</head>
<body onload="setInterval(refreshiframe,60000);">
<div id="xx"><iframe id="myframe" frameborder="1" scrolling="no" src=http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no width="100%" height="100%" frameborder="0">
</iframe></div>
<div id="yy"><iframe id="myframe2" frameborder="1" scrolling="no" src=http://localhost/views/mypage1?:embed=y&:toolbar=no&:display_count=no width="100%" height="100%" frameborder="0">
</iframe></div>
</body>
</html>
I would like to apply jQueryUI's tooltip to elements in the TinyMCE editor, however, they do not appear using FF, and are buggy using IE and Chrome. I've experimented applying jQueryUI's tooltip to elements in an iframe, and get similar results. My script is below, and a demo is at http://jsbin.com/abEkOnO/1/ (note that the iframe JS had to be disabled as it causes a proxy error using jsbin). I think the tooltips are being created, however, maybe the CSS is relative to the iframe and not the document. I've also experimented by creating my own tooltip plugin (http://jsbin.com/AzaKARe/1/), but also get funky results.
How can I use tooltips on elements in the TinyMCE editor?
<!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=ISO-8859-1" />
<title>IFrame and tooltips</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({'selector': "#tinymce"});
$(document).ready(function(){
$('.tooltip').tooltip();
$('#click').click(function(){
console.log($('#iframeID').contents().find('.tooltip'));
$('#iframeID').contents().find('.tooltip').tooltip();
$('#tinymce').html('<div class="tooltip" title="Some Div4">Some DIV4</div><div class="tooltip" title="Some Div5">Some DIV5</div><div class="tooltip" title="Some Div6">Some DIV6</div>');
var t=tinymce.editors['tinymce'];
t.load();
console.log($(t.getBody()).find('div.tooltip'));
$(t.getBody()).find('div.tooltip').tooltip();
});
});
</script>
</head>
<body>
<button id='click'>Click</button>
<iframe src="iframe_page1.html" id="iframeID"></iframe>
<div class="tooltip" title="Some Div1">Some DIV1</div>
<div class="tooltip" title="Some Div2">Some DIV2</div>
<div class="tooltip" title="Some Div3">Some DIV3</div>
<div id="tinymce"></div>
</html>
iframe_page1.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">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Bind</title>
<style type="text/css">
.toolTip {width:100px;}
.myTooTip {
z-index:99999;
border:1px solid #CECECE;
background:white;
padding:10px;
display:none;
color:black;
}
</style>
</head>
<body>
<div class="tooltip" title="Some Div7">Some DIV7</div>
<div class="tooltip" title="Some Div8">Some DIV8</div>
<div class="tooltip" title="Some Div9">Some DIV9</div>
</body>
</html>
In your case the e.pageY was problem,
as tinymce creates a iframe, the e.pageY is set to 0 from current location(of tinymce),
So the tool tip again goes to Y=respective to mce position. You need to handle it manually,
I have updated the JSbin with some tweaks,
this will solve the issue,
although you have to do some small tweaks, for 100% accuracy
Edit : Updated JSBin with JQuery UI,
Undated Link of JSBin
This works fine without any problem on my side, the problem was we were calling the same function twice and in iframe the mouseOut event is not passed to its parent window, that's why tooltip generated was not getting closed.
I have changing codes and this is simple tooltip that works same as in the iframe above. in example.
I have just removed redundant instance of the tooltip by changing class name :)
I hope this will do finally
I'm new in Jquery (learning from examples).
I'm trying to create some step by step tutorial and then to show FAQ with iframe at the end.
My main problem is that the page loads all my iframes (but hides them) so it takes about 10-15 seconds to load the page.
I want to be able to load each iframe by clicking on the button/text only, somehow I managed to to that (because my URL is the same and only the id of the url changes: http://my.nanorep.com/widget/widget.html?account=waze&kb=623233&onloadquestionid=ID)
Id: 3490608 or 3490611
When I click on forgot password for example it shows the iframe but when I clicks on it again it doubles it, I have no idea how to make it hide/ removed/ show it once.
The code: http://jsfiddle.net/ronvaisman/SKBWA
(it's under web -> Login Issue
Thanks for the help,
Ron
to show:
$('frameid').show();
to hide:
$('frameid').hide();
This is an example I made which has proven really useful as a starting point for these types of things.
<!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>Untitled Document</title>
<script src="jquery.js"></script>
<style>
#click{ cursor:pointer;}
.clickopen{ background-image:url(clickopen.png); background-repeat:no-repeat;}
.clickclose{ background-image:url(clickclose.png); background-repeat:no-repeat;}
</style>
</head>
<body>
<div style="width:800px; margin:0 auto;">
<div id="box" style="width:800px; height:100px; background-color:#000; display:none;">
</div>
<div style="width:800px; height:100px;background-color:#CCC;">
<div id="click" style=" width:213px; height:27px;" class="clickopen">
</div>
</div>
</div>
<script>
var clickTrue = 0;
//show dialog
$("#click").click(function () {
$('.clickopen').toggleClass("clickclose");
$('#box').animate({
opacity: 0.75,
height: 'toggle'
}, 400, function() {
// Animation complete.
});
});
</script>
</body>
</html>