|
JavaScript - Please Help A Noob Out With Image Manipulation
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 Similar TutorialsHi i was wondering if anyone might be able to help me here as i hve an idea but not quite sure how to impliment it. I want to be able to create 2 Divs, 1 for my navigation button and a second for an image to be placed in. i ant to be able to have the 2nd div move position to underneath Div 1 when i hover over the navigaton(div 1). Ive attached a link to a diagram of what i mean Any help would be very much apreciated http://spark-box.co.uk/images/ideaz.jpg Hi I have a given url and want to back up a level. So for example if start with: url = "test/level1/level2/level3/" I would like to it remove the "level3/" to become url="test/level1/level2/" I have created a simple webpage that allows users to search multiple comparison shopping sites at once. This is just a side project that I am working on. At the current time, the webpage has the sites listed with checkboxes. The user can put in a search term in the box and then select which sites they want to search. The sites then open in a new window or on different tabs depending on which browser they are using. What I would like to do is find out if there is a way to have the same thing, but the sites open in the same window below the search box, like in tabbed frames. I tried doing something with the tabbed viewer script from dynamic drive: http://www.dynamicdrive.com/dynamici...bdocviewer.htm, but was unable to figure out how to get the search parameter into the url. My page can be found at http://www.imarkinteractive.com/tools/onesearch.html and all of the javascript is on the page. Does anyone know if this can be accomplished and if so, how would I go about doing it. I can run a php script on my server if that would be easier, but I would really appreciate the assistance. Thanks. I code through Greasemonkey using Firebug on Firefox. I'm trying to write my first script using a simple function to change the appearance of my email address in Gmail. My current email address is formatted like this example: Code: firstlast@gmail.com I want the script to manipulate the text to resemble this: Code: first.last@gmail.com I've posted my script below. The Mozilla error console shows no syntax errors or warnings. JavaScript IS allowed to run and there are no restrictions of any kind that should hinder this script's ability to run. What am I doing wrong in the code? Any help would be greatly appreciated! Code: (function () {
var loadOldName = window.document.body.getElementById('loading').getElementsByClassName('msg').textContent('\nLoading+ firstlast@gmail.com…\n');
var topLeftName = window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').innerHTML('<b>firstlast@gmail.com</b>');
var topLeftDrop = window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>');
function changeName() {
if(loadOldName) {
window.document.body.getElementById('loading').getElementsByClassName('msg').removeChild(textContent('\nLoading+ firstlast@gmail.com…\n')).appendChild(textContent('\nLoading+ first.last@gmail.com…\n'));
};
if(topLeftName) {
window.document.getElementsByClassName('cP').getElementsByClassName('bB').getElementsByTag('u').removeChild(innerHTML('<b>firstlast@gmail.com</b>')).appendChild(innerHTML('<b>first.last@gmail.com</b>'));
};
if(topLeftDrop) {
window.document.getElementsByClassName('cP').getElementsByClassName('J-N-Jz').removeChild(innerHTML('<span class="Qu L4">firstlast@gmail.com (default)</span>')).appendChild(innerHTML('<span class="Qu L4">first.last@gmail.com (default)</span>'));
};
};
changeName();
});
Hi, I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image. I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree... Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated. Greetings. It has been a long while since I have needed to code and a lot has changed. I am looking for resources on how to use JavaScript to When a button is pressed it moves the playhead of a single video to an assigned frame or timestamp in the video and begin playing. Then when the playhead reaches its destination it stops. I have done this in Flash before using AS1 and simple keyframe based commands and buttons for goToandPlay and stop. Is there any good reading to be had on the interwebs on this topic? Thanks in advance!! I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each. http://jsfiddle.net/defencedog/Zz7cX/ [My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine] regards;; I have the following code for a textbox that is supposed to change itself to 20 if the entered value is over 20, to 1 if it's less than 1, and round itself to the nearest integer Code: <input type="text" size="1" name="blevel" value="1" onchange='
document.unitselect.blevel.value++;
document.unitselect.blevel.value--;
document.unitselect.blevel.value = document.unitselect.blevel.value / 1
Math.floor(document.unitselect.blevel.value);
if(document.unitselect.blevel.value > 20){
document.unitselect.blevel.value = 20
}else if(document.unitselect.blevel.value < 1){
document.unitselect.blevel.value = 1
}
'>
The textbox is in a form named "unitselect". For some reason, it just ignores the Math.floor line. After experimenting for a bit, I found out that it was treating the textbox value as a string. I tried both using the increment/decrement operators and dividing it by 1. Although the operations executed properly, it still treated it as a string after the operations. Does anyone know what I can do to round this value? Hello everyone, I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error. Thanks in advance, Alex Code(JS): Code: function runstuff() {
canvasthing = document.getElementById('1');
context = canvasthing.getContext('2d');
purple = new Image();
purple.src = 'img/buttonpurple.png';
purple.onload = function() {
context.drawImage('purple', 0, 0);
};
context.font = '16px Vani';
context.textBaseline = 'top';
context.fillText('Test', 26, 24);
}
Code(html): Code: <!doctype html> <html lang="en"> <head> <title>POB.G</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"> </script> </head> <body onload="runstuff()"> <canvas id="1" width="127" height="128"></canvas> </body> </html> Error: Code: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7" data: no] Ok, first off I would like to say hi to everyone as this is my first post! Now that we have been introduced, here is my problem. I am trying to create a billing system in which you generate invoices. The way I am going about this is using a table with rows for each item the user is placing on the invoice. I have a script that adds new rows to the table when the user wants to place more than one item on the invoice, thats all fine and dandy. The problem is that I also want to be able to delete any row of the table at any time so that the user can remove items as well. When the user presses the attached "delete" button on the row they wish to remove the delete script gets the table length and changes the id and name of every item in the rows below the one being deleted so that when I submit the data as a form it will have a predictable pattern for getting the post variables. At the moment the script runs fine the first time and does exactly what it is supposed to. The issue is that the second time you run it after it has changed the id and name values for the delete button elements on the lower rows it only makes it to the first alert() call! I have been pulling my hair out for days!!!!! Here is the Code: Code: function getEl(element)
{
var object = null;
if (document.layers)
{
object = document.layers[element];
}
else if (document.all)
{
object = document.all[element];
}
else if (document.getElementById)
{
object = document.getElementById(element);
}
return object;
}
function addRow()
{
var tbl = getEl('invTbl');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellqty = row.insertCell(0);
var qty = document.createElement("<input type='text' name='qty_"+iteration+"' id='qty_"+iteration+"' size='4' value='1' onChange='javascript:updatePrice();' />");
cellqty.appendChild(qty);
var cellitm = row.insertCell(1);
var itm = document.createElement('input');
itm.type = 'text';
itm.name = 'itm_' + iteration;
itm.id = 'itm_' + iteration;
itm.size = 30;
cellitm.appendChild(itm);
var celldsc = row.insertCell(2);
var dsc = document.createElement('input');
dsc.type = 'text';
dsc.name = 'dsc_' + iteration;
dsc.id = 'dsc_' + iteration;
dsc.size = 50;
dsc.value = iteration;
celldsc.appendChild(dsc);
var cellprc = row.insertCell(3);
var prc = document.createElement("<input type='text' name='prc_"+iteration+"' id='prc_"+iteration+"' size='9' value='1.00' onChange='javascript:updatePrice();' />");
cellprc.appendChild(prc);
var celldel = row.insertCell(4);
var del = document.createElement("<input type='button' name='"+iteration+"' id='"+iteration+"' value='Delete' onClick='javascript:removeRow(this.id);' />");
celldel.appendChild(del);
}
function removeRow(row)
{
alert("you are deleting row " + parseInt(row));
tbl = getEl('invTbl');
rowTotal = tbl.rows.length;
alert("there are " + rowTotal + " rows!");
tbl.deleteRow(parseInt(row));
for ( i = 1; i < rowTotal; i++ )
{
if ( i > parseInt(row) )
{
place = i - 1;
alert(i + " becomes " + place);
qtycontainer = "qty_" + i;
itmcontainer = "itm_" + i;
dsccontainer = "dsc_" + i;
prccontainer = "prc_" + i;
delcontainer = i.toString();
buttonchange = place.toString();
getEl(qtycontainer).name = 'qty_' + place;
getEl(qtycontainer).id = 'qty_' + place;
getEl(itmcontainer).name = 'itm_' + place;
getEl(itmcontainer).id = 'itm_' + place;
getEl(dsccontainer).name = 'dsc_' + place;
getEl(dsccontainer).id = 'dsc_' + place;
getEl('dsc_'+place).value = getEl('dsc_'+place).id;
getEl(prccontainer).name = 'prc_' + place;
getEl(prccontainer).id = 'prc_' + place;
getEl(delcontainer).name = buttonchange;
getEl(delcontainer).id = buttonchange;
alert("del button changed to " + getEl(i).id);
}
}
// updatePrice();
}
The button element for each row calls javascript:removeRow(this.id); Please help me figure out what I am doing wrong! i 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 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! 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 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. 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!!! 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 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 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. |
|||||||