I have a site which has the button 'Currency Converter'. When clicked on it, it should open the dialog box and conversion should happen. Following is the code:
currency_converter.php
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
var page = "https://www.google.com/finance/converter";
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 250,
width: 350,
title: "Currency Converter"
});
$dialog.dialog('open');
return false;
});
});
</script>
</head>
<body>
<button id="opener">Currency Converter</button>
<div id="wrapper">
</div>
</body>
</html>
The problem is: dialog box is not getting opened in my browser.
Can anyone please help. Thanks in advance
Chnage your jquery and css url with these
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css
You have listen for document ready twice, other then that it should work just fine.
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<script>
$(document).ready(function() {
$('#openwindow').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
$('#wrapper').dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
var page = "https://www.google.com/finance/converter";
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 250,
width: 350,
title: "Currency Converter"
});
$dialog.dialog('open');
return false;
});
});
</script>
</head>
<body>
<button id="opener">Currency Converter</button>
<div id="wrapper">
</div>
</body>
</html>
Related
I have this code:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<style>
#myIframe{
width: 100%;
height: 100%;
}
</style>
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'https://www.onet.pl';
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
I need to open in the jquery dialogbox https://www.onet.pl (in iframe).
The current code shows me the dialogbox correctly - but without the onet.pl website. Iframe is empty
how to fix it?
With jQuery we use the attr() method to modify the attributes of an HTML element.
Your code after the fix will looks like this:
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
//$("#myIframe").src = "https://www.onet.pl";
$("#myIframe").attr("src", "https://www.onet.pl");
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
#myIframe{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog">
<iframe id="myIframe"></iframe>
</div>
</body>
</html>
Read more about the attr() from the following link: https://api.jquery.com/attr/
Side Note: next time please reveal the libraries or frameworks you're using (e.g. jQuery UI in this question) , this help whoever want to answer your question.
What am I doing wrong that this popup isn't working?
$(document).ready(function () {
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dialog">testing popup</div>
click me
You have to include jquery-ui also read the doc:
html
<a href="#" id="dialog_link">click me
<div id="dialog">testing popup</div>
</a>
jquery
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "show",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
$("#dialog_link").click(function () {
$("#dialog").dialog("open");
});
css
#dialog_link {
display: block;
}
fiddle
Those are the links from google host libraries:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
I'm trying to set up a jQuery Dialog box from clicking a list element in my navigation bar. I have the code working for a separate project when clicking a canvas element but it wont work for this application. My code is as follows:
Clickable Div in Nav-Bar List:
<nav id="nav_bar">
<ul>
<li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
<li><a>Youtube</a></li>
<li class="contact" style="cursor:pointer;">Contact</li>
</ul>
</nav>
Div that Should Show up in Dialog Box:
<div class='dialog'>
Hello
</div>
jQuery:
<script>
$(function(){
$(".contact").click(function(event){
$(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
My "imports":
http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js"> </script>
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
Here is all of my main script tags:
<script>
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery- 1.7.1.min.js"><\/script>');</script>
<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
});
</script>
<script>
var jquery = jQuery.noConflict();
jquery(function(){
jquery(".contact").click(function(event){
console.log("clicked");
jquery(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
It looks like you forgot to include jQuery UI or the order of jQuery and jQuery UI loaded are wrong.
Your code is working fine.
Tested in jsBin
Just make sure all js are included properly:
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
I need your help,
How can the code below be modified such that when a date is selected, that it will store the selected date into (var z) and then its value can be called back later. I can't seem to figure this out, it should be simple, and right by eyes. What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var z
window.onload = function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$('#d1').datepicker({
onSelect:function(){
z = $(this).val()
alert(z)
$("#dd").dialog("close")
}
});
}//end of window.onload
function callback() { alert(z) }
</script>
</head>
<body>
<div style="display:none" id="dd">
<div id="d1">
</div>
</div>
<p><input onlick="callback()" type="submit" value="Submit" name="B1"></p>
</body>
</html>
There are too many missing semicolons in your code. Plus , In spite of putting in window.onload put your code in $(document).ready(function() { }); .
I made some changes in your code. Its working now.
Have a loot at This.
I think this is exactly what you are asking for.
There seem to be a few things going on. The onclick was mispelled, and as was pointed out - semicolons were missing. This should work.
<script type="text/javascript">
var z;
$(document).ready(function() {
$('#dd').dialog({
autoOpen: true,
modal: true,
overlay: { opacity: 0.5, background: 'black'},
title: 'Select the date:',
height: 215,
width: 234,
draggable: false,
resizable: false
});//end of dialog_atip
$("#B1").click(function(){
callback();
});
$('#d1').datepicker({
onSelect:function(){
z = $(this).val();
alert(z);
$("#dd").dialog("close");
}
});
});//end of window.onload
function callback() {
alert(z);
}
</script>
I also modified the input button to:
<input type="button" value="Submit" name="B1" id="B1">
And you can also play around with the fiddle, here: http://jsfiddle.net/jE8tL/
I am using Blogspot and My code is as follows:
//JQuery Code above <head> tag:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog({ autoOpen: false });
$("#dialog").dialog({ modal: true });
$("#dialog").dialog({ position: 'center' });
$("#dialog").dialog({ resizable: false });
$("#dialog").dialog({ draggable: false });
$("#dialog").dialog({ width: 280 });
//$("#dialog").dialog({ height: 530 });
//$("#dialog").dialog({ closeText: 'hide' });
//$("#dialog").dialog({ closeOnEscape: true });
//$("#dialog").dialog({ hide: 'slide' });
//$("#dialog").dialog({ show: 'slide' });
$("#dialog").dialog({ title: 'Help!' });
/*$("#dialog").dialog({ buttons: [{
text: "Close",
click: function() { $(this).dialog("close"); }
}] });*/
$("#dialog").dialog();
setTimeout(function(){
$("#dialog").dialog("open");
}, 30000);
});
</script>
//html code above </body>
<div id="dialog" title="Dialog Title">
<br>
<span style="text-align:center; font-weight:bolder;font-size:15px; display:block">Make this Hindi Site Popular. <br>
Please Share.</span>
<br>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=kuldeep06march"></script>
<!-- AddThis Button END -->
<br>
</div>
I have set timeout 30000 ms in setTimeout JS Function so after 30 seconds, a dialog box appears and asks for "Sharing". The problem is that after closing the Dialog Box, it appears again and again. See the live working code at "http://www.bccfalna.com"
How Can I solve this problem?
$("#dialog").dialog({ autoOpen: false,
modal: true,
position: 'center',
resizable: false,
draggable: false,
width: 280,
height: 530 ,
closeText: 'hide',
closeOnEscape: true,
hide: 'slide',
show: 'slide',
title: 'Help!' }).dialog();
and
var timeoutId = setTimeout(function(){
$("#dialog").dialog("open");
clearTimeout(timeoutId)
}, 30000);
Try this.
Well, in the link you provided you have the code snippet above wrapped in:
$window.scroll(function() {
Which means every time the user scrolls, you are creating a new timeout. :)