|
JavaScript - Remove Unused File Upload Javascript
Hi everybody,
I have this File Upload control, whereby the user is granted a limit of 5 uploads. And so, the user clicks on "Attach Another File", and decides to attach a file ONLY in the first File Upload control. My problem is, I want the user to be able to click on an "X" beside every File Upload control, so that it will close those unnecessary (or unused) FIle Upload controls. How do I edit my code in JAVASCRIPT? Please advise. 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>
<title></title>
<script language="javascript" type="text/javascript">
var fileCount = 1;
function addOneFile()
{
++fileCount;
var div = document.getElementById("showFile"+fileCount);
if ( div != null ) div.style.display = "block";
}
</script>
<style type ="text/css">
.style37
{
color: Black;
margin-left: 99px;
}
</style>
</head>
<body>
<table cellpadding="5">
<tr>
<td style="vertical-align: top">
Attachment:
</td>
<td>
<input type="file" name="attachment" id="attachment" style="width:230px" />
<div id="showFile2" style="display: none;">
<input name="file2" type="file" />
</div>
<div id="showFile3" style="display: none;">
<input name="file3" type="file" />
</div>
<div id="showFile4" style="display: none;">
<input name="file4" type="file" />
</div>
<div id="showFile5" style="display: none;">
<input name="file5" type="file" />
</div>
<br />
<a href="javascript:addOneFile();" class="style37">Attach another File</a>
<br />
(Restricted to 5 uploads)
</td>
</tr>
</table>
</body>
</html>
Similar TutorialsHi there, I have a File Upload tool and would like to prevent the users from clicking on the textbox to upload files. Also, I want to disallow the manual entering of file pathname. How should I edit it? I would need to use Javascript. <input type="file" name="attachment" id="attachment" style="width:300px" /> Hi there, I would like to know how I can show the line "Attach another File" right away, instead of what is depicted in my own code of showing it after a file has been attached. Also, I would like to align "Attach another File" to the right, so that the word "file" will be below the Browse button. 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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var upload_number;
function addFileInput()
{
var d = document.createElement("div");
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attachment"+upload_number);
d.appendChild(file);
document.getElementById("moreUploads").appendChild(d);
upload_number++;
}
</script>
</head>
<body>
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
<div id="moreUploads"></div>
<div id="moreUploadsLink" style="display:none;"><a href="javascript:addFileInput();">Attach another File</a></div>
</body>
</html>
I'm attempting to pull the hidden iframe file upload trick using javascript. I've go my form file upload and iframe fine, but I can't figure out what to do when it gets server side. There seems to be relatively no documentation on how to handle uploaded files in server-side javascript. Ideas? I'm at a loss.
I am trying for a javascript code that would ask for the excel file location when run, fetch data from two columns till eof in an excel file (MS Excel 2010), append it to an existing text file and upload the plain text file to an ftp location. The ftp username, password and location needs to be hard coded in the script. Is this possible? Code: <!-- Add-in device.js files are placed here --> <div id="deviceScript"></div> What I have been doing is clearing this out when I select a new (add-in) device and append a script tag with its .src file. I have some vague idea that unhooking an external js file might remove its code from memory. If not is there a way to do so? Functions in different script files have the same name - for example, I use start() to set up each device. It seems that the latest device start() overwrites the one in memory - but I am not sure if overwrite means delete last one or whether there is some horrendous build up of dross going on. Any clarification appreciated. All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero Hi, When the user clicks a button, I dynamically add entries to the page that have an X button rollover created with it as a means to remove the entry. The code would work just fine except that every time I add an element, I need to add the following line of javascript code: setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1'); where the number '1' is replaced by whatever number of rollover I'm at (as new entries are added, it'd be rollover1, rollover2, etc. Is there a way to add, and possibly even remove, a line of javascript from a .js file? I'd like to do something like: Once the user clicks the button, and the entry is created, add/append "setrollover(\"images/tabs-icons/over-address_remove.png\", \"address_remove1" + i + "\");" to rollovers.js. A more challenging task would be to : When that element is removed, remove that line from the file. Below is a working example of two rollover images that differ only by the number. Code: <html>
<head>
</head>
<script>
//THIS SCRIPT BLOCK IS NORMALLY IN A SEPARATE FILE THAT I CAN PROBABLY APPEND/REMOVE FROM.
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
setrollover("images/tabs-icons/over-address_remove.png", 'address_remove');
setrollover("images/tabs-icons/over-address_remove.png", 'address_remove1');
</script>
<body>
<span id="AddressesVisited" style="font-weight:bold; cursor:pointer;">
<a onMouseOver="rollover('address_remove')" onMouseOut="rollout('address_remove')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove" title="remove" alt="remove"></a> <span class="address-
text">Entry1</span><br>
<a onMouseOver="rollover('address_remove1')" onMouseOut="rollout('address_remove1')" style="cursor:pointer;">
<img src="images/tabs-icons/normal-address_remove.png" name="address_remove1" title="remove" alt="remove"></a> <span class="address-
text">Entry2</span><br>
</span>
</body>
hi i m creating a webpage using javascript and php where i need to upload a doc file or zip and read all the words in doc file if it is zip i need to read all the words in all the doc files. i m trying to upload using file input but it does not show path of file only file name how i m suppose to upload and read it. Hello every one never really used a board for something like this but my java is a little limited so i need some help here if possible! I have a page with 5 file inputs and 5 img tags i have everything working but preview of course changes all the img tags so no madder what browse button i choose all fixed img tags are updated with that preview. here is a code i found and messed with a little cant seem to figure out how to add a loop or something to update just the called tag if any one could help Java Script: <script type="text/javascript"> <!-- Begin /***** CUSTOMIZE THESE VARIABLES *****/ // width to resize large images to var maxWidth=115; // height to resize large images to var maxHeight=115; // valid file types var fileTypes=["bmp","gif","png","jpg","jpeg"]; // the id of the preview image tag var outImage="previewField"; // what to display when the image is not valid var defaultPic="/images/evolve/badpic.jpg"; /***** DO NOT EDIT BELOW *****/ function preview(what){ var source=what.value; var ext=source.substring(source.lastIndexOf(".")+1,sou rce.length).toLowerCase(); for (var i=0; i<fileTypes.length; i++){ if (fileTypes[i]==ext){ break; } } globalPic=new Image(); if (i<fileTypes.length){ //FireFox try{ globalPic.src=what.files[0].getAsDataURL(); }catch(err){ globalPic.src=source; } }else { globalPic.src=defaultPic; alert(fileTypes.join(", ")); } setTimeout("applyChanges()",200); } var globalPic; function applyChanges(){ var field=document.getElementById(outImage); var x=parseInt(globalPic.width); var y=parseInt(globalPic.height); if (x>maxWidth) { y*=maxWidth/x; x=maxWidth; } if (y>maxHeight) { x*=maxHeight/y; y=maxHeight; } field.style.display=(x<1 || y<1)?"none":""; field.src=globalPic.src; field.width=x; field.height=y; } // End --> previewField is the key i think and also of course the imageout jsut dont know how to go about making the loop if this was perl no problem but like stated above i know little about java coding but minor changes. below here is the some of the form code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> <td scope="col"> <img alt="Graphic will preview here" id="previewField" src="/images/evolve/addpic.jpg" width="115" height="115"><br /> <label class="cabinet"><input type="file" name="images[]" id="picField" onchange="preview(this)" class="file"></label> </td> </tr> </table> also ther is one include: <script type="text/javascript" src="/java/si.files.js"></script> i went through this code file and the change does not appear to be where the change should ocur im sure its in the actually script need to loop through the images[] field i would think like i would in php The only thing i could think to do is paste the script code 5 more times and change each variable to 1 2 3 4 5 but then ill have a big php code page there would be a way to make this work i would think Thanks all and im here for PHP or Perl questions so any help would be great! If there is a better approach any input would be great! I'm hoping someone can help me out on this. I know that the input "file" type can't be customized very well using css, so I figured I might try to make my own with javascript. The only problem is, I don't know too much about javascript. So can someone please point me in the right direction on how to make my own custom file upload box in javascript that works the same way as the default one works (so I don't have to edit my PHP coding). Thank you so much! Also, heres something I'd like to achieve: The box I'd like to create is at the top, while the default one is at the bottom. Hi, Suppose I have this: Code: <a href="#" class="play" onclick="Audio('lol.mp3')">
As you see, when a user will click on the link, it will play an audio. Good! I want to know if I have another button, let's say <button>Remove</button>, how can I disable the "onClick" event on the link above? And also when clicking on a third button <button>Add</button>again, it will enable the function again to work? NOTE: I do not want an HTML5 audio Stop button. This is different. I just want to know how to enable and disable function event. Thank! I downloaded a popup datepicker from javascriptkit.com. All great but can't take the time out of the footer. I only want the date to show, and once selected, I would like the field to be filled with "Day, Date, Month, Year" (no time). Code is as follows: Code:
function show_calendar(str_target, str_datetime) {
var arr_months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
var n_weekstart = 1; // day week starts from (normally 0 or 1)
var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime));
var dt_prev_month = new Date(dt_datetime);
dt_prev_month.setMonth(dt_datetime.getMonth()-1);
var dt_next_month = new Date(dt_datetime);
dt_next_month.setMonth(dt_datetime.getMonth()+1);
var dt_firstday = new Date(dt_datetime);
dt_firstday.setDate(1);
dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
var dt_lastday = new Date(dt_next_month);
dt_lastday.setDate(0);
// html generation (feel free to tune it for your particular application)
// print calendar header
var str_buffer = new String (
"<html>\n"+
"<head>\n"+
" <title>Calendar</title>\n"+
"</head>\n"+
"<body bgcolor=\"White\">\n"+
"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
"<tr><td bgcolor=\"#4682B4\">\n"+
"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
"<tr>\n <td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+
"<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"previous month\"></a></td>\n"+
" <td bgcolor=\"#4682B4\" colspan=\"5\">"+
"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
" <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
+str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+
"<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"next month\"></a></td>\n</tr>\n"
);
var dt_current_day = new Date(dt_firstday);
// print weekdays titles
str_buffer += "<tr>\n";
for (var n=0; n<7; n++)
str_buffer += " <td bgcolor=\"#87CEFA\">"+
"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
week_days[(n_weekstart+n)%7]+"</font></td>\n";
// print calendar table
str_buffer += "</tr>\n";
while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
dt_current_day.getMonth() == dt_firstday.getMonth()) {
// print row heder
str_buffer += "<tr>\n";
for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
if (dt_current_day.getDate() == dt_datetime.getDate() &&
dt_current_day.getMonth() == dt_datetime.getMonth())
// print current date
str_buffer += " <td bgcolor=\"#FFB6C1\" align=\"right\">";
else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
// weekend days
str_buffer += " <td bgcolor=\"#DBEAF5\" align=\"right\">";
else
// print working days of current month
str_buffer += " <td bgcolor=\"white\" align=\"right\">";
if (dt_current_day.getMonth() == dt_datetime.getMonth())
// print days of current month
str_buffer += "<a href=\"javascript:window.opener."+str_target+
".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
else
// print days of other months
str_buffer += "<a href=\"javascript:window.opener."+str_target+
".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
"<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
dt_current_day.setDate(dt_current_day.getDate()+1);
}
// print row footer
str_buffer += "</tr>\n";
}
// print calendar footer
str_buffer +=
"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
"Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
"</table>\n" +
"</tr>\n</td>\n</table>\n" +
"</body>\n" +
"</html>\n";
var vWinCal = window.open("", "Calendar",
"width=200,height=250,status=no,resizable=yes,top=200,left=200");
vWinCal.opener = self;
var calc_doc = vWinCal.document;
calc_doc.write (str_buffer);
calc_doc.close();
}
// datetime parsing and formatting routimes. modify them if you wish other datetime format
function str2dt (str_datetime) {
var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
if (!re_date.exec(str_datetime))
return alert("Invalid Datetime format: "+ str_datetime);
return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
}
function dt2dtstr (dt_datetime) {
return (new String (
dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" "));
}
function dt2tmstr (dt_datetime) {
return (new String (
dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
}
This is called with: Code:
<html lang="en">
<head>
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<form name="tstest">
<input type="Text" name="timestamp" value="">
<a href="javascript:show_calendar('document.tstest.timestamp', document.tstest.timestamp.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>
</form>
</body>
</html>
Thanks for any help!!! Ruth Hello everybody, new here. I'm a complete JavaScript newbie, all I know is some HTML, CSS and little jQuery. Don't be so harsh :P I own and run a forum on a free software called Forumotion. Since these people like getting a lot of revenue, they added a metatag that makes IE8 work like IE7. Here it is. Code: <!-- BEGIN meta_emulate_ie7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- END meta_emulate_ie7 -->
This works on only some pages on my forum. However, since we use a lot of CSS and JavaScript codes that IE7 doesn't support (but IE8 does), these pages are completely screwed up. Since they don't offer template editing for some versions (in which this tag can be found), I cannot simply delete this tag (unfortunately). I have come here to ask if there's any way to inhibit, remove, delete and destroy that stupid metatag which is screwing my forum up using JavaScript, jQuery, AJAX, or any other way (except PHP, since it's disallowed...) to do so. Any ideas? Any help will be absolutely appreciated. Thanks a bunch. No Jquery plz As you can see that I want to remove this advertisement area (denoted by 1) via some java code. Now one can observe that this advert is hosted in the 'main-content' id & wrapped in 'inner' class. One cannot remove/hide id but CAN remove/hide the class which also will remove/hide the advert area placed within this class. i have a html/php form which let users upload pictures onto my server. the problem with it is, it says the picture has been uploaded but if the file name contains any of character apart from text (A-z) and numbers, the picture never shows up in the admin panel. is there a way using ajax or jquery to disallow certain file names in the upload field of the html which uses these characters !@#$%^'&*()"? how do i go on about this? I have the following code. I am trying to add an item in the unorderedlist sing javascript when. the new list item is added when the checkbox is checked. And iam trying to remove the corresponding list item when the checkbox is unchecked. Is it possible? Any help from the web gurus will be greatly appretiated. Code: <html>
<head>
<title>Insert title here</title>
<script type="text/javascript" language="JavaScript">
function Addlistitem(list_id) {
var chname = document.getElementById(list_id).name;
if (document.getElementById(list_id).checked == true) {
var element = chname;
var container = document.getElementById('myList');
var new_element = document.createElement('li');
new_element.innerHTML = element;
container.insertBefore(new_element, container.firstChild);
document.getElementById('newElement').value = "";
}
else {
alert("its unchecked");
//need help here to delete the added list item when its corresponding checkbox is unchecked.
}
}
</script>
</head>
<body>
<form name="form1"/>
<input type="checkbox" name="ch1" id="c1" onclick="JavaScript:Addlistitem('c1');"
value="10" />
<input type="checkbox" name="ch2" id="c2" onclick="JavaScript:Addlistitem('c2');"
value="11" />
<input type="checkbox" name="ch3" id="c3" onclick="JavaScript:Addlistitem('c3');"
value="12" />
<input type="checkbox" name="ch4" id="c4" onclick="JavaScript:Addlistitem('c4');"
value="13" />
<input type="checkbox" name="ch5" id="c5" onclick="JavaScript:Addlistitem('c5');"
value="14" />
<input type="checkbox" name="ch6" id="c6" onclick="JavaScript:Addlistitem('c6');"
value="15" />
<input type="checkbox" name="ch7" id="c7" onclick="JavaScript:Addlistitem('c7');"
value="16" />
<ul id="myList">
</ul>
</form>
</body>
</html>
hi, i am using <input type = "file" id = "upload"> in my html page. i want to disable the textbox of this control so that user cannot type any file location here. user can upload file only through browse button. is there a way to disable this textbox thru javascript? thnx I am asking a pretty simple question, but you got to start learning somewhere, you know! Anyway, I have implemented a script that resizes images into small thumbs on the left side of a page and shows the full size image on the right when the user click on a thumb. It works well. However, I have a possible 10 thumbs on theleft and my database that feeds this does not always have 10 images. Since I re-use the page for mutiple listings, I need to find a way to disable the broken image link for listings that don't have 10 thumbs. I have attached a picture of what it looks like. Here is the script: Code: #jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float:left; display: block; height:60px; width:60px; overflow:hidden; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { height:60px; width:auto; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
And then my list basically looks like this: Code: <ul id="gallery">
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb5']; ?>" alt="<?php echo $row_WADAitems['ItemDesc5']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb6']; ?>" alt="<?php echo $row_WADAitems['ItemDesc6']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb7']; ?>" alt="<?php echo $row_WADAitems['ItemDesc7']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb8']; ?>" alt="<?php echo $row_WADAitems['ItemDesc8']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb9']; ?>" alt="<?php echo $row_WADAitems['ItemDesc9']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb10']; ?>" alt="<?php echo $row_WADAitems['ItemDesc10']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb11']; ?>" alt="<?php echo $row_WADAitems['ItemDesc11']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb12']; ?>" alt="<?php echo $row_WADAitems['ItemDesc12']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb13']; ?>" alt="<?php echo $row_WADAitems['ItemDesc13']; ?>"></li>
<li><img src="images/details/<?php echo $row_WADAitems['ItemThumb14']; ?>" alt="<?php echo $row_WADAitems['ItemDesc14']; ?>"></li>
</ul>
So as you can see, if I don't have an image in the database that it pulls from, I get that icon for a broken image link. How can I remove that icon so it doesn't show the no image icon? Many thanks! Hey there everyone I'm a bit new to javascript and having a bit of a problem. I have a page users can click to upload a photo. When users click I want a modal window to pop up with a simple file upload input inside it and a submit button. I have this working except that when users click submit nothing happens. I'm using nyroModal http://nyromodal.nyrodev.com/#demos and the code I use is: Code: <a href="#test" class="nyroModal"><img src="/img/uploadimage.gif" alt="" /></a> <div id="test" style="display: none; width: 600px;"> <form id="ImageUploadForm" enctype="multipart/form-data" method="post" action="images/upload" accept-charset="utf-8"> <div style="display:none;"> <input type="hidden" name="_method" value="POST" /> </div> <div class="input file"> <label for="ImageFileName">File Name</label> <input type="file" name="data[Image][fileName]" id="ImageFileName" /> </div> <div class="submit"><input type="submit" value="Upload" /> </div> </form> </div> If I take the code out of the div=id"test" the form appears on the normal page and submits just fine. Inside the test div tho the modal window pops up with the form inside but the submit button does nothing. Can anyone enlighten me what I'm doing wrong? |
|||||||