Unable to show a popup element when user hovers over another element - javascript

I'm trying to show a popup element when user places a mouse over an other element:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#base').hover(
function handleIn(e) {
var popup = $('<img/>', {
id: 'popup',
src: 'http://placehold.it/32x32'
});
popup.css({
'position': 'absolute',
'z-index': 300,
'left': e.pageX - 30,
'top': e.pageY - 30
});
popup.mouseover(function() {
console.log('mouseover');
});
popup.mouseout(function() {
console.log('mouseout');
});
$('#base').append(popup);
},
function handleOut() {
}
);
});
</script>
</head>
<body>
<img id="base" src="http://placehold.it/256x256">
</body>
</html>
Why doesn't the popup element show up? It is added to DOM, but I don't see it.
What am I doing wrong? How can I fix it?

You can't append a child to an <img/> element. See here
Try append it to the parent
$(function() {
$('#base').hover(
function handleIn(e) {
console.log("asd");
var popup = $('<img/>', {
id: 'popup',
src: 'http://placehold.it/32x32'
});
popup.css({
'position': 'absolute',
'z-index': 300,
'left': e.pageX - 30,
'top': e.pageY - 30
});
popup.mouseover(function() {
console.log('mouseover');
});
popup.mouseout(function() {
console.log('mouseout');
});
$('#base').parent().append(popup);
},
function handleOut() {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="base" src="http://placehold.it/256x256">
By the way, that way you will have a new element on every hover event.

Try with this tooltip example:
<html>
<head>
<link href="Styles/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<img src="images/yourimage.jpg" class='test' data-toggle='tooltip' data-placement='right' title='your custom message' />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>

Related

How to Slide right to left JQuery HTML CSS

$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
width: 'toggle'
}, -10);
});
});
<script src="jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-
ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js">
</script>
<script>
</script>
<div id="One" style="width:50px;height:200px;background-
color:yellow;position:relative;top:300px;left:600px;">One</div>
<div id="Two" style="width:200px;height:200px;background-
color:black;position:relative;top:100px;left:400px;">Two</div>
Above is the code, my problem exactly is that I can't get it to slide normally. When I click on it it disappears then comes back on the second click. I just want it to slide normally.
Try adding this::
$(document).ready(function() {
$("#One").click(function() {
$("#Two").animate({
left: '400px'
});
});
});

JQuery ui modal dialog external ui

I am trying to load another page in a jquery ui modal
This is my Js File
function eventWindow(url) {
getElementById("eventviewer").style.display="block";
$("#eventviewer").load(url).dialog({
modal:true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
}
this the markup
<!doctype html>
<html>
<head>
<title><?php echo "Date:".$firstDayArray['month']." ".$firstDayArray['year'];?>
</title>
<link href="../css/main.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="event.js" type="text/javascript"></script>
</head>
<body>
.....
<?php
echo "<td class=\"days\">".$dayArray["mday"]."<br/>".$event_title."</td>\n";
?>
<div id="eventviewer"></div>
......
</body
</html>
when i use window.open it works and opens in separate window.
But i am not able to open it in a jquery ui modal dialog.
There are multiple ways you can do this but I am not sure which one is the best practice. You can append an iFrame in the dialog container like this:
$("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
OR:
Working Fiddle
$(function () {
var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
autoOpen: false,
modal: true,
resizable: false,
width: "auto",
height: "auto",
close: function () {
iframe.attr("src", "");
}
});
$(".thumb a").on("click", function (e) {
e.preventDefault();
var src = $(this).attr("href");
var title = $(this).attr("data-title");
var width = $(this).attr("data-width");
var height = $(this).attr("data-height");
iframe.attr({
width: +width,
height: +height,
src: src
});
dialog.dialog("option", "title", title).dialog("open");
});
});

Display Image on Mouseover

How do I display an image on mouse over? I also need to underline the text next to the image on mouse over? On mouseout I have to hide the image and make the text normal again.
This is my html field
<img src="img.jpg"> Name
Now when I load the page I want not to display the image unless I have the mouse over the place it should appear.
CSS
#test{
display:none
}
HTML
<img id="test" src="img.jpg"/> <span>Name</span>
jQuery
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
DEMO
Documentation
jQuery
document.ready
jquery.on()
jQuery.show()
jQuery.hide()
jQuery.mouseenter
jQuery.mouseleave
You can do it the below way using the hover event.
jQuery:
$(document).ready(function () {
$('span').hover(function(){
$(this).addClass('underline'); //to make text underlined on hover
$('#image').show(); //displays image on mouse in
},function(){
$(this).removeClass('underline'); //remove underline on mouse out
$('#image').hide(); //hides image on mouse out
});
});
HTML:
<img class="hidden" id="image" src="img.jpg"/> <span>Name</span>
CSS:
.hidden{
display: none;
}
.underline{
text-decoration: underline;
}
Working Demo
As answered by Anton, you can use this one as well.
$(document).ready(function () {
$('span').hover(
function () {
alert("1");
$('#test').show();
},
function () {
alert("2");
$('#test').hide();
}
)
});
Jquery:-
$(document).ready(function(){
$("#textDiv").mouseover(function(){
$("#imageDiv").hide();
});
$("#textDiv").mouseout(function(){
$("#imageDiv").show();
});
});
HTML:-
<div id="textImage">
<div id="imageDiv" style="float:left;">
<img src="../images/login_background.png"></img>
</div>
<div id="textDiv"style="float:left;">
Name
</div>
</div>
CSS:-
#textImage a {text-decoration:none;}
#textImage a:hover {text-decoration:underline;}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type='text/javascript' src='http://identify.site88.net/jquery-1.9.1.js'></script>
<style type='text/css'>
#test{
display:none
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('span').on('mouseenter', function () {
$('#test').show();
$(this).css({
"text-decoration": "underline"
});
}).on('mouseleave', function () {
$('#test').hide();
$(this).css({
"text-decoration": ''
});
});;
});
});
</script>
</head>
<body>
<img id="test" src="http://www.shop.hidra.com.tr/wp-content/uploads/image_1306_1.jpg"/> <span>Name</span>
</body>
</html>

