The amount of time I have been spending on this is crazy. I have an element on the page with the id invited-count. This is definitely getting called after the element is in the dom. Can someone put me out of my misery?
$("#invited-count").tooltip({
items: "#invited-count",
content: "Hello World",
track: true
}).tooltip("open");
Thanks in advance.
add to your div a title attribute <div id="invited-count" title="Hello World">Ok bb</div> and with js just do this $("#invited-count").tooltip();
working here :
<html lang="en">
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="invited-count" title="Hello World">Hello Tooltip</div>
</body>
<script>
$(function() {
$( "#invited-count" ).tooltip({track: true});
});
</script>
</html>
Ok, so thanks John for you answer. I wasn't able to use it exactly because I need to set the tooltip content dynamically. That said I used a very similar approach:
$("#invited-count").attr("title", firstRowData.TOOLTIP_INVITED).tooltip();
and what is funny is that the following statement:
$("#invited-count").attr("title", firstRowData.TOOLTIP_INVITED).tooltip({
items: "#invited-count", content: "Hello World", track: true
});
produces a tooltip with the value of firstRowData.TOOLTIP_INVITED not "Hello World"...
Related
I'm using textillate.js to add animation to text. My html page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textillate</title>
<link rel="stylesheet" href="animate.min.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<div class="tlt">
Hello world
</div>
<script>
$('.tlt').textillate({ in: { effect: 'bounceInDown' } });
</script>
</body>
</html>
where the included scripts and css are taken from the following links:
https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.js
https://code.jquery.com/jquery-3.5.1.min.js
https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js
https://raw.githubusercontent.com/animate-css/animate.css/master/animate.min.css
The problem is that whatever I set as effect in the in object, the result is always the default textillate animation: the chars appear one after the other from left to right, and I can control the order of the appearing letters (e.g. setting shuffle: true, etc..), but not the animation type.
This is pretty much the example code that textillate offers on his github page, so I don't have any idea on where is the problem.
I think the problem is related to animate.css reference, i change it and it works. Hope it helps.
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>
I have a button on my web page. once I click on the button a pop-up will appear with some text. here I need to display another HTML page in that pop-up
I have given my code below please help me
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>
<button id="notifyModal_ex1" class="btn btn-primary">Example</button>
<div id="content2" style="display:none">
ghjgh
</div>
<script src="popModal.js"></script>
<script>
$(function(){
$('#notifyModal_ex1').click(function(){
$('#content2').notifyModal({
duration : 1500,
placement : 'center',
overlay : true,
type : 'notify',
onClose : function() {}
});
});
});
</script>
</body>
</html>
Try using jQuery's load():
$('#content2').load("page/url").notifyModal()
To show a loading message:
$('#content2').text("Loading, please wait...").load("page/url").notifyModal()
Or to open the modal when load ends:
$('#content2').load("page/url", function() {
$('#content2').notifyModal();
})
As described in load() docs:
Load data from the server and place the returned HTML into the matched element.
So it will load an html response and append it to the target element.
I tried using jQuery on my website, but it did not seem to work. this code doesn't work. When I click on #test, it doesn't hide. Please help. Thanks!
this is my Html file :
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="#test">Hello world !</p>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>
this is my code.js :
$(document).ready(function() {
$('#test').click(function() {
$('#test').hide();
});
});
your html is wrong, remove hash # sign:
<p id="test">Hello world !</p> // this is right
while you have written:
<p id="#test">Hello world !</p> // this is wrong
NOTE:
you can get current element reference using this:
$(document).ready(function() {
$('#test').click(function() {
$(this).hide();
});
});
$("#test") means that select element which has id equal to test
Try to escape the meta character with \\,
$(document).ready(function() {
$('#\\#test').click(function() {
$('#\\#test').hide();
});
});
DEMO
My code used to work until I dunno what i changed, I started everything from scratch yet it still doesn't show the tooltip, can someone tell me what's wrong with the code?
or even better, is there any other (easier) way to implement a tooltip ?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script type="text/javascript">
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
})
</script>
</body>
</html>
Aren't you missing the onload?
<script type="text/javascript">
$(function() {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
Edit: the code above most definitely works, see jsfiddle
Make sure your qtip.js and qtip.css are loaded and recent
Try this instead:
$('a').qtip({
content: $('#jj').text()
});
Or do what the comment said and clone the element -- you'll probably have to show it explicitly:
$('a').qtip({
content: {
text: $('#jj').clone().show()
}
});
you need to put your qtip javascript inside a document ready.
$(function() {
$('a').qtip({
content: {
text: $('#jj').clone()
}
});
});
two things that you can try
move the scripts to your head section
wrap the javascript/jquery code inside the ready handler
$(document).ready(function(){
$('a').qtip({
content: {
text: $('#jj') // Add .clone() if you don't want the matched elements to be removed, but simply copied
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="Scripts/qTip/jquery.qtip.css" />
<title>My site</title>
</head>
<body>
ZA
<div id="jj" style="display: none;">HHHHHHH</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/qTip/jquery.qtip.js"></script>
<script type="text/javascript">
$(function () {
$('a').qtip({
content: {
text: $('#jj')
}
});
});
</script>
</body>
</html>
First off here is 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">
<head>
<link href="content/wmd.css" rel="stylesheet" type="text/css" />
<title>some title </title>
</head>
<body>
<div class="main">
<form>
<h2>Only teaxt area</h2>
<div id="wmd-editor-uno" class="wmd-panel">
<div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
<textarea name='id-uno' id='id-uno'></textarea>
</div>
</form>
</div>
<script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
<script type='text/javascript' src="Scripts/moowmd.js"></script>
<script type="text/javascript">
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});
</script>
</body>
</html>
Bam!
My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.
The problem (for later generations) is IE does not accepts the following syntax:
{
att1: 'value',
att2: 'value'
}
Where other browsers do.
I changed it to
{
'att1': 'value',
'att2': 'value'
}
And it is fine now.
(using the mailing list would have gotten my attention earlier)
The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.
Wrap the code in a function:
<script type="text/javascript">
function loaded() {
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});}
</script>
Then add an onload handler to your body tag:
<body onload="loaded();">
The onload handler will not fire until all the javascript, images, css, etc have loaded.
<head>
<title>some title </title>
<link rel="stylesheet" type="text/css" href="Content/wmd.css" />
<script type="text/javascript" src="Scripts/showdown.js"></script>
</head>
<body>
<div class="main">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel">
</div>
<div id="wmd-output" class="wmd-panel">
</div>
</div>
<script type="text/javascript" src="Scripts/wmd.js"></script>
</body>
The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.