|
JavaScript - Simple Simulation In Js And Html
I've been given the challenge of creating a simple simulation in Javascript and html. Here are the criteria:
- A bunny occupies a meadow that is 30 units wide and 30 units long. - The bunny has a limited amount of energy. 1000 units to start. - The bunny can only move one spatial unit per unit time. Each movement may be in any direction. - Each time the bunny moves, it spends 1 unit of energy. - The meadow is bathed by sunlight, and the soil is fertile and rich. Plants grow in the meadow. These plants can be eaten by the bunny. Each plant boosts the energy of the bunny by ten units. When the plant is eaten by the bunny, it should no longer be present in the meadow. - Plants grow at random in the meadow. - Plants boost the bunny's energy by 10 units - No two plants may occupy the same space in the meadow. So far, I have the bunny moving properly and its energy adjusting properly, but I can's seem to figure out how to visually add plants to the meadow. My current code is below: HTML: Code: <div id="energyFeedback" style="width:300px; height:10px; border:1px solid #666;"> <div id="energyFeedbackBar" style="width:100%; background-color:#999; height:100%;"></div></div> <div id="gameContainer" style="position:absolute; top:30px;"> <div id="meadow" style="width:300px; height:300px; background-color:#957E52; position:absolute; left:0px; top:0px;"> <div id="bunny" style="position:absolute; height:10px; width:10px; background-color:#FCC;"></div> </div> </div> JS: Code:
//The bunny will start in the center of the meadow... therefore 15units in x & 15units in y directions
var bunny = {name: "Bunny", x: 15, y: 15, energy: 1000};
//as plants are created, they will get pushed into this array:
var allPlants = [];
//Graphic stuff
// Create a reference to the HTML element on screen so that you can move it around
bunny.graphic = document.getElementById('bunny');
energyFeedbackBar.graphic = document.getElementById('energyFeedbackBar');
//growthFactor will determine how likely a plant is to grow. Modify this value to answer the question above.
var growthFactor = 0.5;
//make a list of directions of travel for our Bunny
var directions = [
n = {x: 0, y: -1, name: "North"},
e = {x: 1, y: 0, name: "East"},
s = {x: 0, y: 1, name: "South"},
w = {x: -1, y: 0, name: "West"},];
//setInterval will make the program run every 100ms (in this case)
var int = setInterval(Simulation,100);
//intervalCount will keep track of our units of time expended
var intervalCount = 0;
//clear the interval (once the angriest bunny has been determined)
function stopInt() {
clearInterval(int);
};
//this function gives a random element from an array (directions in our case)
function randomElement(_array) {
if (_array.length == 0)
throw new Error("The array is empty.");
return _array[Math.floor(Math.random() * _array.length)];
};
//the moveBunny function will take the bunny and and move it in a random direction
function moveBunny() {
// if the bunny is still alive...
if (bunny.energy > 0) {
//choose a random direction by running our "directions" array through our randomElement function.
var directionOfMovement = randomElement(directions);
//the bunny's position is changed by adding a random value to his x and y coordinates
var newPosX = bunny.x + directionOfMovement.x;
var newPosY = bunny.y + directionOfMovement.y;
//we must constrain the bunny's movement to within the 30 by 30 meadow
if (newPosX < 0 || newPosX > 30) {
//basically, if the bunny lands beyond 30px or before 0px in the x or y directions,
// their value gets reset to the min or max distances.
if (newPosX > 30) {
bunny.x = 30;
}
else {
bunny.x = 0;
}
}
//If they fall within the meadow, the bunny's x and y value are now updated to the new value.
else {
bunny.x = newPosX;
}
if (newPosY < 0 || newPosY > 30) {
if (newPosY > 30) {
bunny.y = 30;
}
else {
bunny.y = 0;
}
}
else {
bunny.y = newPosY;
}
}
else{
stopInt();
};
//move bunny graphically on the browser.
bunny.graphic.style.left = (bunny.x * 10) + 'px';
bunny.graphic.style.top = (bunny.y * 10) + 'px';
console.log(bunny.name + " moved to x: " + bunny.x + ", y: " + bunny.y + ", " + directionOfMovement.name);
//bunny's health is reduced by 1 unit per movement.
bunny.energy -= 1;
//represent this graphically in the browser by adjusting the width of the energyFeedbackBar to represent the bunny's current energy level.
energyFeedbackBar.graphic.style.width = (bunny.energy/10)*3;
console.log(bunny.name + " has " + bunny.energy + " units of energy left.");
};
function createPlant() {
//*********************************Here is where the problem begins...***********************************
//the plant needs to appear on the screen as a small green square (approx 5 by 5px) within the 30 by 30px meadow.
//Every plant created must be pushed onto the array 'allPlants' so that it can be compared to the position of the bunny.
//I thought that maybe divs could be dynamically generated but I'm not sure if this is the most effective way, or if I'm even doing this properly. I tried this below:
/*var plant = document.createElement("div");
plant.id = "plant" + intervalCount;
plant.style.x = Math.floor(Math.random()*30) + "px";
plant.style.y = Math.floor(Math.random()*30) + "px";
plant.style.width = 5 + "px";
plant.style.height = 5 + "px";
plant.style.background = "#090";
document.documentElement.appendChild(plant);
console.log("plant created at x: " + plant.x +" and y: " + plant.y);*/
};
//Simulation will determine whether a plant grows,
//...moves the bunny
//... and compares the position of the bunny to the position of all the plants.
function Simulation(){
//To keep track of time, add to the intervalCount
intervalCount++;
//state time in the console
console.log("Time: " + intervalCount +" units");
//grow a plant randomly (dependant on the growth factor)
if (Math.random() < growthFactor) {
createPlant();
}
//move the bunny
moveBunny();
// Compare bunny's position to the plants' positions, if there are plants.
if (allPlants.length >= 1) {
for (var j = 0; j < allPlants.length; j++) {
// compare x and y co-ordinates
if (bunny.x == allPlants[j].x && bunny.y == allPlants[j].y) {
console.log("The bunny ate a plant!");
//increase bunny's energy
bunny.energy = bunny.energy + 10;
// *********Here the plant must also be removed from allPlants and removed visually from the meadow***********
};
};
};
};
Any help with this generation of plants would be appreciated! Similar TutorialsHi everyone, I am new to javascript, i have not read any books, but i am trying to figure out the language on the go. I am stuck with a simple program that i am trying to create for a class project. Any suggestions or help would much appreciated. My code is very simple in which i would like to convert a number value into different format of temperature. My code is listed below, it is not working in the browser. Help me fix it. ********************************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html" http-equiv="Content-Type" /> <title>E6B temp conversion</title> <script type="text/javascript"> function ConvertTempToC(TempConversionC) { var temperature = TempConversionC.F.value; if (temperature.length > 0) { TempConversionC.TempC.value = Math.round(5/9 * (temperature - 32)); document.write(TempConversionC.TempC.value); } } </script> </head> <body> <b>Fahrenheit to Celsius</b> <br/> <input size="6" name="F"/> <br/> <input onclick="ConvertTempToC(this.form)" value="Calculate Celsius" type="button" name="Submit11"/> <br/> <input readonly="readonly" size="6" name="TempC"/> </body> </html> I'm trying to convert A world Population Counter from Flash into HTML/Javascript. But I'm having difficulties and It would be great if someone can help me out. The sample show a analog clock, But the html version I want should use just a digital clock, it's simpler I think http://www.webstylelabs.com/worldclock2.swf http://www.webstylelabs.com/actionscript.txt Here is my code, http://www.webstylelabs.com/clock.html So just plain input digital counter is ok I appreciate any help I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page. This is my current code: Code: <html>
<head>
<script>
function processform()
{
if ( document.form1.item1.value == "")
{
alert("No Item Chosen")
}
else
{
chosen = ""
len = document.form1.c1.length
for (i = 0; i <len; i++) {
if (document.form1.c1[i].checked) {
chosen = document.form1.c1[i].value
}
}
if (chosen == "") {
alert("No Color Chosen")
}
}
else {
itemname = document.form1.item1.value;
itemcolor = document.form1.c1.value;
itemsize = document.form1.size.value;
document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname;
}
}
</script>
</head>
<body>
<h1>Store</h1>
<br/><br/>
<form name="form1">
<h4>What item would you like to buy?</h4>
<input type="text" name="item1" value="" /><br />
<br/><br/>
<h4>Color</h4>
<input type="radio" name="c1" value="blue" /> Blue<br />
<input type="radio" name="c1" value="red" /> Red<br />
<input type="radio" name="c1" value="green" /> Green<br />
<input type="radio" name="c1" value="yellow" /> Yellow<br />
<br/><br/>
<h4>Size</h4>
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>
<br/><br/>
<button onclick="processform()">Purchase</button>
<br/><br/>
<textarea rows="2" cols="40" name = "txtarea1"> </textarea>
</form>
</body>
</html>
When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong? There are some VERY similar questions and answers, but I have been unable to get them to work for me. The simple situation is calculate days since a date with JS, and output it as part of a text line: create variable xxx with subtraction, or datediff() <body> <p>XYZ has been in effect for (xxx) days.</p> </body> Nothing more, & thanks. Reply With Quote 01-17-2015, 03:40 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts When I have a question about javascript I go to w3schools JavaScript Tutorial or MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript. FYI datediff() is not an official JS function. What I normally do is get the date as a UTC number (millsecs after an old date) do the math and then convert back. Code: <!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title></title>
</head>
<body>
<div id="her" style="clear:both;"></div>
<script type="text/javascript">
var d1 = new Date("january 01, 2015");
var d2 = new Date();
var work = d2.getTime() - d1.getTime();
var xxx = Math.round(work/86400000);
document.getElementById("her").innerHTML = 'XYZ has been in effect for '+xxx+' days.';
</script>
</body>
</html>
The number 86400000 comes from 1000*60*60*24 to convert millisecs to days Hello I am pretty new to AJAX & I am making a simple program to input new text refresh inside the HTML element that has the id='result'. My Problem: - The AJAX script fails when I try to change the text inside 'result' using my code, sometimes a whole new page opens with the text I wanted to put inside the result HTML element. Sometimes I just get a notification that an error occured. - I believe it is because of my function state_changed & using the parameter element_id with the function getElementById(element_id).innerHTML = ...; - It should be easy to see where my problem occurs when you look at my code Any advice on why the script fails & how to fix it would be extremely helpful. Code:
var xmlHttp;
function ajax_compatible()
{
// Post: Returns an object if browser is AJAX compatible else false.
if (window.XMLHttpRequest)
{
// users web browser can support AJAX
return ( new XMLHttpRequest() );
}
else if (window.ActiveXObject)
{
// users web browser is IE6 and IE5
return ( new ActiveXObject("Microsoft.XMLHTTP") );
}
else {
alert("Unfortunately your browser does not support AJAX.");
return null;
}
}
function get_cookie(cookie_name)
{
if (document.cookie.length > 0)
{
c_start = document.cookie.indexOf(cookie_name + "=");
if (c_start != -1)
{
c_start = c_start + cookie_name.length+1;
c_end = document.cookie.indexOf(";",c_start)
if (c_end == -1)
{
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function add_comment()
{
// Post: Add user comment & rating to database and update new table row.
// DO WE NEED TO SEND COOKIE ASWELL OR IS IT ALREADY DONE???
xmlHttp = ajax_compatible();
if (xmlHttp == null) {
return;
}
var url = 'http://localhost:8000/cgi-bin/main.py';
alert("add_comment() running");
// Extract CGI variables to pass onto python script
var id = document.getElementById('videoID').value;
var video_id = 'videoID=' + id;
var rating = 'rating=' + document.getElementsByName('rating').value;
var comment = 'comment=' + document.getElementById('comment').value;
var add_rating = 'addRating=' + document.getElementById('addRating').value;
//var cookie = document.cookie;
cgi_var = video_id + '&' + rating + '&' + comment + '&' + add_rating; // + '&' + cookie;
// open python script
xmlHttp.open('POST',url,true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Error is in below line
xmlHttp.onreadystatechange = state_changed(id);
// if I use the following line then it works
// xmlHttp.onreadystatechange = test;
xmlHttp.send(cgi_var);
}
function state_changed(element_id)
{
// Post: Use one function that will be used for each page update.
// This function sends the text returned by the python server script
// onto the browser(HTML element with the id 'element_id') to be displayed.
if (xmlHttp.readyState == 4)
{
document.getElementById(element_id).innerHTML = xmlHttp.responseText;
}
}
function test()
{
// Post: used to test where the problem occurs
// This function works
if (xmlHttp.readyState == 4)
{
document.getElementById('result').innerHTML = xmlHttp.responseText;
}
}
Hi, I'm working on a simple website in which I'm required to use two types of forms input on a webpage. I have decided to make a simple quiz which will be designed as follows; -------------------------------------------------------- Q1: The largest mammal on land is: (radio button choices) Q2: Please tick the two correct answers: (tick boxes, four available... only two correct) ---------------------------------------------------------- (BUTTON: Please click here for the answers) ... answers should appear once the above button is pressed... Answers: Q1: B Q2: A * C Is this possible in a simple way? Sounds quite straight-forward but I'm no expert so forgive me.. Ps: Is it possible to design a radio button which, depending on the choice, the related-text will appear underneath on the same page? So if they select 'A' then paragraph 'A' will show, if they select 'C' then paragraph 'C' will appear (with the rest hiding)... Thanks 4 your time! I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! If I have a javascript var in a webpage(html form textarea VALUE - yui) that contains html code, and want to appear it, in confirmformpage.php, then how to transfer it...? is it really needed go via PHP ...? and ofcourse use innerHTML to write it....yes I usually use an intermitened processform.php script. http://developer.yahoo.com/yui/editor Hi Folks, I've been trying to learn Javascript, I'm fluent with CSS, HTML and not to bad with jQuery and PHP. But I've been trying to learn the core fundamentals of JavaScript. Basically, I have a friend who has a strange take on the English language, so I wanted to make him a translator, so that you could input one of his misspellings and it would bring up the proper word. <html> <head> <script type="text/javascript" src="js/modernizr.js"></script> <script type="text/javascript"> // Mox spellings function checkMox () { var bm = document.forms["transMox"]["mox"].value; if (bm == "wid") { document.write("wid = with"); } else { document.write("Please enter a Moxism"); } }; </script> </head> <body> <header> <div id="title"> <h1>I drink!</h1> <h2>Therefor I am...</h2> </div> <nav> <ul> <li>The history of Moxisms</li> <li>Examples of Moxisms</li> <li>The man himself...</li> </ul> </nav> </header> <h3>Welcome to the Big Mox translator</h3> <form id="transMox" action="#output" method="post" onsubmit="return checkMox()"> <input type="text" id="mox">Enter a Moxism</input> <br /> <input type="submit" id="submit" onSubmit="checkMox();">G0!</input> </form> <div id="output"> </div> </body> </html> Obviously that's just for one word, so I wondered how to structure more words into an array or something? Anyway, cheers in advance for the help guys! Hello, Below is my Javascript, CSS and HTML code for the navigation menu on http://033691f.netsolhost.com/stnew/ -- a test site for my company. Note: I did not write the Javascript code nor do I know how to write javascript. I take no credit. When the page first opens, the navigation shows fully expanded for a second, then collapses all. I would like to cut out the expanded view if possible and have the page load with the menu fully collapsed. Is there any way that would work? Thank you in advance for any input! Code: function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
var cookie = $.cookie(this.id);
if(cookie === null || String(cookie).length < 1) {
$('#' + this.id + '.expandfirst ul:first').show();
}
else {
$('#' + this.id + ' .' + cookie).next().show();
}
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
if((String(parent).length > 0) && (String(this.className).length > 0)) {
if($(this).next().is(':visible')) {
$.cookie(parent, null);
}
else {
$.cookie(parent, this.className);
}
$(this).next().slideToggle('normal');
}
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
if((String(parent).length > 0) && (String(this.className).length > 0)) {
$.cookie(parent, this.className);
}
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
Code: <ul id="menu1" class="menu" style="margin-top:20px;"> <li><a class="m0" href="index.php" style="background-color:#222; color:#fff;">HOME</a></li> <li><a class="m1" href="">WHO WE ARE ...</a> <ul><li><a href="">Company Overview</a></li> <li><a href="">Clientele</a></li> <li><a href="">Multimedia</a></li> <li><a href="">Careers</a></li> <li><a href="">Contact Us</a></li> </ul> </li> <li><a class="m1" href="">WHAT WE DO ...</a> <ul><li><a href="">Promotional Products</a></li> <li><a href="">Screen Printing</a></li> <li><a href="">Embroidery</a></li> <li><a href="">Signage</a></li> <li><a href="">Web Design</a></li> </ul> </li> <li><a class="m3" href="">FIND PRODUCTS ...</a> <ul><li><a href="">Web Search</a></li> <li><a href="">Online Catalogs</a></li> </ul> </li> <li><a class="m4" href="">SUPPORT TOPICS ...</a> <ul><li><a href="">General Information</a></li> <li><a href="">Available Brands</a></li> <li><a href="">Artwork Submissions</a></li> <li><a href="">Color & Substrate Charts</a></li> <li><a href="">Dartman Game</a></li> </ul> </li> <li><a class="m5" href="http://www.screentek.net/blog">READ OUR BLOG</a></li> </ul> Code:
ul.menu { border-bottom:1px solid #ccc; }
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 240px;
}
ul.menu a {
display: block;
text-decoration: none;
}
ul.menu li {
margin-top: 0px;
border-top:1px solid #ccc;
font-size:10pt;
font-family: Segoe-B;
}
ul.menu li a {
background: #fff;
color: #333;
padding: 3px 20px;
}
ul.menu li a:hover {
background: #2b76b7;
color:#fff;
}
ul.menu li ul li a {
background: #fff;
color: #2b76b7;
padding-left: 35px;
font-size:10pt;
font-family: Segoe-R;
}
ul.menu li ul li a:hover {
background: #eee;
border-left: 5px #000 solid;
padding-left: 25px;
color:#333;
}
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
Hi, Im trying to make an imacro/javascript script that checks a webpage for names, and if either of the names are found, i want the script to alert me, if not, continue looping/reloading the page. Im not at all good with javascript, imacro is more sort of my thing, however what i do have, doesnt seem to do anything. var links = document.getElementsByTagName('a'); for (var i in links){ if (links[i].value == "Simon" || links[i].value == "James"){ alert("ATTENTION"); } } i dont know if its something simple i'm missing, or whether im nowhere near, but ive spent all day trying to do this, and lost all patience. Any suggestion/fixes? I am using a show/hide script for my sites FAQs. This is the code: However, when you click on one of the Questions it brings you to the top of the page due to the <a href="#" How do I make it so it doesn't bring you to the top of the page? Code: <html>
<head>
<title>TEST TEMPLATE</title>
<script type="text/javascript">
function showHide(id)
{
var current = document.getElementById(id);
for ( var f = 1; f < 99999; ++f )
{
var div = document.getElementById("FAQ" + f);
if ( div == null ) return; // quit when we run out of FAQs
if ( div != current )
{
div.style.display = "none"; // zap all others
} else {
// toggle current one
div.style.display = ( div.style.display == "none") ? "block" : "none";
}
}
return false; // IMPORTANT!
}
</script>
</head>
<body>
<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
<li> <a href="#" onclick="return showHide('FAQ1')">FAQ one</a></li>
<li> <a href="#" onclick="return showHide('FAQ2')">FAQ two</a></li>
<li> <a href="#" onclick="return showHide('FAQ3')">FAQ three</a></li>
<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>
</body>
</html>
hello coding forums friends please help me i got stuck in sliding a slider that from easyslider. everything is ok when i individually browse from folder see here http://www.sajeebgroup.com/robin/easyslider/slider.php but when i tried to include in a divition in index.php page it do not slide but only one image is show see here right side news update div link is http://www.sajeebgroup.com/ what problem please help me i really going to frustrated to solve this. here is my index.php code with include of easy slide. index.php PHP Code: <?php include 'news/common/connection.php'; ?> <html> <head> <title>Welcome to Sajeeb Group</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 150%; background-color: #000000; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 55%; left: 23%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="swfobject.js"></script> <style type="text/css"> #ticker-container { position:relative; overflow:hidden; width: 170px; height: 200px; padding-top:10px; color:#000000; margin-top:8px; } #ticker { position:relative; width:150px; } </style> <script language="JavaScript"> function openit(link) { var url="./news/newsinfo.php?id="+link; window.open(url,"mywindow","resizable=0,scrollbars=1,height=400,width=400"); } //scroller width var swidth=170; //scroller height var sheight=205; //background color var sbcolor='#ccffff'; //scroller's speed var sspeed=3; var msg='' <?php $str="SELECT * from newsscroll ORDER BY news_id desc"; $res=mysql_query($str) or die("Error in selecting....."); while($dataNews=mysql_fetch_row($res)) { do{ echo "msg+=\"<ul><li><a href=# onclick=openit(\'".$dataNews[0]."\')><font size=2>".$dataNews[1]."</font></a></li><br></ul>\";"; }while($dataNews=mysql_fetch_row($res)); } ?> //End of your messages // Begin the ticker code var resumesspeed=sspeed function start() { if (document.all) iemarquee(ticker); else if (document.getElementById) ns6marquee(document.getElementById('ticker')); } function iemarquee(whichdiv){ iediv=eval(whichdiv) sheight += 50; iediv.style.pixelTop=sheight iediv.innerHTML=msg sizeup=iediv.offsetHeight ieslide() } function ieslide(){ if (iediv.style.pixelTop>=sizeup*(-1)){ iediv.style.pixelTop-=sspeed setTimeout("ieslide()",100) } else{ iediv.style.pixelTop=sheight ieslide() } } function ns6marquee(whichdiv){ ns6div=eval(whichdiv) sheight += 50; ns6div.style.top=sheight + "px"; ns6div.innerHTML=msg sizeup=ns6div.offsetHeight ns6slide() } function ns6slide(){ if (parseInt(ns6div.style.top)>=sizeup*(-1)){ theTop = parseInt(ns6div.style.top)-sspeed ns6div.style.top = theTop + "px"; setTimeout("ns6slide()",100) } else { ns6div.style.top = sheight + "px"; ns6slide() } } </script> <script type="text/javascript" src="swfobject.js"></script> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <style type="text/css"> <!-- .gallery { zoom:1; width:520px; } --> </style> <script type="text/javascript">var LightBoxOpt={autoPlay:false}</script> <link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" /> <script src="engine/js/prototype.js" type="text/javascript"></script> <script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="engine/js/lightbox.js" type="text/javascript"></script> <style> .gallery { zoom:1; width:700px; } .gallery a { display: block ; float:center; margin:5px; padding:5px; height: 150px; border:solid 1px #b8b8b8; background-color:#FFFFFF; opacity:0.87; alignment: center; } .gallery a:hover { opacity:1; } .gallery a img { border:none; display:block; } .gallery a#vlightbox{display:none} .gallery1 { zoom:1; width:520px; } .gallery2 { zoom:1; width:520px; } .gallery3 { zoom:1; width:520px; } .gallery4 { zoom:1; width:520px; } .gallery5 { zoom:1; width:520px; } .gallery6 { zoom:1; width:520px; } .gallery7 { zoom:1; width:520px; } .gallery8 { zoom:1; width:520px; } .gallery9 { zoom:1; width:520px; } .gallery10 { zoom:1; width:520px; text-align:center; } .style1 {font-family: Arial, Helvetica, sans-serif} .style3 {font-size: 12px} .gallery11 { zoom:1; width:520px; } .gallery12 { zoom:1; width:520px; } .gallery13 { zoom:1; width:520px; } .gallery14 { zoom:1; width:520px; } .gallery15 {zoom:1; width:520px; } .gallery15 { zoom:1; width:700px; } .gallery111 {zoom:1; } .gallery121 {zoom:1; } .gallery131 {zoom:1; } .gallery1111 {zoom:1; } .gallery1311 {zoom:1; } .gallery13111 {zoom:1; } #link_style { text-decoration:none; color:#000000;} </style> </head> <body background="images/wr_body.gif" 'images/btn%20import%20over.gif','images/btn%20contact%20over.gif','images/btn%20home%20over.gif','images/btn%20link4%20over.gif')"> <div align="center"> <table cellpadding="0" cellspacing="0" width="775" height="107"> <!-- MSTableType="layout" --> <tr> <td valign="top" width="258"> <img border="0" src="images/head logo.gif" width="258" height="107"></td> <td valign="top" height="107" width="517"> <img border="0" src="images/head right.gif" width="517" height="107"></td> </tr> </table> </div> <div align="center"> <table cellpadding="0" cellspacing="0" width="775" height="798"> <!-- MSTableType="layout" --> <tr> <td width="775" height="798" valign="top"> <div id="FlashMenuLabs"> You need to upgrade your Flash Player or to allow javascript to enable Website menu.</br> <a href="http://www.adobe.com/go/getflashplayer">Get Flash Player</a> </div> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("menu.swf", "menu", "774", "35", "8", "#000000"); so.addParam("wmode", "transparent"); so.addParam("scale", "noscale"); so.addParam("salign", "TL"); so.write("FlashMenuLabs"); // ]]> </script> <table cellpadding="0" cellspacing="0" width="775" height="223"> <!-- MSTableType="layout" --> <tr> <td width="775" height="223" valign="top"> <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="774" height="223"> <param name="movie" value="body anim.swf"> <param name="quality" value="High"> <embed src="body%20anim.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="774" height="223"></object> </td> </tr> </table> <table cellpadding="0" cellspacing="0" width="775" height="232" id="table1"> <!-- MSTableType="layout" --> <tr> <td valign="bottom" background="images/welcome%20bg.gif"> <div align="right"> <table cellpadding="0" cellspacing="0" width="370" height="180"> <!-- MSTableType="layout" --> <tr> <td background="images/welcome%20text%20bg.gif" height="180" width="370"> <div align="center"> <table cellpadding="0" cellspacing="0" width="346" height="159"> <!-- MSTableType="layout" --> <tr> <td width="346" height="159" valign="top" style="text-align:justify;"> <font face="Verdana" size="2" color="#203E59"> </font></td> </tr> </table> </div> </td> </tr> </table> </div> </td> <td></td> <td valign="top" height="230" background="images/news%20bg.gif"> <body onload="start();"> <div id="ticker-container" onmouseover="sspeed=0;" onmouseout="sspeed=resumesspeed"> [COLOR="Red"]here i want to include slide <div id="ticker"> <?php include("robin/easyslider/slider.php"); ?> </div> </div>[/COLOR] </div> </div> </td> </tr> <tr> <td width="563"></td> <td width="3"></td> <td height="2" width="209"></td> </tr> </table> </div> <div align="center"> <table cellpadding="0" cellspacing="0" width="775" height="230" id="table2"> <!-- MSTableType="layout" --> <tr> <td valign="top" background="images/divisions-bg.gif" rowspan="2" width="563"> <div align="center"> <table cellpadding="0" cellspacing="0" width="549" height="169" style="text-align:left;"> <!-- MSTableType="layout" --> <tr > <td valign="top" height="32" colspan="2"> <p style="margin-left: 10px; margin-top: 10px"><b> <font size="2" face="Verdana" color="#203E59">Group Capability</font></b></td> </tr> <tr> <td height="137" width="279" valign="top"> <ul> <li> <p style="margin-top: 6px; margin-bottom: 3px"> <font face="Verdana" size="2" color="#203E59"> <span class="gallery1111"><a href="homepage/sajeeb-group.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;">Sajeeb Corporation</a></span></font> </li> <li> <p style="margin-top: 6px; margin-bottom: 3px"> <font face="Verdana" size="2" color="#203E59"> <span class="gallery1111"><a href="homepage/sajib-agro.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;" >Sajeeb Agro Limited</a></span></font> </li> <li> <p style="margin-top: 6px; margin-bottom: 3px"> <font face="Verdana" size="2" color="#203E59"> <a href="http://www.ststelecomltd.com/" style="text-decoration: none"> <font color="#203E59">STS Telecom Limited</font></a></font></li> <li> <p style="margin-top: 6px; margin-bottom: 3px"> <font face="Verdana" size="2" color="#203E59"> <span class="gallery1111"><a href="homepage/hashem-auto.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;">Hashem Auto Rice Mill</a></span></font></li> <li> <p style="margin-top: 6px; margin-bottom: 3px"> <font face="Verdana" size="2" color="#203E59"> <span class="gallery1111"><a href="homepage/chittagong-enamel.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;">Chittagong Enamel & Aluminium Works Ltd.</a></span></font></li> <li> <p style="margin-top: 6px; margin-bottom: 3px"> <font face="Verdana" size="2" color="#203E59"> <span class="gallery1111"><a href="homepage/sajeeb-industries.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;">Sajeeb Industrial Corporation</a></span></font></li> </ul> </td> <td height="137" width="270" valign="top"> <ul> <li> <p style="margin-top: 6px; margin-bottom: 2px"> <font size="2" face="Verdana" color="#203E59"> <span class="gallery1111"><a href="homepage/Hasem-foods.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;">Hashem Foods Limited</a></span></font></li> <li> <p style="margin-top: 6px; margin-bottom: 2px"> <font size="2" face="Verdana" color="#203E59"> <span class="gallery1111"><a href="homepage/sajib-home.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;">Sajeeb Homes Limited</a></span></font></li> <li> <p style="margin-top: 6px; margin-bottom: 2px"> <font size="2" face="Verdana" color="#203E59"> <span class="gallery1111"><a href="homepage/mermaid.jpg" rel="lightbox[sample]" style="text-decoration:none; color:#203E59;">Mermaid Sweater Ltd.</a></span></font></li> <li> <p style="margin-top: 6px; margin-bottom: 2px"> <font size="2" face="Verdana" color="#203E59"> <a href="http://www.takaful.com.bd/" style="text-decoration: none"> <font color="#203E59">Takaful Islami Insurance Limited </font></a></font></li> <li> <p style="margin-top: 6px; margin-bottom: 2px"> <font size="2" face="Verdana" color="#203E59"><a href="http://www.ststelecomltd.com/" style="text-decoration: none" target="_self"><font color="#203E59">STS Telecommunications (M) Sdn Bhd</font></a></font></li> <li> <p style="margin-top: 6px; margin-bottom: 2px"> <font size="2" face="Verdana" color="#203E59"><a href="http://www.ststelecomltd.com/" style="text-decoration: none" target="_self"><font color="#203E59"> Meghna Insurance Company Ltd. </font></a></font></li> </ul> </td> </tr> </table> </div> </td> <td></td> <td valign="middle" height="115" background="images/message%20bg.gif"> <div align="right"> <table cellpadding="0" cellspacing="0" width="180" height="99"> <!-- MSTableType="layout" --> <tr> <td width="180" height="99" valign="middle"> <p align="justify" style="margin-left: 5px; margin-right: 8px"> <font size="1" face="Verdana" color="#203E59">Welcome you all in the world of �Sajeeb group of Companies� to get the taste of modernization and continuous improvement in the business arena of Bangladesh. (<a href="message.php"><font color="#224562">Read More>></font></a>)</font></td> </tr> </table> </div> </td> </tr> <tr> <td width="3"> <p style="margin-top: 2px; margin-bottom: 2px"></td> <td valign="bottom" height="115" background="images/webmail%20bg.gif" width="209"> <div align="right"> <table cellpadding="0" cellspacing="0" width="180" height="100"> <!-- MSTableType="layout" --> <tr> <td width="180" height="100" valign="middle"> <form method="POST" action="http://sajeebgroup.com:2096/login/" style="text-align:right; padding-right:4px;"> <!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" --> <p style="margin-left: 5px; margin-right: 3px; margin-top: 2px; margin-bottom: 2px"> <b><font face="Verdana" size="1" color="#203E59"> Email : </font></b> <font color="#203E59"> <input name="user" type="text" id="user" size="12"> </font></p> <p style="margin-left: 5px; margin-right: 3px; margin-top: 2px; margin-bottom: 2px"> <b><font face="Verdana" size="1"> <font color="#203E59">Password:</font> </font></b> <input name="pass" type="password" id="pass" size="12"> <input type="submit" value="Login" name="B1" style="margin-top:2px;"> </p> </form> </td> </tr> </table> </div> </td> </tr> </table> </div> <table cellpadding="0" cellspacing="0" width="775" height="90"> <!-- MSTableType="layout" --> <tr> <td width="775" height="90" valign="middle"> <table cellpadding="0" cellspacing="0" width="775" height="79"> <!-- MSTableType="layout" --> <tr> <td background="images/bottom%20bg%20home.gif" valign="bottom" height="79" width="775"> <table cel Im having problems with the following code and not sure why it only seems to be a problem when i call for the amount1 variable in the discountedPriceString variable it returns as undefined. but if i just request amount1 in the alert it works fine. Could someone just explain where i have gone wrong Thanks Code: <script>
DISCOUNT_RATE = 0.25;
var price = parseFloat(prompt('Enter the normal price','0.00'));
var discountedPriceString = 'The sale price is $' +amount1 ;
var amount1 = '';
// Apply the discount to the price
discount1 = price * DISCOUNT_RATE;
amount1 = price - discount1
// Add the new price to the string using toFixed()
amount1 = (amount1.toFixed(2));
alert(discountedPriceString);
</script>
Hello, Just trying to combine php variable with some javascript in a simple if ... else. This is the script code in php: Code: <script type="text/javascript">
var the_rad_val=<?php echo $N_rad_val;?>;
if (the_rad_val.value='n')
{
function removeLink();
}
else
{
function restoreLink();
}
</script>
This is how it looks in the browser (source) Code: <script type="text/javascript">
var the_rad_val=n;
if (the_rad_val.value='n')
{
function removeLink();
}
else
{
function restoreLink();
}
</script>
The 2 functions a Code: function removeLink() {
document.getElementById("mydiv").style.visibility = "hidden";
}
function restoreLink() {
document.getElementById("mydiv").style.visibility = "visible";
} // end function
Guess I did something wrong because the "mydiv" is visible when it shouldn't be Can someone help me out as I am not too good with javascript . Thank you. . i have this simple js example to click Delete Post and then give the user two options. If they click yes then they go that page...but how do i set it to where when they click cancel it goes back to "Delete Post" ??? i suck at javascript Code: <html>
<body>
<p><b>Delete Post</b></p>
<script type="text/javascript">
window.onclick=function(){
document.getElementsByTagName("p")[0].innerHTML="<b><a href='#'>Delete</a> || Cancel</b>"
}
</script>
</body>
</html>
Hey guys! I need a simple JavaScript word translator where the user can type a sentence into a text box and then be presented with what they just typed in on the page but with any programmed word replacements. I want to be able to programme in the words myself for replacement so no Google; this will be a personal offline thing and isn't used to translate a language. For example, if I programmed the word " chocolate " to be replaced with " strawberry ", and " a lot " to be replaced with " loads ", and typed into the text-box: "I like chocolate sauce a lot ". It would then display the sentence on the page, but with the word alterations. Therefore looking like this: "I like strawberry sauce loads ". That being just an example. I want to be able to easily add additional word replacements without hassle using only JavaScript, I don't want it to translate the text on the page or anything, just what you type into the text-box. So let's pretend the words were programmed as follows: . cat = dog, . love = adore . very much = a lot And I typed into the text-box the following: "I have a cat, and I love her very much. " On the same page, it would then display this text: "I have a dog, and I adore him a lot. " I cannot use other code as I am only fond with JavaScript. I would need the text-box to automatically be selected by default everytime the page is loaded, and then for it to clear everytime you click 'Submit' or press the [Enter] key, ready for the next sentence to be typed in. I know this is a lot to ask but I didn't know who else to turn to. Anyways, I know you'll know this WAY better than me, ha; hope you can help! Cheers guys!!! Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have. Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is: Code: <select onchange="updateLangTo('VALUE')">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>
So how would JavaScript be able to accomplish this? Hi. i was given a task to set up a simple website to display a picture send by IPcamera to survey a construction site. I found a sample code to do such thing, but there is one problem. IP camera sends pictures with different filenames. I would need some way to pass a filename of the newest .jpg picture to this script, or a way to simply show the newest .jpg in certain folder without defining a file name? Im not sure if this question should be in javascript forum or do i need php for this. Anyway thanks in advance, if someone is kind enough to give advice. |
|||||||