jQuery Tooltip UI - trigger tooltip after x seconds

Here is what I have so far:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var msgid = this.id.split('_')[1];
$.ajax({
type: 'post',
url: '/tooltip.php',
data:'i='+msgid,
success: function( data ) { callback( data ); }
});
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_860" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
The above is working as it's suppose to work, however, I would like to trigger the tooltip only after the mouse hovers the link for an specific amount of time (like 2 seconds, for example).
Also, I would like to cancel it's trigger if the user moves the mouse out of the link before the specified delay time expires.
Can anybody please help me out on this?
Thank you very much.
I finally managed to achieve what I was looking for.
Here is the final result:
<!DOCTYPE HTML>
<html>
<head>
<title>Tooltip Testings</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(document).tooltip({
items: '.tooltip',
show: 100,
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: function( callback ) {
var ARTid = this.id.split('_')[1];
var TTtmr = setTimeout( function() {
$.ajax({
type: 'post',
url: '/tooltip.php',
data: 'i='+ARTid,
success: function( data ) { callback( data ); }
});
}, 800 );
$('.tooltip').mouseleave( function() { clearTimeout( TTtmr ); } );
}
});
});
</script>
</head>
<body>
<p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
<p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
<p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
<p><a class="tooltip" id="i_283" href="articles/programming-in-java.html">Java Article</a></p>
</body>
</html>
you can try this:
$(function() {
$(document).tooltip({
items: '.tooltip',
hide: 500,
position: { my: 'center bottom', at: 'center top' },
content: 'Testing jquery tooltips!',
show: {
effect: "slideDown",
delay: 250
}
});
});
the show property accepts object parameter with the following properties;
effect, delay, duration, and easing.
http://api.jqueryui.com/tooltip/#option-show

jQuery to animate image from left to right?

I have a Bee image and I want to animate it using jQuery.
The idea is to move the image from left (outside of screen) to right (outside of screen) to create an effect like it's flying.
Your bee needs to be absolutely positioned, something like this:
<div id="b" style="position:absolute; top:50px">B</div>
I've used a div here, but it could just as well be an <img> tag. As meo pointed out, don't forget the top attribute, because some browsers don't work without it. Then you can animate it:
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
Here is a jsfiddle demo.
If you want to have a continuous animation as Hira pointed out, put the animation code in functions, make sure the left and right movement is the same, and use the onComplete option of animate() to call the next animation:
function beeLeft() {
$("#b").animate({left: "-=500"}, 2000, "swing", beeRight);
}
function beeRight() {
$("#b").animate({left: "+=500"}, 2000, "swing", beeLeft);
}
beeRight();
And the fiddle for that.
Try spritely: http://spritely.net/
i would do something like this:
http://jsfiddle.net/Uwuwj/2/
var b = function($b,speed){
var beeWidth = $b.width();
$b.animate({ //animates the bee to the right side of the screen
"left": "100%"
}, speed, function(){ //when finished it goes back to the left side
$b.animate({
"left": 0 - beeWidth + "px"
}, speed, function(){
b($b, speed) //finally it recalls the same function and everything starts again
});
});
};
$(function(){ //document ready
b($("#b"), 5000); //calls the function
});
bee careful, this code only works with bee's :P
In case you want the bee to keep flying across the screen, try this :-)
<html>
<head>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function animateImage() {
console.log("Called");
$('#bee').css({right:'10%'});
$('#bee').animate({right: '-100%'}, 5000, 'linear', function(){animateImage();});
}
$(document).ready(function() {
animateImage();
});
</script>
</head>
<body>
<div style="width: 100%;"><img src="bee.jpg" id="bee" style="position:relative;"/></div>
</body>
<script type="text/javascript" src="jquery/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function rgt() {
$('#sldr').animate({ left: "500" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
rgt();
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var k = $(window).width();
function rgt() {
$('#sldl').hide(1);
$('#sldr').animate({ left: "1000" }, 10000, hider);
}
rgt();
function hider() {
$('#sldr').css('left', '0px');
$('#sldr').hide(1);
$('#sldl').show();
lft();
}
function lft() {
$('#sldl').animate({ left: "0" }, 10000, hidel);
}
function hidel() {
$('#sldl').css('left', '1000px');
$('#sldr').show();
rgt();
}
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="sldl" src="../Images/animated%20images/birds/fuglan.gif" style="position:absolute; right:0px" />
<img id="sldr" src="../Images/animated%20images/birds/rightfuglan.gif" style="position:absolute" />
</div>
</form>
</body>`enter code here`

Categories