When I set up my test document to use an 'inline' Magnific Popup I click the link/button, and the URL of the page changes, but nothing actually appears.
I've copied and pasted directly from the original demo, I've included the jQuery library before the after Magnific's .js. I've tried swapping initialization codes. I've honestly lost track. I also can't get my debugger in Chrome to open properly, but what I gathered was that I was missing a closing } but when I added it things only broke further.
I also made a JSFiddle despite not really knowing how to use it: https://jsfiddle.net/3b15w3ek/6/
$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
I checked the fiddle and found that URL for jQuery1.9.1 was wrong and corrected it. See the updated fiddle:
https://jsfiddle.net/3b15w3ek/7/
And the updated code is:
$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
You didn't close the function (missing last });):
$(document).ready(function() {
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
In order this snippet to work in JSFiddle, you also need to set "Framework & Extensions" = "jQuery 1.9.1" (or later) in Javascript settings. Otherwise $ symbol is not found in Magnific gallery...
Related
I use Foundation 6 and now I got the problem.
There are 2 tabs "entrance" & "registration" into modal window "authorization".
I want to make such thing "If you fill inputs for example in "registration" tab but don't push button and go over to "entrance" tab, inputs in "registration" tab should be clear".
I wrote this code and tried it but it is not working
$("#authorization-tab-link").click(function(){
$("#register-alert").removeClass("callout alert success").empty();
$("#email-register-input").val("");
$("#name-register-input").val("");
$("#first-password-register-input").val("");
$("#second-password-register-input").val("");
});
I did the same by using bootstrap and it is working. That's odd.
I don't know why <a> .click() is not handling.
According to the Foundation6 Documentation, you can use an event to do this:
$(document).on('change.zf.tabs',function(){
$("#register-alert").removeClass("callout alert success").empty();
$("#email-register-input").val("");
$("#name-register-input").val("");
$("#first-password-register-input").val("");
$("#second-password-register-input").val("");
});
Normally this should work. If not, try the .on() on your Tab element. e.g.:
$('#my-tab-wrapper').on('change.zf.tabs',function(){ /* do stuff here */ });
EDIT:
$('#my-tab-wrapper').on('change.zf.tabs', function(e, target){
});
Check what the target var returns and build an if/else. This should work .
I tried to use a page on
http://dimsemenov.com/plugins/magnific-popup/
to start with the project. So I took the code an assumed to find out, what I need from the larger page for me. Though, cutting anything away made id not function at all.
What resources are needed (css, js, links)?
I need on several pages a light box and want to load the first picture as soon as the page loads. Tried to build a test page on
http://grillparzerhof.at/magnificversuch/index.html
though there is a light box not at all. It is a very beginners question; please help.
~ Karl
This is the code on that page in Public Methods you should use to fire the lightbox on page load, this instruction is near the bottom of the Documentation page:
// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
I am trying to disable close on click when clicking the overlay behind the edit form Modal that opens when I edit a row, but I dont know how I have to do it. I were trying something like:
editOptions: {
url: 'foo/edit.html',
mtype: 'PUT',
//some other options
closeAfterEdit: true,
reloadAfterSubmit: true,
onClose: function() {
alert('Hi ^_^');
}
}
But this only triggers if I click at 'X' button. If I click at overlay (out of modal) it closes the modal and that alert never triggers. What I want is to disable that closing function when I click out of modal or remove that overlay.
Thanks.
It's interesting problem. onClose callback will be not called if one clicks on the overlay (if one clicks out of the modal dialog) and the dialog will be closed.
It's funny, but jqModal.js already has the option which would be perfect to implement your requiremens. It's closeoverlay option of $.fn.jqm (see the line). The problem is that jqGrid don't have any public property which allows to set the option. If you just modify jquery.jqGrid.src.js the closeoverlay : true to closeoverlay : false (it corresponds changing closeoverlay:!0 to closeoverlay:!1 in jquery.jqGrid.min.js) then you will have the behavior which you need.
The problem is that I don't see any simple way to realize your requirements without modification of the code jqGrid.
UPDATED: I analysed the code of jqModal.js module one more time and I'v found simple way without changing the source code of jqGrid. The analyse is difficult because the module exist only in minimized form. So it's difficult to read the code.
The solution: you should include the following line which changes defaults of jqModal.js module:
$.jqm.params.closeoverlay = false;
Description: the lines of jqModal.js module initialize $.jqm as
$.jqm = {
hash: {},
open: function (s,t) { ... },
close: function (s) { ... },
params: {}
};
So everywhere after you includes jquery.jqGrid.min.js you have $.jqm.params as empty object. It can be used to provide default values of parameters of jqModal.js (which are not directly specified in the list of parameters of $.jqm). So you can include $.jqm.params.closeoverlay = false; somewhere after jquery.jqGrid.min.js (or jquery.jqGrid.src.js) to deny closing of jqGrid dialog on clicking on the overlay.
I have a page created by someone else that contains modal windows, and each modal window has links/images that display on hover. FYI, I have a very limited understanding of JavaScript and jQuery.
What I am trying to achieve is to add Google Analytics event tags to the links in the modal windows. It would work with onclick (code below) added directly to the anchor tag, or if it is added to the link via jQuery/JavaScript). The event needs to fire as a click event in Google Anayltics.
Usually, I just add:
onclick="_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);"
directly to the anchor tag, but whenever I add the code to the anchor tag in the HTML, the jQuery stops working. The modal windows work correctly on this link:
http://cookware.lecreuset.com/cookware/content_cast-iron-guide-sizes_10151_-1_20002
and you can see what I mean by "stops working" on the following link - the items within the list tags are no longer being populated, which means the icons don't show up and the new content that displays on hover can't be accessed: http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002
Since most of the links are created in the jQuery, I started by trying to add the Google Tag via .click, .attr, .on and .bind with no luck. The link above shows you my attempt with the .click function (search for CIGuide and you'll find it in the source on the 2nd link), but it breaks in the same way no matter what JavaScript I add to the page. My original question is here: Not able to successfully add Google Analytics Event Tag to link created by .attr
After I wasn't able to get either of those two things to work, I decided to try a simple alert on the page outside of all the content I was provided, with it's own JavaScript tags, just to see if I could get that to work. It worked perfectly, but the modal functionality still broke.
I have been able to successfully add the Google Tags to the anchor in the top navigation, and to the arrows on the left and right side of the page. But anytime I try to tag anything else, it breaks.
The agency I'm working with is able to add the google tag to the anchor with no issue when they test it on their server, and I am able to see the event fire if I test it on my local machine. I have to assume there is a problem on my server or with OpenCMS. However, I don't see any error messages in any browser/debugger, and I have validated my script additions with JSLint, and everything checks out.
This is driving me nuts! Can anyone help me figure out why this won't work and how I can add event tags to the page?
Not entirely sure what you're trying to achieve, and if it would work.
$(document).ready(function() {
$("#modal_sizes_1 a").each(function( index, elem ) {
$(elem).click(function() {
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);
});
});
});
Update
Okay, so I think it's about this line:
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);"
>About Cast Iron</a>
And I would try to change it like this
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="setTimeout(function(){
_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);
},0);"
>About Cast Iron</a>
Or even make the delay longer than 0, like 10 or 50.
You can use the callback for the GA push method and add the timeout. In your case try something like this:
var submitBtn = $('.submit-btn');
submitBtn.on('click', function(e) {
var that = this;
if (typeof _gaq != 'undefined') {
e.preventDefault();
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3'], function() {
setTimeout(function() {
window.location = $(that).attr('href');
}, 100);
});
}
});
I hope someone can help. I am missing some logic and styles while I am running the form in JQuery modal window with the 'modal' property is set to 'true'. I am trying to utilize the form from http://jqueryui.com/dialog/#modal-form.
The same code used outside modal window is running correctly. I am not sure how to fix it and decided to share it with you.
I created a page in JSFiddle - http://jsfiddle.net/vladc77/GcQRg/16 to show the code. However, the modal window cannot be ran from there. As a result, I uploaded the same test in here - http://www.vladcdesign.com/modalWindow
When I set (modal: true) then I am getting the following problems.
1.The check boxes in work hours form should enable/disable menus to set the time
2.“More” check box should show/hide a text field
3.I lost ability to set margins between elements in Hours settings form. Now all menus are touching each other even though I use margins styles. They just don’t apply.
All of these issues are present only while I run this DIV in a modal window. It works OK outside the modal window. I am wondering if someone can help and explain what is wrong with the code. Any advice is highly appreciated.
Looking at both the fiddle and the example you posted on your site, you're getting the following error:
Uncaught ReferenceError: closedHours is not defined
The problem appears to be coming from this line:
$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');
Also, the reason you can't get the dialog to load on your fiddle is that you're including the JS files in the wrong order. It should be jquery, jquery ui, and then jquery ui.selectmenu.
Your change function on the checkboxes also has a bug, it should be something like this:
$('input[type=checkbox]').change(function() {
if (!this.checked) {
$(this).parent().siblings('select').removeAttr("disabled");
}
else {
$(this).parent().siblings('select').attr('disabled', 'disabled');
}
});
Even when I changed all that, the checkboxes still weren't working, so I removed your custom jquery and jquery ui references. When I did that, they worked fine so something that you've done to customize those is what's causing your problem. You can view my changes here.
The first $(document).ready(function(){}); and second $(function() { }); are the same, the code will be executed in order they are in these blocks.
However the $(window).load(function(){ }); is a little bit differenet, it gets executed later. Check this post to see the difference.
You could experminet a little with defining the click event to your "Open modal window" button, and do all of the binding when that fires:
$('#create-user').bind('click',function(e){
// To avoid navigating by link
e.preventDefault();
e.stopPropagation();
// Do every binding / appending
// $('.workDayHours').each(function() { ...
});