I am trying to make the elements clickable. However on clicking any of the <p> elements there is no alert box saying "hello". Please could you look at my code and possibly point me in the right direction?
function createLink(text, parentElement) {
var a = document.createElement('p');
var linkText = document.createTextNode(text);
a.appendChild(linkText);
a.onclick = function(e) {
e.preventDefault();
alert("hello");
};
parentElement.appendChild(a);
var br = document.createElement('br');
parentElement.appendChild(br);
}
var txtFile8 = new XMLHttpRequest();
txtFile8.open("GET", "http://www.drakedesign.co.uk/mdmarketing/uploads/date.txt", true);
txtFile8.onreadystatechange = function() {
if (txtFile8.readyState === 4) { // Makes sure the document is ready to parse.
if ((txtFile8.status == 200) || (txtFile8.status == 0)) { // Makes sure it's found the file.
allText8 = txtFile8.responseText;
arrayOfLines8 = allText8.match(/[^\r\n]+/g);
for (i = 0; i < arrayOfLines8.length - 1; i++) {
createLink(arrayOfLines8[i], document.getElementById("previousResultsList"));
}
}
}
};
txtFile8.send(null);
The script parses a text file online:
http://www.drakedesign.co.uk/mdmarketing/uploads/date.txt
Which is updated weekly and has dates written in it like so:
19/04/16
12/04/16
...
My script separates the text document into each line and stores it as an array. A for loop is then used to show the dates on the screen in a column which looks like so:
The problem is that on clicking each date an alert box is not shown saying "hello" and there seems to be no response at all.
All help is greatly appreciated.
I solved the issue!!
The problem was that I had divs with opacity 0 that were overlaying my parentElement! sorry stupid mistake!
Related
Im trying to figure out how to in wordpress display only first two comments and hide rest and add button that reveal all these hidden messages if needed. Pagination give me only two msg per page and thats not im looking for. Can someone give me an idea how I can this achieve or point me to articles about this?
Thanks
here is a plugin that should do the job: https://wordpress.org/plugins/comment-load-more/
It is a bit outdated (3 years ago) so you should check if the code is still valid and compatible.
In " Settings > Comment Load" you should be able to set the number of desired comments to show first.
Indeed, in this guide - http://www.wpbeginner.com/plugins/how-to-easily-lazy-load-comments-in-wordpress/ - you will find how to lazy load all comments. Probably, with some modification, you can adapt it to your need as well.
Cheers!
// This function hide comments if is there more than two and add show more button
function fds_comments () {
var commentWrap = document.getElementById('comment-list');
var commentChilderns = commentWrap.children;
for (var i = 2; i < commentChilderns.length; i++) {
commentChilderns[i].style.display = "none";
}
commentWrap.innerHTML = commentWrap.innerHTML + "<button id='more-comments' onclick='fds_all_comments()'type='button' >Show all comments</button>";
}
//This function reveal all comments (used on SHOW MORE btn)
function fds_all_comments(){
var commentWrap = document.getElementById('comment-list');
var commentChilderns = commentWrap.children;
for (var i = 0; i < commentChilderns.length; i++) {
commentChilderns[i].style.display = "block";
}
}
// problem: comments hidden after submit
// solved: This additional code reveal comments after SUBMIT
window.onload = function() {
var reloading = sessionStorage.getItem("reloading");
if (reloading) {
sessionStorage.removeItem("reloading");
fds_all_comments();
}
}
// function used on SUBMIT button
function fds_all_on_submit(){
sessionStorage.setItem("reloading", "true");
document.location.reload();
}
Hello I have a question and I've been googling it before asking to you guys and I can't find the solution. I would like to have the data-id="video" added in a textbox so that I can change it without changing the source file everytime.
<div class="youtube-container"><div class="youtube-player" data-id="VIDEO"></div></div>
Is it possible that I can change the "VIDEO" with a textfield??
I have a javascript that loads the video so that I can just type in a video id.
Hope someone can help me with this.
Below is the code that calls for the video id.
(function() {
var v = document.getElementsByClassName("youtube-player");
for (var n = 0; n < v.length; n++) {
var p = document.createElement("div");
p.innerHTML = labnolThumb(v[n].dataset.id);
p.onclick = labnolIframe;
v[n].appendChild(p);
}
I forgot to post this the first time.
For parse:
$(".youtube-player").data("id")
For change content:
$(".youtube-player").data("id","NEW CONTENT")
how are you want to change it - on your choice, with select or textfield
You must add input
<input type="text">
And this jQuery code
$('input').on('change', function() {
$('.youtube-player').data('id', $(this).val());
});
Bit of a JS newbie, I have a tracking script that reads the meta data of the page and places the right scripts on that page using this:
var element = document.querySelector('meta[name="tracking-title"]');
var content = element && element.getAttribute("content");
console.log(content)
This obviously posts the correct tag to console so I can make sure it's working .. and it does in a test situation. However, on the actual website the meta data i'm targeting is produced on the page by a Java application and beyond my control, the problem is it is in a commented out area. This script cannot read within a commented out area. ie
<!-- your tracking meta is here
<meta name="tracking-title" content="this-is-the-first-page">
Tracking finished -->
Any ideas appreciated.
You can use this code:
var html = document.querySelector('html');
var content;
function traverse(node) {
if (node.nodeType == 8) { // comment
var text = node.textContent.replace(/<!--|-->/g, '');
var frag = document.createDocumentFragment();
var div = document.createElement('div');
frag.appendChild(div);
div.innerHTML = text;
var element = div.querySelector('meta[name="tracking-title"]');
if (element) {
content = element.getAttribute("content");
}
}
var children = node.childNodes;
if (children.length) {
for (var i = 0; i < children.length; i++) {
traverse(children[i]);
}
}
}
traverse(html);
One way is to use a NodeIterator and get comment nodes. Quick example below. You will still need to parse the returned value for the data you want but I am sure you can extend this here to do what you want.
Fiddle: http://jsfiddle.net/AtheistP3ace/gfu791c5/
var commentedOutHTml = [];
var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_COMMENT, NodeFilter.FILTER_ACCEPT, false);
var currentNode;
while (currentNode = iterator.nextNode()) {
commentedOutHTml.push(currentNode.nodeValue);
}
alert(commentedOutHTml.toString());
You can try this. This will require you to use jQuery however.
$(function() {
$("*").contents().filter(function(){
return this.nodeType == 8;
}).each(function(i, e){
alert(e.nodeValue);
});
});
I would like to let there automatically appear text inside an input type=text element.
I would like to accomplish that the different kind of texts are stored inside an array and that every 5 seconds or so, a text is 'typed' by javascript into this field. Then I also like that when I focus on the field (to input text in it by keyboard) that it stops auto-typing and shows an empty input element.
Anybody know how to go about this?
I'm a back-end programmer, but need to do some frontend programming and just haven't had the time to thoroughly learn Javascript. At the moment I only know PHP thoroughly, but would expand my knowledge to css, html and javascript too.
Hope somebody is able to help me out :)
EDIT: This is the solution I came up with and it works. The input field has as ID: searchBar. The code is not very elegant, but I'm still learning :) Thanks for the answers. It helped me a lot.
var searchBar = document.getElementById('searchBar');
var keywords = ['Auto typed text number 1',
'This is number 2 auto typed',
'Yet another auto typed line',
'The last line before it loops again'];
var index = 0;
var arrCounter = 0;
var focus = false;
var timer1, timer2;
function resetBox() {
searchBar.value = '';
index = 0;
autoType();
}
var autoType = function() {
if (focus) {
return;
}
if (index <= keywords[arrCounter].length) {
searchBar.value = keywords[arrCounter].substr(0, index++);
timer1 = setTimeout("autoType()", 50);
} else {
arrCounter++;
if(arrCounter === keywords.length){
arrCounter = 0;
}
timer2 = setTimeout(resetBox, 5000);
}
};
autoType();
$("#searchBar").on("focus", function(){
focus = true;
searchBar.value = '';
clearTimeout(timer1);
clearTimeout(timer2);
}).on("blur", function(){
setTimeout(function() {
focus = false;
resetBox();
}, 1000);
});
Try like this:
html
<input id='demo_input' size='100'/>
javascript:
var demo_input = document.getElementById('demo_input');
var type_this = "try this example";
var index = 0;
window.next_letter = function() {
if (index <= type_this.length) {
demo_input.value = type_this.substr(0, index++);
setTimeout("next_letter()", 50);
}
}
next_letter();
i try to make text strikethrough with javascript.
I know nothing about Javascript and try to search on the net how to that.
<script language="JavaScript">
function recal(val,sum)
{
if(sum == true)
{
var total = parseInt(document.getElementById("total").innerHTML, 10);
total+=val;
document.getElementById("total").innerHTML=total;
}
else
{
var total = parseInt(document.getElementById("total").innerHTML, 10);
total-=val;
document.getElementById("total").innerHTML=total;
var pnl = document.getElementById("totalEvents");
}
var pnl = document.getElementById("totalEvents");
var pnl2 = document.getElementById("eventCategory");
var pnl3 = document.getElementById("nameID");
**strikethrough starts here**
if (!sum && pnl.firstChild.tagName != "S" && pnl2.firstChild.tagname !="S")
{
pnl.innerHTML = "<S>"+ pnl.innerHTML+"</S>";
pnl2.innerHTML = "<S>"+ pnl2.innerHTML+"</S>";
}
else
{
pnl.innerHTML = pnl.firstChild.innerHTML;
pnl2.innerHTML = pnl2.firstChild.innerHTML;
}
}
</script>
it makes textstrikethrough but something is wrong. Even if i choose second checkbox it affects first checkbox why :(
http://jsfiddle.net/aHH9w/ (my full html page)
You are peforming a pretty convoluted way of achieving this, something that can actually be quite easily done. If you have an HTML element, say with the id 'myelement':
<div id="myelement">Hello world</div>
To create a strikethrough, all you need to do in JS is:
var ele = document.getElementById("myelement");
ele.style.setProperty("text-decoration", "line-through");
If you need to check if there is a strikethrough on an element:
var ele = document.getElementById("myelement");
var isStruck = (ele.style.getProperty("text-decoration") == "line-through");
Although this is not really recommended. Use an internal variable to keep track of state.