Jump to content

Search the Community

Showing results for tags 'display'.

The search index is currently processing. Current results may not be complete.
  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 18 results

  1. What happens if I use style.display=""; let's say on some rows <tr> of a table. What is the output if I'm not using defined Property values but instead leaving the space empty?
  2. Hi all, how are we? I'm have issues with a font on my website, i've only just start here >>> https://crtest1.co.uk/ I used font squirrel to convert my font, i've done this many times before, never seen the issue i'm having... @font-face{ font-family: 'angelfaceregular'; src: url('/wp-content/uploads/2020/fonts/angelface-3-webfont.eot'); src: url('/wp-content/uploads/2020/fonts/angelface-3-webfont.eot?#iefix') format('embedded-opentype'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.woff') format('woff'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.ttf') format('truetype'), url('/wp-content/uploads/2020/fonts/angelface-3-webfont.svg') format('svg'); } h1 { font-family: 'angelfaceregular'; } it displays fine in firefox and safari the problem is some of the letters are displayed as only outlines in chrome. can anyone help me please? thank you in advance, and stay safe!
  3. hi forom piople i have a big problem that i dont succsed to solved for long time Setup description : i used with the NodeMcu ESP8266 as a web server Problem : font are not display on android but can be shwon on iPhone and regular web brouser all my knowlge on HTML is 80% from this site please find below the code const char homePage[] PROGMEM = R"=====( <html> <head> <title> Engineering Project </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <style> body{ margin-top: 10px; font-family: Times New Roman; background-color:#333333; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } h1{ font-size: 3.5em; /* 40px/16=2.5em */ margin: 0px auto 10px; } .buttonSetup { display: block; width: 130px; background-color: 2c3e50 ; border:4px solid #DAA520; color: #DAA520 ; padding: 30px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 50px; cursor: pointer; border-radius: 10px; } .Cut { display: block; width: 130px; background-color: 2c3e50 ; border:4px solid #DAA520; color: #DAA520 ; padding: 30px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 1px; cursor: pointer; border-radius: 10px; } .header_cut { background-color: #333333; border-width: 4px; border-color: yellow; color: #f2f2f2; padding: 1px 1px; display: inline; } .button { display: block; width: 180px; background-color: 333333 ; border:4px solid #DAA520; color: #DAA520 ; padding: 13px 30px; text-decoration: none; font-size: 50px; margin: 0px auto 5px; cursor: pointer; border-radius: 4px; } .header_button { background-color: ; border-width: 7px; border-color: yellow; color: #f2f2f2; padding: 15px 10px; } .Cut { background-color: #333333; color: white; border-width: 7px; border-color: #cccccc; } .buttonSetup { background-color: #333333; color: white; border-width: 7px; border-color: #cccccc; } .button-off:active {background-color: #2c3e50;} .my_button:active {background-color: white;} </style> </head> <body> <center> <h1 class="header_button" > &nbsp; Engineering Project &nbsp; </h1> <a class="buttonSetup my_button" href="/calibration"> <i class="fas fa-users-cog"></i> <i class="fas fa-cog fa-spin"></i></a> <a class="Cut my_button" href="/cut_start" > <i class="fas fa-fan fa-spin"></i> </a> <a class="header_cut my_button" href="/cut_start" > Start to Cat </a> </center> </body> </html>
  4. I have spent many hours (over many days) trying to find out how to align a <script></script> within HTML5 specifically one that creates a canvas using . There is a page referring to centering images... https://www.w3schools.com/howto/howto_css_image_center.asp useless! There is a page referring to CSS Layout.... https://www.w3schools.com/css/css_align.asp useless! And heres another one on Canvas reference.... https://www.w3schools.com/tags/ref_canvas.asp useless! https://www.w3schools.com/tags/tag_canvas.asp useless! https://www.w3schools.com/tags/tag_script.asp useless! https://www.w3schools.com/html/html5_canvas.asp also useless! This is so basic a feature you would think that there would be examples of this in some of your examples. but no! Here is the code I have been trying to center.....as you can see I have tried quite a few different methods. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; margin: auto; text-align: center; object-position:center } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style> </head> <body onload="startGame()"> <div class="center"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "red", 10, 120); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 600; this.canvas.x = 100; this.canvas.y = 50; this.canvas.style.cursor = "none"; //hide the original cursor this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('mousemove', function (e) { myGameArea.x = e.pageX; myGameArea.y = e.pageY; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } } function updateGameArea() { myGameArea.clear(); if (myGameArea.x && myGameArea.y) { myGamePiece.x = myGameArea.x; myGamePiece.y = myGameArea.y; } myGamePiece.update(); } </script> </div> <p>Move the cursor inside the canvas to move the red square.</p> </body> </html> Please can you place more references to alignment as this issue has become somewhat annoying considering how easy this is in p5 javascript for instance. In p5 its - var canvas = createCanvas(1000, 350); canvas.position(x,y); So please make some kind of reference to centering js and <script> in some of the other pages using the term center, like <center> (yes I know its deprecated - but what are the alternatives?) as the search for this info is rather long. Thankyou in advance.
  5. BACKGROUND: I have an AJAX call that pulls in an HTML file. The file is a template that is populated with variables whose values are obtained from a MySQL database before the template is called. One of the values that I obtain from the database is important to a script associated with the AJAX call. This value should not appear, however, in the browser window when the AJAX call has been completed. Now, I could easily hide the value of this variable with the CSS display property, but would it still be available to the aforementioned script? QUESTION: Is a hidden element still available for processing by other elements and script? Roddy
  6. So I have multiple divs each containing a list and the headers in each div, above the list are all at different y places. The lists with the most info have higher y positions and therefore are higher up on the page. How do I make it so the headers are in line with eachother? (If you copy this code, and add a heading and stuff you can open it up in firefox and see what im talking about) <style> h2{ text-decoration: underline; margin-top: -30px; } .anke{ display: inline-block; margin-left: 60px; font-family: corsiva; font-size: 20px; } .father{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .mother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .brother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .sister{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .others{ display: inline-block; margin-top: 20px; margin-left: 120px; font-family: corsiva; font-size: 20px; } </style> <body> <div class = 'anke'> <h2>Anke</h2> <ul> <li>Main Character</li> <li>Doesn't fit in with family</li> <li>Isn't abused</li> <li>Isn't loved</li> <li>Loves to play volleyball</li> <li>Is smart</li> </ul> </div> <div class = 'father'> <h2>Father</h2> <ul> <li>Abusive</li> <li>Moody</li> <li>Mood Swings</li> <li>Loves his wife</li> <li>Often drunk</li> </ul> </div> <div class = 'mother'> <h2>Mother</h2> <ul> <li>Sweet Mother</li> <li>Loves her children</li> <li>Takes care of husband</li> <li>Secretly scared</li> </ul> </div> <div class = 'sister'> <h2>Sister</h2> <ul> <li>Name is Yaicha</li> <li>Older Sister</li> <li>Likes makeup</li> <li>Constantly abused</li> </ul> </div> <div class = 'brother'> <h2>Brother</h2> <ul> <li>Name is Darren</li> <li>Older Brother</li> <li>Constantly abused</li> </ul> </div> <div class = 'others'> <h2>Other Characters</h2> <ol> <li>Angelina <ul> <li>Annoying 'friend' of Anke</li> <li>Very innocent</li> <li>Doesn't have a dad</li> <li>Likes Anke's dad (as a father)</li> </ul> </li> </ol> </div> </body>
  7. Hi everyone, Can anyone tell me why my div is not auto expanding to fit its contents, even though I set "width: auto;" ? Also, why does my "display: inline;" not work? You can see what I mean here: http://www.jasonwangart2.blogspot.ca/ Basically, I am trying to make it so that all the elements inside the div-with-thick-red-dashed-border will appear in one horizontal row. Question 1: I set the div-with-thick-red-dashed-border to "width: auto;", but the inner divs are wrapping for some reason, and the div-with-thick-red-dashed-border is not expanding horizontally to contain more divs. Question 2: Also, I set the div-with-thick-orange-dashed-border, the div-with-thick-green-dashed-border, and the div-with-thick-blue-dashed-border to "display: inline;", but they are wrapping and breaking up. Does anyone know the answers to the 2 above questions? My goal is to make all the elements inside the div-with-thick-red-dashed-border line up in one horizontal arrangement. The code is below. Thank you very much, Jason <!doctype html> <style>/* HEADER OUTER BOX */ .jw-1-header-box { border: 1px dashed red; width:100%; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: rgba(0,0,0,1); }/* GRAPHICS */ .jw-2-graphics-bar { border: 1px dashed purple; width: 100%; height: 0px; overflow: visible; } .jw-3-circle-large { position: relative; left: 10px; top: -200px; width: 270px; height: 270px; background-color: rgba(180,200,255,1); border-radius: 135px; } /* NAVIGATION */ .jw-2-nav-bar { border: 1px dashed cyan; width: 100%; overflow: hidden; } .jw-3-nav-bar-left-section { border: 1px dashed maroon; display: inline; float: left; } .jw-3-nav-bar-right-section { border: 5px dashed red; width: auto; display: inline; float: right; } /* HOME BUTTON */ .jw-3-button-home a:link, .jw-3-button-home a:visited { border: 1px dashed purple; position: relative; z-index: 1; font-size: 41px; color: rgba(80,100,155,1); } .jw-3-button-home a:hover, .jw-3-button-home a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } /* PAGES */ .jw-3-button-pages a:link, .jw-3-button-pages a:visited { border: 5px dotted orange; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(80,100,155,1); } .jw-3-button-pages a:hover, .jw-3-button-pages a:active { color: rgba(0,0,0,1); text-decoration: none; /* to remove underline on hover */ } .jw-3-social-text-box { border: 5px dotted green; margin: 0px 10px 0px 10px; display: inline; font-size: 18px; color: rgba(0,0,0,0.7); } .jw-3-social-icon-box { border: 5px dotted blue; margin: 0px 10px 0px 10px; display: inline; font-size: 16px; /* need this to align block-1 */ } .jw-opacity-link a:link, .jw-opacity-link a:visited { border: 0px solid black; width: 30px; opacity: 0.45; } .jw-opacity-link a:hover, .jw-opacity-link a:active { border: 0px solid black; text-decoration: none; /* to remove the little line */ opacity: 1.0; } img /* need this to align icon image */ { vertical-align:top; /* top or bottom */ }/* DIVIDER */ .jw-2-divider-1 { border: 1px dashed violet; width: 100%; padding: 50px 0px 0px 0px; text-align: center; } .jw-3-circle-small { display: inline-block; width: 10px; height: 10px; background-color: rgba(171,225,250,1); border-radius: 5px; margin: 0px 50px 0px 50px; } /* UPDATE */ .jw-2-update-bar { border: 1px dashed pink; width:100%; text-align: center; } .jw-3-update-text-box { border: 1px dashed turquoise; font-size: 16px; color: rgba(0,0,0,1); }</style> <!-- HTML --><!-- MAIN BOX --> <div class="jw-1-header-box"><!-- GRPHICS --> <div class="jw-2-graphics-bar"> <div class="jw-3-circle-large"></div> </div><!-- NAVIGATION --> <div class="jw-2-nav-bar"> <div class="jw-3-nav-bar-left-section"> <div class="jw-3-button-home"> <a href="http://www.jasonwangart.com">Jason Wang Art</a> </div> </div> <div class="jw-3-nav-bar-right-section"> <div class="jw-3-button-pages"> <a href="http://www.jasonwangart.com/search/label/illustration">illustrations</a> <a href="http://www.jasonwangart.com/search/label/tutorial">tutorials</a> <a href="http://www.jasonwangart.com/search/label/reference">references</a> <a href="http://www.jasonwangart.com/p/about-web.html">about & contact</a> </div> <div class="jw-3-social-text-box"> Follow me on </div> <div class="jw-3-social-icon-box"> <div class="jw-opacity-link"> <a href="http://www.facebook.com/jasonwangart"> <img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png" width="24px" height="24px" alt="facebook"/> </a> </div> </div> </div> </div> <!-- DIVIDER --> <div class="jw-2-divider-1"> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> <div class="jw-3-circle-small"></div> </div><!-- UPDATE --> <div class="jw-2-update-bar"> <div class="jw-3-update-text-box"> Berry Season 9 coming soon! </div> </div> </div> </!doctype>
  8. As you can see by the screenshot I have an unwanted horizontal scroll bar. The styles are below: #container { width: 100%; background: #fff; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { background: #fff; padding: 20px; height: 1%; } .header_right { background-color: #fff; float: right; height: 2%; display: inline; margin-bottom: 0px; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #topspace { clear: both; background:#fff; text-align: right; padding: 10px; height: .25%; } #bottomspace { clear: both; background:#fff; text-align: left; padding: 10px; height: 0.15%; } /*Flyout CSS menu */ #flyout_menu { font-weight: 600; width: 200px; float: left; } #flyout_menu ul, li { list-style: none; margin: 0; padding: 0; } #flyout_menu ul li.hover, #flyout_menu ul li:hover { position: relative; z-index: 599; } #flyout_menu ul ul{ visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } #flyout_menu ul li:hover > ul { visibility: visible; } #flyout_menu ul ul { top: 0; left: 100%; } #flyout_menu span, #flyout_menu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } #flyout_menu li { background-color: #333333; } #flyout_menu li:hover, #flyout_menu li.active { background-color: #666666; } #flyout_menu a { color: #FFF; line-height: 160%; padding: 16px 8px 16px 28px; width: 164px; } #flyout_menu ul ul li { background: #006C6C; border-bottom: 1px solid #007171; } #flyout_menu ul ul li:hover { background-color: #999999; } /* end of flyout menu */ #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #section-navigation { float: left; width: 16%; padding: 20px 0; margin: 0 2%; display: inline; } #section-navigation ul { margin: 0; padding: 0; } #section-navigation ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } #content { float: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #000066; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #333; text-align: right; padding: 7px; height: 1%; color: #FFFFFF; } .video { background-color: #0066CC; text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; font-style: normal; line-height: 1.25em; font-weight: normal; } Thank you in advance
  9. So I'm a newb coder, just learned CSS in order to build a site for the music venue I work at. I got everything how I want it, I just can't get the entire page to center as the window enlarges, on bigger displays. I've got everything in a div id="mainbox", thinking that would then be able to be centered. But my fixed header always stays to the left side of the screen. I gave up and just left everything left justified, but it's been bugging me and I think would be an improvement to the site. http://thedelancey.com I'm open to suggestions and looking for advice. This site provided a lot of help when googling CSS questions, so I thought I'd join and ask one myself. Cheers, Andre
  10. The documentation states that the default for the css property display is inline. When i remove 'p {display:inline}' in the tryit editor here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_display_inline the display changes. So, inline is not the default value for display.
  11. hi friend i am used the java script to display the currency of Iraqi dinars from this xml file http://www.xe.com/datafeed/samples/sample-xml-usd.xml and i used this code <script>if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","http://www.xe.com/datafeed/samples/sample-xml-usd.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; currency=xmlDoc.getElementsByTagName("crate")[65].childNodes[0].nodeValue;document.write(currency);</script> but that is not work and i don't know why? please tell me what is my mistakes ... help me
  12. torsuntsu

    display:flex;

    Hello,i have a problem with the css rule display: flex. Well to be honest, the problem is with the Safari browser. Every other browser displays the page as i intend it to display, but with Safari there´s a problem. I have a container with the class of promo that holds tree colomns with the class of coluna. The CSS is as fallows: .conteudo .promo { max-width: 100%; display:flex; display:-webkit-flex; flex-flow:row wrap; -webkit-flex-flow:row wrap; justify-content:center; } .conteudo .promo .coluna{ -moz-box-sizing:border-box; -o-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; max-width: 32%; padding: 5px; margin: 5px; display:flex; display:-webkit-flex; flex-flow:column; -webkit-flex-flow:column; } Is there anything i´m doing wrong because only in Safari the page isn´t displayed as it should.I´d really need some help. Please!!!!The page is on: www.sistemagestorconteudos.net/Alfaccop/Sitio8 Torsuntsu
  13. etsted

    displaying images

    this is my image code. Is there a way for me to make sure that all of it are displayed on the browser? <html> <body> <form action="index.php" method="POST" enctype="multipart/form-data"> <input type="file" name="file" /><br /> <input type="submit" name="submit" /> </form> <?php include "connect.php"; if(isset($_POST["submit"])) { $loc = "bilder/"; if(($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg")) { $file = explode(".", $_FILES['file']['name']); mysql_query("INSERT INTO bilder VALUES('','".$file[0]."', '".$file[1]."')") or die(mysql_error()); $id = mysql_insert_id(); $newname = $id.$file[1]; $path = "$loc$newname"; move_uploaded_file($_FILES['file']['tmp_name'], $path); echo "du har lastet opp et bilde. klikk her <a href='$path'>klikk</a>"; } else { echo "invalid file"; } } ?> </body> </html>
  14. media="all".wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary { <a href="#" id="insert-media-button" class="button insert-media add_media" data-editor="pv_seller_info" title="Add Media"><span class="wp-media-buttons-icon"></span> Add Media</a> Hello, I need some css help beyond my knowledge. I'm using wordpress, woocommerce and matt's product vendor. I can add custom css however I can't get the correct display none. There is a add media button I want to hide for my vendors without hiding all media buttons. Using chrome inspect element, I can find is the above codes. Any idea what the display none codes would be? Thank you in advanceKimberly
  15. Hello! I have posted about this topic on Stack Overflow, but the responses I get seem to be a tad above my head, and I think they get impatient with my rudimentary knowledge. I'd like to post my question here, as a student and see if I can get an answer: What I want is to toggel two different passages one in French and one in English from hidden to visible. Here's the blog entry I'm talking about; http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee I would like to separately hide or show either the French or the English passage. Here's what the suggesion was at Stack Overflow: <!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><p style="display:none">If you click on the "Hide" button, I will disappear.</p><button id="hide">Hide</button><button id="show">Show</button></body></html> But this either hides or shows BOTH passages. How can I toggle them on or off INDEPENDENTLY? Any help would be appreciated. Barry
  16. fikiwan

    display datetime

    hello .... anyone here ...I try display datetime look the pic: why is the date that appears not the same as my computer thank regar
  17. Hello,I'm experiencing a few problems with my CSS.i currently have;#search { width: 300px;height: auto;color: #FFF;margin-left: 30px;display: inline-block;}#bar {margin-left: -15px;margin-right: -15px;margin-top: -12px;width: 110%;height: 50px;background-color: #000;position: fixed;border-radius: 3px;padding-left: 15px;padding-right: 15px;padding-top: 12px;}#title {width: 200px;height: auto;margin-top: -10px;margin-left: 20px;background-color:#000;opacity: 0.5;border-radius: 2px;color: #FFF;} and HTML wise;<div id="bar"><div id="title"><h1 color="#FFF">PitchIT</h1></div><div id="search">Search Here</div></div> However,I get the 'PitchIT' text on the line,and the 'Search here' is on the line below, despite my display: inline; Any help?
  18. Hi all, I'm new to JavaScript and I'm really stuck on something for a project that is probably easy to resolve but I can't seem to figure out after many trial and errors! I'm trying to get ALL of the onfocus events to work for each input field. For example, I want to create a div for the instructional message to appear whenever you click on the text field. It'll be much appreciated if anyone can help! I'm using this code but it only works for the first text field I click on and not the rest of the other text fields: function init(){ document.querySelector("#fEmail").onfocus = Einstructions;document.querySelector("#fName").onfocus = Ninstructions;document.querySelector("#fAddress1").onfocus = Ainstructions;} //function for instructions on the email text fieldfunction Einstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){ //ask the parent node of each message div to destory the message divmsgs[i].parentNode.removeChlid(msgs[i]);} var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your e-mail address (example: john@blah.com)."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); } //function for instructions on the name text fieldfunction Ninstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){ msgs[i].parentNode.removeChlid(msgs[i]);}var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your full name."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); }//function for instructions on the address text field function Ainstructions(){ //select any message divs that might be where we don't want them, and destroy themmsgs = document.querySelectorAll(".DivMsg");for(var i=0;i<msgs.length;i++){//ask the parent node of each message div to destory the message divmsgs[i].parentNode.removeChlid(msgs[i]);} var div = document.createElement("div");div.className = "DivMsg";div.innerHTML = "Please enter your full primary address."; //append the div to the page, inside of the parent of the current form elementthis.parentNode.appendChild(div); }
×
×
  • Create New...