I am trying to create a page with multiple popups on the same page. I want the first popup to open on page load which I can get to work with
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lightbox_me.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#sign_up").lightbox_me({centered: true, onLoad: function() { $('#sign_up').find ('input:first').focus()}});
}); // document ready
</script>
<body onload="$('#sign_up').trigger('click');">
But then I want the user to be able to click a link in that popup that will stay on the same page but open up a different popup. And again from the second popup I want the user to be able to click a link to open a 3rd popup.
Using this code I can click a link in the first popup (sign_up) Click here which does open the second popup (sign1) but the first popup is still behind (I can see it because the second popup is smaller)
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign_up').lightbox_me({centered: true, onLoad: function() { $('#sign_up').find('input:first').focus()}});
}
$('#try-1').click(function(e) {
$("#sign_up").lightbox_me({centered: true, onLoad: function() {
$("#sign_up").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
<script type="text/javascript" charset="utf-8">
$(function() {
function launch() {
$('#sign1').lightbox_me({centered: true, onLoad: function() { $('#sign1').find('input:first').focus()}});
}
$('#try-2').click(function(e) {
$("#sign1").lightbox_me({centered: true, onLoad: function() {
$("#sign1").find("input:first").focus();
}});
e.preventDefault();
});
$('table tr:nth-child(even)').addClass('stripe');
});
</script>
I am very new to jquery and have basically been trying to copy and tweak current code but to no joy.
Related
My code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js" integrity="sha512-8aOKv+WECF2OZvOoJWZQMx7+VYNxqokDKTGJqkEYlqpsSuKXoocijXQNip3oT4OEkFfafyluI6Bm6oWZjFXR0A==" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" integrity="sha512-pH06JFjxM84j7iRF99/Cw7d9R9m2mVmEVr8oI0kK8gVkr461DI+8OYpQctHUrbmdOH7oaRyDRkkCVlQIQCFEiQ==" crossorigin="anonymous" />
Modal
<script>
$(document).on('click', '.trigger', function (event) {
event.preventDefault();
$('#modal-iframe').iziModal('open', event); // Use "event" to get URL href
});
$("#modal-iframe").iziModal({
iframe: true,
iframeHeight: 800,
iframeURL: 'http://izimodal.marcelodolza.com'
});
</script>
Tried
switching from using iframe, button
enabling, disabling iframeURL
changing event to event.this, this (i'm a js noob)
I want to use tinymce to show and edit html code. I also want to let the user edit hyperlinks. But I want a special handling: I want to know if a link is clicked but I don't want to navigate.
I tried this code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script>
$(document).ready(function() {
tinymce.init({
selector: 'textarea',
menubar: false,
toolbar: false,
plugins: 'link',
setup: function(editor) {
editor.on('init', function() {
editor.setContent('<h1>My heading</h1>This is a link');
editor.onClick.add(function(ed, e) {
if (e.currentTarget.nodeName == 'a') {
alert('clicked');
e.preventDefault();
return false;
}
});
});
}
});
});
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
The editor is loaded correctly but if I click the link then I will get a "File not found".
Well....!!!
I have Two Scripts on the Page for Two Purposes
1) For DropDown List
2) For POPUP Messages
They work without any problems independently, but one script blocks the rest from running properly wherever I include it.
Add New
Modify
Delete
and When I click Modify Or Delete To Execute The POP Message , The POP message Will Execute successfuly and when cancel or save Changes what ever I want On POP Message after when I return To the Page The Dropdown List Stop Functioning , its Not Drop the List above.
For Drop Down List I Used This JavaScript
$(function () {
$('.dropdown1').mouseenter(function () {
$('.sublinks1').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function () {
$(this).slideUp(300);
});
});
});
While For POP Message I used
<script type="text/javascript">
function ClearFields() {
};
function CloseModal(msg) {
$('#myModal').modal('hide');
if (msg.length > 0) {
alert(msg);
}
}
function ShowModal() {
$('#myModal').modal('show');
}
</script>
Referenced On The Page
<link href="../StyleSheet/DropDownMenu.css" rel="stylesheet" type="text/css" />
<script src="../JsQuery/1.10.2jquery.min.js" type="text/javascript"></script>
<script src="../JsQuery/jquery.js" type="text/javascript"></script>
<script src="../JsQuery/jquery-1.3.2.js" type="text/javascript"></script>
For Message Box
<link href="../MessageBox/BootStrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Also Also
Also
Note: Actually The Entire Codes Or HTML used in ascx
I'm trying to create jquery dialog, but there is no use :(
here is my jQuery code:
$(document).ready(function() {
createDialog();
});
function createDialog() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-form").dialog(
{
autoOpen : false,
height : 475,
width : 350,
modal : true,
buttons : {
"submit" : function() {
var bValid = true;
allFields.removeClass("ui-state-error");
postText();
$(this).dialog("close");
}
},
cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$(".add-org").click(function() {
$("#dialog-form").dialog("open");
});
}
here is html code:
<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/myScript.js'/>"></script>
New
<div id="dialog-form" title="Add New ">
<p class="validateTips">All form fields are required.</p>
<form>
..................
</form>
</div>
and firebug says:
TypeError: $("#dialog:ui-dialog").dialog is not a function
$("#dialog:ui-dialog").dialog("destroy");
and on my page I see all the fields from the form.
so what is my problem?
Try this: Working demo http://jsfiddle.net/kEZkh/
Not sure if your source path are correct please include following scripts.
rest please feel free to play around with demo & hope it helps the cause :)
scripts
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
code
$("#forgot").click(function(e){
$("#dialog-form").dialog("open");
e.preventDefault();
});
$("#dialog-form").dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"Retrieve": function() {
document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
Check in Firebug/DevTools if the script file was loaded successfully. If it is, type this into the console (Firebug, DevTools) or better, put that line where your other code is executed:
console.debug(jQuery.ui)
If it shows undefined, then jQuery UI was not loaded (yet). Check if your code runs before everything was loaded, put it inside jQuery's $(document).ready();. If it is an object, inspect it and check for the dialog property.
If you configured a custom build on jqueryui.com, doublecheck if you included the dialog widget.
The destroy call should be on the same element as you already used when you created the dialog, not the .ui-dialog container that gets wrapped around your content:
$("#dialog-form").dialog('destroy');
Since your current code is throwing an exception, the subsequent lines which are supposed to create the dialog never get called.
If you want to destroy every dialog that might already be open, jQuery UI handily puts a .ui-dialog-content class on each content div:
$('.ui-dialog-content').dialog('destroy');
I want to toggle element that id's pg when click link.
header:
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
</script>
Elements:
<p id="pg">deneme deneme 123 deneme</p>
toggle
close click function by adding });:
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
});
You're missing the final }); for the statement
<title>Example</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#pg").toggle();
});
)}; //<-- Missing close bracket
</script>
Also, if you're using Firefox, check out Firebug. Its an invaluable debugger tool and will show you where errors are happening.
Chrome has a Developer Tools enabled, not sure about IE.