the following code works perfectly in FireFox 7, but when pulling up the same page in IE 9, the jQuery functions (hide and show) don't work. However if you open debugger in IE and refresh, everything works fine. It's like the jQuery code won't work unless debugger is running and you refresh the page (or start IE with debugger on), which makes it difficult to debug obviously.
all the CSS and scripting are included for this sample. If I need to include any other information please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--<link href="_css/main.css" rel="stylesheet" type="text/css" />-->
<style>
html, body {
margin: 0px;
padding: 0px;
}
#wrapper {
width:1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
#sidebar {
width: 100px;
height:100%;
float: left;
background-color: #FF0;
}
#maincontent {
float: left;
width: 400px;
height:100%;
;
background: #c1d8b9;
}
#right {
width: 500px;
background-color: #0F3;
float: right;
height: 100%;
}
body {
background-color: white;
}
ul
{
list-style-type: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="wrapper">
<div id="sidebar"> Sidebar
<ul >
</ul>
</div>
<div id="maincontent"> Main content
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<ul id="listMiddle">
<li id="li1">TEST1</li>
<li id="li2">TEST2</li>
<li id="li3">TEST3</li>
<li id="li4">TEST4</li>
</ul>
</div>
<div id="right"> Right
<ul id="listRight">
</ul>
</div>
</div>
<script>
var arryLIs = document.getElementsByTagName('li');
var middleUL = document.getElementById('listMiddle');
var rightUL = document.getElementById('listRight');
var arrymiddleLIs = middleUL.getElementsByTagName('li');
var arryrightLIs = rightUL.getElementsByTagName('li');
for (var i=0; i<arryLIs.length; i++){
arryLIs[i].onclick = moveright;
//console.log(arryLIs[i].innerHTML);
}
console.log(arrymiddleLIs);
console.log(middleUL);
var goBefore=null;
function moveright() {
var goBefore=null;
goBefore=findSortRight(this);
document.getElementById('listRight').insertBefore(this,goBefore);
this.onclick = moveleft;
//console.log(arrymiddleLIs);
//console.log(arryrightLIs);
}
function moveleft() {
document.getElementById('listMiddle').appendChild(this);
this.onclick = moveright;
console.log(arrymiddleLIs);
console.log(arryrightLIs);
}
function findSortRight(newElement){
var goBefore=null;
for (var r=0; r<arryrightLIs.length; r++){
//console.log(newElement.innerHTML<=arryrightLIs[r].innerHTML);
if (newElement.innerHTML<=arryrightLIs[r].innerHTML) {
//console.log(arryrightLIs[r]);
goBefore=arryrightLIs[r];
break;
}
}
// console.log(goBefore.innerHTML);
return goBefore;
}
$("#hidr").click(function () {
$("li").hide();
});
$("#showr").click(function () {
$("li").show();
});
</script>
</body>
</html>
console.log is a problem. Remove it or define it like this in case of absence before calling:
console = console || {};
console.log = console.log || function(){};
Your problem seems to be coming from the console log events. Basically IE doesn't know what to do with them and crashes the JS script before it ever gets to it.
You could go with something like:
if( window.console != undefined) {
//your console logs goe here
}
None of these solutions worked for me. Here is what I found that actually worked:
if (typeof(console) === 'undefined') {
console = { log : function(){ /*alert(arguments[0]);*/ } };
}
You want the console to work if it is actually defined.
Try this:
if (typeof console !== 'undefined') {
console = {};
console.log = function() {};
}
Related
The following simple code open a webpage with an Amazon phone softphone, I would like to also open a URL on the same page - to the right of the softphone. I cant figure it out. Thank you kindly for your help. This line opens the URL in a new tab, but I want it in the same window to the right of the softphone: window.open(screenpopURL) all of the whitespace in the attached image.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Call Center</title>
<meta charset="UTF-8">
<script src="amazon-connect.min.js"></script>
<style>
*, body {
margin: 0;
padding:0
}
iframe {
border: 0px
}
#containerDiv {
float: left;
width: 320px;
height: 465px
}
</style>
</head>
<body>
<div id="containerDiv"></div>
<script>
connect.core.initCCP(containerDiv, {
ccpUrl:"https://XXXX.awsapps.com/connect/ccp-v2/softphone",
loginPopup: true,
softphone: {
allowFramedSoftphone: true
}
});
connect.contact(function(contact) {
contact.onConnecting(function(contact) {
var attributeMap = contact.getAttributes();
var baseURL = attributeMap.screenPopURL.value;
var searchString = attributeMap.screenPopValue.value;
var screenpopURL = baseURL + searchString + ".html";
window.open(screenpopURL)
});
});
</script>
</body>
</html>
So I wanted to make a webpage in which on button click, the background color changes.
Its showing TypeError on loading in browser but its working fine after pasting same JavaScript on console.
Code snippet
var colors = ["#0af5fa", "#0ab1fa", "#0a3efa", "#560afa", "#b70afa", "#fa0ad9", "#fa0a65", "#fa0a1e", "#fa5e0a", "#facc0a", "#cbfa0a", "#69fa0a", "#0afa1b", "#0afa77", "#0afae5", "#0a8efa"];
var flag = 0,
blinkCount = 0;
function blink() {
if (blinkCount == 15) {
blinkCount = 0;
blink();
} else {
var h1 = document.querySelector("h1");
var body = document.querySelector("body");
h1.style.color = colors[blinkCount];
body.style.background = colors[blinkCount];
blinkCount++;
}
}
var button = document.querySelector("button");
button.addEventListener("click", blink);
button {
width: 50%;
height: 100px;
background: black;
margin-top: 300px;
margin-left: 300px;
}
h1 {
color: #0af5fa;
}
body {
background: #0af5fa;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="../JavaScript/ex153.js"></script>
<link href="../css/ex153.css" rel="stylesheet">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="">
<button><h1>Click Me</h1></button>
</div>
</body>
</html>
In Browser [Error]
TypeError: button is null[Learn More] ex153.js:25:1
You're running the script before the document has been fully parsed - see how the <script> is above the <body> and its <button>?
Either give the script tag the defer attribute:
<script defer src="..
Or move it to the bottom of the body:
</div>
<script src="../JavaScript/ex153.js"></script>
</body>
</html>
Or wrap the whole script in a DOMContentLoaded listener:
document.addEventListener('DOMContentLoaded', function() {
var colors;
// other code
});
I am using CardService in my Google Scripts Adds-On. I am trying to setContent as HTML for that I am reading it from Index.html. But while rendering it's printing CSS and Javascript as text rather then using it in Html content.
function buildPage() {
var html = HtmlService.createHtmlOutputFromFile('Index').getContent();
var card = CardService.newCardBuilder();
card.setHeader(CardService.newCardHeader().setTitle('How do you feel ...'));
var section = CardService.newCardSection()
.setHeader("<h4>What do you want? </h4>");
section.addWidget(CardService.newKeyValue()
.setTopLabel('choose one')
.setContent(html)
);
This is my Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#things {
position: absolute;
top: 50%;
left: 50%;
color: green;
margin-right: -50%;
text-align: center;
}
</style>
</head>
<body>
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>
</body>
</html>
GMail Add-Ons only support very basic html style.
See https://developers.google.com/gmail/add-ons/concepts/widgets#text_formatting
setContent() takes text and supports basic html formatting. I think it'll not support full html tags like styles, script etc
Reference
https://developers.google.com/apps-script/reference/card-service/key-value#setcontenttext
I am trying to create a custom block in blockly but can't seems to get it to work. I generated code from block factory and this is what I got:
//say_input.js
Blockly.Blocks['say_input'] = {
init: function() {
this.appendDummyInput()
.appendField("say")
.appendField(new Blockly.FieldTextInput("something"), "say_input");
this.setColour(230);
this.setTooltip("");
this.setHelpUrl("");
}
};
Blockly.JavaScript['say_input'] = function(block) {
var text_say_input = block.getFieldValue('say_input');
// TODO: Assemble JavaScript into code variable.
// var code = 'alert("Hello! I am an alert box and'+text_say_input+'!");';
var code = '...;\n';
return code;
};
then I import it into my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blockly Demo: Fixed Blockly</title>
<script src="js/blockly_compressed.js"></script>
<script src="js/blocks_compressed.js"></script>
<script src="js/msg/js/en.js"></script>
<script src="js/blocks/say_input.js"></script>
<style>
body {
background-color: #fff;
font-family: sans-serif;
}
h1 {
font-weight: normal;
font-size: 140%;
}
</style>
</head>
<body>
<button onclick="runCode()">Click me</button>
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<xml id="toolbox" style="display: none;">
<block type="say_input">
<field name="say_input">something</field>
</block>
</xml>
<script>
var demoWorkspace = Blockly.inject('blocklyDiv', {
media: 'js/media/',
toolbox: document.getElementById('toolbox')
});
function runCode(){
window.LoopTrap = 1000;
Blockly.JavaScript.INFINITE_LOOP_TRAP =
'if(--window.LoopTrap == 0) throw "Infinite loop."\n';
var code = Blockly.JavaScript.workspaceToCode(workspace);
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
try {
eval(code);
} catch (e) {
alert(e);
}
}
</script>
</body>
</html>
and load it to browser. immediately I got this error:
Cannot set property 'say_input' of undefined
The error is at the line:
Blockly.JavaScript['say_input'] = function(block) {
My custom block appear in the workplace so I am sure the linking is working.
I checked this video and seems like I am doing nothing wrong.
How can I resolve this?
I found the solution. I have to link javascript_compressed.js then everything just work.
<script src="js/javascript_compressed.js"></script>
make sure to link it before the custom block.js.
I am receiving the error '$ is undefined' from the first selector of js file.
I have added JQuery reference as a local file or google CDN. Also I have tried to put it at the beginning and end of the HTML file.Have also checked the network part of the console to check if the JQuery is loading correctly.but seems it does not recognize the $. Have also tried to putthe whole JS file in $(document).ready(function () )
The function works correctly but I am still receiving the error.
I have tried that with different browsers and different systems.
$(document).ready(function () {
var currentIndex = 0;
var itemAmt;
function cycleItems() {
var item = $('.imageContainer div').eq(currentIndex);
$('.imageContainer div').hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function () {
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function () {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > $('.imageContainer div').length - 1) {
currentIndex = 0;
}
cycleItems();
});
$('.prev').click(function () {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = $('.imageContainer div').length - 1;
}
cycleItems();
});
});
.imageContainer {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.imageContainer div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.imageContainer img {
width: 100%;
height: auto;
}
.next {
right: 5px;
position: absolute;
}
.prev {
left: 5px;
position: absolute;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="HomeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../HomePage/Slider.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
<title>Home!</title>
</head>
<body>
<div id="gallery">
<section class="slider">
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="imageContainer">
<div style="display: inline-block;">
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/animals" />
</div>
<div>
<img src="http://placeimg.com/400/200/people" />
</div>
<div>
<img src="http://placeimg.com/400/200/tech" />
</div>
</div>
</section>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/jquery-latest.js"></script>
</body>
</html>
How can I make it working error free?
Javascript files load in the order that they are added to the page. The first javascript file you've added is ../Homepage/slider.js and I'm guessing that it uses jQuery to do whatever it does. This means it's referencing $ at some point. But wait: jQuery hasn't been loaded yet! This causes the error you saw, because the browser might have started downloading jQuery already, but won't execute it until any preceding scripts are finished.
If you move jQuery to the top (and you probably only need to include it once, rather than 4 times at the top and 4 times at the bottom), this should fix your problem.
Better yet, move all of your script declarations to the bottom of the page, which means they won't block the rest of the page from rendering.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
<script type="text/javascript" src="../HomePage/jquery.min.js"></script>
<script type="text/javascript" src="../HomePage/Slider.js"></script>
</body>
</html>
You could also use something like requireJS to ensure the load order of scripts, but that is an advanced topic well beyond the scope of what you're doing here.
You must add the jquery library only once. Since your jquery code is inside $(document).ready(function(){ and }), you can can add it anywhere on your html code, but before any library which use jquery (maybe your slider.js does)
jquery should be included before all other scripts depending on it...
I suppose this is the issue causing $ is undefined error...