Izimodal iframe isn't displaying - javascript

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)

Related

Prevent navigating after link click in tinymce

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".

lightbox activates when clicking the link twice instead of once

I'm having a weird issue where I have to click twice on a link(button) instead of once to activate the lightbox event and cant figure out why for the life of me.
here is my code and here is a preview of the page , if you'll notice you'll have to click twice on the watch button to activate the lightbox event.
(link removed so Google doesn't index)
<script type="text/javascript">
var $j = jQuery.noConflict();
var src = '';
$j(function()
{
$j("span#btnclick").click(function(event)
{
event.preventDefault();
$j("a.watchbutton").nivoLightbox({
effect: 'fade',
afterShowLightbox: function()
{
src = $j('.nivo-lightbox-content > iframe').attr('src');
$j('.nivo-lightbox-content > iframe').attr('src', src +'?autoplay=1');
}
});
});
});
</script>
That is because you are defining the lightbox functionality inside the click event. So when you click first time, the lightbox functionality is defined. Second time it's redifined, but before it work because it was already defined.
The solution is to extract the lightbox functionality definition out of click event:
$j("span#btnclick").click(function(event){
event.preventDefault();
});
$j("a.watchbutton").nivoLightbox({
effect: 'fade',
afterShowLightbox: function()
{
src = $j('.nivo-lightbox-content > iframe').attr('src');
$j('.nivo-lightbox-content > iframe').attr('src', src +'?autoplay=1');
}
});

How do I stop a web page from scrolling to the top when calling a JavaScript function?

When I call the JavaScript function the control direct jump to the top of the page:
<!-- capture image -->
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.plugin.html2canvas.js"></script>
<!-- js.ui range or slider -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
function capture()
{
$('#target').html2canvas(
{
onrendered: function (canvas)
{
//Set hidden field's value to image data (base-64 string)
$('#img_val').val(canvas.toDataURL("image/png"));
}
});
}
$(function() {
$( "#slider" ).slider({
value:250,
min: 0,
max: 500,
step: 25,
slide: function( event, ui )
{
$( "#amount" ).val( ui.value );
capture();
}
});
i am calling the above capture(); withn the slider but the page is jump to top... pleas if let you?
Add return false in your onclick callback :
<a href='#' onclick='test(); return false;'>call test</a>
Because the browser is jumping to the top of the page I'm guessing you are calling test from an event handler on a link with href="#". The browser's default action for following a link to "#" is to jump to the top of the page.
You need to tell the browser that, once your handler has run, it should not proceed with its default action.
DOM event handlers typically accept an Event object as the first argument. You can call its preventDefault method to do that:
$('#my-link').on('click', function(e) {
e.preventDefault();
test();
});
Just return false or use event.preventDefault() on click event
YOU can simple replace # with javascript:;call test.
When you will click, nothing will scroll on page.

lightbox_me - open different popups on same page

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.

jQuery UI dialog issue

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

Categories

Resources