How to make a Jquery Popup note - javascript

How would you make a JQuery popup Note ? This is what I currently have,
Note Code Example
<html>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<style type="text/css" rel="stylesheet">
#popup {
border: 1px solid black;
width: 400px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".HoverMe").mouseenter(function() {
var left = $(".HoverMe").position().left;
var top = $(".HoverMe").position().top;
$("body").append("<div id=\"popup\"> </div>");
$("#popup").css("left",left);
$("#popup").css("top",top);
$("#popup").append("<p> Hello World </p>");
});
$(".HoverMe").mouseleave(function() {
$("#popup").fadeout("fast");
});
});
</script>
</head>
<body>
<div class="HoverMe">
Hover Me
</div>
</body>
</html>
Thats not what I wanted, i wanted something like when you hover some text, it displays a popup with some text. The popup is then aligned center of the text if that makes sense.
Any examples would be useful,
Thank you!

How about using someone else's code for this? I recommend tipsy.

Have a look here. It's not jQuery, although arguably it's an easier technique than jQuery:
http://sixrevisions.com/css/css-only-tooltips/

Related

How do you write a javascript function that displays a Map in D3?

Right now, I have this working iframe for a map.
<div style=" position: absolute; top: 200px; left: 508px; width:300px;max-width:100%;overflow:hidden;height:200px;color:red;"><div id="my-map-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
I would like to initially have this hidden and have a function such that I can call and add and remove it on call. I am trying to write something like:
var mapIsOn = false;
showMap(_city, _state, _country){
if(mapIsOn == false){
svg.append("iframe")
... add the features listed above
.attr("id","MAP")
}else{
svg.selectAll("#MAP").remove();
mapIsOn = false;
}
Is there any way to do it? I've seem that it is possible to create div's but so far with this, I am not having much luck. Any help would be really appreciated!
There are lots of ways to achieve that. This is probably the simplest method. Idea is to set display none and remove it when we want to show the map.
.nodisplay {
display : none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#my-map-display").toggleClass("nodisplay");
});
});
</script>
</head>
<body>
<button>Toggle map</button>
<div id="my-map-display" class="nodisplay" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=null,+null,+null&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe>
</body>
</html>

Turn.js (flipbook effect) is not working

Sorry, but I am not getting where actually I did the mistake (as I am a newbie to javascript). I wrote this code for the flipbook effect using turn.js with the help of a tutorial. But the output in a browser is just showing the blank screen. I guess, there must be an awkward mistake but m still not getting it . plz help.
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
body{
background: #9988aa;
}
#book{
width: 1152px;
height: 400px;
}
#book .turn-page{
background-color: #ddd;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="book">
<div style="background-image:url('images/1.jpg');"></div>
<div style="background-image:url('images/2.jpg');"></div>
<div style="background-image:url('images/3.jpg');"></div>
<div style="background-image:url('images/4.jpg');"></div>
<div style="background-image:url('images/5.jpg');"></div>
<div style="background-image:url('images/6.jpg');"></div>
<div style="background-image:url('images/7.jpg');"></div>
<div style="background-image:url('images/8.jpg');"></div>
</div>
<script type="text/javascript">
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50;
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
</body>
</html>
Hi there is small error in your code, kindly just remove semi colon from following line.
elevation:50;
It should be like following, just remove semi colon. Hope it will resolve your issue.
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});

jQuery slideToggle more than one panel

