|
JavaScript - Dynamic Draw Line
Is there a sample js that can dynamicaly draw line, without flickring,crossbrowser, etc. Like you have a point and another and dynamicaly draw line between as one of them move around with dragging.
Tryed this (using images): http://www.p01.org/releases/Drawing_lines_in_JavaScript It turns out bad. The line could be dashed, dotted, no need for whole line. Similar TutorialsJust wondering if anyone can help. Basically I'm trying to create a 'favourites' draw, much like the one he http://www.stellamccartney.com/default/shop-products/collections/looks/spring2012#!{"scrollableid":"coll_sp12rtw_01"} The idea is that people visiting the site will be able to bookmark products from an image gallery and then from anywhere else on the site, open the 'favourites' bar at the bottom and visit the individual products they have chosen in a store. Hope that makes sense and any advice you might be able to give would be much appreciated! Regards, Rob I need to draw like image 1 in file attach. But after i write code: Code: <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function Ve()
{
var n = document.getElementById("txtGiatri").value;
var i,j;
for(i=1;i<=n;i++)
{
for(j=0;j<n-i;j++)
document.getElementById ("place").innerHTML +=" ";
for(j=i;j>0;j--)
{
document.getElementById ("place").innerHTML +=j;
}
document.getElementById ("place").innerHTML +="<br/>";
}
}
</script>
<body>
<table>
<tr>
<td><input name="txtGiatri" type="text" id="txtGiatri" /></td>
<td><input name="btnVe" type="button" value="Ve" onclick="Ve();" /></td>
</tr>
<tr>
<td><div id="place"></div></td>
<td></td>
</tr>
</table>
</body>
</html>
i only have like image 2. How i fixed it? i want to draw vector paths on the the google map on my site that I want to add moving vehicles on the roads and i want to zoom the map when the cars going somewhere. Can I do it? I do not want to take a screenshot of the google map adress. here is my javascript codes.Do you have an idea about google map zooming with animations? var options = { controls: { panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, overviewMapControl: true }, scrollwheel: true, maptype: 'TERRAIN', markers: [ { latitude: -2.2014, longitude: -80.9763, }, { address: "Guayaquil, Ecuador", html: "My Hometown", icon: { image: "images/gmap_pin_grey.png", iconsize: [26, 46], iconanchor: [12,46] } } ], icon: { image: "http://www.mobilyala.com/mapfiles/marker.png", iconsize: [37, 34], shadowsize: [37, 34], iconanchor: [9, 34], shadowanchor: [19, 34] }, latitude: -2.282, longitude: -80.272, zoom: 10 } Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Hello all. I am currently viewing various reports based on a location chosen by a dropdown. When I select GO, the page sends the location to a popup, which then queries based on that location and displays the graph on the popup window. What I want to do is to eliminate the popup and send the location to a <div> on the same page and then have the query run and display the graph on the same page. Is this possible, or do Divs have to be static content? Thanks, Parallon I have a dynamic website where my client can upload pictures to, i have php dynamically show the images and etc, i also have php assign each photo an id number. Basically what it is each photo dynamically gets id=$i++. So every photo uploaded it goes up one higher. Now i wanted to make it so in javascript the same happens, the id is dynamically i++ but im not very good in javascript so i was hoping i could get some help. Basically i want it to be something like this. (unless u know a better way of doing the same kind of effect) Code: var i=0;
$(document)
.ready(function(){
setTimeout(function () {$("#i++").fadeOut("slow");}, 100);
setTimeout(function () {$("#i++").fadeIn("fast");}, 400);
});
I just need help getting the i++ to work. Hello, I'm new here and also new to writing JS. I was hoping someone could tell me what is wrong with the code below. I am trying to load a page, and the filename will be different depending on current month and year. If I use the code below in the body for document.write instead of window.location it correctly displays this months page as 102009.htm. Is there a better way to do this? Thanks in advance for any help. Code: <script type="text/javascript"> <!-- var months=new Array(13); months[1]="01" months[2]="02" months[3]="03" months[4]="04" months[5]="05" months[6]="06" months[7]="07" months[8]="08" months[9]="09" months[10]="10" months[11]="11" months[12]="12" var time=new Date(); var lmonth=months[time.getMonth() + 1]; var year=time.getYear(); window.location = (1month + year + ".htm") //--> </script> Hello. I am using javascript to create a dynamic form to allow me to add multiple items to the form before posting... this is the code: Code:
if (!$_POST) {
?>
<title>Adding elements to a form</title>
<form name="form1" enctype="multipart/form-data" action="" method="post">
<div ID="Items">
<b>Dog 1:</b>
<input type="text" name="Item1" size="45">
<br>
<input type="button" value="Add Item" onClick="AddItem();" ID="add">
<input type="submit" name ="submit" value="Submit Form" >
</div>
</form>
<?
}
else {
echo print_r ($_POST);
}
?>
<script language="javascript">
var items=1;
function AddItem() {
div=document.getElementById("Items");
button=document.getElementById("add");
items++;
newitem="<b>Dog " + items + ": </b>";
newitem+="<input type=\"text\" name=\"Item" + items ;
newitem+="\" size=\"45\"><br>";
newnode=document.createElement("span");
newnode.innerHTML=newitem;
div.insertBefore(newnode,button);
}
</script>
It works but each element in the printed post array shows as Item1, Item2 etc with each being a seperate array... How can I make it so that I have a single posted array called Item with that array then having elements Item[1] etc up to the number of elements I add... Any help would be appreciated In a webpage I am developing I need to change the presentation depending on user selection. At the moment this code is huge and not very maintainable. The first purpose was to have a working code, now I would like to make it more maintainable. Below is a main part of the problem; Code: function myFunction(type)
{
if (type.value == "1")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "block";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "2")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "block";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "none";
}
else if (type.value == "3")
{
var form1 = document.getElementById("OrderForm1");
form1.style.display = "none";
var form2 = document.getElementById("OrderForm2");
form2.style.display = "none";
var form3 = document.getElementById("OrderForm3");
form3.style.display = "block";
}
}
<div id="OrderForm" style="display: block;">
<div id="OrderForm1" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm2" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
<div id="OrderForm3" style="display: none;">
<FORM METHOD="POST"></FORM>
</div>
</div>
Basically the myFunction will be called based on user input. This input will show one section of html code and hide other sections of html code. So if input is "1", then OrderForm1 shall be shown and OrderForm2 and OrderForm3 must be hidden. if input is "2", the OrderForm2 shall be shown and OrderForm1 and OrderForm3 must be hidden etc. By adding more forms to show and hide, this code is growing massively. I would like to add some kind of for loop function to this but I am not sure how to loop through the various section names (OrderForm1, OrderForm2 and OrderForm3) and set the appropriate value. Appreciate any help hi i got some code from another site. i modified it according to my needs. what is it doing it adds dynamic form fields by clicking "add another" link. the problem is when logged in user wants to modify his contact details he clicks on edit then gets to this modification form where all the data in his db is selected and displayed in that form fields. so the problem here is when he clicks on add another link it adds up that many fields sets that appeared currently. means if there appeared four sets of fields then clicking on add another link will add four more fields. what i want is to add only one set of fields which contains of text field and select menu. my code is here Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
});
});
</script>
<style>
#myForm div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#myForm label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#btnAdd {
margin-left:130px;
}
</style>
</head>
<body>
<form id="myForm" method="post" action="process.php">
<div>
<label>First Name: </label><input type="text" name="fname" id="fname"><br>
</div>
<div>
<label>Last Name: </label><input type="text" name="lname" id="lname"><br>
</div>
<?php
$connect = mysql_connect("localhost","user","pass");
mysql_select_db("db");
$get_im = mysql_query("SELECT * FROM contactim WHERE userid='$_SESSION[userid]'");
$count = mysql_num_rows($get_im);
while($get_contactim = mysql_fetch_assoc($get_im)) {
$userim_db = $get_contactim['username'];
$im_db = $get_contactim['im'];
//echo $userim_db."<br>";
for($i = 1; $i <= $count; $i++) {
?>
<div id="input1" class="clonedInput">
<label>IM Screen Names:</label>
<input type="text" name="name[]" id="name1" value="<?php if($userim_db == "") { echo ""; } else { echo $userim_db; } ?>" />
<select name="screenname[]" id="screenname1">
<option value="AIM" <?php if($im_db == "AIM") { echo "SELECTED"; } ?>>AIM</option>
<option value="gtalk" <?php if($im_db == "gtalk") { echo "SELECTED"; } ?>>Google Talk</option>
<option value="skype" <?php if($im_db == "skype") { echo "SELECTED"; } ?>>Skype</option>
<option value="windows" <?php if($im_db == "windows") { echo "SELECTED"; } ?>>Windows Live</option>
<option value="yahoo" <?php if($im_db == "yahoo") { echo "SELECTED"; } ?>>Yahoo</option>
</select><br />
<?php
}
}
?>
</div>
<div>
<a href="#" id="btnAdd">Add another</a>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
hi i need help in creating dynamic form using jquery. i create a form in this form i want when "add another" link is clicked then it adds one more set of fields. form is here Code: <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/script.js" type="text/javascript"></script>
<style>
#form1 div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#form1 label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#link {
margin-left:125px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div>
<label>IM Screen Names:</label>
<input type="text" name="textfield" id="textfield" />
<select name="select" id="select">
<option value="AIM" selected="selected">AIM</option>
<option value="gtalk">Google Talk</option>
<option value="skype">Skype</option>
<option value="windows live">Windows Live</option>
<option value="yahoo">Yahoo</option>
</select><br />
<div id="link"><a href="">Add another</a></div>
</div>
</form>
</body>
</html>
[CODE] <script language="JavaScript" type="text/javascript"> fuction init(){ document.getElementById("Name_First").value= "<?php echo $cooker[17]?>" ; } window.onload = init; </script> </head> [CODE] <Body onload="init()"> [CODE] i have to set the value of the input area. But it doesn't work. when i see the source of the page when displayed on firefox fuction init(){ document.getElementById("Name_First").value= "Bob Dwight" } I see this, The value is right but this doesnot show in the form. I would like to thank anyone who helps in advance. Hi, Is it possible to code a slideshow where the slides can change at a different intervals? Which can be set by me?? The slideshow will hold just text and links but will need to be dynamic in size. i.e. there maybe 5 or 6 lines of text anything more can be viewed by a view more link and then i'll need the box to stretch to fit rest of text. how would i do this?? Thanks Hi, I am trying to create a xml document and load it into a 3rd party function as follows: Quote: var doc = new ActiveXObject('Microsoft.XMLDOM'); // OR var doc = document.implementation.createDocument('', 'xml', null); o.overlayKML('somefile.xml'); // Works perfectly o.overlayKML(doc); // Doesn't work at all, return unsupport error I get to know that the overlayKML (3rd party function) needs to read a physical file with a path and sadly it doesn't support DOM. How can I create a javascript document that mimic a physical file and introduce it into the function? Thanks! I'm a complete rooking at javascript (and haven't looked at php in months), but am wondering if its possible to do the following with javascript. I have a listing of 10 to 16 teams. I'd like to be able to list the teams in a drop down select box. And when the user selects a team, that teams listing of players is than shown below. The user should than be able to toggle through the listing to review each time. Is something like this possible with javascript? I want to have <div> cells that the background-color css style dynamically change between 4 colors depending on how many times they are clicked. The options are none, yellow, red and green then repeat. So when the page loads, they are all at none, and if you click once it goes to green, twice to yellow, three times to red, then back to none. I do not know if this is possible, but if anyone can point me to a tutorial, I would be appreciative. I just am having a hard time searching the proper terms. I am trying to concatenate text to refer to a variable: Code: var HomePlayer1Points = 17 var i = 1 var a = "HomePlayer" var b = "Points" var c = a + i + b alert(c.value) it give me undefined instead of 17. How should this be done without using eval() ??? Hey everyone, I have a small script to open a little window, which is created for each record in a database through asp. The problem is, if there are multiple records, the function name is all the same, so the links open the same window for each record.. not good. Here is the code which is created for every record, until there arent anymo <SCRIPT language="javaScript"> function openwindow() {window.open("pofull.asp?poid=<%=MySqlRS("lpoid")%>","mywindow","menubar=0,resizable=0,width=500,hei ght=250");} </SCRIPT> <% Response.write "<td width=""30px"" align=""center""><a href=""javascript: openwindow()""><img src=""../style/edit.png"" border=""0"" title=""View Full Description""></a></td>" So obviously openwindow is being created multiple times. Is there a way to have this created in a way that every function name created is unique so they all work? I know.. its confusing but it would work really well. |
|||||||