Jump to content

davej

Moderator
  • Content count

    3,953
  • Joined

  • Last visited

Everything posted by davej

  1. Although it works -- as a part of browser backward-compatibility -- I doubt that anyone recommends that approach anymore.
  2. davej

    Canvas image events?

    If you have a canvas and you want to have some number of visible images on it with mouseover events (or the equivalent) for each image what is the most efficient approach to accomplish this? Is it possible to use the images in some manner with mouseover events? Or must I simply use the mousemove event and keep checking the mouse coordinates? Thanks.
  3. davej

    Canvas image events?

    I am leaning toward positioning the images under the canvas and positioning matching divs over the canvas. That way the images are protected and the mouseover events can be assigned to the divs. <!DOCTYPE html> <html lang="en"> <head> <meta charset='utf-8'> <title>MouseOver Event on Canvas</title> <style> #container{ z-index: 0; position: relative; height:700px; width:700px; background-color: pink; } #myCanvas { z-index: 10; border: #333 10px solid; position: absolute; top: 50px; left: 40px; height: 600px; width: 600px; } #squ1 { /* opacity:0; */ border: 1px solid red; z-index: 20; position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; } #squ2 { /* opacity:0; */ border: 1px solid blue; z-index: 20; position: absolute; top: 500px; left: 500px; height: 100px; width: 100px; } #pic1{ z-index: 1; position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; } #pic2{ z-index: 1; position: absolute; top: 500px; left: 500px; height: 100px; width: 100px; } </style> </head> <body> <div id="container"> <div id="squ1"></div> <div id="squ2"></div> <canvas id="myCanvas"></canvas> <image id="pic1" alt="1"/> <image id="pic2" alt="2"/> </div> <script> document.getElementById('squ1').addEventListener('mouseover',squ1over,false); document.getElementById('squ2').addEventListener('mouseover',squ2over,false); var src1 = "https://uploads.guim.co.uk/2017/10/06/First-Dog-on-the-Moon,_L.png"; var src2 = "https://image.freepik.com/free-vector/cheese-cartoon_22350-100.jpg"; var img1 = document.getElementById('pic1'); var img2 = document.getElementById('pic2'); img1.src = src1; img2.src = src2; var canvas = document.getElementById('myCanvas'); function squ1over(){ alert('squ1 touched'); } function squ2over(){ alert('squ2 touched'); } </script> </body> </html>
  4. davej

    My Field Validation Code Not Working

    The Javascript thinks that name, email, and phone are the names of variables.
  5. davej

    Should I or shouldn’t I?

    A simple approach would be to go through the tutorials and then read each page of the references. HTML Tutorial HTML Tag Reference HTML Attribute Reference
  6. davej

    Testing a radio button ON or OFF?

    But... is he oversimplifying in his example? Does he ever use more than one name value?
  7. davej

    strpos

    Accidentally using truthiness...
  8. davej

    Testing a radio button ON or OFF?

    You need to clarify what you are trying to do. You are not allowed to have two identical id values on the same page because that is illegal HTML. Also these id values seem to be unnecessary -- they don't serve any purpose. Also if these radio buttons all have the same name then ONLY one of them can be checked.
  9. davej

    Class Variable Declaration

    Instance variables are usually declared as private because OOP considers "encapsulation" to be a good thing. This is the same reasoning behind minimizing the number of global variables. If some variable does not need to be public or global then it shouldn't be. In your example the constructor sets the values of the instance variables, so they themselves don't need to be public.
  10. davej

    Class Variable Declaration

    Seems odd to me that you declare all of the instance variables as public. It is more normal to make them private.
  11. Be aware that it is always to the benefit of the student to modify the code in the Tryit editor in order to verify your understanding of whatever is presented. In the code you mention it is difficult to guess whether the student would know that the following is equivalent... var myResult = myFunction(3,4); // call the function document.getElementById("demo").innerHTML = myResult; // display the result
  12. davej

    HTML 5.

    Screen capture images are inappropriate for posting code. Use the code block <> provided in the online editor and paste in your code. SynWrite is merely an editor and has no relevance to your question. I have no idea what a "restore down" button is supposed to do. If your web page is live online then simply supply the link.
  13. As a last resort you can, of course, paste your entire stylesheet into a style block in the head.
  14. davej

    White gap between images

    Did you get rid of the default margins and padding? Also be aware that whitespace can create gaps between inline blocks.
  15. davej

    javascript code does not show result

    for(var num=3 ; num<n ; num+=2)
  16. davej

    Remedy for reducing the website loading time?

    You have ten jpg images that are each over 100kb. One of them is 1.1mb. Use media queries to eliminate these images for small mobile devices. @media screen and (max-width : 480px) { .bigimg{ display:none; } } Or create smaller versions of these images for mobile devices.
  17. davej

    Convert manually a html file to csv

    Since the file contains a series of rather complex word definitions such as... <p><b><h1>shrugs </h1></b></p><div class="source-data"> <div class="def-list"> <section class="def-pbk ce-spot" data-collapse-expand='{"target": ".def-set", "type": "def"}'> <header class="luna-data-header"> <span class="dbox-pg">verb (used with object)</span>, <span class="dbox-bold">shrugged, </span><span class="dbox-bold" data-syllable="shrug·ging.">shrugging.</span> </header> <div class="def-set"> <span class="def-number">1.</span> <div class="def-content"> to raise and contract (the shoulders), expressing indifference, disdain, etc. </div> </div> </section> <section class="def-pbk ce-spot" data-collapse-expand='{"target": ".def-set", "type": "def"}'> <header class="luna-data-header"> <span class="dbox-pg">verb (used without object)</span>, <span class="dbox-bold">shrugged, </span><span class="dbox-bold" data-syllable="shrug·ging.">shrugging.</span> </header> <div class="def-set"> <span class="def-number">2.</span> <div class="def-content"> to raise and contract the shoulders. </div> </div> </section> <section class="def-pbk ce-spot" data-collapse-expand='{"target": ".def-set", "type": "def"}'> <header class="luna-data-header"> <span class="dbox-pg">noun</span> </header> <div class="def-set"> <span class="def-number">3.</span> <div class="def-content"> the movement of raising and contracting the shoulders. </div> </div> <div class="def-set"> <span class="def-number">4.</span> <div class="def-content"> a short sweater or jacket that ends above or at the waistline. </div> </div> </section> <section class="def-pbk ce-spot" data-collapse-expand='{"target": ".def-set", "type": "def"}'> <header class="luna-data-header"> <span class="dbox-pg">Verb phrases</span> </header> <div class="def-set"> <span class="def-number">5.</span> <div class="def-content"> <span class="dbox-bold">shrug off, </span> <ol class="def-sub-list"> <li> to disregard; minimize: <div class="def-block def-inline-example"><span class="dbox-example">to shrug off an insult.</span></div> </li> <li> to rid oneself of: <div class="def-block def-inline-example"><span class="dbox-example">to shrug off the effects of a drug.</span></div> </li> </ol> </div> </div> </section> </div> <div class="tail-wrapper"> ...are you saying you would like the above to be converted into... shrugs,verb (used with object),shrugged,shrugging.,1.,to raise and contract (the shoulders),expressing indifference, disdain, etc.,verb (used without object),shrugged,shrugging.,2.,to raise and contract the shoulders.,3.,the movement of raising and contracting the shoulders.,4.,a short sweater or jacket that ends above or at the waistline.,,Verb phrases,5.,shrug off, to disregard; minimize:,to shrug off an insult.,to rid oneself of:,to shrug off the effects of a drug. ...this introduces several problems. For one thing there are embedded commas in the text. Also each element is variable in length.
  18. davej

    primary and foregin key

    The idea of a foreign key is that the database would not allow you to enter a non-existent order_number in your cust_time table. It would only accept order_numbers that already exist in the customer table.
  19. davej

    Problem Connecting to MySQL

    Show us the include statement that you use, and are all the php files together in one folder?
  20. davej

    Problem Connecting to MySQL

    Your question doesn't make any sense. Can the browser display the page?
  21. var a = ["123", 123, "1a2b3c", 122.222, "A"]; for(var i=0 ; i<a.length ; i++){ if(isNaN(a[i])){ alert('a['+i+'] is not a number (nan)'); } }
  22. davej

    Structuring the PHP site

    Obviously you have appropriate fields in your user database and then load session variables when the user logs in.
  23. Because the string "A" cannot be converted to a number.
  24. davej

    How to return an int in java

    This code demonstrates the use of methods, similar to what you seemed to be attempting to do. Obviously sendKeys() requires a string rather than an integer. public class Newcoder0001 { public static void main(String[] args) { // Create a new instance of the Firefox driver // Notice that the remainder of the code relies on the interface, // not the implementation. WebDriver driver = new FirefoxDriver(); // And now use this to visit myPage driver.get("http://www.myPage.com"); // Alternatively the same thing can be done like this // driver.navigate().to("http://www.myPage.com"); enterPhoneExt(driver, 999); /* // Now submit the form. WebDriver will find the form for us from the element element.submit(); // Check the title of the page System.out.println("Page title is: " + driver.getTitle()); // Google's search is rendered dynamically with JavaScript. // Wait for the page to load, timeout after 10 seconds (new WebDriverWait(driver, 10)).until(new ExpectedCondition<Boolean>() { public Boolean apply(WebDriver d) { return d.getTitle().toLowerCase().startsWith("cheese!"); } }); // Should see: "cheese! - Google Search" System.out.println("Page title is: " + driver.getTitle()); //Close the browser driver.quit(); */ }// end of main static void enterPhoneExt(WebDriver driver, int max){ WebElement element = driver.findElement(By.name("PhoneExtField")); // select element element.clear(); int n = generateRandomNumber(max); element.sendKeys( String.valueOf(n) ); // insert int as a string }// end of method static int generateRandomNumber(int max){ Random rand = new Random(); int n = rand.nextInt(max-1) + 1; return n; }// end of method }// end of class
  25. davej

    How to return an int in java

    Let's start with example code and then modify it. The following is from the seleniumhq.org example public class Selenium2Example { public static void main(String[] args) { // Create a new instance of the Firefox driver // Notice that the remainder of the code relies on the interface, // not the implementation. WebDriver driver = new FirefoxDriver(); // And now use this to visit Google driver.get("http://www.google.com"); // Alternatively the same thing can be done like this // driver.navigate().to("http://www.google.com"); // Find the text input element by its name WebElement element = driver.findElement(By.name("q")); // Enter something to search for element.sendKeys("Cheese!"); // Now submit the form. WebDriver will find the form for us from the element element.submit(); // Check the title of the page System.out.println("Page title is: " + driver.getTitle()); // Google's search is rendered dynamically with JavaScript. // Wait for the page to load, timeout after 10 seconds (new WebDriverWait(driver, 10)).until(new ExpectedCondition<Boolean>() { public Boolean apply(WebDriver d) { return d.getTitle().toLowerCase().startsWith("cheese!"); } }); // Should see: "cheese! - Google Search" System.out.println("Page title is: " + driver.getTitle()); //Close the browser driver.quit(); } }
×