So... this is weird?! when i try and use an ACE editor in google chrome in the following context:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
body {
background-color: rgb(0, 0, 0);
}
.preview {
position: fixed;
margin: 0 auto;
width:800px;
height:600px;
background-color:#3D3D3D;
}
#code {
width:800px;
height:600px;
position: fixed;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="preview" id="preview_layer_1" style="z-index:0;">
nothing much yet
</div>
<div class="preview" id="preview_layer_2" style="z-index:1; background-color:;">
</div>
<div id="code" style="z-index:2;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("#code").hide();
$(".preview").dblclick(function(){
$("#code").fadeIn();
})
$("#code").dblclick(function(){
$("#code").fadeOut();
})
});
var Editor = ace.edit("code");
var Haxe = ace.createEditSession("","ace/mode/haxe");
var JSON = ace.createEditSession("","ace/mode/json");
Editor.setTheme("ace/theme/monokai");
Editor.setSession(Haxe);
Editor.focus();
</script>
</body>
so like any sane person i go to chrome dev tools to check whats going on and then suddenly it works!
so i reload it repeat the steps without opening devtools and then wait...
but nothing happens! and i don't know where to start the code looks fine to me but i'm sure its just a dumb error that i've made, right?
Thanks in advance
You need to call Editor.resize() when changing position or display of the editor container element, to allow the editor to adapt to the size changes.
It works when opening chrome devtools, because window size changes, and that calls the resize() method.
The following should work:
$(".preview").dblclick(function(){
$("#code").fadeIn();
Editor.resize();
})
Related
Fairly self explanatory.
<link href="C:\Users\Andre\Desktop\FOLDER\css\xterm.css" rel="stylesheet" /> <!--Terminal-->
<div id="terminal"></div>
<script src="./xterm.js"></script> <!-- Terminal -->
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello Again');
</script>
Here is my css file that it's connected to and how I tried to center it, I realize it's a different type, so I wasn't sure how to go about it
#terminal{
align-content:center;
}
Any help on centering this would be appreciated
#terminal {
text-align: center;
}
Maybe try this :
#terminal{
margin: auto;
width : 300px;
}
I have a typeform form embedded in an iframe but I don't want it to scroll within the iframe itself.
Here is my code:
<html>
<head>
<title>Project</title>
</head>
<body>
<iframe class="typeform-widget"
src="https://weblify.typeform.com/to/WDbDw2" data-transparency="50"
data-hide-headers=true data-hide-footer=true style="width: 100%; height: 500px;">
</iframe>
<script>
(function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })
</script>
</body>
</html>
Does anybody know a solution?
I'm wondering if you really need to use an iframe element, maybe it's because of your context.
From Typeform's embed SDK and one of their examples I see that they use a div with id="my-embedded-typeform" and then they load the embed SDK script and a custom script to configure and trigger it.
<div id="my-embedded-typeform"
style="width: 100%; height: 300px;"></div>
<script src="https://embed.typeform.com/embed.js" type="text/javascript">`enter code here`</script>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var el = document.getElementById("my-embedded-typeform");
// When instantiating a widget embed, you must provide the DOM element
// that will contain your typeform, the URL of your typeform, and your
// desired embed settings
window.typeformEmbed.makeWidget(el, "https://admin.typeform.com/to/cVa5IG", {
hideFooter: true,
hideHeaders: true,
opacity: 0
});
});
</script>
They mention in their docs that custom scripts for embedding are not recommended as they may cause scrolling issues (amongst other things).
Maybe following their guides could help your purposes or at least make it more manageable.
I hope that helps!
try this
.typeform-widget:before {
content: '';
width: 100px;
height: 500px;
position: absolute;
background: #FFF;
left: 94%;
}
This is my first post on SO and my first time making a Chrome Extension. I've read alot of documentation, but I am still unsure how to get this to work. Below are my html and js files. I want to be able to type something in the source box and have the have the word print out in the results area in real time. I have tested this code on my local host so i know it works, but for some reason it is acting up as a chrome extension.
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<textarea id="source"></textarea>
<div id="result">
</div>
</body>
</html>
Here's the js:
function main() {
document.getElementById('source').keydown(function() {
var source = document.getElementById('source').value;
var outputValue = source.replace(/command/gi, "⌘")
.replace(/tab/gi, "⇥")
.replace(/return/gi, "⏎")
.replace(/option/gi, "⌥")
.replace(/control/gi, "⌃")
.replace(/esc/gi, "⎋")
.replace(/left/gi, "←")
.replace(/down/gi, "↓")
.replace(/up/gi, "↑")
.replace(/right/gi, "→")
.replace(/shift/gi, "⇧")
.replace(/eject/gi, "⏏")
.replace(/caps\s\(lock\)/gi, "⇪")
.replace(/save/gi, "⌘ + S")
.replace(/print/gi, "⌘ + P")
.replace(/find/gi, "⌘ + F");
document.getElementById("result").innerHTML = outputValue;
}
}
1) What wOxxOm said in the comment: element.keydown(function() { ... }) does not exist. This definitely comes from some jQuery code - you could use that if you add it to your extension, or you could use addEventListener.
2) You declare a function main(), but nothing ever calls it. A good place to call it would be a DOMContentLoaded event listener on document:
document.addEventListener("DOMContentLoaded", main);
function main() {
/* ... */
}
I'm starting to learn HTML5+CSS+JS. It was all going fine on my Windows desktop, but when I try doing something on my Linux notebook, no javascript seems to work.
This is the mini tutorial I followed: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript
and this is my page with the result: http://www.lele.bbt.net.ar/prueba01/
(As you can see, the JS is not doing a thing).
// JavaScript demonstration
var changeBg = function(event) {
console.log("method called");
var me = event.target,
square = document.getElementById("square");
square.style.backgroundColor = "#ffaa44";
me.setAttribute("disabled", "disabled");
setTimeout(function() {
clearDemo(me)
}, 2000);
}
function clearDemo(button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);
#square {
width: 120px;
height: 120px;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
</body>
</html>
(Here it works, but for some reason, not when I do it on my computer).
I don't know if it can be a priviledge problem or something like that (js has read/write priviledges, not execute. But I guess that's how it should be)
Thanks!
I'm pretty sure it's because the script can't find the button.
You load your script before everything else is loaded, which is fine. But you can have problems like this. To avoid this kind of problems you load the JavaScript file after the HTML.
At the moment if you try to print the var "button" you will receive "null".
The Chrome console when you open the page gives you this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
That means that it is trying to read the property of the button, which is null.
Move the script tag to the very end, just before the closing </body> tag:
<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>
<script type="text/javascript" src="script.js"></script>
</body>
I have an ad code that I am embedding in a div and then i am wrapping them all within a document.write. When I output it on a page, div remains in it's position but contents of ad code are created elsewhere i.e bottom left corner of page. Previously i had posted wrong code, here's the working code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<style>
#pubToolbar{
margin-left: 20%;
width:700px;
height: 90px;
border: 2px solid #888;
visibility: hidden;
}
</style>
</head>
<body>
<div id="pubToolbar">
<script type="text/javascript">
document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"width:728px;height:90px;margin:0px auto;z-index:9999;margin-left:72px;display:block;bottom:-120px;position:relative;border:2px solid #999\" class=\"cpa-campaign-white\">\n");
var section=3901;
var width=728;
var height=90;
var enc=1;
var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=2384320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("</div>\n");
var adcount_2132703_1_=new Image();
adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;";
// 034665b732c4e8a5a7992aeb7377c4b8
</script>
<script type="text/javascript">
$('#pubToolbar_banner').css('display','block');
$('#pubToolbar').css('visibility','visible');
$('#pubToolbar').animate({bottom:0},1500,'swing');
</script>
</div>
</body>
</html>
The code within div is the code from an ad server named adtech. Now this is all within a wrapper div. Note, in this code, in first div of document.write I have given to the main wrapper 'visibility:none', to hide it initially on older browser.(Suggestion from Perry Tew).
But when I turn it's visibility on, banner ad is rendered outside wrapper div. Thus is experienced on IE-6/7/8 and old versions of opera i.e 11.20 and older.
I have already dealt with adtech and faced that very same issue in the past
Your problem comes from the fact than in older versions of IE, a distant script tag written with document.write() will not assume the position in your dom of being right after the current script block which added it.
So for exemple:
Index.html
<script type="text/javascript">
doSomething();
document.write("<scr"+"ipt type=\"text/javascript\" src=\"/something.js\">\n");
doSomething();
</script>
something.js
document.write('hello');
In modern browsers, this is evaluated as (obviously things are more complicated than that, but for the sake of explanation):
<script type="text/javascript">
doSomething();
</script>
<script type="text/javascript" src="/something.js">
<script type="text/javascript">
doSomething();
</script>
Which ends up meaning:
<script type="text/javascript">
doSomething();
document.write('hello');
doSomething();
</script>
In the problematic browsers such as IE 7 however, it ends up as:
<script type="text/javascript">
doSomething();
doSomething();
</script>
<script type="text/javascript" src="/something.js">
And then
<script type="text/javascript">
doSomething();
doSomething();
</script>
<script type="text/javascript">
document.write('hello');
</script>
As a result, your pubToolbar_banner div is closed before the adtech tags actually run, so the tag is put outside of them, inside the pubToolbar div.
Please note that this is an overly simplified explanation of the issue to make you understand what kind of problem is happening. In all honesty, I don't remember all the details myself.
Easiest solution ? Create your container div in a different script tag. For exemple try this code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<style>
#pubToolbar{
margin-left: 20%;
width:732px;
height: 90px;
border: 2px solid #888;
visibility: hidden;
display: none;
}
</style>
</head>
<body>
<div id="pubToolbar" style="background-color: red;">
<script type="text/javascript">
document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"width:728px;height:90px;margin:0px auto;z-index:9999;display:block;bottom:-90px;position:relative;background-color: purple; border:2px solid #99\
9\" class=\"cpa-campaign-white\">\n");
</script>
<script type="text/javascript">
var section=3901;
var width=728;
var height=90;
var enc=1;
var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=23\
84320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\
\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("\n");
var adcount_2132703_1_=new Image();
adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;";
// 034665b732c4e8a5a7992aeb7377c4b8
</script>
<script type="text/javascript">
document.write("</div>\n");
</script>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#pubToolbar').css('visibility','visible').fadeIn('slow', function() {
$('#pubToolbar_banner').animate({ bottom:0 },"slow");
});
});
</script>
</body>
</html>
You need to put both the opening tag and the closing tag of you container in a different script block (such as in my example), if I had simply moved the closing tag out the issue would have remained. The technical reasons as to why are similars.
This solution works for me on IE 6/7 and modern browsers, the ad appears inside the pubToolbar_banner div, which is itself inside the pubToolbar div. After page loading, pubToolbar_banner will slowly scroll up inside pubToolbar using animate.
Let me know if that helps, and if not try to provide a screenshot of the issue.
Your code is misleading...
Inside
<div id="pubToolbar_banner"></div>
you have written JavaScript... ex : var section=4201, but you have no delcared JavaScript container element before it
<script type="text/javascript"></script>
Try this instead... this will write specifically to the element you want:
document.getElementById("pubToolbar_banner").write("Stuff you want to write here");
Okay, second attempt.
It looks like you're running into a nasty IE bug. I found a really good article for it here:
http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
To make the content disappear on IE7, I added the following CSS rule.
It may or may not meet your needs. Using the asterisk is a hack, but there's a lot of minified javascript creating a lot of elements and it's tough to follow what's going on, so to answer you as quickly as possible, I used a hammer to swat that fly.
I don't know if you need to toggle this visibility, or what, so my answer may not be a perfect solution, but at least you know what you're up against. The article above is probably you're best starting point. In case the page disappears, here's a verbatim diagnosis from the site:
The bug
In Internet Explorer (IE) 6, 7 and 8 in 'Compatibility View' there is a bug when hiding content within a hidden container element. The content will remain visible, even though its 'display' property is 'none', as can be observed when the container is re-shown again.
#pubToolbar *{
visibility:hidden !important;
display:none !important;
}
<script type='text/javascript'>
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://cdn.atomex.net/static/js/ads-min.js';
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
var noscript = document.createElement('noscript');
var iframe = document.createElement('iframe');
iframe.src = 'verylongstuff';
noscript.appendChild(iframe);
var myDiv = document.getElementsById("myDivId");
myDiv.appendChild(noscript);
// you other javascript here.
</script>
Okay, I had to make a lot of assumptions here, but here is how I would handle the ad appearing outside of the pubToolbar div.
First, set pubToolbar to relative and its child, pubToolbar_banner to absolute. This way you can position the banner in pubToolbar. Next, set overflow to hidden and banner to sit just under. This will cause the banner to hide. Finally animate the banner up.
http://jsfiddle.net/SHKFy/
Change your document.write line to this
document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"position:absolute;top:0;left:0;width:728px;height:90px;margin:0px auto;z-index:9999;display:block;border:2px solid #999\" class=\"cpa-campaign-white\">\n");
Then use the following jQuery for animation setup and execution.
$('#pubToolbar_banner').css('display','block');
$('#pubToolbar').css('visibility','visible').css('position', 'relative').css('overflow', 'hidden');
$('#pubToolbar_banner').css('top', $('#pubToolbar').height());
$('#pubToolbar_banner').animate({top:0}, 1500, 'swing');
This is all kind of hacky because I don't really understand the constraints you are operating under.
I could observe this issue in IE. I required to update some CSS. As you have already included jQuery. We can modify the DOM in any way as you wish :)
Here, we require to use some code run after dom ready. See the jQuery code below:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#ebStdBanner0").appendTo("#pubToolbar_banner");
});
</script>
<style>
#pubToolbar{
margin-left: 20%;
width:732px;
height: 90px;
border: 2px solid #888;
visibility: hidden;
}
#pubToolbar_banner{
border: 2px solid #999999;
display: block;
height: 90px;
position: relative;
width: 728px;
z-index: 9999;
}
</style>
</head>
<body>
<div id="pubToolbar">
<script type="text/javascript">
document.write("<div align=\"center\" id=\"pubToolbar_banner\" class=\"cpa-campaign-white\">\n");
var section=3901;
var width=728;
var height=90;
var enc=1;
var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=2384320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("</div>\n");
var adcount_2132703_1_=new Image();
adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;";
// 034665b732c4e8a5a7992aeb7377c4b8
</script>
<script type="text/javascript">
$('#pubToolbar').css('visibility','visible');
$('#pubToolbar').animate({bottom:0},1500,'swing');
</script>
</div>
</body>
</html>
Please, explain what you want to do with animate. As this code is not working here.