Hey guys am new to javascript development ..I have seen some come in javascript ..The code is
html code
<table>
<tr>
<td style="width:70px;height:70px;background-color:white;" class="white" onclick="place(this,2,1)"></td>
<td style="width:70px;height:70px;background-color:black;" class="black" onclick="someone(this,2,2)"></td>
</tr>
</table>
the js code
<script type="text/javascript">
function someone(domobject,number,column){
if(domobject.style.backgroundColor=="black"||domobject.style.backgroundColor=="white")
domobject.style.backgroundColor="red";
else if(domobject.style.backgroundColor=="red")
domobject.style.backgroundColor=domobject.className;
}
</script>
The thing is that
function someone(number,column){
if(this.style.backgroundColor=="black"||this.style.backgroundColor=="white")
this.style.backgroundColor="red";
else if(this.style.backgroundColor=="red")
this.style.backgroundColor=this.className;
}
when i write the code like this and call it with onclick="someone(2,2)..its doesnt work for me..why is it like that..Hope you guys can help me out ..Thanks in advance
this refers to the parent.
So:
var Bacon = function(){
this.tasty = true;
this.burnt = false;
};
var b = new Bacon();
console.log(b.tasty); //True
The best place to get your head around this is with this tutorial: http://ejohn.org/apps/learn/
Related
I'm trying to import the table-dragger to my front-end, but I get the error-message, that tableDragger is not a function. I tried to go with the tutorial and initialized the table-dragger like this
<script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
<script type="text/javascript">
var el = document.getElementById("table");
var dragger = tableDragger(el, {
dragHandler: ".handle"
});
</script>
With this, the error-message occurs. Anyone had the same problem or has an idea on how to fix this?
After going through table-dragger plugins I found that tableDragger is an object instead of a function. You cannot directly get its instance, instead there is a property "default" which actually create instances.
If you are using node then may be "table-dragger.min.js" path is incorrect. The path should be "node_modules/table-dragger/dist/table-dragger.js"
Kindly find below code for reference.
var el = document.getElementById('table');
var dragger = tableDragger.default(el, {
dragHandler: ".handle"
})
dragger.on('drop',function(from, to){
console.log(from);
console.log(to);
});
<script src="https://cdn.jsdelivr.net/npm/table-dragger#1.0.3/dist/table-dragger.js"></script>
<body>
<table id="table">
<thead>
<tr>
<th class='handle'>header1<i class="handle"></i></th>
<th class='handle'>header2</th>
</tr>
</thead>
<tbody>
<tr>
<td>conten1</td>
<td>conten2</td>
</tr>
<tr>
<td>conten3</td>
<td>conten4</td>
</tr>
</tbody>
</table>
</body>
Good Day :)
so first of all im kinda new to javascript and i cant make my script work when i put it on my site but it works in fiddle(because onload) i have the script in seperate file so here is how i have it now
script.js
var start = $('#calcstart'),
end = $('#calcend'),
brk = $('#calcbreak'),
total = $('#calcadded'),
timespan;
$('input').keyup(function () {
var e = toMins(end.val()),
s = toMins(start.val()),
b = toMins(brk.val());
if (!s || !e)
return;
var output = (e - s - b) / 60;
total.html(Math.floor(output) + ':' + toDouble(Math.round((output % 1) * 60)));
});
function toMins(val) {
if (!val)
return 0;
val = val.split(':');
return (Number(val[0]) * 60) + Number(val[1] || 0);
}
function toDouble(n) {
return n < 10 ? ('0' + n) : n;
}
livecalc.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Start:</td>
<td><input id="calcstart" placeholder="hh:mm"></td>
</tr>
<tr>
<td>end:</td>
<td><input id="calcend" placeholder="hh:mm"></td>
</tr>
<tr>
<td>break:</td>
<td><input id="calcbreak" placeholder="hh:mm"></td>
</tr>
<tr>
<td>Total:</td>
<td><span id="calcadded"></span></td>
</tr>
</table>
https://jsfiddle.net/frilleee/3brha920/1/
so the question is how do i make this script work? how do i put it onload? or what should i do?
Edit1 Okey i dont know how but it started work now dident change anything :S i have tested it for 2 days with the same code and not working :S
Use script tag like this
<script src="script.js"></script>
In your HTML. Save your script as 'script.js' and put script tag at the end inside body tag.
Like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr><td>Start:</td><td><input id="calcstart" placeholder="hh:mm"></td></tr>
<tr><td>slut:</td><td><input id="calcend" placeholder="hh:mm"></td></tr>
<tr><td>rast:</td><td><input id="calcbreak" placeholder="hh:mm"></td></tr>
<tr><td>Total:</td><td><span id="calcadded"></span></td></tr>
</table>
<script src="script.js"></script>
Or
Put your whole script code inside script tag.
<script>
// Your script here.
</script>
For jQuery, you need to wrap your codes inside
$(document).ready(function(){
// js and jquery codes in here
});
Read: https://learn.jquery.com/using-jquery-core/document-ready/
Also, do you include your script.js file inside your HTML?
Check the Developer Tool > Console to find any other error related to javascript.
I have a few "div" sections that are called by my Javascript function using document.getElementById('ID_NAME').style.display='block'.
My question, is there a way to include these "div's" in a .js, .css or another type of library sourced from my header?
If I copy and paste the div code directly into the head it works fine, however, when I try to include it in my .js or .css libraries it wont execute.
CODE
<script type="text/javascript>
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(function(){
document.getElementById('EXAMPLE1').style.display='block';}, 3000);}}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
I know there has to be a way to insert "div" code into a library. I need some of my clients to "src" it into their own websites easily.
Much appreciated Stack community!
Jon
In another separate JS file, divs.js:
divs.js
function changeDiv(){
document.getElementById('EXAMPLE1').style.display='block';
}
index.html
<script src="divs.js"></script>
<script type="text/javascript">
function myFunction() {
var a = window.location.href;
var b = "http://www.myblog.com/";
if (a == b) {
setTimeout(changeDiv, 3000);
}
window.onload = myFunction();
</script>
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
Also, there seems to be syntax errors in your code. Try to run this file with a JS console (use something like "Firebug") for debugging purposes.
I wanted to post that I finally worked this problem out. While my Javascript library wouldn't support code with some code in it, I was able to convert everything with DOM.
OLD CODE::
<div id="EXAMPLE1" class="offer_content">
<embed src="http://www.domain.com/" width="100%"
height="100%">
</div>
NEW CODE::
var embed = document.createElement('embed');
embed.setAttribute("src", "http://www.domain.com/");
embed.setAttribute("width", "100%");
embed.setAttribute("height", "100%");
var content = document.createElement('div');
content.id = 'EXAMPLE1';
content.className = 'offer_content';
content.appendChild(embed);
document.getElementsByTagName('body')[0].appendChild(content);
my question is about a code combining HTML5 features ContentEditable and localStorage.
Here is my two JS function, one for storing the user edit in the table cell, another for getting the value and pass it to the table cell.
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
}
function applyUserEdit() {
if (localStorage.getItem("userEdit")){
var new_value = localStorage.getItem("userEdit");
}
document.getElementById('prjSch_row1_col1').innerHTML = localStorage.getItem("userEdit");
}
</script>
and here these two functions embedded in body content:
...
<td id="prjSch_row1_col1" contenteditable="true" onkeyup="storeUserEdit(this.id)" >
</td>
<script>applyUserEdit()</script>
...
I want to use this to many table cells in my HTML page and how I can replace prjSch_row1_col1 with id and pass it to function getUserEdit();
thanks a lot!
Are you trying to do something like this. because what you mention in the question is not enough to me to think about an answer. When do you need to fire applyUserEdit() function, on page load or ...
Please let me know enough details.
16/08/2013 >
Very sorry for the delay! Please find the below code which I tested in Firefox. Is this the behavior you want. Please don't test in fiddler. It's not working there, I don't know why.
`
<head>
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
localStorage.setItem('userEditControl', id);
}
function applyUserEdit(id) {
var new_value = '';
if (localStorage.getItem("userEdit")){
new_value = localStorage.getItem("userEdit");
}
if(localStorage.getItem('userEditControl') === id){
document.getElementById(id).innerHTML = localStorage.getItem("userEdit");
}
//this is just to check whether the code is working
document.getElementById('log').value = document.getElementById('log').value + '\n' + localStorage.getItem("userEdit");
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>User Name:</td>
<td id="uname" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
<tr>
<td>Password:</td>
<td id="pword" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
</table>
<textarea multiline="true" id="log"></textarea>
</body>
`
Please let me know if you have any issues...
Basically here is the code I have, it adds the share buttons to the existing page. Now what I want to do, is add the sharethis button(which gets called via javascript) next to the twitter image(on the right)
Share javascript:
<script type="text/javascript">
(function() {
function replaceAll(text,strA,strB){while ( text.indexOf(strA) != -1)
{text = text.replace(strA,strB);} return text;}
var share = {"html":"<div class=\"share\" style=\"text-align: left;\">\n\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\n\t\t<tr>\n\t\t\t
<td colspan=\"16\" style=\"padding: 0px;\">\n\t\t\t\t<h4 style=\"margin-bottom:
0px\">Share this with others! <\/h4>\n\t\t\t<\/td>\n\t\t<\/tr>\n\t\t<tr>\n\t\t\t\n\t
\t\t<td align=\"center\" style=\"padding: 0px 0px 0px 0px;\">
<a href=\"http:\/\/twitter.com\/home?status=TTIITTLLEE (UURRLL)\" title=\"Click to
share this page on Twitter\"><img src=\"http:\/\/img.site.com\/images\/sm\/16
\/Twitter%2001.png\" border=\"0\"\/><\/a><\/td>\n\t\t\t<td width=\"0\"> <\/td>
\n\t\t<\/tr>\n\t<\/table>\n<\/div>"};
share.html = replaceAll(share.html, "UURRLL", location.href);
share.html = replaceAll(share.html, "TTIITTLLEE", document.title);
$(function() {
$("#question .post-taglist").append("<div style='float:right'>"+share.html+"</div>");
});
})();
</script>
Sharethis button javascript that I'm trying to add:
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=394f24b1-b257-4daf-a92d-334c05a91b58&type=website&buttonText=More%20Services&post_services=email%2Csms%2Caim%2Cmyspace%2Clinkedin%2Cfriendfeed%2Cwordpress%2Cblogger%2Ctypepad%2Cbebo%2Clivejournal%2Cxanga"></script>
Can anyone help me do this? Thanks
Can you guys also tell me where the new code should go?
Since you seem be using jQuery already, just use getScript()