I have been writing ColdFusion/JS for 15 years, and this has me totally baffled!
I can run javascript to do anything inside my CFLayoutArea, but it will not let me display or change the styles in JS.
When you load the dashboard.cfm page in the layoutarea, it gives an javascript error anytime you try to change or reference (display) any style attribute related to the div element.
Here is the calling page:
function dashBoard() {
ColdFusion.navigate('dashboard.cfm','content');
}
<cflayout>
<cflayoutarea>
<cfdiv id="content" />
</cflayoutarea>
</cflayout>
Here is dashboard.cfm:
<html>
<head>
<style>
#szliderbar1{
width:37%;
}
</style>
<script>
displayProgress = function() {
var tttt = document.getElementById('szliderbar1');
alert(tttt.style.width);
}
</script>
</head>
<body>
<div id="szliderbar1"> hey
</div>
</body>
</html>
<cfset ajaxonload("displayProgress")>
Related
I am trying to create a program that generates random functions then shows them in LaTeX but I can't figure out how to edit LaTeX when a button is pressed.
This code works:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<script>
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
</script>
</body>
</html>
But this does not:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<button onclick="change();">Change the LaTeX</button>
<script>
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
}
</script>
</body>
</html>
I tried to use MathJax like this:
<html>
<body>
<button onclick='change();'>Change the LaTeX</button>
<div lang='latex' id='Latexdiv'></div>
<script type='text/javascript'>
var latexdiv = document.getElementById('Latexdiv');
function change()
{
var latex = document.createElement('script');
latex.src = 'http://latex.codecogs.com/latexit.js';
document.head.appendChild(latex);
var mathjax = document.createElement('script');
mathjax.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
document.head.appendChild(mathjax);
latexdiv.innerHTML = '\\(sin(x)\\)';
};
</script>
</body>
</html>
This, unfortunately, only works the first time you press the button. If you press it twice, it just shows "\(sin(x)\)" in regular HTML. How would you get it to work twice?
http://latex.codecogs.com/latexit.js executes at the end:
LatexIT.add('*');
That adds and onload listener that executes a render function, that's why works in the first case, the page ends loading after your first script.
You could simply add the render function in your change function.
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
LatexIT.render('*',false);
}
With the use of Javascript I want to display different HTML content based on the value of a class of an HTML element which is existing on the page. eg:
<body class="de">
display:
<div id="de">some html</div>
If the body element has another class value, eg class="en" it should display
<div id="en">some other html</div>
I have already played around with hasClass function and an if statement. But it did not work for me.
What about ?
<body class="en">
<script>
if($('body').hasClass('de')) {
$('body').html('<div id="de">some html</div>');
}
else if($('body').hasClass('en')) {
$('body').html('<div id="en">some other html</div>');
}
else if($('body').hasClass('es')) {
$('body').html('<div id="es">another html</div>');
}
else {
...
}
</script>
Dynamic :
var bodyClass = $('body').attr("class");
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
But you should verify that body has a class and that an element with an identical id exist in your document.
The solution I am working with:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
if($('body').hasClass('lang-de')) {
document.getElementById("lang"); {
$('#lang').html('<div id="de">some html</div>');}
}
else if ($('body').hasClass('lang-en')) {
document.getElementById("lang"); {
$('#lang').html('<div id="en">some other html</div>');}
}
</script>
</body>
</html>
With jQuery :
$('.de').html('<div id="de">some html</div>');
If you have different tags to fulfil with different html content use a generic class + a specific one (eg : class="dynamic de") and loop all elements with "dynamic" class and use hasClass in a if/elseif (or better a switch/case) to target them separatly.
Btw, AngularJs has "directives" that handle perfectly that kind of need ;)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang-de"></div>
<div id="lang-en"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
$('div#lang-*').hide();
$('#' + bodyClass).show();
</script>
</body>
</html>
What about?
<html>
<head>
<style>
body.lang-en #en{display:block;}
body.lang-de #de{display:block;}
</style>
</head>
<body class="lang-en">
<div id="en" hidden>some text</div>
<div id="de" hidden>some other text</div>
<hr>
<button onclick="toggle()"></button>
</body>
<script>
function toggle(){
var lang=['lang-en','lang-de'];
var i=lang.indexOf(document.body.className);
document.body.className=(i+1 == lang.length ? 0 :i+1);
}
</script>
</html>
OR
with jQuery
$('#en,#de,#jp').hide();
$('#'+$('body').attr('class').replace('lang-','')).show();
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>