Im a complete noob when it comes to JavaScript and jQuery but here we go.
I want to make a slidetoggle that shows 3 slides, 3 "snowboardtricks" when i press "toggle".
As it is now only one "trick" is shown when i press toggle, the rest is already there from the beginning.
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function()
{
$("#flip").click(function()
{
$("#panel,#panel2,#panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#panel2,#panel3,#flip
{
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#panel
{
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Toggle</div>
<div id="panel">Switch back 1080 double cork</div>
<div id="panel2">Frontside triple cork 1440</div>
<div id="panel3">Ollie</div>
</body>
</html>
If I'm understanding correctly, on page load you only want to display "Toggle". When you click "Toggle" you want to show the three other sections.
To do that you want to place the three other sections inside of a wrapper div, and then use slide toggle on the wrapper div instead.
Quick jsfiddle: http://jsfiddle.net/43byX/
Here is a modified version of your code:
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("#drawer").slideToggle("slow");
});
});
</script>
<style type="text/css">
#toggle,
.panel {
padding:1px;
text-align:left;
color:white;
background-color:black;
border:solid 1px yellow;
}
#drawer {
padding:5px;
display:none;
}
</style>
</head>
<body>
<div id="toggle">Toggle Me</div>
<div id="drawer">
<div class="panel">Switch back 1080 double cork</div>
<div class="panel">Frontside triple cork 1440</div>
<div class="panel">Ollie</div>
</div>
</body>
</html>
#panel, #panel2, #panel3
{
padding:5px;
display:none;
}
You are in essence hiding only the div whose id is panel. But the other two div's are visible. Those need to be hidden as well. This way when you toggle all three will have their displays turned to true.
On a side note is there a reason you are creating your own toggle? It might be faster to use twitter bootstrap which already comes with it. See This
Correct me if I'm wrong, but it seems what you're trying to do can be more easily accomplished using accordion.
Quick jFiddle example here. Click the headers to see the effects.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
</head>
You can erase the active code if you want one of the panes to be open when the page loads, and you can erase the collapsible line if you want one of the panes to always remain open.
and then the html layout:
<div id="flip">
<h3>Switch back 1080 double cork</h3>
<div><p>some text or whatevs here</p></div>
<h3>Frontside triple cork 1440</h3>
<div><p>some text or whatevs here</p></div>
<h3>Ollie</h3>
<div><p>some text or whatevs here</p></div>
</div>
Read more about accordion here.
Edit: It may be better to put the
<script>
$(function() {
$( "#flip" ).accordion({
collapsible: true,
active: false
});
});
</script>
just before the closing body tag instead of in the header. Best practices would have you put it in a separate file and link it in the header.
I think, you want to toggle that one hidden element one by one. Well, If I am not wrong, then here is the code:
$("#flip").click(function(){
var targets = $("#panel, #panel2, #panel3"),
hiddenElm = targets.filter(":hidden");
hiddenElm.slideDown();
if(hiddenElm.next().length){
hiddenElm.next().slideUp();
} else {
targets.first().slideUp();
}
});
Working jsfiddle: http://jsfiddle.net/ashishanexpert/jg2wg/

jQuery mobile popup is not closing

sorry for not supplying a fiddle, I can't get it set up there.
However, I use the following code to programatically open and close a popup. Only that it doesn't close and stays open. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function()
{
$("#initialpopup").popup("open");
setTimeout(function()
{
$("#initialpopup").popup("close");
}, 500);
});
</script>
</head>
<body>
<div data-role="page" data-theme="a" data-content-theme="c">
<div data-role="popup" id="initialpopup" data-overlay-theme="a" data-theme="a">Foobar</div>
</div>
</body>
</html>
you can try
$('#initialpopup').popup('open', {transition: 'pop'});
window.setTimeout('$("#initialpopup").popup("close");', 500);
I am not sure if this is the same case as the one reported here, but I had the same problem and fixed it with this extra CSS:
.ui-popup-container [data-role=popup] {
visibility: hidden;
}
.ui-popup-container.ui-popup-active [data-role=popup] {
visibility: inherit;
}
.ui-popup-screen.out {
visibility: hidden;
}
I believe there was a screw-up in the library at some point in time, or we might be missing something...
I feel this is related to the animations somehow, but I haven't found a way to properly fix it.

Contents of iframe disappears after inserting it using jQuery.append

Please consider this code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey"></div>
<iframe id="iView" style="width: 200px; height:70px; border: dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
jQuery("#iView").appendTo("#dlgDiv")
})
</script>
</body>
</html>
In IE it works fine and preserves test in the frame ("Some test text") as well as it keeps it in design mode.
In FF/Chrome/Opera it wipes out all content of the iframe - if you inspect it's DOM with FireBug you can see that iframe.body lost it's class "some-class" as well as all text and it's not in design mode.
Any ideas how to overcome this problem? The original problem is that all rich text editors fail to work in a jQuery.dialog in those browsers and I tracked the problem down to the above-mentioned fact...
It's a real show stopper for me, any help would he highly appreciated!
Thank you,
Andrey
Takes to refresh the movement (appendTo) and does not locate either the iframe:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px;height:72px;border:solid 1px grey"></div>
<iframe id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#iView").appendTo("#dlgDiv");
setTimeout(function(){
var iBody = $("#dlgDiv").find('#iView').contents().find("body"); // <-----
iBody.append("<div>my bad html</div>"); // old container
iBody.empty(); // empty body in iframe
iBody.append("Some test text"); //add container
iBody.append("<div>or something right</div>"); //add container
iBody.attr("class", "some-class"); //add class to body
}, 100);
})
</script>
</body>
</html>
Edition: for it is understood

Categories

Resources