Search the Community
Showing results for tags 'javascript'.
-
I am sorry, If I am asking a basic question.. I am working for a project where I need to give a upload and submit option for client. In that client will browse the local path and selects required "EXCEL" file and if they click to submit, then the content should be displayed in the webpage.. these are few codes I went through, but I thought I am not in the right way.. <HTML> <HEAD> <TITLE> PHP File Upload Script </TITLE> </HEAD> <BODY> <?php if( isset($_POST['submit1'])) { // $_FILES is the array auto filled when you upload a file and submit a form. $userfile_name = $_FILES['file1']['name']; // file name $userfile_tmp = $_FILES['file1']['tmp_name']; // actual location $userfile_size = $_FILES['file1']['size']; // file size $userfile_type = $_FILES['file1']['type']; // mime type of file sent by browser. PHP doesn't check it. $userfile_error = $_FILES['file1']['error']; // any error!. get from here // Content uploading. $file_data = ''; if ( !empty($userfile_tmp)) { // We encode the data just to make it more database friendly $file_data = base64_encode(@fread(fopen($userfile_tmp, 'r'), filesize($userfile_tmp))); } switch (true) { // Check error if any case ($userfile_error == UPLOAD_ERR_NO_FILE): case empty($file_data): echo 'You must select a document to upload before you can save this page.'; exit; break; case ($userfile_error == UPLOAD_ERR_INI_SIZE): case ($userfile_error == UPLOAD_ERR_FORM_SIZE): echo 'The document you have attempted to upload is too large.'; break; case ($userfile_error == UPLOAD_ERR_PARTIAL): echo 'An error occured while trying to recieve the file. Please try again.'; break; } if( !empty($userfile_tmp)) { // only MS office and text file is accepted. if( !(($userfile_type=="application/msword") || ($userfile_type=="text/plain") || ($userfile_type=="application/vnd.ms-excel")) ) {echo 'Your File Type is:'. $userfile_type; echo '<br>File type must be text(.txt) or msword(.doc).'; exit; } } echo filesize($userfile_tmp); } echo ?> <form name="profile" method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>" target="_self" enctype="multipart/form-data" > <P align ="center"><input type="hidden" name="MAX_FILE_SIZE" value="1000000"> <input type="file" name="file1" value="AttachFile" device="files" accept="text/*" tabindex=18 > <input type="submit" name="submit1" value="Submit" /> </P> </form> </BODY> </HTML> from the above code I am getting only file size.. This code will displays the content of excel file but it is a hard coded one, but I need client should select that file and content get displayed in the webpage itself... <?php error_reporting(E_ALL ^ E_NOTICE); require_once 'excel_reader2.php'; $data = new Spreadsheet_Excel_Reader("test.xls"); php echo $data->dump(true,true); ?> Thanks in advance... -
I have a search bar attached with html datalist.html datalist updated with php file. when any word is typed it show the related result like as google when you enter any keyword it show the datalist related to this word and you can easily select any vaule for pressing DOWN ARROW KEY but in my search bar when any keyword is enter is show result like google but when press DOWN ARROW KEY it will not select any value because I m using onkeyup javascript event so when you press DOWN ARROW KEY it is also a key and due to onkeyup event datalist show again due to this reason any value does not select. what did I do,can i cannot use onkeyup event if not then what event I use.
-
I am working on a website with my project mates, in which I need to add a filter dropdown box. When I select one of the option in it, the table being displayed in that webpage will display a different set of data based on the type of data I selected to filter. Also this webpage can only be seen by logging in as a valid user. I am very new to javascript and php programming and after going through several forums, I added the following code as a start to do the filtering, by which the webpage will be able to get the dropdown box option that was selected and display it: <script> function formSubmit() { document.getElementById("report_filter").submit(); } </script> <form method="POST" id="report_filter" action="" > <select name="try" onchange="formSubmit();"> <option value="all">All</option> <option value="Windows">Windows</option> <option value="Win 2008">Win 2008</option> <option value="Win 7">Win 7</option> <option value="Win Vista">Win Vista</option> <option value ="Linux">Linux</option> <option value = "Win 7/Linux">Win 7/Linux</option> </select> </form> <?php if(!(isset($_POST["try"]))) { echo "none"; } else echo $_POST["try"]; ?> The code above works ok when i run that individually in a separate php page, i.e., it ehoes the option that i select in the drop down box. But not so when I add it to the webpage that I am working on, cause when I select an option in the dropdown box the page goes blank and nothing else happens. -
I have a site that contains an internal messaging system. I've had users complain that they lost a message they were typing because the navigated away from the page. When this occurs, I'd like to display a custom popup box that I have built (with options, Save, Delete, and Cancel). If save is clicked, it would save a draft then continue to the link the user clicked. If Delete is clicked, it would not save a draft, then continue to the link. If Cancel is clicked, it would go back to the message and allow the user to continue typing. I've played with this option, but it displays the default alert option box. Not desireable. window.onbeforeunload = saveCurrentMessage; My only other thought is to do something like $('a').click(function(){ //cancel the href/onclick from the tag and store in a variable. //display my box. //depending on what the user clicks, Save/Delete would take that action then fire the href and/or onclick, Cancel would just cancel }); NOTE: I don't want to change the a tags on any other page than this, so modifying every link is not an option. Has anyone done this or have any thoughts in this direction? Thanks, Ryan
-
I don't know the syntax , couldn't find anything similar on the net please help : Code: <script type="text/javascript"> var u=$('#2').find('tbody > tr').size(); <%section name='i' start=0 loop=u%> alert('in loop'); <%/section%> </script>
-
I have two columns in a table , first column has a select and the second has a list of checkboxes I'm using smarty to get the number of rows of the table from php , then I use a loop in script code to generate onchange event for every select cell in the table , I'm lost with syntax ! what I want that when I change the select options the checkboxes in the second cloumn become readonly or not . depeanding on the select option which has been chosen . when I open the source of the page I find that there's no code generated in the script at all , it's like the smarty code is ignored need your help to fing the error . the script : <script type="text/javascript"> $(document).ready(function() { <%section name='i' start=0 loop=$rows_number%> $('col_order<%$smarty.section.i.index%>').change(function(){ if( $('col_order<%$smarty.section.i.index%>').val=='first') { $("col_list<%$smarty.section.i.index%>_0").attr('selected','y'); $("col_list<%$smarty.section.i.index%>_0").attr('disabled',false); $("col_list<%$smarty.section.i.index%>_1").attr('selected','y'); $("col_list<%$smarty.section.i.index%>_1").attr('disabled',false); } else if( $('col_order<%$smarty.section.i.index%>').val=='second') { $("col_list<%$smarty.section.i.index%>_0").attr('selected','n'); $("col_list<%$smarty.section.i.index%>_0").attr('disabled',true); $("col_list<%$smarty.section.i.index%>_1").attr('selected','n'); $("col_list<%$smarty.section.i.index%>_1").attr('disabled',true); } }); }); <%/section%> </script>
-
I'm working on a five star voting system for a website and I have very limited knowledge of cookies and javascript for that matter. I'm attempting to limit users to only one vote per instance so I'm guessing I'll need some sort of count and a cookie tracking system that could delete after a couple days. I'm not necessarily worried about people clearing cache as the votes aren't incredibly important but I definitely don't want the ability to keep voting via click. Here is what I've accomplished so far: <script> $(document).ready(function() { $('.rate_widget').each(function(i) { var widget = this; var out_data = { widget_id : $(widget).attr('id'), fetch: 1 }; $.post( 'ratings.php', out_data, function(INFO) { $(widget).data( 'fsr', INFO ); set_votes(widget); }, 'json' ); }); $('.ratings_stars').hover( function() { $(this).prevAll().andSelf().addClass('ratings_over'); $(this).nextAll().removeClass('ratings_vote'); }, function() { $(this).prevAll().andSelf().removeClass('ratings_over'); // can't use 'this' because it wont contain the updated data set_votes($(this).parent()); } ); $('.ratings_stars').bind('click', function() { var star = this; var widget = $(this).parent(); var clicked_data = { clicked_on : $(star).attr('class'), widget_id : $(star).parent().attr('id') }; $.post( 'ratings.php', clicked_data, function(INFO) { widget.data( 'fsr', INFO ); set_votes(widget); }, 'json' ); }); }); function set_votes(widget) { var avg = $(widget).data('fsr').whole_avg; var votes = $(widget).data('fsr').number_votes; var exact = $(widget).data('fsr').dec_avg; window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes); $(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote'); $(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote'); $(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' ); } </script>
-
Hi, I'm working on a new site. And i can't get my code to work properly. I have already made a site with this script and it works just fine, but it will not work on my new site (wordpress with PHP enable). What I need is an alternative to this code (the delete button command): <td><a onclick="return confirmSubmit()" <a href="?slettID=<?php echo $row_persondata2['id']; ?>"><img src="images/Delete-button.bmp" name="Image3" width="45" height="20" border="0" id="Image3" /></a><a href="?slettID=<?php echo $row_persondata2['id']; ?>"></a> <script LANGUAGE="Javascript"> <!-- // Skript for Confirmasjon-delete function confirmSubmit() { var agree=confirm("Er du sikker på at du vil slette denne hendelsen?"); if (agree) return true ; else return false ; } // --> </script> <a href="update.php?oppdaterID=<?php echo $row_persondata2['id']; ?>"><img src="images/Update-button.bmp" width="45" height="20" border="0" /></a></td> </tr> <?php } while ($row_persondata2 = mysql_fetch_assoc($persondata2)); ?> </table> Take a look at my attachment. What i want is a delete button that is asking "are you sure?" and then if i click yes it delete that row from the database. Is there an easy alternative? Thanks!
-
Having issue trying to sum list/menu selected values to show on a textbox <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <style> p { color:red; margin:4px; } b { color:blue; } </style> </head> <body> <p><input name="wal" id="wal" type="text"></p> <p><input type="text" id="total" value="0"></p> <select size="7" multiple="multiple" id="multiple"> <option value="1" selected="selected">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> </select> <script> function displayVals() { var multipleValues = $("#multiple").val() || []; $("#wal").val( multipleValues.join("+ ")); var total =($('#wal').val()); // Update the total var postid=total.split("+"); var sum = 0; //iterate through each textboxes and add the values $("#wal").each(function() { //add only if the value is number if(!isNaN(this.value) && this.value.length!=0) { sum += parseFloat(this.value); } }); //.toFixed() method will roundoff the final sum to 2 decimal places $("#total").html(sum.toFixed(2)); } $("select").change(displayVals); displayVals(); </script> </body> </html> Can anyone help with this please
-
I am having an issue getting the values checked in the check-box. I have tried to clean up the code. I can get the all the selected check-boxes selected (but not per row) or i can get the check-box id per row but not the selected value. I am pretty sure I can transfer the values to the another page but do not know how to get them. Any assistance here would greatly be appreciated! //php variables used $pages = 2 $size = 4 < form id="form" name="cb"> < div style=" width:800px; height:500px; overflow:auto"> < h2>Select Editions</h2> < table id='table' name='table' border=1 cellpadding=7 width=50% height=50% align='center'>\n for($x = 1; $x <= $pages; $x++) : print "<td id='page_$x' class='page_button' align='center' custom='0' >Page $x - "; for($i = 1; $i <= $size; $i++) : print "<input type='checkbox' class='ebutton' id='etype_$x' name='checks[]' value='$i' /> $i"; endfor; </td> </tr> endfor; with this as the Javascript $(document).ready(function() { $(".ebutton").change(function() { var idp = $(this).attr("id").split("_"); var page_num = idp[1]; // I need to find out how to get the checkboxes that are checked per row. Ex: 01,02 //var editions = ?; //alert(editions); var hidden_id = "#etype_page_" + page_num; if($(hidden_id).length < 1) { $("#base").append('<input type="hidden" id="etype_page_'+ page_num +'" name="'+ page_num +'" value="'+ editions +'" class="hidden_edtype" custom="' + editions +'">'); } else { $(hidden_id).val($(this).val()); } update_eShow(); }); }); function update_eShow() { $("#eShow").html(''); $(".hidden_edtype").each(function() { var page = $(this).attr("name"); var value = $(this).attr("custom"); $("#eShow").append('page:' + page + ' values:' + value +'<br>'); }); } page looks like this: | Page 1 - []1 []2 []3 []4 | | Page 2 - []1 []2 []3 []4 | Here is what I have been able to get, but its not right: I select both 01 and 02 for page 1 and only 01 for page 2. My results are: Page:1 Values: 01 Page:2 Values: 01,02,01
-
im working with instagrams api and im not sure what to do next ... i so far have there access_token , but i dont know how to get the rest of the users information. the code below is given to me by instagram to retrieve the users information but i dont know what language to use it with , i have tried php but i dont know what to do with it ? please help thank you i have the access token , client id , client secret , and redirect uri. but do i change the CODE to a variable for the token ? curl \-F 'client_id=CLIENT-ID' \ -F 'client_secret=CLIENT-SECRET' \ -F 'grant_type=authorization_code' \ -F 'redirect_uri=YOUR-REDIRECT-URI' \ -F 'code=CODE' \https://api.instagram.com/oauth/access_token
-
Please help me with my script. In another forum, I have read that it is impossible to have Javascript work in a PHP loop. What i wanted to do is to select only the products that has the status of live and output it in my webpage. The thing is, it outputs the values I retrieved from the database but the countdown timer only works in one product. Another problem of mine is that the onmouseover doesn't work at all. Please help me on how to solve those problems. Thank you! [/font] [font=Verdana, sans-serif]<?php $howmany = mysql_query("SELECT * FROM product WHERE status = 'LIVE'"); $nrow = mysql_num_rows($howmany); for($i = 0; $i < $nrow; $i++){ $row = mysql_fetch_array($howmany); $pname = $row[1]; $closedate = $row[4]; $img = $row[10]; ?> <td align='center'> <table background="images/auctionbox.gif" width="170" height="330"> <tr> <td align="center"><?php echo $pname; ?></td> </tr> <tr> <td height="50px" align="center" width="50px"><img src="<?php echo $img; ?>"></td> </tr> <tr> <td align="center"> <script language="Javascript"> TargetDate = "<?php echo $closedate ?>"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%%d %%H%%:%%M%%:%%S%%"; FinishMessage = "CLOSED!"; </script> <script language="Javascript" src="includes/countdown.js"></script> </td> </tr> <tr> <td align="center">P<label id="this">1.00</td> </tr> <tr> <td align="center">Last Bidder</td> </tr> <tr> <td align="center"> <script type="Javascript" src="includes/idkthis.js"></script> <a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('BidButton','','images/bid-login.gif',1)" href="login"> <img name="BidButton" onload="MM_preloadImages('images/bid-login.gif')" width="90" height="40" src="images/bid-bid.gif"></a> </td> </tr> </table> </td> <?php } ?>
-
Hello, I am trying to load more search resutls in my search.php with this code <script> function yHandler($q){ var result= document.getElementById('mydiv'); var contentHeight = result.offsetHeight; var yOffset = window.pageYOffset; var y = yOffset + window.innerHeight; if(y >= contentHeight){ var query = "<?PHP echo $_POST['search']?>"; $.ajax({ type: "POST", url: "search.php", $q:query, success: function(res) { $("#more").append(res); } }); } } window.onscroll = yHandler; </script> My biggest problem is that it will load the page with no results because the $q is not correctly sent. If I try alert(query); it shows the search term so the problem must be when im defining my data in the ajax request. Any ideas? Thanks in advance
-
hi im working with instagram API and it uses Curl ... i sorta get it but is there a site where i could learn more or anyone here that knows about curl?
-
im trying to grab something from the url bar , a phrase but it wont show up ?? please help ! <script type='text/javascript' src='jquery.min.js'></script> <script> function myFunction(sender) { var id = '#' + sender.getAttribute('href').split('#')[1]; or `'#' + sender.href.split('#')[1]` or `'#' + $(sender).attr('href').split('#')[1]` } </script> Copy and paste code from This page into the code box on the homepage and go claim your likes!!!<br> Your code is <script> document.write(myFunction()) </script>
-
Hi. I have a page set up with a large box in the middle. I want to display content pulled from my server in a repeating sequence, in say, 4 items per row, and as many rows as needed to display all the relevant data. The relevant data will be defined by the bottom part of the box, where you have 12 tabs to choose from, each signifying a category for the dynamic content to filter by. IE: <?php $relevantData = mysql_query("SELECT * FROM table WHERE 'category' = '$CurrentCategory' "); while($row = mysql_fetch_array($relevantData)){ //list array here } ?> So each tab at the bottom links the user to: "thispage.php?cat=$whateverCategoryIsSelected" When that tab is active, an active tab graphic is the background for the tab, it just looks like its the page/section youre on. When no on the tab, it looks like a page tab underneath the current tab. Clicking an inactive tab would make it active and link you to another category. THE PROBLEM: After spending the last 6 hours banging my head against a wall trying to figure out how to do this, expending various resources including tenuous google searchs and hundreds of php, html, css, guides, I come here, to see if some really super awesome individual would be willing to help me out. Any help would be greatly appreciated! You can contact me at: Skype: xxEndtimesxx email: [email protected]
-
Not even sure if this is possible, I know nothing about programming!! Basically our developer disappeared mid job, never good but hey. Anyway, I've bungled my way through most of the issues that were outstanding with help from others which in a way has been good fun On to the problem, we have a payment page which takes users details such as address etc. When the user clicks "make payment" the page changes to the payment screen where the card data appears in an iFrame (it's a Pay Pal Hosted solution). The issue is the cart progress is reported in our admin section, the line of code I can see is as follows :- $sql = "UPDATE carts SET progress='19' WHERE cartid='".$_SESSION['cartid']."'"; mysql_query($sql); I can see the set progress number is pulled from another file which features code such as :- elseif ( $row['progress'] == '19' ) { echo 'iFrame Payment Page'; This works all well & good. The problem is the iFrame has two stages, the first stage is card data like number & expiry, once this is submitted the iFrame changes to 3D Secure (Mastercard Secure code or Verfied by Visa). What I don't know how to do is get the progress to report this? It seems it is possible as the code is there ready & waiting :- elseif ( $row['progress'] == '15' ) { echo '3Ds iframe Page'; I "just" don't know how to get the sql output? I tried adding :- $sql = "UPDATE carts SET progress='15' WHERE cartid='".$_SESSION['cartid']."'"; mysql_query($sql); Below the iFrame code but of course that just chages the progress status when the iFrame loads NOT when the iFrame changes. I guess I need some way of detecting the iFrame refresh or page change? Any help would be great, or if someone can fix this for some beer money then feel free to contact me. A web design company say they can do it but it would take around 4 hours @ £25 PH, not really worth me spending £100 to get a status changed in an admin system!(especially as this is the back up payment method that rarely gets used, it's just me wanting to fix the "bugs"!!) Thanks for any help
-
Generally speaking, I have a love/hate relationship with Javascript. That said, I am trying to clean up my website for a new job and would like to demonstrate that I can use JS without giving up functionality. I have a page that demonstrates the websites in my portfolio. There are submenus under the main navigation. When you are on the webs page, switching between submenu items is done with Javascript. I would like to make that content available to users with JS disabled. I had the bright idea to stick it inside the <noscript> tags, but that stretches out my page container with invisible content even if you are using JS. Has anyone gone through this before? Does anyone have any thoughts about how to make this content available for JS disabled users without removing the Javascript? Thanks in advance! -
I am trying to get the radio's button value from the form to the javascript onclick function to my database. I define my $output in first.php then echo it in second.php. Here is my first.php $name = 100; $answer = "some text"; $output .= '<div id="'.$k.'"> <form id='.$f.' > <input type="radio" name='.$name.' value="yes" checked>Accurate <input type="radio" name='.$name.' value="no">Not Accurate <input type="button" id='.$j.' value="Submit" onclick="sendData(\''.$answer.'\','.$name.',)"> </form> </div>' ; $name++; My jquery function in second.php function sendData(feel, rID) { var accu = $("input[@name=rID]:checked").val(); $.get("test.php", { feeling: feel , accuracy: accu} ); } When I click my button nothing is submitted. If i manually define var accu to "YES" or something it works. So the problem must be on how to check if my radio button its checked and get its value.
-
Hello, I am trying to pass PHP variables in a jquery function with the javascript onclick but its not working(i know it sounds confusing but I will explain). I define my $output in first.php then echo it in second.php. Here is my first.php $answer = "some text"; $output .= '<div id="'.$k.'"> <form id='.$f.' > <input type="radio" name="accuracy" value="yes" checked>Accurate <input type="radio" name="accuracy" value="no">Not Accurate <input type="button" id='.$j.' value="Submit" onclick="sendData('.$answer.')"> </form> </div>'; My jquery function in second.php function sendData(feel) { $.get("test.php", { feeling: 'feel'} ); } My test.php : $f= $_GET["feeling"]; $con = mysql_connect('localhost', 'username', 'pass'); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("mydatabase", $con); $sql="INSERT INTO testtable (testcolumn) VALUES ('$f')"; $result = mysql_query($sql); echo '<p2> Thank you. Your opinion is much appreciated!</p2>'; mysql_close($con); An entry is added in the database but with an empty value. Any idea where is the problem? Thanks
-
Hiii i want to do this similar thing in my website as the one in clixsense.com The image is shown below as you can see that the statistics are constantly changing with real time... I know how to querry from database to show the statistics but it does'nt show with real time... it changes after refreshing the page... can any one help me to do that... Thanks in advance..
-
Hi. I have just downloaded a WordPress theme which has a pre-installed horizontal accordion on the homepage. The .css is: .haccordion{ padding: 0; } .haccordion ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; /*leave as is*/ } .haccordion li{ margin: 0; padding: 0; display: block; /*leave as is*/ width: 100%; /*For users with JS disabled: Width of each content*/ height: 200px; /*For users with JS disabled: Height of each content*/ overflow: hidden; /*leave as is*/ float: left; /*leave as is*/ } .haccordion li .hpanel{ width: 100%; /*For users with JS disabled: Width of each content*/ height: 200px; /*For users with JS disabled: Height of each content*/ } <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'786px', h:'786px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) haccordion.setup({ accordionid: 'hc2', //main accordion div id paneldimensions: {peekw:'30px', fullw:'786px', h:'786px'}, selectedli: [-1, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! }) </script> ...which all seems pretty straightforward... The .js is: <script type="text/javascript"> haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'50px', fullw:'786px', h:'430px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //collapse current expanded li when mouseout into general space? }) </script> ...again, fairly straightforward... The problem is that, when I go to the homepage, the first panel of the accordion is open with the other accordion 'tabs' visible on the right - all good so far - but the second I roll over, the accordion collapses and won't re-open...the hyperlinks still work off the 'tabs', but each layer / panel of the accordion refuses to open, roleed over, clicked on, whatever... Any suggestions?
-
Seriously, HTML 5 Canvas really lacks functionality. I searched how to clear a text written on it, and all what I am getting is to clear the whole damn canvas. Moreover, clearing all itself is not working. Here are my codes: HTML <img src="jjj.jpg" width="252" height="144" id="image"> <canvas id="canvas" width="252" height="144"></canvas> <input type="button" onclick=" insertImg ();"> <input type="text" id="text"/> <input type="button" onclick="writeText();"> <input type="button" value="Clear" onclick="clearCanvas();"> Javascript //Draw image function insertImg () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var image = document.getElementById("image"); context.drawImage(image, 0, 0); } //Write text function writeText () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var style = 'italic'; var size = '50pt'; var family = '"Arial Black", Gadget, sans-serif' var text = document.getElementById("text").value; context.font = style + " " + size + " " + family; context.fillStyle = 'blue'; context.fillText(text, 50, 50); } //Clear canvas function clearCanvas () { context.clearRect(0, 0, 252, 144); } Everything is working correctly, except, the canvas is not clearing when I click on the clear button. I will be glad if we can clear the text also separately from clearing canvas as a whole.
-
Hi, I have an IFrame. Good. And I have a Canvas as well. Good again! The user can write on the IFrame as I set the design mode ON. I am using document.execcomand to do the stuff, just like a simple text editor. I do not have issues on this. Here are my questions: 1/ What I want is, how to make the text written in the IFrame, appears on the Canvas? I mean, when the user is typing in the IFrame, the text is appearing simultaneously on the Canvas. If the user changes the text color, font color, bold, italic or whatever, of course the text also changes on the Canvas simultaneously. How to do that? 2/ Can I make all the elements draggable and resizable in the Canvas? I mean the text or anything but NOT the canvas? Help!
-
Well, I am planning to make something complex. Ok, I still have not done it but I want to know how to proceed to do it. Suppose there is a Canvas, and I am dragging and dropping images in it which can resize. The issue is not on the drag/drop and resize stuffs. What I want is, once an image is in the Canvas, how to write on it by double click? I mean if I double click, the cursor turn to text and people can write. How to proceed to do this? The canvas will be saved in image format later. All I want to know now, is this writing stuff, the rest I do not care too much now! Thank
