Ok, so my company has a downloads page allowing visitors to download information about products or catalogs which can be found here: Downloads
The problem is, when you click on the Brandfolder image, a popup is supposed to appear, which works fine on Google Chrome, Opera, & Safari. However in Internet Explorer and Mozilla Firefox I get a console error stating that:
Brandfolder is not defined
referring to this file:
<div class="container-fluid page-downloads" id="downloads-page-container">
<div class="content-well col-sm-10 col-sm-offset-1 col-xs-12" style="float: none;">
<div class="col-xs-12 col-sm-12" style="padding: 0; margin-bottom: 65px;">
<h1 class="downloads-title">BRANDFOLDER</h1>
<hr />
<div class="brandfolder-section col-xs-12 col-sm-6">
<!-- ONCLICK ISSUE --><button onclick="Brandfolder.showEmbed({brandfolder_id: 'finisswim'});return false;" title="FINIS, Inc. Logos & Other Brand Assets" style="border: none; background-color: transparent; padding: 0; margin: 0;">
<img src="/sca/site-images/Brandfolder-Web-Button.jpg" class="downloads-banner img-responsive catalog-img" alt="Brand Folder">
</button>
</div>
</div>
...
...
...
</div>
</div>
<!-- BRANDFOLDER JS FILE -->
<script type="text/javascript" async="true" src="//d2sdf28wg0skh3.cloudfront.net/bf.min.js"></script>
So I made sure that the file is being loaded and that the content matches, which it does. and then I went to the console, logged window, and checked if Brandfolder populated, and it didn't (but it did in Chrome, Opera, & Safari).
Since it wasn't working, I pulled it down to my localhost, fired it up and it worked fine on all browsers... wtf
my localhost is an exact copy of the live site which is hosted through the NetSuite SuiteCommerce Advanced platform (hate this platform with a passion) any ideas what could be going wrong, seeing how it works in chromium-based browsers but not in others, and works fine in a development environment?
any input is appreciated! - Thanks
Paul with Brandfolder here. For some reason, probably due to NetSuite, the JS snippet for bf.min.js isn't getting loaded in Firefox but it is on other browsers.
Make sure that the following JS code is getting fired on every browser:
<script type="text/javascript">(function(){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src="//cdn.brandfolder.com/bf.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
I set breakpoints on the following function:
if (document.addEventListener && document.addEventListener("DOMContentLoaded", init, !1),
/WebKit/i.test(navigator.userAgent))
var _timer = setInterval(function() {
/loaded|complete/.test(document.readyState) && (init(),
clearInterval(_timer))
}
, 10);
window.onload = init;
The init function is called only on webkit because of the /WebKit/i.test(navigator.userAgent) statement.
In my opinion the DOMContentLoaded event is fired before the script is loaded successfully.
Related
I'm making a Google Forms add-on with Google Apps Script with an HTML file for its UI. I've pretty much taken the quickstart and changed a few things.
It's embarrassingly my first time doing any sort of HTML.
In my UI, I have a button:
<div class="sidebar branding-below">
<form>
<div class="block" id="button-bar">
<button id="deactivate" class="action" onclick="deactivatePressed()">Deactivate</button><br><br>
<div id="deactivation-confirmation"></div>
</div>
</form>
</div>
Here's the corresponding javascript that calls the google apps script that actually does the work:
function deactivatePressed() {
google.script.run.addTrigger(false);
document.getElementById('deactivation-confirmation').innerHTML = "Success!";
}
The button shows up and the function called is successful.
The issue is that pressing this button also opens up a new blank tab to a specific link that looks like this:
https://n-it2esyxcfj91uyg675645seyxh42jvgbfydr5e6u56y-0lu-script.googleusercontent.com/userCodeAppPanel?
In the console, it runs an error message that reads:
Unsafe JavaScript attempt to initiate navigation for frame with origin
'https://docs.google.com' from frame with URL
'https://n-it2esyxcfj91uyg675645seyxh42jvgbfydr5e6u56y-0lu-script.googleusercontent.com/userCodeAppPanel'.
The frame attempting navigation of the top-level window is sandboxed,
but the flag of 'allow-top-navigation' or
'allow-top-navigation-by-user-activation' is not set.
How do I make sure a new tab isn't opened when the script is run?
I'm sure it's in the HTML/js and isn't the Google Apps Script code since I commented out the body of the Google Apps Script function and the problem still occurred.
It's because the button was within the <form> tags.
Change it to this:
<div class="sidebar branding-below">
<div class="block" id="button-bar">
<button id="deactivate" class="action" onclick="deactivatePressed()">Deactivate</button><br><br>
<div id="deactivation-confirmation"></div>
</div>
</div>
I am creating a web site for fellow retirees. One page displays some pdfs (works fine in Moz & Chrome) which the user can select pdfs of different sort orders but doesn't work in Edge or IE.
(calling code)
<p id="test" onclick="fnByDay()">Sorted by Day</p>
<p id="rest" onclick="fnByType()">Sorted by Type
<div id="courseList">
<script>
function fnByDay(){
document.getElementById("CoursesPdf").data="coursesByDay.pdf";
}
function fnByType(){
document.getElementById("CoursesPdf").data="coursesByType.pdf";
}
</script>
<object id="CoursesPdf" data="_pdf/coursesByDay.pdf" width="1080" height="900"></object>
</div>
Please help.
I am using the jquery-word-export plugin (developed by Marks Windoll) to export my webpage to a .doc document. Everything works fine in Google Chrome, but not in Mozilla Firefox. I am getting the following error when I click the export button:
SyntaxError: export declarations may only appear at top level of a module
NS_ERROR_NOT_AVAILABLE
The strange thing is, it works sometimes by refreshing the webpage.
What does this mean and how can I solve this? Is there another solution (using another export library perhaps)
EDIT: my code is as follows:
<div id="export-content">
<!-- PROFILE PICTURE -->
<div id="divProfielfoto" ng-controller="profielfotoCtrl">
<img id="profielfoto" ng-src="{{profielfoto}}" alt="profielfoto" style="width: 125px;height:125px;margin-bottom: 20px; border-radius:50%; border: 7px solid orange;" /></div>
<input style="display: none;" id="profileUpload" type="file" accept="image/*"/>
<!-- PROFILE PICTURE END -->
</div>
<button class="word-export" onclick="export()">Export as .doc</button>
and the code for exporting is as follows:
$(".word-export").click(function (event) {
$("#export-content").wordExport("CV " + naam);
});
I have found the answer. In the beginning the path to the profile picture was nothing. After you upload a profile picture (and the path points to a valid picture) everything works
I have an issue with one floating box on my website, this floating box was created with JavaScript (I did not code it myself). The code of this floating box looks like this:
<!-- START - popup-box -->
<script type="text/javascript">
var infobox_open = true;
function slide_infobox(){
if(infobox_open){
$("#infobox").animate({left:-180},500);
infobox_open = false;
}else{
$("#infobox").animate({left:0},500);
infobox_open = true;
}
}
</script>
<div id="infobox" class="infobox_container">
<div class="infobox_content">
<float-title>MY TITLE</float-title>
<div>
<script type="text/javascript" src="//app.example.com/data/webforms/191361/j171g722op1.js?v12"></script>
</div>
<div>
<a class="povprasevanje" href="http://www.example.com/link/">Pošljite povpraševanje</a>
</div>
</div>
<div class="infobox_button" id="infobox_button">
<img src="http://www.example.com/infobox_button.png" />
</div>
<div class="clear"></div>
</div>
<!-- END - popup-box -->
In the FF, Opera, Chrome browsers it's displayed properly (see the example here), but in IE browsers (currently viewing IE 9), that's not the case, as it floats too high. Please see this image to see the difference. It works properly in Microsoft Edge browser, though.
I guess the question is: How can I fix this issue, is there anything that should be done with JavaScript code itself in order to IE 9 displaying it properly?
This seems as a CSS issue and not JS.
So in your CSS code add this:
#infobox {
position: absolute; // It should be positioned absolute
top: 200px; // Or the pixels from top or from relative parent you want
}
And it should work. If not please update your code and add your CSS code.
I have a question about a project i'm working on.
The website is www.AC-photography.net
When opened in Firefox, the "start scrolling" can be clicked on but when opened in chrome it seems that there is something in front of this layer. Can someone assist on how to make this work in chrome. I will post the html concerning
<div id="main">
<header id="top">
<div class="color_bar"></div>
</header>
<div class="title">
<div class="logo">
<img src="images/logo.png" alt="" />
<!-- <p class="intro_text"> Alex Cherkasov | Art Director </p>-->
<p class="sub_intro">Start Scrolling</p>
</div>
</div>
The direct problem seems to be z-index: auto on your .title class - set this higher than 800, and it should be fine in Chrome.
That aside, you could also do with cleaning up syntax - a paragraph inside an anchor (block level inside inline), with the second not actually defined as block, is asking for trouble!
It looks like it's missing a closing </div> tag. That might be the problem.