|
JavaScript - Noob Needs Help With Chessboard
Hi, i am a newb trying to learn how to make websites and i'm having troubles with a chess board i'm trying to make.
The point is that i want to be able to create lessons with it for children, as in make a specific setup and have one (or more, if possible) specific move(s) give a different result (like a popup-box or something) then a wrong move. I copied a drag and drop chessboard from the inet which i got figured out. But don't know how to create a "good move" and a "bad move". Here is some of the code: <head> <style type="text/css"> #chess_board { border:5px solid #333; } #chess_board td { background:#fff; height:50px; text-align:center; vertical-align:middle; width:50px; } #chess_board tr:nth-child(odd) td:nth-child(even), #chess_board tr:nth-child(even) td:nth-child(odd) { background:#ccc; } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } </script> </head> <body> table id="chess_board" cellpadding="0" cellspacing="0"> <tr> <td ondrop="drop(event)"ondragover="allowDrop(event)" id="A8"><div class="piece" draggable="true" ondragstart="drag(event)" id="dragA8">♜</div ></td> this is only the first field this goes on with b8 c8 etc... </tr> <tr> a7 b7 etc... as u can see i am using html5 drag and drop for the piece-moving and a table to create the field, is it possible to create a if...else statement inside the drop functon to make only a specific piece able to accually be dropped (but maintain the ability to drag the other pieces) Thanks in advance, Jasper Rigters Similar Tutorialsi got this code which will open a new link in a new window. Code: <script type="text/javascript">
$(function(){
$(".popup").click(function(event){
event.preventDefault();
var href = $(this.)attr("href");
var width = $(this.)attr("data-width");
var height = $(this.)attr("data-height");
var popup = window.open (href, "popup",
"height=" + height +",width=" + width + "");
});
});
</script>
This is the html which it should be targeting. Code: <li><a href="http://www.google.com" data-width="600" data-height="400" class="popup">Latest Posts</a></li> i'm just starting out with js/jq. i dont know what's wrong. thanks for your help. p.s I have explicitly tried the onclick approach where I already gave the function a name followed by () between quotes but same thing happens. The link opens in the same window. please could you help me i am using highcharts and cant get the dates to show at the bottom from mysql over 5 days please could some one help me with this thank you here is the chart database layout code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Daily Temperature 8 Conv</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="./js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript" src="js/theme-wsl.js"></script>
</head>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<?php
$db = @mysql_connect("localhost", "8conv", "*******") or die("Connection Error: " . mysql_error());
mysql_select_db("tempmonitor") or die("Error connecting to db.");
$sql = "SELECT * FROM `8conv`";
$result = mysql_query($sql);
$data = array();
while ($row = mysql_fetch_array($result)) {
$temp1[] = (int)$row['temp1'];
$temp2[] = (int)$row['temp2'];
$time[] = $row['timestamp'];
}
$temp1 = json_encode($temp1);
$temp2 = json_encode($temp2);
$time = json_encode($time);
?>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Weekly Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: 8 conveyor',
x: -20
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' oC ';
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
title: {
text: 'Temperature ( oC )'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
name: 'Temp 1',
data:<?php echo $temp1; ?>,
},
{
name: 'Temp 2',
data:<?php echo $temp2; ?>,
}]
});
</script>
</head>
</body>
</html>
thanks Hey! First off you guys rock! Second im a massive noob - like beyond noob. Ok so heres the deal guys and gals: I use Kampyle (a feedback form thing) and when my viewers click my feedback button a new window pops up and is the form. Like this (plus thats my site if you want to try it): However! theres this site (yes my arch enemy, well were actually two different things and hey i dont even speak their language) and they use the same feedback thing by Kampyle too. But the catch is theirs is inbuilt. something like Lightbox Javascript but for forms/windows. or Facebook's popup notices? so theirs looks like this: This make me ANGRY!!! cause i want that and ive had to ask stupid people cause you guys and gals are way too advance for me... well i am only 17... anywho... WHO CAN HELP ME??? if you want to test the difference between the two forms, my site: that creative corner and click the feedback button. their site:Lyoness and click the feedback button in the bottom right corner. THANK YOU SO MUCH!!! I tried posting this: <button type="button" onclick="JavaScript:alert('Let's assume.....')"> <img src="question.jpg" alt="Click here" /> <br />Click for Answer!</button> and it shows the button with the picture, but I am unable to click it. Can you please help me? Thank you in advance. There has to be a way to do what I want to do but I'm fugged iif I know how. Here's the problem... A page has three frames - top, left and disp. Top and left contain a number of buttons that display another page in disp. All the buttons need to behave as one set of radio buttons; when a button is clicked any other button returns to the non-clicked state. The really awkward bit is there's an image in top that changes depending on the currently clicked button and that image is behind the buttons. Here it is in pseudocode of sorts. Code: On click button[n]
Button[LastClicked].Image := Button[LastClicked].UnClickedImage;
Button[n].Image := Button[n].ClickedImage;
Top.Image := Button[n].TopImage;
end;
I hope that makes sense. If some kind soul has any idea of how to do that I'd be very grateful. Thanks. Simon. hi all i'm kind of new to the JS world and need your help with some thing i hope it not that big to ask. if you go to linkedin website with your user (www.linkedin.com) you will see a bar called LinkedIn Today. what i need is this kind of bar but with messages changing all the time(moving) is this some thing i need to write from scratch or there some example that i can use? any help will be good for me now because i need to do it ASAP regards,shay Ok so before you help, just letting you know i'm a BIG noob at coding so please give noob friendly instructions, that would be great thanks I also googled and it didn't help so don't ask. Ok so I'm sure a few people here have heard of the game minecraft? well someone i know (distant relation) showed me something that will track players in the game on servers and i just need help to get it working. He told me i need node js installed to get it working which i don't know how to do (I'm on a mac). I did install python because some people told me i need python to install node js but I'm not sure. So pretty much how do i get node js installed and after that, how do i get the player tracker thing working? heres the github url for the player tracker: https://github.com/koryk/griefguild Much appreciated to anyone that helps! I'm a nooblet so go easy and thank you! Hey guys I'm new to Javascript and need some help with this code Code: <HTML> <HEAD> <TITLE>Swap Test</TITLE> </HEAD> <BODY> <script type="text/javascript"> var numberOne; var numberTwo; // Declaring the values of numberOne and numberTwo var numberOne = 9; var numberTwo = 1; // Variables are swapped numberOne = numberTwo; numberTwo = numberOne; // Output is displayed on-screen document.write (numberOne); document.write (numberTwo); </script> </BODY> </HTML> What I need to do is to declare the two variables, swap their values and then show the results on the screen. ...but it's not working, any ideas? Thanks! x I am working on a site for an online radio station and I want an external player to launch on site visit and to continue playing as the visitors surf my site. I feel I am 95% there as I have the player spawning on launch and checking for popup blockers. If a popup blocker is found the user is prompted to add my domain to their allowed lists so that future visits will launch the player right out of the box. My problem is this. When someone navigates back to the "home" page (where the script is located the external player window reloads and I do not want it to. I have found a couple of sites that say do this and that but I am a 100% novice at javascript and can not figure it out. here is the url of the site I am building http://www.radiotrips.com/czmradio - If you have popup blocker on you should get an alert. If not a small player should launch here is the code that I am using to spawn the external player and check for popup blockers ************** <script language="javascript" type="text/javascript"> function detectPopupBlocker() { var czmTest = window.open("http://www.radiotrips.com/czmradio/player/mini/no_ads.html","Cozumel Radio","width=478,height=260"); if (!czmTest) { alert("We were unable to automatically open the Cozumel Radio Player due to your pop-up blocker... Please add CozumelRadio.net to your allowed sites for your best listening experience"); } else { window.open("http://www.radiotrips.com/czmradio/player/mini/no_ads.html","Cozumel Radio","width=478,height=260"); } } ************** if anyone could add the code that would make the browser check to see if this window is already open and if so not reload it I would GREATLY appreciate it. I feel like it is 1 to 2 lines of code max according to what I have seen elsewhere but just cant figure it out. Thanks a Million in advance Chris I'm quite new to JavaScript, but I wanted to add a feature to a sample website that I need to have done by tomorrow night. I have two HTML paragraphs which I will call "a" and "b". Below those paragraphs I have a text box and a submit button. This is how I declared them in the HTML doc: Code: <input type="text" name="message" value="Blank Message" id="newsmessage" /> Code: <input type="button" value="Post" id="submitbutton" onclick="updatepost()" /> Now when I click the submit button I want paragraph b to replace itself with paragraph a, and I want paragraph a to replace itself with the text in the text box. Here's the JavaScript that I have written. (I'm aware it's probably quite off.) Note: paragraph a is toppost, paragraph b is bottompost, the text box is named message, and I created p1 and p2 as temporary holders for the strings. Err... variables. Code: <script type="text/javascript">
function updatepost()
{
p2=document.getElementById("toppost");
document.getElementById("bottompost").innerHTML=p2;
p1=document.message.elements[i];
document.getElementById("toppost").innerHTML=p1;
}
</script>
As of right now the paragraph a holds the text "a" and paragraph b holds the text "b". When I click post paragraph a still reads "a" and paragraph b reads "[object HTMLParagraphElement]". Sorry for my minimal JavaScript knowledge; I have full intentions of fully learning the language quite soon. I just wanted to implement this feature in a site that I had to create and my deadline is tomorrow. Thanks guys! -Dave I'm having a problem. All i want to happen is this: The program asks you what's up. It gives you a prompt and the prompt message tells you to say "nm" (it means nothing much) And the if statement is that if you put nm into that prompt, it'll display a message. However, when i put in the prompt, even if i put in a bogus message, it'll still display the if statement. What do i do? Here's my code. Code: <html>
<head>
<title> The nothing much page! </title>
<script type="text/javascript">
var nmj;
alert("what's up man?");
var nmj = prompt("say nm , it means nothing much");
if (nmj = "nm")
{
alert("What!? Nothing much!? Sounds boring.")
}
alert(nmj);
</script>
</head>
<body>
NOTHING MUCH? WHATTT!?!?
</body>
</html>
Hello, I am trying to get an image to change based on a date range within an array, then display that image on a webpage, if there is no corresponding date, then display a default image. I have NEVER coded in JavaScript and need some assistance with this. Here is the array example: Code: var holiday = new Array() holiday[0] = "images/bronc.jpg" holiday[1] = "0210, 0214, images/Valentines_Pic.jpg" holiday[2] = "0317, 0317, images/St-Patrics_Day.jpg" holiday[3] = "0701, 0704, images/4th_Of_July.jpg" holiday[4] = "1015, 1031, images/Halloween.jpg" holiday[5] = "1111, 1130, images/Thanks_Giving.jpg" holiday[6] = "1201, 1227, images/Christmas.jpg" holiday[7] = "9999, 9999, images/New_Years_Pic.jpg" holiday[0] would be the default image that would display if no other images fall in the date range at the begining of each array element. Then something like get date alter date to be mmdd if date >= firstarraydate and date <= secondarraydate then set image to ********.jpg else set image to *******.jpg loop then in the body display the correct image <p><img src="image" /></p> Or something simple like that. I have searched and cannot find anything simple like that. I have tried a few available scripts for rotating banners but they always either do not work at all or they use one specific date or time and since I am not too swift with javascript, any help would be greatly appreiated. Thanks Kel This is what i am trying to do. I want to have data called up when a certain number is entered. If the correct item # is entered, the information is pulled up. Is this a good application for javascript? or for something like flash and actionscript? I'm brand new to both, but i'm very willing to learn. Thanks for your help! I've only just stated to teaching myself the general basics of web development, and I've hit a problem which I haven't been able to fix, even after some extensive research I haven't found a solution. The problem is not in the HTML I'm quite sure, hence why I deemed this to be the best place to post this. I'm sorry for wasting your time on something stupid like this, but I'm completely lost! Extra: I really couldn't think of a title that could describe this 'problem', my bad. Description: When clicking the calculate button nothing happens, but when I changed the code inthere to something easy (just print a line in a HTML paragraph) it worked. So by that I was able to deduce the problem lies somewhere in the Javascript. Code: <!DOCTYPE html>
<html>
<body>
<div>
<form>
<fieldset>
<h1>Quadratic equation</h1>
a:<input type="text" id="a" name="a"><br><br>
b:<input type="text" id="b" name="b"><br><br>
c:<input type="text" id="c" name="c"><br><br>
<button type="button" onclick="vkv()">Calculate</button>
</fieldset><br>
<fieldset>
<p id="output">Answer appears here</p>
</fieldset>
</form>
</div>
<script>
function vkv() {
var a = document.getElementById(a);
var b = document.getElementById(b);
var c = document.getElementById(c);
var D = pow(b,2) - 4 * a * c;
if (D >= 0){
var x1 = (-b + sqrt(D)) / (2 * a);
var x2 = (-b - sqrt(D)) / (2 * a);
if (x1 == x2) {
document.getElementById("output").innerHTML = "Value for x is:" + x1 + ".";
} else {
document.getElementById("output").innerHTML = "Values for x a " + x1 + " en " + x2 + ".";
}
} else {
document.getElementById("output").innerHTML = "Discriminant is negative, " + D + ".";
}
}
</script>
</body>
</html>
Reply With Quote 02-03-2015, 10:31 PM #2 jmrker View Profile View Forum Posts Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts Welcome to the forum... NOTE: I have not tested the logic of your code to see if it give the right answers, but this should get you started by at least seeing some results displayed. Primary problem was not using Math. before the math commands like pow and sqrt. Also, need quotes around id values in the document.getElementById statements And those statements require a value associated with the element Plus, it returns a string, hence the need for a Number() function or some other string to conversion. It is always a good idea to check the error console on most browsers to get an idea of the simple problems. That's where I found most of your errors. Code: <!DOCTYPE html>
<html>
<body>
<div>
<form>
<fieldset>
<h1>Quadratic equation</h1>
a:<input type="text" id="a"><br><br>
b:<input type="text" id="b"><br><br>
c:<input type="text" id="c"><br><br>
<button type="button" onclick="vkv()">Calculate</button>
</fieldset><br>
<fieldset>
<p id="output">Answer appears here</p>
</fieldset>
</form>
</div>
<script>
function vkv() {
var a = Number(document.getElementById('a').value);
var b = Number(document.getElementById('b').value);
var c = Number(document.getElementById('c').value);
var D = Math.pow(b,2) - 4 * a * c;
if (D >= 0){
var x1 = (-b + Math.sqrt(D)) / (2 * a);
var x2 = (-b - Math.sqrt(D)) / (2 * a);
if (x1 == x2) {
document.getElementById("output").innerHTML = "Value for x is:" + x1 + ".";
} else {
document.getElementById("output").innerHTML = "Values for x a " + x1 + " en " + x2 + ".";
}
} else {
document.getElementById("output").innerHTML = "Discriminant is negative, " + D + ".";
}
}
</script>
</body>
</html>
Good Luck! I have a slideshow that goes through pictures once you click on the Play button and doesn't stop until you press on the Stop button. How can I make it so that it automatically plays once the website loads without having to click on the Play button? Heres the code: Code: <div class="tabs png"><span class="tabs-inner"><a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a></span></div>
<div class="slider-indent-button">
<a href="#" onClick='$("div.tabs").tabs().play();'>Play</a>
<a href="#" onClick='$("div.tabs").tabs().stop();'>Stop</a>
</div>
All help is much appreciated!!! Could someone please change this line so that it respects the global namespace: Code: var selected = students.options[students.selectedIndex].value; The error console is telling me to use document.getElementById but I don't know where to put it. Thanks. I am trying to dynamically add rows to a table when the user clicks a button. here my function Code: function addFocusArea()
{
if(addTlFocusAreaCount <= 5)
{
//Create new Title row
var titleRow = document.createElement("tr");
var titleCol = document.createElement("th");
var titleText = document.createTextNode("Additional Focus Area " + addTlFocusAreaCount);
titleCol.appendChild(titleText);
titleRow.appendChild(titleCol);
document.getElementById("focusTable").appendChild(titleRow);
//Create new category row
var categoryRow = document.createElement("tr");
var categoryCol = document.createElement("td");
var categorySelect = document.createElement("select");
var categories = document.getElementById("<%=DecisionToolKeys.PRIMARY_FOCUS%>");
//copy a dropdown menu that is already existing on the page
for(var i=0; i<categories.length; i++)
{
var option = document.createElement("option");
option.value = categories[i].value;
option.text = categories[i].text;
categorySelect.options.add(option);
}
categoryCol.appendChild(categorySelect);
categoryRow.appendChild(categoryCol);
document.getElementById("focusTable").appendChild(categoryRow);
addTlFocusAreaCount++;
}
else
{
alert("You cannot add more than five additional practice areas.");
}
}
And here is my button Code: <input type="button" value="Add Focus Area" onclick="JavaScript:addFocusArea()"/> This is working in Firefox and Chrome, but not IE 8. Any clue as to why? Thanks, Nick Total javascript noob here, but managed to get this working: Code: $(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect1024.css"});
}
else
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detect800.css"});
}
if ((screen.width>=1280) && (screen.height>=1024))
{
$("link[rel=stylesheet]:not(:first)").attr({href : "wp-content/themes/rabbithole/css/detectlarge.css"});
}
});
Like i said, its working fine. However i was hoping to make it also work on the fly, so if the user resizes the window, the different stylesheets are used. Ive been told to: 1. Put the working gubbins into a separate function and 2. Call the function from both load and resize events - But i dont know how to do this. Any help would be really appreciated! I have a page that open two frames. Second frame, most of the page, is empty. First frame contains a form that retrieves user input, when you click the button, it send that input back to the original parent html, which detects the GET parameters, and builds a custom URL. I want to then load that custom URL in the 2nd empty frame. I figure I need to modify the src atttribute of the 2nd frame in the frameset, but I can't make it work. Code: <frameset id='parent' rows='10%,90%'>
<frame id='frm1' src='./form.html' />
<frame id='frm2' src='' />
</frameset>
<script>modFrmSrc();</script>
where modFrmSrc() checks for the GET values, builds the URL, and then tries to load the URL in frm2. Is there a way to get this done? |
|||||||