Magnific Popup - Delay popup for 100 seconds & make close work like checkmark - popup

I am not a javscript coder so I need some help on this.
I would like the popup to load after 100 seconds.
I would like that if the user clicks on the close X that the popup closes for 30 days for that user...much like the click in dismissal does now.
If you can help me out with this I would be very happy :).
Here is the code I am using for my Magnific Popup:
var et_popup_closed = $.cookie('etheme_popup_closed');
$('.etheme-popup').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
if(et_popup_closed != 'do-not-show') {
$('.etheme-popup').click();
}
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
if($('#showagain:checked').val() == 'do-not-show')
$.cookie('etheme_popup_closed', 'do-not-show', { expires: 30, path: '/' } );
});

to initialize the popup with delay, use setTimeout
$(window).load(function () {
setTimeout(function(){
$.magnificPopup.open({
items: {
src: '#ID' //ID OF INLINE ELEMENT
},
type:'inline',
mainClass: 'my-mfp-zoom-in'
});
}, 100000); // equals 100 seconds
});
you can change the type:'inline' part by anything (like type:'image') and change the src
you can view a demo here (opens after 18 seconds after window load)
for the cookie part, i have been been trying to figure it out too..

Related

Open tui imageeditor in a modal

hello i search a solution to load tui image editor in a html modal
i have a form with many image, i want to add a button to edit it, and it will be open a modal with image inside ...
my idea is to add script in page and js event in button ... but i don't known how
some on can help me ?
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage'
},
theme: blackTheme, // or whiteTheme
initMenu: 'filter',
hideHeader: 1,
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
Regards

Page automatically go to the top when opening a dynamic jquery dialog box first time

