$("#id").tooltip({
effect: "slide",
tip: '.tooltip'
});
I want to delete the object created by this code.
"flowplayer jquery tools" plugin
This question has an answer described in the bottom of my post!
See the bottom if you don't wanna loose you time
.
----------UPDATE----------
That should be something like this
The code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>jQuery tooltip</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script type="text/javascript">
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
$(document).ready(function() {
$("#_2").tooltip({
effect: "slide",
tip: '.tooltip' ,
position: 'bottom center'
});
});
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
/** The code below is not working as I expect, it doesn't MOVE tooltip **/
var old_id;
//first time - create tooltip
function my_create(id){
$("#"+id).tooltip({
effect: "slide",
tip: '.tooltip',
position: 'bottom center'
});
}
//next times - move tooltip to other element
function my_unlink(id){
$("#"+id).unbind("mouseover");
//todo
}
function my_link(id){
//todo
}
//THE MAIN FUNCTION
function do_tip(new_id){
if(old_id){
my_unlink(old_id);
my_link(new_id);
alert(new_id);
}
else
my_create(new_id);
old_id=new_id;
//new_id.focus();
}
</script>
<style>
.tooltip {
display: none;
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
font-size:14px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
h1 {
width: 400px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<h1 onclick="do_tip(this.id)" id="_1">John</h1>
<h1 onclick="do_tip(this.id)" id="_2">Mary</h1>
<h1 onclick="do_tip(this.id)" id="_3">Dan</h1>
<h1 onclick="do_tip(this.id)" id="_4">Paul</h1>
<h1 onclick="do_tip(this.id)" id="_5">Kim</h1>
<div class="tooltip">There should be only one tooltip on a page!</div>
</body></html>
.
---------UPDATE 2----------
Here's the answer
Linking/unlinking jquery object to an element
The moral of this long tale is:
I've been thinking it's a common, not code or plugin-specific question. I thought that the solution should be as simple as "destroy old tooltip object and then create a new one, attatched to other element"
You write that you want to delete the object created by the code.
What the code does is that first searches for an element with id 'ID' in your page,
let's call this "the trigger".
I'm changing one thing in the code here: Instead of selecting the trigger by id 'ID'
I select using the class 'do_tooltip_for_this'. This way I can set up a tooltip for
multiple triggers at once.
If the user moves the mouse over the trigger, an element with class 'tooltip', that is
already present in the page, will be shown and positioned near that trigger.
If the user moves the mouse away from the trigger this element is automatically hidden again.
This works for several triggers as well, the same tooltip is reused.
You can also hide the tooltip by hand by writing
$('.tooltip').hide();
You can disable the whole behaviour by writing
$(".do_tooltip_for_this").unbind("mouseover");
Here's the whole code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>jQuery tooltip</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<script type="text/javascript">
var o;
$(document).ready(function() {
o = $(".do_tooltip_for_this").tooltip({
effect: "slide",
tip: '.tooltip' ,
position: 'bottom center'
});
});
</script>
<style>
.tooltip {
display: none;
background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
h1 {
width: 400px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<h1 title="a tooltip regarding John" class="do_tooltip_for_this">This is John</h1>
<h1 title="a tooltip regarding Paul" class="do_tooltip_for_this">This is Paul</h1>
<h1 title="a tooltip regarding George" class="do_tooltip_for_this">This is George</h1>
<h1 title="a tooltip regarding Ringo" class="do_tooltip_for_this">This is Ringo</h1>
<div class="tooltip"></div>
</body></html>
How about using this:
delete (object_here);
This will remove the javascript objects.
Depends. If you to something like .remove() on it, it actually removes the entire element with that ID from the page.
If you just want to remove the tooltip from it, check out the plugin that you're using. Usually plugins provide a destroy option (the dialog provided by jQuery UI does this).
Unless you're willing to remove the entire element from the page and then recreate it, these is nothing in the core library to do that. If you wanna give that method a go this would get you going in the right direction:
$('#id').replaceWith($('#id').clone());
By default .clone won't copy events and data bound to an element, so that should be a dirty way to get rid of the tooltip. But again, see if your plugin has any built-in way to clean up.
$("#id").tooltip({});
Have you tried that?
by using jQuery you could use .remove()
$("#id").remove(); // will remove element with an id of 'id'
EDITED
it work for someone here. It might also work on you.
// unbind focus and mouseover to cover all the bases just
// incase the tooltip is not being applied to an input
$("#id").unbind("focus");
$("#id").unbind("mouseover");
$("#id").removeData('tooltip');
Related
For example:
I have a page and the code is:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap">link</div>
</body>
</html>
And I have a common JavaScript component which will load a CSS file include the code below:
.wrap .link { color: blue; }
Then the link will change from red to blue.
Use iframe can fix this but cause another problem same like display two scrollbar or the lightbox overlay just in part of the page.
I can not change the CSS but I can write a JS loader so do you have some idea to fix this?
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
Therefore, you'll have to adapt your markup and styles. You can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. However there is a you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.
Hope it helps.
This might help you.
function changeColor(){
jQuery(".link").css('color','blue');
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap"><a href="#" class="link" onclick='changeColor()'>link</a></div>
</body>
</html>
I wanted to create a simple ascii animation that is not based on textarea. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Animation</title>
<style type="text/css">
body { white-space: pre; font: 16px monospace; }
#animation { position: relative; width: 500px; height: 332px; }
#animation .image { position: absolute; left: 0; top: 0; }
.red { color: #ee0000; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" >
$(function(){
$('#animation div.image:gt(0)').hide();
setInterval(function(){
$('#animation :first-child').hide()
.next('div.image').show()
.end().appendTo('#animation');},
500);
});
</script>
</head>
<body>
<div id="animation">
<div class="image">
XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXX
</div>
<div class="image">
YYYYYYYYYYYYYYYYYY
YYYYYYYYYYYYYYYYYY
YYYYYYYYYYYYYYYYYY
</div>
<div class="image">
ZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZZZZZ
</div>
</div>
</body>
</html>
It works exactly the way i wanted. However, the problem starts when I'm trying to add some colors. If i change the first line of X'es to
<span class="red">XXXXXXXXXXXXXXXXXX</span>
The animation is getting crazy, some lines are showing up, some aren't, some of them are in colors, some are still black etc. It's getting even worse when I'm trying to add some more colors.
My question is: why is this happening and how to fix it? I'm not a javascript professional, I suspect it may be a problem with selectors, however i wasn't able to fix it myself. Thanks!
The reason why is the use of :first-child instead of :first; with elements without children it works, if they have children will break your code.
While :first matches only a single element, the :first-child selector can match more than one: one for each parent.
So this:
$('#animation :first-child').hide()
will select two elements instead of one (the two nested children) and your code break up its animation; try putting a console.log in your setInterval and you'll see the difference.
From docs:
The :first pseudo-class is equivalent to :eq(0). It could also be
written as :lt(1). While this matches only a single element,
:first-child can match more than one: One for each parent.
Demo: http://jsfiddle.net/IrvinDominin/VXaNB/
Linked question: difference between :first and :first-child not clear
In line $('#animation :first-child').hide(), change selector :first-child to :first and it should work. ;)
Otherwise in the long term you will not select the elements you want!
The correct answer is to use #animation > :first-child.
This ensures that the only elements you get are the direct descendants of #animation, and is also a legal CSS3 selector that doesn't depend on the :first jQuery extension, therefore more efficient and more portable.
This is my ready handling:
$(document).ready(function() {
$(document).hide();
$('.foo').each(function(elem, i) {
$(elem).text('So long and thanks for all the fish');
});
$(document).show();
}};
What I'm trying to do is hiding the document completely until everything is ready on my terms, but it seems that the show() function doesn't wait for the elements iteration.
By the way, I tried changing show() and hide() to css('display', 'hide') and css('display', 'block') but still, you can the text is changing in your eyes.
How do you make sure all your code ran before calling show()?
Let's suppose you fix this by hiding the body or a container element. That won't do the trick, and here's why:
What happens during the time after the document is (mostly) loaded but before you hide the document?
That's right, the document may get displayed during that time despite your best efforts.
So what you could do instead is use a CSS class that hides, say, the body without any JavaScript intervention. For example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('body').removeClass( 'hide' );
});
</script>
</head>
<body class="hide">
<div class="foo"></div>
</body>
</html>
Of course this does mean that if JavaScript is disabled, your document won't be visible at all. What if you want to have a non-JavaScript fallback? In that case you could do it like this instead. We'll hide the html element instead of the body because that way we know the code will work in the head (the body element may not exist yet at this point), and only hide it if JavaScript is enabled:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
html.hide { display: none; }
</style>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
$('html').addClass( 'hide' );
$(document).ready( function() {
$('.foo').each(function( i, elem ) {
$(elem).text( 'So long and thanks for all the fish' );
});
$('html').removeClass( 'hide' );
});
</script>
</head>
<body>
<div class="foo">
This content is displayed if JavaScript is disabled.
</div>
</body>
</html>
Now you have a non-JavaScript fallback, but the document will still be hidden immediately when JavaScript is enabled, because of the code that adds the hide class.
Also note that you had the parameters reversed in your $().each() callback. (Interestingly enough, the order you used makes much more sense and indeed is the order used by the newer native .forEach() function. The order in $().each() is really backwards - one of those things that seemed like a good idea at the time but really was just a mistake.)
You can not hide() the document. Instead, try hiding the main container element on your page; or hiding the body e.g. $('body').hide() might work as well.
Just an aside: the display property should be none. hide is not a valid value.
I am trying to build a single-page scrolling website leveraging the Ascensor JQuery plugin, and am having a lot of trouble getting it setup correctly. The documentation at http://kirkas.ch/ascensor/ is helpful, but I still must be missing something. What I want is a simple 3-floor layout, top to bottom. It seems that the layout of my "building" gets generated correctly, but I am unable to move between the "levels." The arrow keys and my links don't move the page at all. Can I get a little help with my code? Any guidance is appreciated.
Thanks,
Brett
<!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>Ascensor Test</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.scrollTo-1.4.3.1.js"></script>
<script src="jquery.ascensor.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function()
{
$('#house').ascensor(
{
AscensorName:'ascensor',
ChildType:'div',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
Easing:'easeInOutCubic',
WindowsOn:1,
Direction:'y',
AscensorMap:'1|1 & 2|1 & 3|1',
KeyNavigation: true,
Queued:false,
QueuedDirection:"x"
});
});
</script>
<style>
body
{
margin: 0;
padding: 0;
}
#house
{
overflow: hidden;
border: 5px solid black;
}
#navigation
{
z-index: 1000;
position: fixed;
top: 50px;
left: 50px;
}
#ascensorFloor1
{
background-color: orange;
}
</style>
</head>
<body>
<div id="navigation">
Floor 1
Floor 2
Floor 3
</div>
<div id="house">
<div>
Floor 1
</div>
<div>
Floor 2
</div>
<div>
Floor 3
</div>
</div>
</body>
</html>
The problem is not you, it is in "jquery-1.9.1.js".
I've tried to implement ascensor myself, and figured that the problem is that the plugin doesn't work with the last update from jQuery. The version originaly used 1.5.1. Check it out the jQuery in Git (https://github.com/seekvence/ascensor).
I've tried to find out why, but see no reason for that! Even tried to use the jQuery migrate plugin, but it didn't work as well!
The problem isn't the IDs, since it is the plugin that is generating them. So you shoudn't put them in your mark-up in the first place. I had the same problem as you and after going through a lot "on/off switching stuff", i found out that the problem was in the key navigation declaration. If you turn it to false, it starts working. Don't ask me why, but "KeyNavigation:false" gets the plugin to work. Which is a shame, since key navigation is one of the things i liked about the plugin... Anyway, try this and see if it works.
Easing:'easeInOutCubic' - don't work
Delete: Easing:'easeInOutCubic',
or: Easing:'linear',
..))
I want to make an text animation with JQuery but I dont know how should i start and how should i code this. Actually what/where to google it.
If you look at http://www.apple.com/stevejobs/ you see that text are moving and the last is added to the top with nice fadeout and so on.
Could you help me to give an example/ scratch of doing it in JQuery Ajax and html.
I want to implement it in Python as backend and in the front use Ajax ,JQuery, Javascript and so on. please give hint that which one is better.
Thank you
Put text in <div>s
Use jQuery's effects to show, hide, and animate the text.
Optionally add jQuery UI's easing effects and use something like the easeInOutCubic easing function.
This should get you started atleast with the effect.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; }
#one { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="one"></div>
<div></div>
<div></div>
<script>
//sets a timer to 1sec
$(document).ready(function () {
window.setInterval(yourfunction, 1000);
});
//goes to a php file and return data to be appended to your div.
function yourfunction() {
$.get("test.php", function(data){
$("#one").html(data)
$("#one").slideDown("slow");
});
}
</script>
</body>
</html>
timer thanks to Kristof Claes and here more info on the jquery get() function. My recommendation for you is to map out a logic of what you want to accomplish, and search for how it might be called and start forming piece by piece your result..That's what I do, I'm no expert in jquery but i have an idea and thanks to great people in in S.O. and google I am able to accomplish awesome things.