jQuery mobile popup is not closing - javascript

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.

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>

.slideDown Not Working For ME

So I've managed to link my index.html to jquery but for some reason my .slideDown code is not working. Is there something wrong with it or did I not attach jquery correctly?
Here is my html code (containing the code for .slideDown):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<link rel="shortcut icon" href="../Pictures/Logo.png" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<script>
$("#teamalpha").mouseover(
function(){
$("#teamalpha > div").slideDown(400);
});
</script>
<div id="teamalpha">
<div>
<p>AlphaGuardian</p>
<p>Owner</p>
</div>
</div>
</div>
</body>
</html>
And Here is my CSS code (stylesheet linked correctly):
#teamalpha{
font-family:Optimus;
font-size:24px;
text-align:center;
border:solid;
border-color:#000;
width:250px;
height:250px;
position:relative;
top:100px;
left:200px;
cursor:pointer;
z-index:5;
}
#teamalpha div{
position:relative;
top:-50px;
height:100px;
display:none;
width:250;
background-color:#f7931e;
z-index:6;
}
Your <script> needs to be surrounded by
// Fire on document ready event
$(document).ready(function(){
// some code here
});
OR
// Fire on window load event
$(window).load(function() {
// some code here
});
So it should look like this:
<script>
// Fire on document ready event
$(document).ready(function() {
$("#teamalpha", this).on("mouseover", function() {
$(this).children("div").slideDown(400);
});
});
</script>
OR
// Fire on document ready event
$(window).load(function() {
$("#teamalpha", this).on("mouseover", function() {
$(this).children("div").slideDown(400);
});
});
Your script was running before the page was fully loaded. Now, it'll wait till the document or the window finish loading.
I made a pen with code that worked: http://codepen.io/KK4OXJ/pen/Eagjax/
Basically, you can't fade something in that's hidden with CSS, so we need this:
$('#teamalpha div').hide();
to hide it, instead of using CSS to hide it. It needs to go right before the mousover thing, and we also need to remove the display: none; line in the CSS.
I hope this helps :)

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');
});

How to make a Jquery Popup note

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/

document.getElementById('box').style.width="10px"; Doesn't work?

I cannot seem to get this script to work. Can anyone please help? The DIV's width is not defined. It just stretches across the whole page.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script>
document.getElementById('box').style.width="10px";
</script>
</head>
<body>
<div id="box"></div>
Your script is running before the <div> is rendered on the page. Try it like this:
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
document.getElementById('box').style.width="10px";
</script>
</body>
</html>
And don't forget to close your <body> and <html> tags.
To prove that it is, look at this example. I moved the script back to the <head> section and changed the width setting to run when the window is finished loading.
<html>
<head>
<style type="text/css">
#box{
height:100px;
border:3px;
border-style:solid;
border-color:#000;
}
</style>
<script type="text/javascript">
alert('test');
window.onload = function() {
document.getElementById('box').style.width="10px";
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
You'll see the 'test' alert message before the box is rendered.
The element does not exist on the page yet. JavaScript can not access/manipulate an element until it has been loaded in the DOM. You can overcome this by moving you <script> block to above the closing </body>. Or use an window.load event.
An example of the former using your code is here - http://jsfiddle.net/ycWxH/
if you will use jquery it is more easy to do that.
that is if you will only use jquery framework
here is the code
$('#box').height(10);
just a reminder, window.onload is fired when page fully loaded.
refer to http://www.javascriptkit.com/dhtmltutors/domready.shtml
<script>
function doMyStuff() = {};
if ( document.addEventListener ) {
document.addEventListener( "DOMContentLoaded", doMyStuff, false );
} else if ( document ) {
document.attachEvent("onreadystatechange",function(){
if ( document.readyState === "complete" ) {doMyStuff();}
});}
</script>

Categories

Resources