I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'
+ dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
position: {
my: "center",
at: "center",
of: window
},
buttons: {
OK: function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.
I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.
Please advice how i can fix it for word add-in.
You can try below code when you are calling your function :-
onclick="myConfirm();return false;"
Just add "return false;" after your function name as shown above.
Edit 1:-
Or you can return false from your function as well.
Edit 2 :-
$form.show().dialog({
close: function (event) { event.preventDefault(); }
resizable: false,
etc....
});

Closing only particular FancyBox when having multiple Fancybox

In a given page, I have multiple instances of Fancybox items that will show up an video when clicked on a link.
Apart from those, I have a function running every 5 seconds to get data from a URL and display another fancybox based on the return value.
The problem is that, as the setInterval function runs always, even if the actual video is played, it closes that video as I use $.fancybox.close().
All I wanted is to close only the fanybox identified by myModal.
This is the jQuery that I use.
$(document).ready(function() {
function myplugin() {
$.getJSON("get-status.php", function (data) {
$.each(data, function (key, status) {
if(status > 0) {
$("#myModal").fancybox().click();
}else{
$.fancybox.close(); // Works. But closes other open Fancybox if any
//$("#myModal").fancybox().close(); // Does not work
}
});
});
};
$(function() {
setInterval(function() { myplugin() }, 5000);
});
});
Well, I am not completely sure I understood your question, however since it's not very easy to know if #myModal is currently opened in fancybox (outside of the fancybox function itself), I would create a flag or switch that would be enabled from within a fancybox callback IF #myModal is the current element opened.
Then, from myplugin() I would validate if the switch is true (#myModal is the current element) and if so, close fancybox.
The script would look something like this (not tested because I don't really know what myplugin() does) :
// declare a switch to set if #myModal is open in fancybox
var myModal = false;
$(document).ready(function () {
function myplugin() {
$.getJSON("get-status.php", function (data) {
$.each(data, function (key, status) {
if (status > 0) {
$("#myModal").fancybox({
// use a callback to set the switch = true
afterShow: function () {
$(this.element).attr("id") == "myModal" ? myModal = true : myModal = false;
}
}).click();
} else {
// close fancybox if myModal == true
if (myModal) {
$.fancybox().close();
myModal = false; // reset switch ?
}
}
});
});
};
// you don't need $(function(){ }); since you have declaread .ready() above
setInterval(function () {
myplugin()
}, 5000);
});
I tried this below one and it worked.
$("#myModal").parents("div .fancybox-skin").hide();
Please advice if there any other better way to do this.

How do display a progress spinner in a Dojo FilteringSelect?

I have a Dojo FilteringSelect that takes about 20 seconds to load its values from the dB when the user clicks the arrow in the list box. I'd like to display a progress spinner while waiting for the data to be returned from the dB. Any ideas what event I would use to show my spinner when the data is being retrieved from the db and what event to hide the spinner when it completes? Thanks...
new FilteringSelect({
store: new dojo.data.ItemFileReadStore({ url: "some url here" }),
autocomplete: true,
maxHeight: "300",
required: false,
id: "country_select_id",
onChange: function(data) {
dojo.byId("case_info_status").innerHTML = " ";
}
}, "country_select_id");
I bet you could go a long way in the select._fetchHandle deferred and the store._fetchItems. Try this
var select = new .... Your FilteringSelect Construct( {} );
select._fetchHandle.addCallback(function() {
// success callback
dojo.style(dojo.byId('spinner'), "display", "none");
});
dojo.connect(select.store._fetchItems, function() {
if(select.store._loadFinished) return; // no-op
dojo.style(dojo.byId('spinner'), "display", "block");
});
EDIT:
select._fetchHandle will only be present briefly during the actual download (suppose we can hook onto it after select onOpen called). Instead, another private method in ItemFileReadStore comes in handy
dojo.connect(select.store._getItemsFromLoadedData, function() {
dojo.style(dojo.byId('spinner'), "display", "none");
});

Tumblr Audio Player not loading with Infinite Scroll

I implemented infinite scroll along with masonry on this tumblr: [check revision for link]
The audio player does not appear in posts loaded through infinite scroll, instead it displays the text "[Flash 9 is required to listen to audio.]"
The Inspire Well tumblr theme (I can't post another hyperlink but you can easily google it) seems to have solved this problem through this code:
if(InspireWell.infiniteScrolling && InspireWell.indexPage){
$masonedColumn.infinitescroll({
navSelector : 'ul.page_nav', // selector for the paged navigation
nextSelector : 'ul.page_nav li.page_next a', // selector for the NEXT link (to page 2)
itemSelector : '.post', // selector for all items you'll retrieve
loadingImg : '',
donetext : 'No more pages to load.',
errorCallback: function() {
// fade out the error message after 2 seconds
//$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// call masonry as a callback
function( newElements ) {
$(newElements).css({ visibility: 'hidden' });
$(newElements).each(function() {
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".player span").css({ visibility: 'hidden' });
var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
$("body").append(script);
$.ajax({
url: "http://thetestinggrounds.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".player span").css({ visibility: 'visible' });
$audioPost.find("span:first").append('<script type="text/javascript">replaceIfFlash(9,"audio_player_' + audioID + '",\'\x3cdiv class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e\')</script>');
}
});
}
});
I tried to adapt this for my tumblr (with placeholder text to see if it was finding the correct element):
$(window).load(function(){
$('#allposts').masonry({
singleMode: true,
itemSelector: '.box'
});
$('#allposts').infinitescroll({
navSelector : "div.navigation",
nextSelector : "div.navigation a:first",
itemSelector : ".box",
debug : true
},
function( newElements ) {
$(this).masonry({ appendedContent: $( newElements ) });
$(newElements).each(function(){
if($(this).hasClass("audio")){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$audioPost.find(".audio span");
var script=document.createElement('script');
script.type='text/javascript';
script.src="http://assets.tumblr.com/javascript/tumblelog.js?16";
$("body").append(script);
$.ajax({
url: "http://fuckyeahempathy.tumblr.com/api/read/json?id=" + audioID,
dataType: "jsonp",
timeout: 5000,
success: function(data){
$audioPost.find(".audio span");
$audioPost.find("span:first").append("<p>audio player not working</p>");
}
});
}
});
}
);
});
But there is no sign of the text. Any help would be greatly appreciated.
Here is a solution I came up with when I needed to implement the same functionality in the template I was creating.
In your HTML, include your AudioPlayer Tumblr tag between comments. This is to prevent loaded scripts from being called. Also add a class "unloaded" to keep track whether or not we've loaded the audio player for this post or not.
...
{block:AudioPlayer}
<div class="audio-player unloaded">
<!--{AudioPlayerBlack}-->
</div>
{/block:AudioPlayer}
...
If you look at the commented code after the page is loaded, you will notice an embed tag being passed to one of the Tumblr javascript functions. Since we commented it, it will not execute. Instead we will want to extract this string and replace the div contents with it.
Create a javascript function which will do this. This can be done with regular javascript, but to save time I will do it with jQuery since this is how I did it for my template:
function loadAudioPosts() {
// For each div with classes "audio-player" and "unloaded"
$(".audio-player.unloaded").each(function() {
// Extract the <embed> element from the commented {AudioPlayer...} tag.
var new_html = $(this).html().substring(
$(this).html().indexOf("<e"), // Start at "<e", for "<embed ..."
$(this).html().indexOf("d>")+2 // End at "d>", for "...</embed>"
);
// Replace the commented HTML with our new HTML
$(this).html(new_html);
// Remove the "unloaded" class, to avoid reprocessing
$(this).removeClass("unloaded");
});
}
Call loadAudioPosts() once on page load, then every time your infinite scrolling loads additional posts.
html
<div class="audio" id="{postID}">{AudioPlayerBlack}</div>
css
.audio {
height:30px;
overflow-y: hidden;
}
.audio span {
display:none;
}
java
setTimeout(function() {
$wall.masonry({ appendedContent: $(newElements) });
/* repair audio players*/
$('.audio').each(function(){
var audioID = $(this).attr("id");
var $audioPost = $(this);
$.ajax({
url: 'http://yoolk.tumblr.com/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
$audioPost.append('\x3cdiv style=\x22background-color:white;height:30px\x22 class=\x22audio_player\x22\x3e' + data.posts[0]['audio-player'] +'\x3c/div\x3e');
}
});
});
}, 2000);