JavaScript - Image Upload With Preview And Delete
Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from http://jsbin.com/uboqu3/edit#javascript,html
1) The script works for Firefox, no good for IE. How to make it works for IE? 2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution? Code: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img_prev') .attr('src', e.target.result) .height(200); }; reader.readAsDataURL(input.files[0]); } } </script> <meta charset=utf-8 /> <title>JS Bin</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <input type='file' onchange="readURL(this);" /> <img id="img_prev" src="#" alt="your image" /> </body> </html> Similar Tutorialswhen client uploads any image at that time before uploading the image i want to display that image to the client. so please provide me the snippet of javascript to achieve this thing. Code: <img id="previewField" name="previewField" width="100" height="100" /> <input type="file" id="picField" onchange="document.previewField.src=this.value;"> but i am not able to preview this image on mozilla so please provide me the solution for this or if it it possible using ajax then also please provide the solution. the altimate goal is: the local image which is suppose to be uploaded should first be previewed to the client or uploder. 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! Hello I currently have a little problem with displaying an image preview on a form basically when the form is filled out, the form fills out a birth certificate for bears. Below show the layout of the form before the certificate is filled out So hopefully you get the idea from this screenshot You browse for the image and once u have selected the image it will appear in the "orangy" box called image preview. would any1 have any codes that would make this functionable? If so it would be very much appreciated area of an image on which the mouse is positioned should only show in the preview, not the full image .. is this posible if yes how ?? Plz suggest me something ........... Samaiya Hi, I am working in Dreamweaver CS4 with both HTML and Javascript. I created a preview area and some thumbnails beneath. Each thumbnail is linked to a full size image. So far, so good. I'm attempting to follow a Javascript tutorial to make a lightbox. I added CSS rules and the javascript code (below) in the hopes of having my thumbnail show the image in the clickable preview area when hovering. However, my fullsize image does not display in the preview area. Interestingly, when I hover over the preview, I see at the bottom of my browser that it is still linked, just not displaying. The preview area is blank. Any ideas? I've put the site online artmarcsimon dot com Thanks! Javascript: Code: $(document).ready(function(){ $('.gallery_thumbnails a').click(function(e){ e.preventDefault(); $('.gallery_thumbnails a').removeClass('selected'); $('.gallery_thumbnails a').children().css('opacity','1'); $(this).addClass('selected'); var photo_caption = $(this).attr('title'); var photo_fullsize = $(this).attr('href'); var photo_preview = photo_fullsize.replace('_fullsize','_preview'); $('.gallery_preview').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>'); }); }); I have search for about a week and still no luck. I need to dynamically display mutliple images using javascript, no hardcoding. The images have different categories. For ex. bellTower01.jpg, bellTower02.jpg...and fountain01.jpg, fountain02.jpg.... -Use JavaScript to display several images and scroll through them To display multiple thumbnails, arrange them into a small quantity (no more than 8 per page) Provide pagination I really really really need help. I have never done javascript before, so I'm still learning. I seriously checked out many threads and links but nothing works or is what I want. I hope someone can help me out and hopefully also allow me to become better at coding this kind of stuff. I am not allowed to code in php for this project. I can only use javascript to display the images. Also, I don't really need anything fancy, like slideshows or rotations, I just the image to appear when I select that specific category. I want to get the images from my folder/directory. Right now, I have it working as it just being hardcoded. Below is my code for my galleries page: <?php //creates a session..initializes session data session_start (); echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Scenes of Purdue</title> <!-- Styling of the Webpage --> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/lightbox.css"/> </head> <body> <div id="shadowContainer"> <div id="mainContainer"> <div id="mainHeader"></div> <div id="topNav"> <ul> <li><a href="index.php">Home</a></li> <li><a href="galleries.php">Galleries</a></li> </ul> </div><div id="content"> <br /> <div class="clearfix"><h1>Select a Category to View</h1> <br /> <div class="paginationBar" id="paginationBar"> <select id="catDropDown" onchange="javascript:getCategory()"> <option value="-" selected="selected">Select a Category</option> <option value="bellTower">Bell Tower</option> <option value="fountain">Fountain</option> </select> </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /> <ul id="pagination"> </ul> <div id="r1c1"></div> <div id="r1c2"></div> <div id="r1c3"></div> <div id="r2c1"></div> <div id="r2c2"></div> <div id="r2c3"></div> <script type="text/javascript"><!-- var bellTowerArray = new Array(); bellTowerArray[0] = "bellTower01.jpg"; bellTowerArray[1] = "bellTower02.jpg"; bellTowerArray[2] = "bellTower03.jpg"; bellTowerArray[3] = "bellTower04.jpg"; bellTowerArray[4] = "bellTower05.jpg"; bellTowerArray[5] = "bellTower06.jpg"; bellTowerArray[6] = "bellTower07.jpg"; bellTowerArray[7] = "bellTower08.jpg"; bellTowerArray[8] = "bellTower09.jpg"; bellTowerArray[9] = "bellTower10.jpg"; bellTowerArray[10] = "bellTower11.jpg"; bellTowerArray[11] = "bellTower12.jpg"; bellTowerArray[12] = "bellTower13.jpg"; bellTowerArray[13] = "bellTower14.jpg"; bellTowerArray[14] = "bellTower15.jpg"; bellTowerArray[15] = "bellTower16.jpg"; var fountainArray = new Array(); fountainArray[0] = "fountain01.jpg"; fountainArray[1] = "fountain02.jpg"; fountainArray[2] = "fountain03.jpg"; fountainArray[3] = "fountain04.jpg"; fountainArray[4] = "fountain05.jpg"; fountainArray[5] = "fountain06.jpg"; fountainArray[6] = "fountain07.jpg"; fountainArray[7] = "fountain08.jpg"; fountainArray[8] = "fountain09.jpg"; fountainArray[9] = "fountain10.jpg"; fountainArray[10] = "fountain11.jpg"; fountainArray[11] = "fountain12.jpg"; fountainArray[12] = "fountain13.jpg"; fountainArray[13] = "fountain14.jpg"; fountainArray[14] = "fountain15.jpg"; fountainArray[15] = "fountain16.jpg"; fountainArray[16] = "fountain17.jpg"; fountainArray[17] = "fountain18.jpg"; var currentArray = new Array(); function getCategory() { if(document.getElementById("catDropDown").selectedIndex == 1) { currentArray = bellTowerArray; } else if(document.getElementById("catDropDown").selectedIndex == 2) { currentArray = fountainArray; }//if/else if(document.getElementById("catDropDown").selectedIndex > 0) { displayImages(0); doPagination(); } } function displayImages(start) { //r1c1 if(!(start > currentArray.length-1)) document.getElementById("r1c1").innerHTML = "<a id=\"r1c1_a\" href=\"images/regular/" + currentArray[start] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start] + "\" id=\"r1c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r1c1").innerHTML = ""; //r1c2 if(!(start+1 > currentArray.length-1)) document.getElementById("r1c2").innerHTML = "<a id=\"r1c2_a\" href=\"images/regular/" + currentArray[start+1] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+1] + "\" id=\"r1c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r1c2").innerHTML = ""; //r1c3 if(!(start+2 > currentArray.length-1)) document.getElementById("r1c3").innerHTML = "<a id=\"r1c3_a\" href=\"images/regular/" + currentArray[start+2] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+2] + "\" id=\"r1c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r1c3").innerHTML = ""; //r2c1 if(!(start+3 > currentArray.length-1)) document.getElementById("r2c1").innerHTML = "<a id=\"r2c1_a\" href=\"images/regular/" + currentArray[start+3] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+3] + "\" id=\"r2c1_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r2c1").innerHTML = ""; //r2c2 if(!(start+4 > currentArray.length-1)) document.getElementById("r2c2").innerHTML = "<a id=\"r2c2_a\" href=\"images/regular/" + currentArray[start+4] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+4] + "\" id=\"r2c2_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r2c2").innerHTML = ""; //r2c3 if(!(start+5 > currentArray.length-1)) document.getElementById("r2c3").innerHTML = "<a id=\"r2c3_a\" href=\"images/regular/" + currentArray[start+5] + "\" rel=\"lightbox\" title=\"This is the static description\"><img src=\"images/th/thumb_" + currentArray[start+5] + "\" id=\"r2c3_img\" width=\"150\" height=\"150\" alt=\"This is the static description in alt\" title=\"Static title description\" /><"+"/a>"; else document.getElementById("r2c3").innerHTML = ""; } function doPagination() { var numpages = (currentArray.length / 6) +1; var numleft = currentArray.length % 6; document.getElementById("pagination").innerHTML = ""; for(i=0; i<numpages-1; i++) { document.getElementById("pagination").innerHTML += "<span onclick='displayImages("+ i*6 +")'>"+ (i+1) + "<"+"/span> "; } if(numpages <=1) { document.getElementById("pagination").innerHTML = ""; } } document.getElementById("catDropDown").selectedIndex = 0; --> </script> </div> </div> </div> <div id="footer"><a href="readme.php">Readme</a><br /> <div class="clearfix"> <div style="float: left"><a href="adminLogin.php" title="Admin Login" class="adminLoginAjax">Admin login</a></div> </div> </div> </div> </div> </body> </html> Okay so i followed a tutorial on how to create a wysiwyg rich text editor. The script has a function that makes it possible to take an image uploaded on an another site and use it. What i want though is to let the user upload an image directly into the text editor. Is there a way to do that in javascript? and if so, can you guys please help me write it, cause i can't find anything on the web about it... ? btw, is it possible to write a function that allows the user to show a video from youtube just by entering the url address? Code: <div id="content"> <body onLoad="iFrameOn();"> <h1>Create a New Guide</h1> <form id="form1" name="form1" method="post" action="add_guide.php"> <h3>Guide Name <input name="guide" type="text" id="guide" size="50" maxlength="50" /></h3> <p> </p> <p> </p> <select name="class"> <option value="0">None</option> <option value="1">Scout</option> <option value="2">Soldier</option> <option value="3">Pyro</option> <option value="4">Demoman</option> <option value="5">Heavy</option> <option value="6">Engineer</option> <option value="7">Medic</option> <option value="8">Sniper</option> <option value="9"selected="selected">Spy</option> </select> <p> </p> <div id="wysiwyg_cp" style="padding:8px; width:700px;"> <input type="button" onClick="iBold()" value="B"> <input type="button" onClick="iUnderline()" value="U"> <input type="button" onClick="iItalic()" value="I"> <input type="button" onClick="iFontSize()" value="Text Size"> <input type="button" onClick="iForeColor()" value="Text Color"> <input type="button" onClick="iHorizontalRule()" value="HR"> <input type="button" onClick="iUnorderedList()" value="UL"> <input type="button" onClick="iOrderedList()" value="OL"> <input type="button" onClick="iLink()" value="Link"> <input type="button" onClick="iUnLink()" value="UnLink"> <input type="button" onClick="iImage()" value="Image"> </div> <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it --> <textarea style="display:none" name="content" cols="50" rows="10" id="content"></textarea> <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe> <!-- End replacing your normal textarea --> <p> </p> <input type="submit" name="submit" value="Submit" onClick="javascript:submit_form();" /> </form> </div> Code: function iFrameOn(){ richTextField.document.designMode = 'On'; } function iBold(){ richTextField.document.execCommand('bold',false,null); } function iUnderline(){ richTextField.document.execCommand('underline',false,null); } function iItalic(){ richTextField.document.execCommand('italic',false,null); } function iFontSize(){ var size = prompt('Enter a size 1 - 7', ''); richTextField.document.execCommand('FontSize',false,size); } function iForeColor(){ var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', ''); richTextField.document.execCommand('ForeColor',false,color); } function iHorizontalRule(){ richTextField.document.execCommand('inserthorizontalrule',false,null); } function iUnorderedList(){ richTextField.document.execCommand("InsertOrderedList", false,"newOL"); } function iOrderedList(){ richTextField.document.execCommand("InsertUnorderedList", false,"newUL"); } function iLink(){ var linkURL = prompt("Enter the URL for this link:", "http://"); richTextField.document.execCommand("CreateLink", false, linkURL); } function iUnLink(){ richTextField.document.execCommand("Unlink", false, null); } function iImage(){ var imgSrc = prompt('Enter image location', ''); if(imgSrc != null){ richTextField.document.execCommand('insertimage', false, imgSrc); } } function submit_form(){ var theForm = document.getElementById("form1"); theForm.elements["content"].value = window.frames['richTextField'].document.body.innerHTML; theForm.submit(); } I am creating a website and there is an option for the user (after he login to the website, he enters into his workspace page)to upload a background image of his choice to his workspace page. Can the user dynamically upload a background image to his webpage? Can this be done in javascript/php? I would be glad if somebody could help me. Hello Everyone, I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks! Code: <form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)"> <p><b>First Name</b><br/> <INPUT TYPE="TEXT" NAME="name_first" size="40"></p> <p><b>Last Name</b><br/> <INPUT TYPE="TEXT" NAME="name_last" size="40"></p> <p><b>School Name</b><br/> <INPUT TYPE="TEXT" NAME="name_school" size="40"></p> <p><b>Your School E-Mail</b><font class="super">1</font><br/> <INPUT TYPE="TEXT" NAME="school_email" size="40"></p> <p><b>Your File</b><font class="super">4,5</font><br/> <input id="userfile1" name="userfile1" type="file" size="30"></p> <p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p> </form> Code: function validate_required_field(field,alertText) { with (field) { if (value==null||value=="") { YAHOO.example.container.wait.hide(); alert(alertText); return false; } else { return true; } } } function validate_email(field,alertText) { with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) { YAHOO.example.container.wait.hide(); alert(alertText); return false; } else { return true; } } } function validate_form(thisform) { with (thisform) { if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) { name_first.focus(); return false } } with (thisform) { if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) { name_last.focus(); return false } } with (thisform) { if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) { name_school.focus(); return false } } with (thisform) { if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) { school_email.focus(); return false } } with (thisform) { if (validate_email(school_email,"Please enter a valid email address before continuing")==false) { school_email.focus(); return false } } } I would like to create a print preview window that will display only the main content of the page that a person would really want to print. I found a script that didn't do that, but that I was able to adapt, somewhat. It doesn't fully work though and I can't get it any better. Here is what I have... <html> <head> <title></title> <script LANGUAGE="JavaScript"> function displayHTML(printContent) { var inf = printContent; win = window.open("print.htm", 'popup', 'toolbar = no, status = no'); win.document.write(inf); } </script> </head> <body> <div id="printarea">Print this stuff.</div> <a href="javascript:void(0);" onclick="displayHTML(printarea.innerHTML)">Print Preview</a> </body> </html> In mozilla it opens the new window but continues to be thinking about something indefinitly. In Safari the new window opens but there is no content. In IE it seems to work fine. I haven't tested NS yet, nor have I tested any of this on a PC. Thanks for any help. I am trying to mimic the video mouseover preview which can be viewed at the website below once you put your mouse over a picture a video preview window is opened which plays back the video and stops once the mouse is moved. http://videocopilot.net/tutorials/ How can i mimic this effect... any suggestions? I am setting up a store for stationery. One cool aspect is for the online user to be able to type in what they want on the stationery, choose the font, and hit a "PREVIEW" button, showing an exact preview of what it should look like. I am having trouble on how to do this. Virtuemart and its forums are useless and helpless. Joomla suprisingly doesn't have an extension for this. Looks like I'm gonna have to hard code this baby. What would the best angle be to attack this? Should I try some interactive flash/AS3 or some good ol JS? There will be over 500 products so I am trying to pick YOUR expert brain before I tackle this beast. Thanks for any input! hi, i upgraded my SWF object about 3 months ago and have been trying to find a way to add the preview back in there, but dont know how with the new process since what i had originally was ancient. the old code was like this Code: <script type='text/javascript'> var s1 = new SWFObject('player.swf','player','400','300','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('flashvars','file=$ROOT/movies/$sql_array->vid_id.flv'); s1.write('preview'); </script> the issue is that the new way is totally differnent - no longer do you have the javascript and embed on the same page, the javascript goes in the header and the view code goes in the file now. so how do i add this to the new way of coding. Code: s1.write('preview'); here is the new way of doing it and this is in the php header Code: <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("player", "9.0.0"); </script> and then this is in the the files you want to display the video on Code: <object classid="clsid: my class id went here" width="175" height="175" id="player" name="player" align="middle"> <param name="movie" value="player.swf" /> <param name="play" value="false" /> <param name="quality" value="high" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="file=<?=$ROOT?>/movies/<?=$sql_array->vid_id?>.flv" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle"> <param name="play" value="false" /> <param name="quality" value="high" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="flashvars" value="file=<?=$ROOT?>/movies/<?=$sql_array->vid_id?>.flv" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> i think i can add it is a param flashvar but im not sure how on this code Just fyi i upload my vids using FFMPEG so in the dir there is a flv and associated jpg for the view for each vid. in other words there is a 1.flv and a 1.jpg i just need to figure out how to display the jpg for each vid in the code above. Hi, I've been inherited a website from another web developer and I need to fix his code. In one part of the admin system, the user selects a template for the newsletter to use, types the subject and body text into a form, then submits it using a submit button. There is no problem with this code and the user is able to send newsletters out using the standard template (there is only one template). However, they require a preview button to check it looks how they want it to on the template. to get to the preview page (preview_mailing.php?template=1), there is a Javascript preview button, which uses the following code: Code: <script> function get_radio_value() { for (var i=0; i < document.add_form.template.length; i++) { if (document.add_form.template[i].checked) { return rad_val = document.add_form.template[i].value; } } } </script> <a href="javascript:;" title="Preview" target="_self" class="button" onclick="MM_openBrWindow('preview_mailing.php?template=' + get_radio_value(),'preview','scrollbars=yes,width=600,height=800');return false">Preview</a> <br/> When you click on this button, however, it does absolutely nothing and shows javascript:; as the link, but I'm sure this is what it is meant to show as the link? AMAZON has some nice future for book preview and they can display book cover/back like real book. For instance Rational Astrology: as a physical model (Chinese Edition): Julian J.-L. Ting: 9781493734559: Amazon.com: Books Presumably that is done by javascript? Is there any free code available for doing such business? My slideshow is working in the dreamweaver preview, but not showing up when i upload and view on the internet. http://www.kristynaswebpages.com/home2a.html I have this in the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="fadeslideshow.js"> /*********************************************** * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script type="text/javascript"> var mygallery=new fadeSlideShow({ wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow dimensions: [1024, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image imagearray: [ ["http://www.kristynaswebpages.com/falcon_1.jpg", "", "", "The A Control Room is blah blah blah"], ["http://www.kristynaswebpages.com/falcon_2.jpg", "", "", "The A Control Room is blah blah blah"], ["http://www.kristynaswebpages.com/falcon_3.jpg"], ["http://www.kristynaswebpages.com/falcon_4.jpg", "", "", "The A Control Room is blah blah blah"] //<--no trailing comma after very last image element! ], displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false}, persist: false, //remember last viewed slide and recall within same session? fadeduration: 500, //transition duration (milliseconds) descreveal: "ondemand", togglerid: "" }) </script> and then i put <div id="fadeshow1"></div> where I wanted the slideshow to appear (between the menu bar and the text at the bottom). I have tried writing the pic links as both "http://www.kristynaswebpages.com/falcon_2.jpg" and "falcon_2.jpg" If anyone could help, that would be so awesome! Hi guys, On the back of my image preview issue (which is now fixed) I am having another problem. I am trying to get a file upload that will allow you to preview the html page in a popup on the click of a button. Can this be done? I have the preview button that creates the popup but at the moment it only shows the name of the file that's to be uploaded. Code below Code: <html> <head> <title>File Uploading Form</title> </head> <body> <h3>File Upload:</h3> Select a file to upload: <br /> <form method='post' action='upload.php' enctype="multipart/form-data" class="pure-form"> <input type="file" name="files[]" multiple="multiple" id="files"> <input type="button" value="Preview" onclick="displayHTML(this.form)"> <input type='submit' value='Submit' class="pure-button pure-button-primary"/> </form> </body> </html> <script> function displayHTML(form) { var inf = form.files.value; win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } </script> Reply With Quote 01-24-2015, 04:56 PM #2 jmrker View Profile View Forum Posts Senior Coder Join Date Aug 2006 Location FL Posts 3,175 Thanks 39 Thanked 510 Times in 504 Posts Can you use the right-click button on your mouse and "View Source", or is this not what you are trying to do? Reply With Quote 01-24-2015, 06:58 PM #3 Foster View Profile View Forum Posts Regular Coder Join Date Nov 2011 Posts 268 Thanks 8 Thanked 4 Times in 4 Posts Not what I'm trying to do. I want to be able to click the button and the file that is waiting to be opened should pop up in a new window. Reply With Quote 01-24-2015, 09:51 PM #4 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts LOOK at your code! Code: <input type="file" name=" files[] " ...rest doesn't matter... > and var inf = form. files .value; Those are *NOT* the same name in JavaScript. Only in PHP would the be (sort of) the same (and not even quite so, there). Anyway, I don't see how you can expect an HTML file that is not yet uploaded to look the same this way as it will coming from the server. ONLY if it is restricted as follows could you get the : (a) only <img> tags that use COMPLETE URLs as their src= (that is, src="http://somesite.com/somepath/someimage.pn") (b) only href's (in any kind of tag) that use COMPLETE urls. (c) only <script> tags that use src= complete urls. (d) probably other things I didn't think of Any RELATIVE urls (e.g., <img src="/images/xxx.png"/>) will be relative TO THE CLIENT MACHINE, not to the server. And how that relative path works may vary from browser to browser. Offhand, I'd say this is not a good idea. I think you should allow the upload and then preview the uploaded file in a popup window, yes, and give the user the opportunity to delete the just-uploaded file from the server. Hi, I've got a form, and it contains a JS function to validate input (e.g. check for empty fields / valid email etc). I currently only have one submit button, which takes a user to a preview screen for the data they entered. I'd like to add a 2nd button to allow them to send the data right away, skipping the preview bit. However, I can't see how to have one form, with 2 buttons, and for each button to have a different destination, AND for each button to call the form validation JS. In fact, what I'm trying to do is much the same as this newthread page on this form, as it has the "Submit New Thread" and "Preview Post" buttons, each taking the user to a different page, each firing the form validation JS. I'd be grateful for any advice about how to do this. Thanks! Hi All, I am trying to make changes to our navigation bar. I first open in Contribute my homepage and then I go to edit the page in Dreamweaver. I make changes to the navigation bar but then when I go back to Contribute and preview or publish it removes my changes and goes back to the old navigation bar. Please help! My programming friend said it might be a permission problem because someone else did the original structure and build for the website, but this is for a company that he only does contracted work for so I am not sure this is the case. See code below: Original nav bar code: Code: <script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script> <table id="m1mainSXMenu2" cellspacing="1" cellpadding="10" style=";width:790px"> <tr style="text-align:center"> <td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td> <td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='About Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">About Us</a></td> <td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >Programs</a></td> <td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Getting Started';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Getting Started</a></td> </tr> </table> New Code: Code: <script type="text/javascript" src="/HerndonRecognition/navigation/navigation_m1_scr.js"></script> <table id="m1mainSXMenu2" cellspacing="1" cellpadding="10" style=";width:790px"> <tr style="text-align:center"> <td onmouseover="chgBg(m1,'m1tlm0',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm0',0,1)" id="m1tlm0" onmousedown="f58('m1tlm0a')" class="m1mit" ><a id="m1tlm0a" onmouseover="window.status='Home page';return true" onmouseout="window.status='';return true" class="m1CL0" href="home.php" target="_parent">Home</a></td> <td onmouseover="chgBg(m1,'m1tlm1',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm1',0,1)" id="m1tlm1" onmousedown="f58('m1tlm1a')" class="m1mit" ><a id="m1tlm1a" onmouseover="window.status='Our Culture';return true" onmouseout="window.status='';return true" class="m1CL0" href="aboutus.php" target="_parent">Our Culture</a></td> <td onmouseover="chgBg(m1,'m1tlm2',3);exM(m1,'m1mn1','m1tlm2',event)" onmouseout="chgBg(m1,'m1tlm2',0);coM(m1,'m1mn1')" id="m1tlm2" class="m1mit" ><a id="m1tlm2a" class="m1CL0" href="javascript:void(0);" >What We Offer</a></td> <td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Our Knowledge Base';return true" onmouseout="window.status='';return true" class="m1CL0" href="ourknowledgebase.php" target="_parent">Our Knowledge Base</a></td> <td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Customer Service';return true" onmouseout="window.status='';return true" class="m1CL0" href="customerservice.php" target="_parent">Customer Service</a></td> <td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Testimonials';return true" onmouseout="window.status='';return true" class="m1CL0" href="hrtestimonials.php" target="_parent">Testimonials</a></td> <td onmouseover="chgBg(m1,'m1tlm3',3);exM(m1,'none','',event)" onmouseout="chgBg(m1,'m1tlm3',0,1)" id="m1tlm3" onmousedown="f58('m1tlm3a')" class="m1mit" ><a id="m1tlm3a" onmouseover="window.status='Contact Us';return true" onmouseout="window.status='';return true" class="m1CL0" href="contactus.php" target="_parent">Contact Us</a></td> </tr> </table> |