I have some code working but want to make an adaptation but can't get it to work. I have the following:
<script type="text/javascript">
// <![CDATA[
var textBlocks = new Array('Apple', 'Banana', 'Orange');
function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
// ]]>
</script>
But only want to change 'Apple', 'Banana', 'Orange' into something to load the content from a specific DIV's with DIV ID's: content A, content B and content C.
Thanks, Eddy
Assuming I understood what you need try this:
var textDivsId = new Array('contentA', 'contentB', 'contentC');
function changeText(elemid) {
var ind = document.getElementById(elemid).value;
document.getElementById("display").innerHTML = document.getElementById(ind).innerHTML;
}
where contentA, contentB and contentC are ID's of DIVs you want to load. Here is some working example on JSFiddle.
This is not an elegant solution, have you considered using visibility=visible property and CSS class swapping dynamically?
I'm not entirely sure what you mean by
into something to load the content from a specific DIV's with DIV ID's: content A, content B and content C
but if you mean you have 3 divs:
<div id='A'>Apple</div>
<div id='B'>Banana</div>
<div id='C'>Orange</div>
then you can create an array within javascript of their contents with:
var textBlocks = [document.getElementById('A').innerHTML, document.getElementById('B').innerHTML, document.getElementById('C').innerHTML];
however, this will only work if it runs in this order (i.e. your divs have to be inserted into your document before you run this javascript to build textBlocks. For this reason you might want to consider using jQuery to detect when your HTML elements are ready:
<script src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<script type="text/javascript">
// <![CDATA[
var textBlocks = [];
function changeText(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("display").innerHTML=textBlocks[ind];
}
$(document).ready(function() {
textBlocks = [document.getElementById('A').innerHTML, document.getElementById('B').innerHTML, document.getElementById('C').innerHTML];
// ... do your other stuff here, like call changeText(..)
});
// ]]>
</script>
<div id='A'>Apple</div>
<div id='B'>Banana</div>
<div id='C'>Orange</div>
Related
I have a wordpress site and theme that is providing me an ability to change elements in menu widget on all pages it appears only.
So, what I want to do is to change links and names of menu elements locally on one page. I have an id's for menu li elements, 'menu-item-7062' for example and a href tag inside it with already defined link and text values.
I have already tried and injected this code snippets in after all post content:
<script type='text/javascript'> document.getElementById('menu-item-7062').href = 'new link'; </script>
I have also created a function that is triggers after onclick event:
<script type="text/javascript">
document.getElementById("menu-item-7062").onclick = function() {
document.getElementById("menu-item-7062").href="my new link";
};
</script>
Unfortunately, they didn't affect my old link. Returning to my question, what are other solutions I could try in order to change both a href link and text value? What possible mistakes I have made?
UPDATED:
Here is my anchor tag
Автоматизация технологических процессов
A tag located under the <li id="menu-item-7062">, there is my mistake.
Did you try setAttribute function
document.getElementById("menu-item-7062").setAttribute("href", "my new link");
I have successfully affected a tag by query selector:
<script type="text/javascript">
var tag = document.querySelector('a[href="https://test.etm.io/ru/services/automation/"]');
if(tag){
tag.innerHTML = "new";
}
</script>
you should try this..
var a = document.getElementsByTagName("a");
a[0].href = "www.abc.com/";
if you doesn't know index of a then you should get id of a and then set link.
This will help you to check and set href for tag "a" without "id":
const parent = document.getElementById("menu-item-7062");
if(parent.firstElementChild.localName === 'a') {
const child = parent.firstElementChild;
child.href = 'my new link';
}
OR
const parent = document.getElementById("menu-item-7062");
parent.firstElementChild?.href = 'my new link';
I've tried this script inside Joomla to add a class to every number so that I can format them with CSS:
<script>
(function($) {
$(function() {
$('h1,h2,h3,h4,h5,h6,p,strong,i,em,b,span,sup,sub').each(function() {
var el = $(this),
html = el.html();
html = html.replace(/(\d)/gi, "<span class='number'>$1</span>");
el.html(html);
});
});
})(jQuery);
</script>
It work fine but I've got a problem with links where there are numbers such as:
www.miosito.it/index.php&articleid=2
In this case it make this:
www.miosito.it/index.php&articleid=<span class="number">2</span>
So the link is broken. How could I edit the script to fix it?
How to add the jquery.appear-Plugin to this canvas-element (id="pic")? The script itself is already included into the html-page, but how to make the canvas-image only visible, if the element is on the screen?
<canvas id="pic"></canvas>
<script type="text/javascript">
var picData6 = whatever1
var options = whatever2
var ct6 = document.getElementById("pic").getContext("2d");
ct6.canvas.width = document.getElementById("pic").offsetWidth-4;
ct6.canvas.height = document.getElementById("pic").offsetHeight;
var Chart6 = new Chart(ct6).Line(picData6,options);
</script>
It seems the .appear() has to be add somewhere. But where?
Thank you very much!
jQuery.appear simply gives you custom appear and disappear events for elements which you have registered.
To add it to your canvas, you would do something like:
// register the element with the plugin
$('#pic').appear();
// do this when it appears
$('#pic').on('appear', function(ev, elements) {
// elements is an array of elements which are now visible on the page
});
When the call bellow is done the class creates a set of elements (a form) and then I want to append them right after the script that called it.
I have been looking at various similar questions but the best of them simply append it after the last script on the page.
It would work nicely in the head but not the body.
<script type="text/javascript">
new exampleClass();
</script>
You should have some type of unique identification to find and append elements after the script. You can use document.getElementById() if you have id, or document.getElementsByTagName("script") to get script elements and get the required script element and then use appendChild()
Ok, here is the horrible hack mentioned.
HTML
<div>Stuff</div>
<script type="text/javascript">
noop();
</script>
<div>More stuff</div>
<script type="text/javascript">
new ExampleClass();
</script>
<div>More stuff</div>
<script type="text/javascript">
noop();
</script>
<div>More stuff</div>
Javascript
function noop() {}
function appendAfter(node, newNode) {
if (node.nextSibling) {
node.parentNode.insertBefore(newNode, node.nextSibling);
} else {
node.parentNode.appendChild(newNode);
}
}
function ExampleClass() {
window.addEventListener("load", function () {
var scripts = document.getElementsByTagName("script"),
div = document.createElement("div"),
length = scripts.length,
i = 0,
script;
div.appendChild(document.createTextNode("Inserted"));
while (i < length) {
script = scripts[i];
if (script.firstChild && script.firstChild.nodeValue.indexOf("ExampleClass()") !== -1) {
appendAfter(script, div);
}
i += 1;
}
}, false);
}
On jsfiddle
Based on some of your comments and some other similar I have thought of doing something like this and it seems to work.
// Generate random string we can use as element id
var rs = Math.random().toString(36).substring(2);;
// Document write an empty div with the above string as id
document.write('<div id="' + rs + '"></div>');
// Get the element to use for append
var ip = document.getElementById(rs);
Please feel free to comment if you think it may have a fatal flaw.
NOTE: I know I can import .pde files but I need to run code on screen so I will not be using this.
My three following attempts failed. I do not know which one was closer to achieving and I do not prefer one as long as it produces desired result. Appreciate the help by helping me get any of the attempts working/suggesting a new one.
1ST ATTEMPT) - use getText function written below but then some text that is not code can be found in the resulting jscode variable and thus the processing instance does not work.
function getText(n) {
var s = [];
function getStrings(n, s) {
var m;
if (n.nodeType == 3) { // TEXT_NODE
s.push(n.data);
}
else if (n.nodeType == 1) { // ELEMENT_NODE
for (m = n.firstChild; null != m; m = m.nextSibling) {
getStrings(m, s);
}
}
}
getStrings(n, s);
var result = s.join(" ");
return result;
}
var processingCode = getText(document.body)
processingCode.replace(/<[^>]+>¦&[^;]+;/g,'').replace(/ {2,}/g,' ');
var jsCode = Processing.compile(processingCode).sourceCode;
alert(jsCode);
var canvas = document.getElementById("mysketch");
var processingInstance = new Processing(canvas, jsCode);
....
<span class="sketch">
<canvas id="mysketch"></canvas>
</span>
2ND ATTEMPT) Same as above but added a tag with id="all_processing_code" but couldn't figure out how to get the text within anyway. This did not work:
var processingCode = getText(document.getElementbyId(all_processing_code));
3RD ATTEMPT) Removed getText and tried to use JQuery text() to isolate the code. Was having trouble mixing JS and Jquery though. Tried different stuff and none worked. What would be appropriate way to mix it in? What script type should I use? This was confusing.
<script type="text/jquery">
var processingCode = $('#all_processing_code').text();
//processingCode.replace(/<[^>]+>¦&[^;]+;/g,'').replace(/ {2,}/g,' ');
var jsCode = $.Processing.compile(processingCode).sourceCode;
alert(jsCode);
var canvas = $(#'mysketch');
var processingInstance = new $.Processing($('canvas'), $('jsCode'));
}
</script>
First, check if your processing code is wrapped by an html element (like a div or something else) with an id. If it isn't, please do it!
For exemple:
<div id="mycode">
void setup() {
background(0);
}
</div>
After this, check if you have the getProcessingSketchId() function declared in your code. Processing IDE in JavaScript mode already exports html files with that function. If there isn't, please declare it inside your <head>:
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'yourcanvasid'; }
</script>
You can include JQuery from google api including this line in your html before you use JQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'yourcanvasid'; }
</script>
Assuming that you want to run your processing code when the page just has loaded, just append this code after the getProcessingSketchId() declaration.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'yourcanvasid'; }
$(document).ready(function() {
new Processing(getProcessingSketchId(), $('#mycode').html());
});
</script>
You can create this code inside any other <script type="text/javascript">.
At the end, you will have something like this:
<html>
<head>
<!-- Your title, meta tags, stylesheet and all other stuff here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// convenience function to get the id attribute of generated sketch html element
function getProcessingSketchId () { return 'yourcanvasid'; }
$(document).ready(function() {
new Processing(getProcessingSketchId(), $('#mycode').html());
});
</script>
</head>
<body>
<div id="mycode">
void setup() {
background(0);
}
</div>
</body>
</html>