|
JavaScript - Insert New Picture To Div Created With Php Gd
hello people, can anyone help me with this? i have div element and picture inside it, and that picture is created with php gd (<img src="file.php"). What i need is a function which create new image and place it in that div. I don't know how to create new image with javascript when i call php file with header content type image.
something like this?? function newImage(){ document.getElementById("foo").innerHtml = "<img src='file.php'/>"; } but of course this doesn't work so how to do that? thnx Similar TutorialsAlright, so, I'm wanting to create a Point and Click Content editor (without the need of a admin area -- just a admin login) that is similar to the Plesk Sitebuilder. Does anyone know if this has already been created? If so, can you please link me to it.. If not, Anyone have any idea on how to obtain this? Thanks! Another example from Sams Teach Your self JavaScript. I have created the new object it prints the business cards out that are stored as you can see here. Code: function PrintCard() {
line1 = "<b>Name: </b>" + this.name + "<br>\n";
line2 = "<b>Address: </b>" + this.address + "<br>\n";
line3 = "<b>Work Phone: </b>" + this.workplace + "<br>\n";
line4 = "<b>Home Phone: </b>" + this.homephone + "<hr>\n";
document.write(line1,line2,line3,line4);
}
function Card(name,address,work,home) {
this.name = name;
this.address = address;
this.workplace = work;
this.homephone = home;
this.PrintCard = PrintCard;
}
// Create the objects.
sue = new Card ("Sue Suthers", "123 Elm Street", "555-1234", "555-9876");
chris = new Card ("Chris Suthers", "567 Rum Road", "555-4990", "555-8127");
james = new Card ("James Suthers", "17 Junk Court", "555-3334", "555-1596");
ken = new Card ("Ken Suthers", "1 Frank Circuit", "555-2365", "555-23659");
This is all good and i understand it. It is this the printing part i want to know if there is another way to print all 4 of them by naming them in a different way and looping through to print them i think i just answered my own question but it there a built in way to print all of the different cards? here is the current code. Code: //print Cards sue.PrintCard(); chris.PrintCard(); james.PrintCard(); ken.PrintCard(); Thanks Hi all Okay, I have 3 dropdown options each with its own list of items. Items are selected using radio buttons and on selection provides an image above it of what you have selected. What I need is the 'continue' button to be hidden until a selection is made from each of the lists. I gave it a try but did not come right, here is some code for what I have already. ** Please excuse the use of tables still training myself to use divs consistently. Code: <div id="Tabdoc_content3" class="Tabdoc_tabdivcontent" style="display:none;background : url(images/back-sweets.png) no-repeat; background-size: 100%;">
<div class="wrapperAttribsOptions">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="top">
<td width="240px"></td>
<td>
<script language="javascript">
function toggle1(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="/images/tabs/button_open_sweet1.gif">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="/images/tabs/button_close_sweet1.gif">';
}
}
function toggle2(showHideDiv, switchImgTag) {
var ele2 = document.getElementById(showHideDiv);
var imageEle2 = document.getElementById(switchImgTag);
if(ele2.style.display == "block") {
ele2.style.display = "none";
imageEle2.innerHTML = '<img src="/images/tabs/button_open_sweet2.gif">';
}
else {
ele2.style.display = "block";
imageEle2.innerHTML = '<img src="/images/tabs/button_close_sweet2.gif">';
}
}
function toggle3(showHideDiv, switchImgTag) {
var ele3 = document.getElementById(showHideDiv);
var imageEle3 = document.getElementById(switchImgTag);
if(ele3.style.display == "block") {
ele3.style.display = "none";
imageEle3.innerHTML = '<img src="/images/tabs/button_open_sweet3.gif">';
}
else {
ele3.style.display = "block";
imageEle3.innerHTML = '<img src="/images/tabs/button_close_sweet3.gif">';
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td align="left" width="230px" style="padding-left:20px;">
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1107835#post1107835
var picFile0 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png']; // each can be expanded with more images
var picFile1 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var picFile2 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var imgPtr = [
// [current_image,baseURL,filenames,display_image]
[0,"/images/tabs/",'imgSrc0'],
[0,"/images/tabs/",'imgSrc1'],
[0,"/images/tabs/",'imgSrc2'] // No comma after last entry
];
// Create function to load image
function loadImg(imgGroup) {
var picFile = [];
var imgID = imgPtr[imgGroup][2];
switch (imgGroup) {
case '0' : picFile=[].concat(picFile0); break;
case '1' : picFile=[].concat(picFile1); break;
case '2' : picFile=[].concat(picFile2); break;
default : alert('Invalid assignment\n'+imgGroup); break;
}
var ptr = imgPtr[imgGroup][0];
if (ptr < 0) { ptr = 0; }
if (ptr > picFile.length-1) { ptr = picFile.length-1; }
document.getElementById(imgID).src = imgPtr[imgGroup][1]+picFile[ptr];
imgPtr[imgGroup][0] = ptr;
var rbtn = 'rg'+imgGroup+ptr; // alert(rbtn);
document.getElementById(rbtn).checked = true;
}
// Create link function to switch image backward
function prev(imgGroup) {
imgPtr[imgGroup][0]--;
loadImg(imgGroup);
}
// Create link function to switch image forward
function next(imgGroup){
imgPtr[imgGroup][0]++;
loadImg(imgGroup);
}
// Load function after page loads
onload = function() {
loadImg('0');
loadImg('1');
loadImg('2');
}
</script>
<div style="width:230px;text-align:center;">
<img name="imgSrc0" id="imgSrc0" src="/images/tabs/sweetEmpty.png">
</div>
<div id="headerDivImg">
<div id="titleTextImg"></div>
<a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');">
<img src="/images/tabs/button_open_sweet1.gif"></a>
</div>
<div id="contentDivImg" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[18]" value="81" id="attrib-18-81" type="radio" onclick="imgPtr[0][0]=12;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
<input name="id[18]" value="82" id="attrib-18-82" type="radio" onclick="imgPtr[0][0]=13;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
<input name="id[18]" value="79" id="attrib-18-79" type="radio" onclick="imgPtr[0][0]=10;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
<input name="id[18]" value="80" id="attrib-18-80" type="radio" onclick="imgPtr[0][0]=11;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[18]" value="76" id="attrib-18-76" type="radio" onclick="imgPtr[0][0]=7;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-76"> Fizzy Blueberry</label><br />
<input name="id[18]" value="61" id="attrib-18-61" type="radio" onclick="imgPtr[0][0]=0;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-61"> Fruits of the Forest</label><br />
<input name="id[18]" value="74" id="attrib-18-74" type="radio" onclick="imgPtr[0][0]=5;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-74"> Lemon and Lime</label><br />
<input name="id[18]" value="62" id="attrib-18-62" type="radio" onclick="imgPtr[0][0]=1;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-62"> Pear Drops</label><br />
<input name="id[18]" value="77" id="attrib-18-77" type="radio" onclick="imgPtr[0][0]=8;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-77"> Sour Cherry</label><br />
<input name="id[18]" value="73" id="attrib-18-73" type="radio" onclick="imgPtr[0][0]=4;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-73"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[18]" value="85" id="attrib-18-85" type="radio" onclick="imgPtr[0][0]=16;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-85"> Organic Fruit Cocktail</label><br />
<input name="id[18]" value="86" id="attrib-18-86" type="radio" onclick="imgPtr[0][0]=17;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-86"> Organic Jelly Bears</label><br />
<input name="id[18]" value="83" id="attrib-18-83" type="radio" onclick="imgPtr[0][0]=14;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-83"> Organic Sour Worms</label><br />
<input name="id[18]" value="84" id="attrib-18-84" type="radio" onclick="imgPtr[0][0]=15;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-84"> Organic Sugar Bears</label><br />
</div>
</td>
<td align="left" width="230px" style="padding-left:10px;">
<div style="width:230px;text-align:center;">
<img name="imgSrc1" id="imgSrc1" src="/images/tabs/sweetEmpty.png">
</div>
<div id="headerDivImg2">
<div id="titleTextImg2"></div>
<a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="/images/tabs/button_open_sweet2.gif"></a>
</div>
<div id="contentDivImg2" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[19]" value="99" id="attrib-19-99" type="radio" onclick="imgPtr[1][0]=12;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
<input name="id[19]" value="100" id="attrib-19-100" type="radio" onclick="imgPtr[1][0]=13;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
<input name="id[19]" value="97" id="attrib-19-97" type="radio" onclick="imgPtr[1][0]=10;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
<input name="id[19]" value="98" id="attrib-19-98" type="radio" onclick="imgPtr[1][0]=11;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[19]" value="94" id="attrib-19-94" type="radio" onclick="imgPtr[1][0]=7;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-94"> Fizzy Blueberry</label><br />
<input name="id[19]" value="87" id="attrib-19-87" type="radio" onclick="imgPtr[1][0]=0;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-87"> Fruits of the Forest</label><br />
<input name="id[19]" value="92" id="attrib-19-92" type="radio" onclick="imgPtr[1][0]=5;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-92"> Lemon and Lime</label><br />
<input name="id[19]" value="88" id="attrib-19-88" type="radio" onclick="imgPtr[1][0]=1;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-88"> Pear Drops</label><br />
<input name="id[19]" value="95" id="attrib-19-95" type="radio" onclick="imgPtr[1][0]=8;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-95"> Sour Cherry</label><br />
<input name="id[19]" value="91" id="attrib-19-91" type="radio" onclick="imgPtr[1][0]=4;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-91"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[19]" value="103" id="attrib-19-103" type="radio" onclick="imgPtr[1][0]=16;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-103"> Organic Fruit Cocktail</label><br />
<input name="id[19]" value="104" id="attrib-19-104" type="radio" onclick="imgPtr[1][0]=17;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-104"> Organic Jelly Bears</label><br />
<input name="id[19]" value="101" id="attrib-19-101" type="radio" onclick="imgPtr[1][0]=14;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-101"> Organic Sour Worms</label><br />
<input name="id[19]" value="102" id="attrib-19-102" type="radio" onclick="imgPtr[1][0]=15;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-102"> Organic Sugar Bears</label><br />
</div>
</td>
<td align="left" width="230px" style="padding-left:10px;">
<div style="width:230px;text-align:center;">
<img name="imgSrc2" id="imgSrc2" src="/images/tabs/sweetEmpty.png">
</div>
<div id="headerDivImg3">
<div id="titleTextImg3"></div>
<a id="imageDivLink3" href="javascript:toggle3('contentDivImg3', 'imageDivLink3');"><img src="/images/tabs/button_open_sweet3.gif"></a>
</div>
<div id="contentDivImg3" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[20]" value="117" id="attrib-20-117" type="radio" onclick="imgPtr[2][0]=12;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
<input name="id[20]" value="118" id="attrib-20-118" type="radio" onclick="imgPtr[2][0]=13;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
<input name="id[20]" value="115" id="attrib-20-115" type="radio" onclick="imgPtr[2][0]=10;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
<input name="id[20]" value="116" id="attrib-20-116" type="radio" onclick="imgPtr[2][0]=11;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[20]" value="112" id="attrib-20-112" type="radio" onclick="imgPtr[2][0]=7loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-112"> Fizzy Blueberry</label><br />
<input name="id[20]" value="105" id="attrib-20-105" type="radio" onclick="imgPtr[2][0]=0;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-105"> Fruits of the Forest</label><br />
<input name="id[20]" value="110" id="attrib-20-110" type="radio" onclick="imgPtr[2][0]=5;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-110"> Lemon and Lime</label><br />
<input name="id[20]" value="106" id="attrib-20-106" type="radio" onclick="imgPtr[2][0]=1;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-106"> Pear Drops</label><br />
<input name="id[20]" value="113" id="attrib-20-113" type="radio" onclick="imgPtr[2][0]=8;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-113"> Sour Cherry</label><br />
<input name="id[20]" value="109" id="attrib-20-109" type="radio" onclick="imgPtr[2][0]=4;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-109"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[20]" value="121" id="attrib-20-121" type="radio" onclick="imgPtr[2][0]=16;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-121"> Organic Fruit Cocktail</label><br />
<input name="id[20]" value="122" id="attrib-20-122" type="radio" onclick="imgPtr[2][0]=17;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-122"> Organic Jelly Bears</label><br />
<input name="id[20]" value="119" id="attrib-20-119" type="radio" onclick="imgPtr[2][0]=14;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-119"> Organic Sour Worms</label><br />
<input name="id[20]" value="120" id="attrib-20-120" type="radio" onclick="imgPtr[2][0]=15;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-120"> Organic Sugar Bears</label><br />
</div>
</td>
</tr>
</table>
<br class="clearboth" />
</td>
</tr>
</table>
</div>
<div class="forward Tabdoc_pointer" style="margin-top:20px;">
<img src="images/tabs/button_continue.gif" alt="CONTINUE" onclick="Tabdoc_ManageDisplay(4)">
</div>
<div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;">
<img src="images/tabs/button_back.gif" alt="BACK" onclick="Tabdoc_ManageDisplay(2)">
</div>
</div>
If anyone can help, I would really appreciate it. Thanks in advance Jay. I've been watching an application called JSPDF http://code.google.com/p/jspdf/ that creates a PDF file solely in client side javascript. In a nutshell, it generates pdf bytes (called buffer), encodes the bytes into base64, and opens it in the browser: Code: document.location.href = 'data:application/pdf;base64,' + Base64.encode(buffer); This works for me in firefox and chrome, but not IE. My question: is there a better way to reform the file download/opening in javascript? They provide an example with downloadify and that may be acceptable unless you are trying to eliminate flash from the equation. Thanks I want it to hide or kill the div box with an onmouseout I've tried listeners functions and just plain vars. i can find a solution maybe here this is the code in the external file Code: ////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
function move_box(an, box) {
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box (an, width, height, borderStyle) {
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#fff';
var contents = document.createElement('iframe');
contents.scrolling = 'no';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
boxdiv.addEventListener('mouseout', show_hide_box(boxdiv),false);
return false;
}
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
And you put this code in the body to call it. Code: /////////////////////////////////////////////////////////////////// <a href="../Menus/cleaners.html" onMouseOver="return show_hide_box(this,416,124,'2px')" >Cleaners</a> /////////////////////////////////////////////////////////////////// I have an input box "product" besides it there is an add input button which adds another input box product upon clicking.This array of input boxes I have created is through document.createElement('input'). My autocomplete is working for the initial input box....now when I click add Input button for the generated box also the autocomplete shld work...how do I make it work?? PS:Autocomplete script is working so I didnt post it here.... I just want it to make it working dynamically created i/p boxes Can anyone tell why IE does not handle this form submit properly? Instead of going to the action of the form in formString, it just refreshes the page. Works fine in Firefox and Chrome. Code: Here is how the form is placed on the page and then submitted:
document.getElementById('crtDiv').innerHTML = formString;
document.getElementById('crtForm').submit();
Here is an example of how the formString is built:
formString = "<form action='https://www.paypal.com/cgi-bin/webscr' method='POST' id='crtForm'>";
formString += BUNCH O INPUTS
formString += "</form>";
Hello, I have an expandable banner on my website. It starts out big and then after 5 seconds, the image gradually shrinks until is replace by a normal size banner. I one want this to happen once per visit. I've written a cookie, but I'm stuck on the last part. Granted I'm new to this, but I think I need to place this: Code: if ( getCookie('myCookie') != null ) return;
setCookie('myCookie', 'ANY VALUE');
into this. But my question is where? I'm stuck and everyplace I stick it brings an error. Code: <img src="/lightbox1.jpg" alt="" id="banner">
<script type="text/javascript">
<script type = "text/javascript">
function setCookie(isName,isVal) {
document.cookie = isName + "=" + isVal + ";expires=" + "path=/";
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1) {return null;}
endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
function shrink()
{
if(banner.altered!='yes' && banner.width>50)
{
banner.width-=7;
setTimeout("shrink()", 10);
}
else
{
banner.src=new_pic.src;
banner.width=new_pic.width;
banner.height=new_pic.height;
banner.altered='yes';
}
}
var old_pic=new Image();
old_pic.src='/lightbox1.jpg';
var new_pic=new Image();
new_pic.src='/support.jpg';
var banner=document.getElementById('banner');
banner.onclick=shrink;
setTimeout("shrink()", 5000);
</script>
Any help? I'm having an issue adding focus() to an input that is dynamically created with jquery. I'm still learning, so I've mixed in traditional js with my jquery code because it's easier for me to understand. Anyhow document.getElementById(name).style.backgroundColor="#72A4D2"; successfully changed the background of the input ID, but document.getElementById(name).focus(); does nothing. I know that this is the correct code because if I hard code an input into the form (which you can see I've commented out below, such as document.getElementById('password').focus(); it refocuses successfully on that input. Thus I'm stumped yet again. Anyone know how to deal with this issue? JS: Code:
$(function() {
var i = $('input').size() + 1;
$('a.add').click(function() {
$('<p>Username ' + i + ': <input type="text" id="user' + i + '" name="user' + i + '" onblur="javascript:checkl(this.name, this.value);"></p>').animate({ opacity: "show" }, "slow").appendTo('#inputs');
i++;
});
});
function checkl(name, value){
var errors=new Array();
var x;
var msg = "There were some problems...\n";
if (value==="") {
errors['blank'] = "Field must not be blank";
}
for (x in errors)
{
msg += "\n"+errors[x];
}
if (!(x==undefined)){
alert(msg);
document.getElementById(name).style.backgroundColor="#72A4D2"; //works, changed input background successfully
document.getElementById(name).focus(); // does NOT work, no focus
// document.getElementById('password').focus(); // successfully refocuses on hard coded 'password' input
}else{
document.getElementById(name).style.backgroundColor="";
}
}
HTML: Code: <a href="#" class="add" id="1"><img src="add.png" width="24" height="24" alt="add" title="add input" /></a> <form id="target" name="target" action="post.php" method="post" onsubmit="return validate(this);"> <div id="inputs"> <!-- dynamically created inputs here --> </div> <!-- Password: <input type="password" id="password" name="password" size="10"> --> <input type="submit" value="Send"> </form> Hey, I'm attempting to add functuallity to some code and have been having problems getting loops to create variables that are usable. I know the actual programming seems rather redundant as im creating a variable for each div then looping it to create each div, but it is the only way i can get it to work with other parts of the website. So the actual code takes the variables defining the content of each div and uses the loop to actually produce the divs. I am having problems with the + "linkdiv" + x + part of the actual loop. however way i try to define the variable it simply prints the "linkdiv1" or "linkdiv2" ect... rather then referencing the earlier variable that was created and printing "div1". is this even possible in javascript? The whole whing works when i reference a variable directly, just not when i try to use a loop to create the reference for me. If i use a variable directly i get 5 of the same references rather than one of each reference which is not what i want. please note thati define the colour1 and colour2 variables along with the rest of the actual code earlier in the function... Code:
var linkdiv1="<p style=\"color:"+ colour1+"\">div1</p>"
var linkdiv2="<p style=\"color:"+ colour1+"\">div2</p>"
var linkdiv3="<p style=\"color:"+ colour1+"\">div3</p>"
var linkdiv4="<p style=\"color:"+ colour1+"\">div4</p>"
var linkdiv5="<p style=\"color:"+ colour1+"\">div5</p>"
<!----------------------------------------------------------------->
for (x = 1; x <= 5; x++)
{
document.write("<div style=\""+colour1+"\" id=\"div"+x+"\">" + "linkdiv" + x + "</div>")
}
feel free to ask for more infomation or more code as im not even sure if this makes enough sense to answer the question. Having troubles writing this in a way thats easily understood as i had to take a lot of code that wasnt relevent out. thanks... Hi, This is my first time here so I hope I'm not posting to the wrong forum. If this has been answered before, please direct me to the corrent post. I've created several dynamic checkboxes with with following code: <code> var pnl = document.getElementById("pnlSalesPeople"); for (i = 0; i < sales.length; i++) { var ck = document.createElement("input"); ck.type = "checkbox"; ck.id = "ck" + i; //ck.checked = true; var label = document.createElement('label'); label.htmlFor = ck.id; label.id = "label" + i; label.appendChild(document.createTextNode(sales[i])); pnl.appendChild(ck); pnl.appendChild(label); pnl.appendChild(document.createElement('<br />')); } </code> All the checkboxes get put into the panel, one per line, as expected. However, clicking on any of them does not change their checked state--if I uncomment the line setting the state above, all the checkboxes are checked, but they don't become unchecked when clicking on them. I'm thinking I'm missing something that will make these checkboxes behave like they should or my approach to dynamic creation is flawed. In any event, my knowledge of Javascript is certainly not at expert level so I'm hoping there might a simple solution to my dilemma. Any help on this is genuinely appreciated. TIA I'm teaching myself JavaScript and created this animated countdown... I want to learn more advanced techniques, or shorthand code. If you see anything I can improve here or something that may not be suitable for a certain browser, please let me know... 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>History Countdown</title>
<style>
* {
margin: 0;
padding:0;
}
p {
font-size: 1em;
color: white;
position: absolute;
left: 450px;
}
#insertHere {
background-color: #000;
padding: 10px;
width: 300px;
height: 40px;
position: relative;
}
#list {
border: solid black 3px;
height: 700px;
width: 320px;
}
h3 {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
form {
text-align: center;
}
</style>
<script>
function gogo(){
var number = 2011;
document.getElementById('formArea').innerHTML = "";
var pixelCount = 450;
var intervalCount = 0;
var opacityValue = 0;
var pixels = 65
var ems = 1;
var beginCount = setInterval(countDown, 1000)
function countDown() {
if(number==0){
clearInterval(beginCount);
clearInterval(mover);
alert ("done");
}
intervalCount = 0;
pixelCount = 450;
pixels = 65;
ems = 1;
var opacityValue = 0;
var mover = setInterval(moveNumber, 35);
function moveNumber() {
intervalCount += 1;
if (intervalCount <= 12) {
pixelCount -= pixels;
opacityValue += .1;
document.getElementById('para').style.left = pixelCount + "px"
document.getElementById('para').style.opacity = opacityValue;
document.getElementById('para').style.fontSize = ems + "em";
ems = ems + .1;
pixels = pixels - 7;
if (intervalCount == 2) {
document.getElementById('para').innerHTML= number;
number -= 1;
}
}//end if
else if (intervalCount == 13) {
clearInterval(mover);
}
}
}//moveNumber
}
</script>
</head>
<body>
<div id="list"><div id="insertHere"><p id="para"></p><span id="done"></span></div>
<h3>History Countdown</h3>
<div id="formArea">
<form>
<input type="button" value="Start" id="goButton" onclick="gogo()" />
</form>
</div>
</div>
</body>
</html>
Hi Peers, i have a button that helps me creating more than one dynamic text box and dropdownlist... how it possible to capture the values in those dynamic comtrols ? i am trying the following but did not work ..when the code is excuted it gives me [object] // Create Text box 1 var newStartDate = document.createElement('input'); newStartDate.setAttribute("type","date"); newStartDate.size=8; //capture the value in a temp variable val1 var val1 = document.getElementsByName(newStartDate); alert(val1); the alert gives [object] thanks Hi Experts, i'am able create dynamically 2 text boxes ( start date & End Date) . Also i am able to create dynamically (img) calendar gif pictures beside each textbox. What i am stuck on is how to popup a calendar while clicking on the img and assign the date to a dynamic texboxes... Any help is much appreciated.. thank you here is the part of my code : // Create Start Date Text box var newStartDate = document.createElement('input'); newStartDate.setAttribute("type","date"); newStartDate.size=8; // Create calendar 1 img var newCalImg1 = document.createElement('img'); newCalImg1.src = "../media/forms/cal.gif"; // Create End Date Text box var newEndDate = document.createElement('input'); newEndDate.size=8; // Create calendar2 img var newCalImg2 = document.createElement('img'); newCalImg2.src = "../media/forms/cal.gif"; im trying to create a script for greasemonkey (tried getting help from their discussion forums, but no one ever answers), but its still written in javascript. so here is what im trying to do. Ive got a dynamically created division that aligns to the right of the browser window. Now im trying to put links inside it as you normally would with like a document.write statement or other methods. The only problem is, any method i try wont work for me. heres my code, maybe someone could give me some things i could try. Code: function QuickLinks()
{
var body = document.body;
var div2 = document.createElement("div");
div2.setAttribute('class','QL');
div2.setAttribute('style','background-color: #692510;width: 200px;height: 500px;top: 2cm;position: absolute;right: 5px;z-index: 4;');
var links = document.createTextNode("where i want my links"); //now with that statement it just writes text, ive tried document.write and many other methods and nothing seems to work.
div2.appendChild(links); //this just inserts the links into the div.
body.appendChild(document.createElement('br'));
body.appendChild(div2);
}
QuickLinks();
Hello, I'm trying to write a script for a website that reads from a database and makes a separate table for each entry in the database. Since the number of entries can change, I want to dynamically create a div for each one, which I can later hide or display based on user selection. However, when I try to access the dynamically created elements by their ID, they return null. Is what I'm trying to do here actually possible? Code: for(var i = 0; i < tables.length; i ++)
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id", tables[i].name);
newDiv.setAttribute("name", tables[i].name);
newDiv.setAttribute("class", "hidden");
newDiv.innerHTML += tables[i].name;
newDiv.innerHTML += "<table id = 'table"+tables[i].name+"' border = '1'>";
newDiv.innerHTML += "<tr>";
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<th>"+table.arrayOfFields[rows].title+"</th>";
numOfEntries = table.arrayOfFields[rows].arrayOfEntries.length;
}
newDiv.innerHTML+="<tr>";
for(var cols = 0; cols < numOfEntries; cols++)
{
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<td>"+table.arrayOfFields[rows].arrayOfEntries[cols].data+"</td>";
}
newDiv.innerHTML+="<tr>";
}
newDiv.innerHTML+="</table>";
document.body.appendChild(newDiv);
}
Hi all , i am creating a dynamic controls but one thing iam stack on is how to associate an existing class ("C1") to that dynamic control : i.e var var1 = row.insertCell(0); var1.align ="center"; var1.innerHTML - array1[A1[i]]; thoughts ? thanks Hi. I've dynamically created some divs, how do I select a specific div to use? Code: //create box for length of letters in word
var i = 0;
for(i=0;i<wL;i++){
cBoxes = document.createElement("div");
cBoxes.className = "letterBoxes";
hangMan.appendChild(cBoxes);
}
So I'm creating the amount of divs equal to the amount of letters in my word (I'm making a hangman game). On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created). I have the correct position stored in a variable (letPos), and the correct guess (userGuess), I need to show userGuess at the div equal to letPos, ie div 4 or div 5, etc. If I simply go cBoxes.innerHTML = userGuess, the correct userGuess always shows at the last position in my cBoxes divs. I need it to show at the correct position (letPos). Any hints? I have the following code which adds a dynamically created textbox to a form: Code: function addarow() {
if (count > 5) {return false}
count ++;
addbox = '<input type = "text" name = "txt1" id = "txt1" class = "box">';
document.getElementById("boxes"+count).innerHTML = addbox + "<br>";
}
I am having difficulties in assigning different names/ids to the sequential textboxes, that is "txt"+count to give txt1, txt2 etc. Your assistance will be much appreciated. A child of five would understand this. Send someone to fetch a child of five. Groucho Marx never mind
|
|||||||