I have a script that working perfectly on Chrome, but in Firefox there is no action after hovering linked object.
I tried to divide the script.js file for separate documents, but It won't help at all.
Here is the whole effect:
https://jsfiddle.net/lszewczyk45/9unawydo/9/
$(document).ready(function () {
const effect = new Effects('hover-effects');
effect.addEffect(document.querySelector('#cityEffect'), 'city', [ONMOUSEOVER]);
});
I think the problem is in calling the script - the lines at the end of the file, I pasted it above.
This is what FireFox says about your Javascript code:
I solve it, pasted in https://babeljs.io/, compile and change the js code.
Related
I'm new to Polymer and as far as I've read about it, it isn't compatible with Mozilla and Safari or it has issues. I've read in StackOverflow that adding
addEventListener('WebComponentsReady', function() {
});
would help the browsers cope up with the code. Now, I've tried it on my code it works. The content is displaying properly in Mozilla, however, it messes up the Javascript that I wrote along with Polymer. I tried two options, the first one
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
}); });
I did this and there are still error logs on the console while if I wrap the whole script, it wouldn't work as well. Example:
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
});
// extra code here
});
I think wrapping addEventListener to the whole code is also causing the problem. Any ideas how to fix or are there any other viable options than adding an event listener to the code?
Try using Polymer-CLI
It comes with some polyfills out of the box.
I'm not sure whitch ones but it does include the one your inquiring about.
https://www.polymer-project.org/1.0/docs/tools/polymer-cli
It looks like using
addEventListener('WebComponentsReady', function() {
});
is messing up my Javascript because it has a conflict with
addEventListener('HTMLImportsReady', function() {
});
I had to remove it in order for the script to work properly.
I would first like to state that I started learning HTML 5 days ago, and therefore I am very new to everything.
I am trying to implement the code given here: http://jsfiddle.net/NFXzn/9/.
But for some reason the dropdown menu is blank. I have uploaded my code here: http://gbrowse2014.biology.gatech.edu/viru.html
Since I did not make the code, I am assuming the problems lies with how I implemented the code (specifically the javascript). I have narrowed the problem down to one particular function:
$.each(g_Vehicle, function(index) {
var iYear = g_Vehicle[index].Year;
if ($.inArray(iYear, g_YearsArray) == -1) {
g_YearsArray.push(iYear);
}
});
I am using firefox, and I have gone through www.w3schools.com to look for implementation tips, but I have not corrected the problem.
On a sidenote, does anyone know how to change the code to use the dropdown-checkboxes instead of the dropboxes?
That loop is working fine. The problem is that you're running the code before your select is loaded, so nothing is being appended to the page. Either wrap your code in $(document).ready( function() { ... });, or move your <script> blocks to the bottom of the page (after the HTML has completely loaded).
http://learn.jquery.com/using-jquery-core/document-ready/
(On the top-left corner of the jsFiddle page, you'll see a dropdown which displays onLoad -- which is automatically doing that job for you. Your page as it stands is the equivalent of No wrap - in <head> -- not what you want.)
I have a javascript file connected to my XUL file as follows:
<script type="application/javascript"
src="chrome://myexample/content/myexample.js"/>
The overlay from the XUL file is displayed in Firefox, but my functions aren't working.
e.g.
<statusbar id="status-bar">
<statusbarpanel id="f1"
label="f1"
onclick = "MyExample.f1()"
/>
</statusbar>
myexample.js file looks like:
var MyExample = {
f1: function() {
},
f2: function() {
}
}
This is my chrome.manifest:
content myexample content/
overlay chrome://browser/content/browser.xul chrome://myexample/content/myexample.xul
Where could be the fault?
There doesn't seem to be anything wrong with the code you posted, apart from the missing = in
var MyExample = {
...not sure if that's a typo in the original code or just in the snippet here.
Did you set the javascript.options.showInConsole and check the Error Console? Are there any messages there when you open the window you try to modify?
You could also be hitting the fact that the chrome code is cached. The effect is that the code you have in your file is not the same code that's running in Firefox. The way to deal with it is to set the disable_xul_cache pref mentioned on the same page as the showInConsole pref I linked to above (and/or run with -purgecaches param). If you have any doubts, make an observable change (i.e. one that has to change the observed behaviour, e.g. pops an alert) to the file you think is cached.
[edit] also you could try opening chrome://myexample/content/myexample.js in a tab to see if the chrome.manifest magic is working correctly and you got the URL right, but I guess in your case it's fine.
You dont need MyExample. part.
I am stuck on this, please help!
I have an external Javascript that inserts code on my page. Among other things it inserts an image wrapped in a div. I do not have control over the script, but I would like to change the image path/url using Jquery.
This is what I have done:
$('.ProductImage img').attr('src',function(index,attr){
return attr.replace('small','original');
});
Works like a charm in all browsers except IE.
When checking the selector with alert(), IE returns %Thumbnail% which is the Javascript variable/object. I have tried wrapping my script in a timeout to allow IE to finish loading but no luck.
Any ideas?
Thanks in advance!
Have you tried wrapping your code inside $(function(){ .. }) so that it will run after the document finished loading?
If your script is not loaded by the time your code gets executed you could try putting the code inside window.onload
window.onload = function(){
replaceImages();
};
function replaceImages(){
$('.ProductImage img').attr('src',function(index,attr){
return attr.replace('small','original');
});
}
I have an ASCX component that has a lot of javascript declared in a script tag in the ascx itself. I can set breakpoints, and the debugger stops as it should, but the text that is highlighted in the debugger as the "current line" is nowhere near the actual javascript (it is much higher in the rendered file than it should be). I can "wing it" for one or two lines with the real code side-by-side with the "false" line of execution, but I lose all the hover abilities and everything else that makes javascript debugging useful.
I have tried putting the script at the top of my ascx file, but to no avail. I've tried not setting a breakpoint until the entire page is rendered, so that I have to scroll all the way to where the actual lines of code are, and the debugger still stops somewhere way above it.
Has anyone else seen this or no how to get around it?
Please don't answer with suggestions about using a different browser. This site doesn't work except in IE7 and IE8.
Thanks!
Finally!!!
I have been looking for a solution to this question for MONTHS!
This worked for me:
<script type="text/javascript" language="javascript">
debugger
function ThrowError() {
$(function () {
$.openDOMWindow({
loader: 0,
width: 500,
height: 250,
windowSourceID: '#ErrorAlert'
});
return false;
});
}
function CloseError() {
$(function () {
$.closeDOMWindow({});
return false;
});
}
if ("False" == "True") ThrowError();
</script>
I don't know if I'm using it correctly, but it seems to give me what I need.
Thank you!!
Move the script to an external JS file.
(This is good practice anyway)
I'm dealing with the same issue as you're. I can't move the js code to an external JS (because the guy who wrote the code is using the variables of .cs with <%= var %>. The simplest solution that i've found is write debugger; wherever you want the browser to start debugging the script.