Jump to content

All Activity

This stream auto-updates     

  1. Past hour
  2. Hi I have tried to write some js code to validate the fields on my form and Im doing something wrong and can't figure out what it is. Here is my form code: <form name="Form1" action=""> <table id="form_corners"> <tr> <td>Name:</td> <td><input type="text" id="name" name="name" size="50" maxlength="60" onblur="ValidateField(name)" /></td> </tr> <tr> <td>Email:</td> <td><input type="text" id="email" name="email" size="50" maxlength="60" onblur="ValidateField(email)" /></td> </tr> <tr> <td width="120">Phone #:</td> <td><input type="text" id="phone" name="phone" size="50" maxlength="60" onblur="ValidateField(phone)" /></td> </tr> <tr> <td valign="top">Note:</td> <td><textarea id="note" name="note" rows="3" cols="39"></textarea></td> </tr></table> <br/> <div align="center"> <input id="submit-btn-contact" type="submit" value="Send Now"> </div> </form> <form name="Form1" action=""> <table id="form_corners"> <tr> <td>Name:</td> <td><input type="text" id="name" name="name" size="50" maxlength="60" onblur="ValidateField(name)" /></td> </tr> <tr> <td>Email:</td> <td><input type="text" id="email" name="email" size="50" maxlength="60" onblur="ValidateField(email)" /></td> </tr> <tr> <td width="120">Phone #:</td> <td><input type="text" id="phone" name="phone" size="50" maxlength="60" onblur="ValidateField(phone)" /></td> </tr> <tr> <td valign="top">Note:</td> <td><textarea id="note" name="note" rows="3" cols="39"></textarea></td> </tr></table> <br/> <div align="center"> <input id="submit-btn-contact" type="submit" value="Send Now"> </div> </form> validate.js
  3. Today
  4. Dropdown Menu Responsive

    Hi , thank you for replying . if i remove "inlineblock" from the div button CSS, it then doesn't display inline in full browser view. i have fixed the issue with it displaying when expanding the menu in mobile view , however its still appearing the main navbar in mobile view . Any idea's?
  5. Dropdown Menu Responsive

    You need to remove inline-block from div button container and adjust button so its width fills entire width of parent div, with dropdown icon on right, set position: absolute to position: static, remove borders/radius for smaller devices in the media query.
  6. Dropdown Menu Responsive

    Good Morning , Ive added a menu bar into my test site and it displays fine on desktop , but experiencing issues on phones and tablets . The menu bar does responds and fits to the relevant size of the screen, however the drop down button / link stays at the top in the main part of the nav bar instead of dropping into the relevant order of menu links . Please see the issue here http://www.jrstech.co.uk/OrginalHCForum/ Please could anyone provide some help, i'm sure I've missed something simple ! Thank you for your help in advance . here is my code for the menu bar : <div class="topnav" id="myTopnav"> <a class="nav-link" href="https:\\www.whufc.com">Home</a> <a class="nav-link" href="#">Blogs</a> <a class="nav-link" href="#">Videos</a> <a class="nav-link" href="#">Thames Iron Works</a> <div class="nav-dropdown"> <button class="nav-dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a class="nav-link" href="#">Contact Us</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> here's my CSS : .topnav { overflow: hidden; background: #782b3a; box-shadow: inset 1px 0 7px 1px rgba(255,255,255,.5); margin-top: 10px; margin-bottom: 10px; padding: 12px ; text-align: center; font: normal normal medium 'Trebuchet MS',Verdana,Arial; border-bottom: 2px solid #1bb1e7; } .active { border-bottom: 4px solid #fff; color: white; } .topnav .icon { display: none; color: #fff; } .nav-dropdown { background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 4px 0; margin: 0 10px ; display: inline-block; } .nav-dropdown .nav-dropbtn { font-size: 20px; border: none; outline: none; color: white; background-color: #782b3a; font-family: inherit; margin: 0px; transition: 0.95s ease; background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 2px 0; margin: 0 0px ; } .dropdown-content { background-color: #782b3a; border-radius: 13px; display: none; position: absolute; background-color: #782b3a; min-width: 50px; z-index: 1; padding: 0px; } .dropdown-content a { float: none; color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; margin-top: 0 10px ; transition: 0.95s ease; border-bottom: 4px solid #782b3a; padding: 2px 0px; } .nav-link { background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-top: 0px solid #782b3a; border-bottom: 0px solid #782b3a; padding: 2px 0; margin: 0 10px ; display: inline-block; } .nav-link:hover { border-top: 2px solid #782b3a; border-bottom: 3px solid #1bb1e7; padding: 0px 0; color: #ffffff; text-decoration: none; transition: 0.45s ease; } .2topnav a:hover, .dropdown:hover .dropbtn { height: 0px; border-bottom: 44px solid #fff; padding: 3px 50px; } .dropdown-content a:hover { background-color: #fff; color: black; background: #782b3a; color: #ffffff; font-size: 20px; text-decoration: none; border-bottom: 4px solid #1bb1e7; padding: 2px 0; } .nav-dropdown:hover .dropdown-content { display: block; border-bottom: 2px solid #1bb1e7; Padding: 10px 20px; } Here's my responsive code @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: left;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } }
  7. anyone help me with chartjs adn mysql, please

    thanks for replying, i'm new in this programming world. in browser page there is no error messages but chart not showing. and in developer tools, it shows error uncaught TypeError at chart.bundle.js and at line var chart = new Chart(ctx, {
  8. multiple width/height values for modal images

    Thanks. I changed the id's to classes and ran my code through the Validator, and now I'm just getting errors for not having section headings. I copied the line of code you supplied beginning with "var" into the script section of my code. I pasted it into 2 spots: both before and after the "for" statement. In the former case, it stopped the thumbnails from opening, in the latter it had no effect. I guess that there is additional code I need to supply but I don't know what it is. I have basically no experience with js. I don't know if it's customary here as in stackoverflow to write the code for someone as opposed to explaining what needs to be done but if it's possible to modify what I supplied above, I would appreciate it. I did try to find out more about the code you supplied by Googling it and got some hits about the Image natural Width Property but didn't understand it. Thank you for any direction you can provide.
  9. Node.js file server problems

    Hey there, I have followed the tutorial for the w3 raspberry pi led pwm Gpio controller using node.js (https://www.w3schools.com/nodejs/nodejs_raspberrypi_rgb_led_websocket.asp) unfortunately though it uses internal scripts and stylesheets. I have tried using express.static to set up file hosting but I couldn’t get it to work. I am needing to host additional files for the web server to read. I am fairly new at node.js so it might have been the way I was trying to implement it that caused the issue. Thanks in advance
  10. Yesterday
  11. Training/Registration html code

    Does anyone have a training registration html code similar to this one, https://awesome-table.com/-L7egLSfkCF-Lvngunw1/view? I really like this table from Awesome Tables. However, this table is slow to load and isn't responsive in that it doesn't go vertical when viewed from a mobile device. Thanks.
  12. Using iframe to display a php file

    You create pages/posts in wordpress editor by selecting post/page template, the title is usually used to create the url to this page/post, but you have the option to edit it. You could create your own template without header/footer if you wish, to only show the main content area. The url from the editor for that specific page/post is what you should be using.
  13. Font Style and Size Change

    Thank you so much for your response. This issue is now fixed.
  14. Using iframe to display a php file

    Your frame src is a local file path. It needs to be the HTTP server path.
  15. Using iframe to display a php file

    Your frame src is a local file path. It needs to be the HTTP server path.
  16. anyone help me with chartjs adn mysql, please

    The first thing to do is check for Javascript error messages, and look at the generated code that you created to see what all the browser sees.
  17. Font Style and Size Change

    No one really uses the font tag anymore, especially not in html5 where its not supported at all. Use CSS instead with font-family: ; font-size: ; instead. You can set default size to 16px; then adjust it using percentages or em units, 1em will equal 16px, 0.5em = 8px, you have greater choice for changing the font-size gradually, more than just using font tag.
  18. delete_directory

    Can you test it in a new version? It's the best way to find out.
  19. Adding a 2d constraint

    This produces the lowest price subset of the query in the OP. Do you see any issues? SELECT *, MIN(price) AS minprice FROM ( SELECT id , nconnectz.item_id , nconnectz.vendor_id , nconnectz.datetime2 , nconnectz.itemandsize , nconnectz.price FROM ( SELECT item_id , vendor_id , MAX(datetime2) AS latest FROM nconnectz WHERE item_id IN (' . $in . ') AND vendor_id IN (' . $in2 . ') GROUP BY item_id , vendor_id ) AS subset INNER JOIN nconnectz ON nconnectz.item_id = subset.item_id AND nconnectz.vendor_id = subset.vendor_id AND nconnectz.datetime2 = subset.latest ) AS subset2 GROUP BY item_id , vendor_id
  20. Font Style and Size Change

    I built a site using the New Google Sites. It appears that the standard text is Roboto. The font size appears to be between 4 and 5. I have been using the following code to adjust the default font style and size <font face="Roboto" font size="4"> in embedded code snippets for html. However using 4 makes the text smaller and using 5 makes the text bigger than the default text in the New Google Sites. What code do I need to make the text size the same? Thanks.
  21. Adding a 2d constraint

    My nconnectz table also has a price column. I've figured out how to get the latest datetime: SELECT nconnectz.item_id , nconnectz.vendor_id , nconnectz.datetime2 FROM ( SELECT item_id , vendor_id , MAX(datetime2) AS latest FROM nconnectz WHERE item_id IN (' . $in . ') AND vendor_id IN (' . $in2 . ') GROUP BY item_id , vendor_id ) AS subset INNER JOIN nconnectz ON nconnectz.item_id = subset.item_id AND nconnectz.vendor_id = subset.vendor_id AND nconnectz.datetime2 = subset.latest What should my thinking be to select the latest datetime with the lowest price?
  22. Using iframe to display a php file

    You could try <div> <?php include_once "/file.php"; ?> </div>
  23. Using iframe to display a php file

    Hi I have created a php file and would like to use the <iframe> tag to display the contents on a web page. I tried that as follows: <iframe src="/home/apldvhwt75w1/public_html/wp-content/plugins/my-schools/schools-users-view.php" width="800" height="500" frameborder="0"></iframe> and all I got was a blank page.
  24. multiple width/height values for modal images

    Click the '<>' icon or place code in [ code ] code here [ /code ] (without the spaces within square braces), if you don't do this, any code that represents hand formatting such as '[ i ]' (without spaces) used in for loop, is treated as wanting italic as you can see from your posting. Your code is already wrong before we can start, you can't have multiple identical id attribute values on same page. Validate your code at https://validator.w3.org/. You are already looping through images, so at the same time compare width and height with var prop_diff = img.naturalWidth / img.naturalHeight; if value returned is greater than 1 then its landscape. else if less than 1 then its portrait. else equal even sided. Up to to you if you want to be more specific, these values can then be passed to modal-content as a class name, on the click of a specific image, you then reflect the size you want using css.
  25. i want to build a bar chart with chartJS and database mysql with two different query, but bar chart not showing. can anyone help me to correct the code? this my query and javascript: <?php $a = mysqli_query("select count(a) as total1 from tbl"); $b = mysqli_query("select count(b) as total2 from tbl"); ?> <body> <div> <canvas id="chart"></canvas> </div> <script> var ctx = document.getElementById("chart"); var chartdata = { labels: 'CHART', datasets: [{ label: "A", data: [<?php while ($data1 = mysqli_fetch_array($a)) {echo '"''.$data1['total1'].'",';}?>], backgroundColor: "#000000" },{ data: [<?php while ($data2 = mysqli_fetch_array($b)) {echo '"''.$data2['total2'].'",';}?>], backgroundColor: "#ffffff" }] }; var chart = new Chart(ctx, { type: 'bar', data: chartdata }); </script> </body>
  26. 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
  27. multiple width/height values for modal images

    Thanks, but I am not an experienced user of javascript, and would need guidance on how to do this. I read the "posting tips" on how to post your code, and there are nothing but blank boxes under each tip. What's that all about? I clicked the contact button at the bottom of the page to ask but did not hear back. So I have gone ahead and posted my code here. If you are able to show me what exactly I need to do with regard to your instructions to "check height against width using JavaScript" and "use JavaScript to adjust modal to class of image" I would be very grateful. Thank you. <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton's website</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, paragraph { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*THIS IS THE END OF THE MYER RESET*/ .myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; height: 70%; } /* Caption of Modal Image */ #caption { margin: auto; display: block; font-family: "europa",sans-serif; font-size: 120%; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } html { background-color: white; } body { width: auto; margin: 0 auto 0; } .gallery { width: auto; height: auto; display: flex; padding: 50px; justify-content: space-around; align-items: center; flex-wrap: wrap; } .photo { padding: 20px; } .photo img { padding: 30px; } .photobox { vertical-align: middle; } </style> </head> <body> <section class="gallery"> <div><img id="myImg" class="photobox" src="http://bartonlewisfilm.com/img_157-229_tb.jpg" alt="157-229, 96th St., IND Eighth Ave. Line" width="187" height="142" /></div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <div><img id="myImg" class="photobox" src="http://bartonlewisfilm.com/img_214-099_368.jpg" alt="214-069, 182nd – 183rd Sts., IND Concourse Line" width="519" height="142" /></div> <div><img id="myImg" class="photobox" src="http://bartonlewisfilm.com/img_214-015.jpg" alt="214-015, 182nd-183rd Sts., IND Concourse Line" width="199" height="142" /></div> </section> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var modal = document.getElementById('myModal'); var imageArray = document.getElementsByClassName("photobox"); for(var i=0;i<imageArray.length;i++){ var img = imageArray; var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }; </script> </body> </html>
  28. who is top web developer and designee here??

    That is interesting, so this place is pretty much a forum online with moderators, and some administrators.
  1. Load more activity
×