Filepicker - Modals opens on page load - javascript

I'm integrating Filepicker into a form on a web page. Everything is working fine but I cannot stop the modal from opening by itself on each page load. I can't find a way of disabling this.
Here's the set up I'm playing with at the moment:
<script>
// Set up the API key
filepicker.setKey("XXXXXXX");
filepicker.pickAndStore(
// picker_options
{
openTo: 'COMPUTER',
services: ['CLOUDDRIVE','COMPUTER','DROPBOX','FACEBOOK','GITHUB','GOOGLE_DRIVE','GMAIL','SKYDRIVE','URL','FTP','CLOUDAPP'],
maxSize: 20971520,
},
// store_options
{
},
function(Blobs){
console.log(JSON.stringify(Blobs));
},
function(error){
console.log(JSON.stringify(error));
},
function(progress){
console.log(JSON.stringify(progress));
}
);
</script>
Same thing happens on codepen so it's nothing in the rest of the page that causes it.

Since you're picking a file, you should have the action of the pickAndStore function within the function called when you click a button to activate it.
var button = document.getElementById('filePick');
button.onclick(function() {
filepicker.pickAndStore({
//etc.
});
});

Related

JS plug-in breaks other scripts when not required on page

I'm using a plug-in for my responsive navigation (http://responsive-nav.com). The plug-in works great, the problem I'm having is there is not navigation on every page. When this is the case I've noticed other javascript doesn't load and I get an error in reference to "responsive-nav.js":
Uncaught Error: The nav element you are trying to select doesn't exist
Here's how I load the script in the main.js file.
$(function(){
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
});;
The file is called on each page (/js/responsive-nav.js) but removing it doesn't resolve the issue, commenting out the code I've typed above does - so I'm guessing it's something to do with that?
Hope someone can help, cheers!
After speaking with the author of the plug-in he advised I just wrap the script in an 'if statement'.
Here's what we ending up using:
$(function(){
if ($(".site-nav__list").length) {
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
}
});
Simple. Works like a charm :)

Function won't run on page load

I have changed the a function to load on page load but it will not do it.
The original code which runs with a link:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: text });
});
Welcome,
This chat is awesome
My code which should run on page load:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: "{$Artikel->cName}" });
}
window.onload = updateBannerText;
I have changed updateBannerText(text) to updateBannerText() but it was not possible to run it.
The problem is that the Smartsupp widget itself only starts to load on the page load, so your window.onload function runs before the widget is properly initialized and thus has no effect. You can test this by delaying the banner update, which should have an effect:
window.onload = function () { setTimeout(updateBannerText, 5000) }
To get around this, you should attach your startup code to an appropriate Smartsupp widget event, say, the rendered event for updating the banner:
smartsupp('on', 'rendered', function() {
updateBannerText('whatnot')
})

Exit Intent function is working, but no modal is popping up as expected

I'm putting an exit intent feature on my wordpress website and am having an unusual problem.
After loading in the script via wp_enqueue_script in functions.php, I then put the below function in my scripts file. It pulled in just fine.
After I access inspect element in chrome the console is indeed printing 'ouibounce fired'. However, nothing afterwards is working and no modals are popping up.
Also, just to eliminate another possibility,styles for the below ouibounce have been loaded into my styles file.
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 1,
callback: function() {
console.log('ouibounce fired!');
}
});
body.on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
Thanks for your help in advance!
Well I figured it out.
My filewatcher on my styles file was not compiling due to a sass-cache file. I restarted my editor and it worked just fine.

Form Has No Javascript Functionality When Displayed In Colorbox

I have a form with drop-down hierarchical fields with functionality derived from a JavaScript plugin called mcDropdown jQuery Plug-in.
The actual form is on a secondary page (Test.php) and set up to display on the main page through a Colorbox popup with the results also displayed in the Colorbox upon form submission.
The form submits and displays correctly in the Colorbox in its native HTML format when the JavaScript is removed (i.e. just using plain drop-down boxes).
However, when the Javascript is implemented in the form allowing the hierarchial drop-down structure of the fields there is no JS functionality when rendered through Colorbox.
Since the actual page that the form is on (Test.php) works fine by itself with the Javascript, there appears to be some issue rendering the JS through the Colorbox.
My research has indicated that this may be due to trying to access an element before it has been loaded into the document.
The Colorbox website states that this can be resolved by moving the JavaScript into ColorBox's onComplete callback; however, even with the example given, I cannot figure out how to do this correctly as I am a complete novice when it comes to JS.
Here is the drop-down script on the secondary page that has the form and ties into the external plugin (note that there are three fields in this form that use this JS hierarchical configuration):
<script type="text/javascript">
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",
{
targetColumnSize: 3,
}
);
$("#category1").mcDropdown("#categorymenu1",
{
targetColumnSize: 3,
}
);
$("#category2").mcDropdown("#categorymenu2",
{
targetColumnSize: 3,
}
);
});
</script>
Here is the Colorbox script on the main page that opens the secondary page in the Colorbox window:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit();
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The three external files are: jquery.mcdropdown.js, jquery-1.2.6.min.js and jquery.bgiframe.js.
How can this Colorbox script on the main page be modified so the JS functionality of the form is preserved when displayed through Colorbox?
Thank you in advance for any detailed answers for this beginner.
Here is the answer:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit(), $('#category').mcDropdown('#categorymenu'),$('#category1').mcDropdown('#categorymenu1'),$('#category2').mcDropdown('#categorymenu2');
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The respective JavaScript functions for each drop-down box in the JS form are integrated into the Colorbox onComplete: function() so each of these form elements is loaded before it is accessed through Colorbox.

Google Analytics Event Tracking: __utm.gif never finishes loading

I have a requirement to track downloads of PDF files in my site.
I am using my own plugin to achieve this: https://github.com/rsleggett/Quick-Event-Tracking
However, underneath all it does is call the trackEvent function with the correct parameters. My problem is that when tracking the PDF download the event is fired but never finishes loading:
Here's my code:
Track lots
<script>
$('.track-pdf').gaTrackEvent({
category: 'Download',
action: 'PDF',
labelAttribute: 'href',
useEvent: true,
event: 'click'
});
</script>
Here's what I see in the Network panel for firebug:
This request never completes and this doesn't seem to be recorded in Google Analytics.
Does anyone have any ideas why?
I have tried adding a delay before changing the document.location like this:
Track lots
<script>
$('.track-pdf').gaTrackEvent({
category: 'Download',
action: 'PDF',
labelAttribute: 'href',
useEvent: true,
event: 'click',
complete: function (elem, e) {
setTimeout(function () { document.location = $(elem).attr('href') }, 100);
e.preventDefault();
return false;
}
});
</script>
This seems to work - the request completes if I look at it in fiddler. However, this feels hacky and I don't really want my downloads to open in the same window (it breaks my requirements anyway).
Any ideas?
You can use javascript to remove the node which contains __utm.gif

Categories

Resources