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
Related
I've created a basic page, from a template I had for the rest of my site, but pulled most of it apart to make the page look "not designed". It only has an unordered list with a short paragraph fixed to the top and a logo float right. It works in system preview, but when uploaded to the server it loses all the CSS styling.
This is the html:
#title {
width:400px;
position:fixed;
}
#icon {
position:relative;
float:right;
}
h5 {
font-size:25px;
color:#ff6682;
line-height:1.35em;
}
a:link {
color:#253b84;
}
<!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>/other</title>
<link href="assets/scripts/AMK_Website.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="icon">
<img src="assets/images/icon/icon.gif" width="80" height="106" alt=""/>
</div>
<div id="title">
<h5> /other is a collection of personal work in design photography, as
well as work that inspires me. To get back to
the important stuff, click here
</h5>
</div>
<div id="photolist">
<ul>
<li><img src="assets/images/other/1.jpg" width="768" height="1024"
alt=""/></li>
</ul>
</div>
</body>
</html>
Help appreciated!
Sounds like your css isn't where the html link expects it to be. If you're pointing to a file in assets/, make sure that folder is in the same directory as your html file, and make sure it contains that specific css file.
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 />
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'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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function init(){
document.getElementById('test2').innerHTML = '1 2';
}
</script>
<style type="text/css">
#test{
white-space:pre;
}
#test2{
white-space:pre;
}
</style>
<title></title>
</head>
<body onload="init();">
<div id="test">
1 2
</div>
<div id="test2"></div>
</body>
</html>
Here is an example page showing my problem. I have two divs. Each has this text '1 2' with white-space. The only difference is that one is injected dynamically and one is in the html itself.
If you open the above page in IE7, the text in div test2 doesn't respect white space. How can i get the same behavior for the text that is dynamically injected??
P.S. My doctype is triggering standards mode on IE7.
Have you tried substituting white space with
Alternatively, you could try innerTEXT instead of innerHTML