I was testing stuff in JSFiddle (with jQuery 1.9.0 included as an external ressource), and I basically had something like this in my HTML :
Hello world!
Under Chrome Inspector (v.35) / Script / index file, I spotted that AdBlock Plus (even toggled off) probably added these lines in my HTML's source :
<script>
(function () {
with(this[2]) {
with(this[1]) {
with(this[0]) {
return function (event) {
alert('Hello world!'); //Same as my onclick up there
};
}
}
}
})
</script>
I've never seen something like this, I guess it is meant to be a protection, but I can't figure what's its purpose.
What could do this code? Any guess?
Disclaimer : I'm sorry, I tried hard but I'm absolutely unable to reproduce this for the moment, apart for my own case...
Edit
I though it was impossible to reproduce even by opening my fiddle in another tab, but in fact, it seems to be possible. So, here's the fiddle, activate AdBlock plus, and here's how to see this :
Meanwhile, I'm trying to create a case where it's 100% reproductible, I'll post it here as soon as possible.
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'm sure the title looks like something that's been asked before but I've searched for the answer to this and I can't find it.
I'm really very new to coding, so please excuse any really obvious mistakes I've made.
Context to the code I'm working on: I'm in a Game Design class and I've decided to take up a personal project making an HTML JS game.
I understand that the code is possibly rough / bad / definitely-not-the-best-way-to-do-things, but it will continue to be so until I improve my skills (or am given advice on how to improve it).
What I need help with: For two to three weeks, I could not figure out how to get a button to appear when implemented inside of an if else statement.
Like so:
if(condition)
{
document.write("text");
//desired button here
}
else
{
//Backup code
}
Eventually I figured two ways to do that (for Chrome and Internet Explorer).
First way:
function myFunction()
{
document.close();
document.write("text");
/* There will be buttons in here
too when I get things working. */
}
//In separate script tags
/* myFunction() dwells in the head of the
page while the if statement is in the body
and another function*/
if(condition)
{
document.write("text");
var gameElement=document.createElement("BUTTON");
var text=document.createTextNode("CLICK ME");
gameElement.appendChild(text);
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
else
{
//Backup code
}
The second way:
(The same function, they're both in the same places).
if(condition)
{
document.write("text");
var gameElement;
gameElement = document.createElement('input');
gameElement.id = 'gameButton';
gameElement.type = 'button';
gameElement.value='Continue';
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
This works well for me.
And while it works in IE and Chrome fine, it doesn't work in Firefox.
After how much time and research I've put into just this button, I'd love to know why it won't show up in Firefox. I've read a lot about Firefox and how .onclick won't work or something like JavaScript has to be enabled or disabled. I'm just a bit confused.
I'm also open any real / relevant advice.
I set up this fiddle. I removed your document.write() calls because they're disallowed in JSFiddle, and change your condition to true so the code would work, and it works in FF24.
document.write() might be the cause of your problem. It's bad practice anyway because it can cause a re-parse of a document, or wipe the entire document and start writing it again. You're already using some DOM manipulation to add the button. I suggest you do likewise for anything you're considering using document.write() for.
Instead of suggesting a solution to your problem, I would suggest you take a look at jQuery, which is a very nice JavaScript framework, that makes it possible for you to write cross-browser compatible code, which it seems is your problem here.
Using jQuery, you would be able to write something like:
$("#gameButton").click(function() { myFunction(); }
which would trigger your myFunction() function, when the control with the id 'gameButton' is clicked.
Visit www.jquery.com to learn more
This is my site URL which is developed in magento(www.theprinterdepo.com), when a user searches, the page automatically scrolls down to the bottom. I have no idea if this due to any php code, jquery or javascript but I need help to detect and fix this.
I would paste code here, but I don't know what's responsible for this behaviour.
I thought it was IE problem, but its also reflects in Google Chrome.
thanks
<script type="text/javascript">window.onload=function()
{
var deftxt='Test';
var def=document.getElementById('ea');
def.onfocus = function()
{
this.value=(this.value==deftxt)?'':this.value;
}
def.onblur= function()
{
if(this.value=='')
{
this.value=deftxt;
}
else
this.value;
}
***def.focus();***
def.blur();
}</script>
Here the textbox having id "ea" is set focus on. Please remove "def.focus();". Your issue will be solved.
Remove def.focus() from your script tag in the footer.
Perhaps unrelated - but unless I am mistaken - you have an accidental closure/circular reference. When you reference a JS object that contains a reference to a DOM object, which in turn references the JS object - you have a closure that creates a circular reference. In this case def.onBlur() / def.blur() is the culprit. (See the code below - a textbook example of a circular reference.) Not sure if this is causing your issue, but this is definitely something I would look into.
<script>
myFunction(){
var elObj = document.getElementById('myDiv');
elObj.onclick= function() {
alert('This function is leaking.');
}}
myFunction();
</script>
I'm attempting to embed the very convenient Google Translate translate element into a webpage, which is super simple and works great, but I need to change the default text that displays in the resulting HTML:
Having worked with a number of Google APIsand js libraries, I figured this would be no problem as it would almost certainly be configurable, but having looked around for some time I can't find any reference to a property that let's you set this, and documentation in general seems to be pitiful. The basic code is:
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
var translator = new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
multilanguagePage: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Having dispaired of being able to set this as a property in the when I create the translator, I decided to hack it and use an onDOMNodeInserted listener to just change the resulting HTML once it had loaded into <div id="google_translate_element"></div>. I'm using jQuery here, so my code is:
$(document).ready(function(){
$('#google_translate_element').bind('DOMNodeInserted', function(event) {
$('.goog-te-menu-value span:first').html('Translate');
});
})
And here's where things get interesting. Chrome loads everything perfectly and does the innerHTML substitution beautifully. Internet Explorer (8) ignores the DOMNodeInserted listener altogether and the page loads as if the jQuery function was never called. Firefox (10) appears to load fine (but with no translate element at all) and then freezes, begins gobbling up memory, and crashes.
Any thoughts on how I can get this innerHTML substitution to work? If you're aware of a displayLabel : "Translate"-like property that is of course preferred, but barring that (and a really ugly setTimeout hack) is there any way I can get this to work?
You can do it using CSS, only it will not change the label when a language is selected.
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span:first-child{display: none;}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value:before{content: 'Translate'}
Like you I can't find out how to customize the gadget via init params but it appears possible to write your own customized gadget in HTML then invoke g.translate functionality on it. See http://www.toronto.ca/ (page footer). I'm afraid you will have to do some more digging to see exactly how it's done.
This use of g.translate is also referenced here. Unfortunately the discussion is quite old now but hopefully still relevant.
I'm using this code which checks every 3ms if the translate module has been yet loaded into the page; if so, it then updates the text and clears the interval check after.
function cleartimer() {
setTimeout(function(){
window.clearInterval(myVar);
}, 1000);
}
function myTimer() {
if ($('.goog-te-menu-value > span:first-child').length) {
$('.goog-te-menu-value > span:first-child').html('Translate');
cleartimer();
}
}
var myVar = setInterval(function(){ myTimer() }, 300);
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.