Search the Community
Showing results for tags 'HTMl'.
-
Can you please Help Me to Fix this Issue? Please Help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML HTML 5 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" /> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" /> <title>Testing</title> <style type="text/css"> body { margin-top: 0px; margin-bottom: 0px; background-color: #CCFFCC; } #MainContainer01 { width: 620px; margin: 0 auto; } .Header { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; font-size: 25pt; background-color: #000080; line-height: 75px; height: 75px; } .HREFNoBorder { border-width: 0px; } .FL { width: 310px; height:381px; text-align: center; padding-bottom: 30px; background-color:fuchsia; float: right; } .gap { line-height: 35px; height:35px; /*clear: both;*/ } .TitleSegment { line-height: 30px; font-family: Arial; font-size: 12pt; background-color: #CCFFFF; text-align: right; width: 301px; } </style> </head> <body> <div id="MainContainer01"> <div class="Header"></div> <div class="gap"></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://post.healthline.com/wp-content/uploads/2020/09/blue-lotus-flower-732x549-thumbnail.jpg" width="301" height="381" class="HREFNoBorder" /></a></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://th.bing.com/th/id/OIP.caLpUQWyd1PZV5SRvDOZFQHaE8?w=270&h=180&c=7&o=5&pid=1.7" width="301" height="381" class="HREFNoBorder" /></a></div> </div> </body> </html>
-
If you wanna learn HTML and CSS fast and free you can use the tutorials what I am making! Here is the link of the channel! [Link removed]
-
Hi guys, I am having problems using dynamic data list, It doesn't work when I insert a form into Blogspot, how should I fix it? <html> <head> </head> <body contenteditable="false"> <script> function populate(Ts7, Ts8){ var Ts7 = document.getElementById(Ts7); var Ts8 = document.getElementById(Ts8); Ts8.innerHTML = ""; if(Ts7.value == "Phòng kế hoạch"){ var optionArray = ["|","|Phòng kế hoạch"]; } else if(Ts7.value == "Bản"){ var optionArray = ["|","|Bản1","|Bản2","|Bản3"]; } else if(Ts7.value == "Huyện"){ var optionArray = ["|","|Huyện1","|Huyện2"]; } else if(Ts7.value == "Tỉnh"){ var optionArray = ["|","|Tỉnh1","|Tỉnh2"]; } else if(Ts7.value == "Trung ương"){ var optionArray = ["|","|Trung ương1","|Trung ương2"]; } for(var option in optionArray){ var pair = optionArray[option].split("|"); var newOption = document.createElement("option"); newOption.value = pair[0]; newOption.innerHTML = pair[1]; Ts8.options.add(newOption); } } </script> <p>1. Cấp</p> <select name="entry.694698089" id="Ts7" required="" onchange="populate(this.id,'Ts8')"> <option value="">Chọn</option> <option value="Phòng kế hoạch">Phòng kế hoạch</option> <option value="Bản">Bản</option> <option value="Huyện">Huyện</option> <option value="Tỉnh">Tỉnh</option> <option value="Trung ương">Trung ương</option> </select> <p>2. Nội dung</p> <select id="Ts8" name="entry.1049020395" required=""></select> </body> </html> bandicam 2021-03-03 16-25-54-648.mp4
-
I found the HTML encoding code, It works the way is encoding plus set password, It works very well ... But what I need is only HTML encoding, not password setting. I edited the above code myself but it doesn't work and need your help? And here is the code: https://www.w3schools.com/code/tryit.asp?filename=GO520MFBKDUJ
-
I found a snippet of code to get data from a cell in a Google sheet into an HTML input ... It works fine, but not met ... My requirement is that it should work. after I press the button, do not automatically run when opening or loading the Web page as it is now ... Can you please fix it according to my mind, Thank you very much in advance. <html> <body> <input name="form1_1" id="f1_1" type="text" /> <button name="submit_form1" id="submit_form1" type="button" onclick="">Click here to get data</button> </body> <script> const onDataLoaded = (data) => { const e20Content = data.feed.entry.find((entry) => entry.title.$t == 'E20').content.$t document.getElementById('f1_1').value = e20Content } </script> <script src="https://spreadsheets.google.com/feeds/cells/1TbMrtJl01i-Q5YudlhdAB_E1LTYkkLswnql5LHyiIuk/1/public/basic?alt=json-in-script&callback=onDataLoaded"></script> </html> -
Hi! I'm new on all this javascript coding world, and currently I am working on a gaming review website. The question I have, is that i've implemented autocomplete on my search field (works great: How To Create Autocomplete on an Input Field (w3schools.com)) and I would like to add that when the user clicks an option the "enter key" is triggered. This is beacause I made my web in a way that you have to write things down, and if you click one of the elements and it writes itself does nothing for me, instead if you press enter when hovering above the item you can select it as if it was a "click" but actually detects also the enter effect as a key so it works fine! So to express myself a bit better: My goal is to click an item of the autocomplete list, and when I do it, the enter key will trigger and my search field will detect the keyboard input. Thanks in advanced!
-
Hi all, I am looking to create automated emails for my work. I'm quite a novice coder and the only code format Mailchimp allows in email campaigns is HTML. I want to create an automated email that goes out every week that asks our contributors to submit an artwork for the following week. I am wondering if there is a piece of date / time HTML that would allow me to say: "current date + 7 days" so I don't have to manually add the dates in for every email. Hopefully that makes sense! Thanks in advance for your help, Maddy
-
Hi everyone!😃 I have done the html, css and doing the JavaScript tutorial. I want to start consolidating my basic knowledge by developing websites. But where do I start? I want to build a portfolio. But I can't seem to move forward! To start the web building, should I follow the section headed 'Web Building?' Thanks, Jayne🤠
-
<div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; } .topnav a { float: left; display: block; text-align: center; padding: 14px 24px 12px 24px; } .topnav a:hover { padding: 12px 22px 10px 22px; } @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } .topnav-right a{ float: none; position: relative; } } .topnav .icon { display: none; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } } My float right menu items don't nest in the hamburger menu. I tried float:left on mobile for topnav-right with no luck. I have no idea how to fix it. Code has been personalized from w3schools tutorials
-
I have a fixed menu with a centered logo, left and right menu items. My float right menu items are showing beside the hamburger menu on responsive/mobile settings. The menu uses float: right for positioning the hamburger menu and the menu items. <div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; background-color: #f9f7f7; overflow: hidden; text-transform: uppercase; letter-spacing: 2px; border-bottom-style: solid; border-width: 2px; } .topnav a { float: left; display: block; color: #000000; text-align: center; padding: 14px 24px 12px 24px; text-decoration: none; font-size: 13px; font-weight: 900; font-style: normal; } .topnav a:hover { padding: 12px 22px 10px 22px; border-style: solid; border-width: 2px; border-radius: 50%; color: #101010; } .topnav .icon {display: none;} @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } } @media screen and (max-width: 600px) { .topnav-right { background-color: red; float: none; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } }
-
I have used this gallery from W3Schools https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp and i want to add function arrow keyboard keys to change pictures in the gallery. Can someone here help me out?
-
Hi All, I've seen that in PHP you can include a require or include function which saves you from having to add the entire code for headers and footers for each page. Does a similar things exist in HTML? If so, please direct me. Thanks in advance Russell
-
Hello, everyone. I'm trying to make web page by using HTMl file, but it seems i have some problems. A person allowed me to download, edit, and use his own HTML file, so i can create my own web page. I dont have programming abilities, but i still can understand some parts of the code. I started adding more pictures to the web page, by increasing the HTML code, but i got problems. To add a new photo, i used copy-paste of the previous code that contains another photo, so i when i used the code to add one more photo, i only changed the name of the photo that have to be shown. But now, when i add one more photo, the page receives one more container container. For example, see the following code: </div> <div class="BlackBox"> <div class="TLDR">HERE I ADD THE TEXT I WANT TO BE SHOWN. </div> <div class="Gallery-Content--mediaContainer"><a name="NAME_OF_THE_PHOTO.JPG"></a> <div class="Gallery-Content--media"> <div class="imageContainer"> <img class="image-thumb" src="./NAME_OF_THE_FOLDER_THAT_CONTAINS_IMAGES/NAME_OF_PHOTO.JPG"/>Full-size image is <a href="./NAME_OF_THE_FOLDER_THAT_CONTAING_IMAGES/NAME_OF_THE_PHOTO.JPG">here.</a> </div> When i want to add one more photo, i will not write new code/newkind of code, i will simply copy and paste the already existing code, and then i will simply change the name of the photo, and will replace the old name with new name, so new photo can be show on the web page. Here is how the original page look like: https://i.imgur.com/Ad3qiAS.png Here is how my page look like: https://i.imgur.com/RkguhC6.png As you can see, in the first photo, all pictures are separated. In the second photo, there are containers. Everytime when i copy and paste the code, new container is added. How to remove these containers?
-
As the title suggests, the site that I have just finished and delivered, therefore also online, works perfectly on all browsers except safari. I can't understand what the problem is. Do you have any ideas ?? On the home page, the parallax effect "vibrates" tremendously, almost causing nausea. here the link of the page, to understand what I mean, open them with google chrome (fluid and perfect site) and then check with safari. Homepage www.teamcobram.com if it were useful I could also post the code, but you can find it on the site without problems. many thanks in advance -
I found this JS snippet here on W3S when I was looking for a method to change prices (printed in HTML not as product attribute) in a WooCommerce store. document.getElementById("id01"); element.innerHTML = "New Heading"; I changed it to: document.getElementById("440050").innerHTML = "€61,00"; The way I assign the id to the HTML is: <strong id="440050">PRICE</strong> This worked - of course but every next script with another id I add doesn't work: === document.getElementById("440050").innerHTML = "€61,00"; document.getElementById("440039").innerHTML = "€42,00"; ==== The second script (with id 440039) doesn't change anything, so what you see on the frontend is PRICE So it seems to work only for one instance? What is the best way to do this?
-
Hello everyone, I would be very appreciative to understand how to use the W3C Schools Template so that I can have multiple stored images served depending on the device width. In other words rather than uploading just one image and letting the template resize it going from a widescreen to mobile size, I'd like some control with regards to the centering of each image. Also, I can then optimise the image sizes too to be radically smaller for mobile (do the W3C Schools Templates automatically optimise image size for me, for example a wide screen image may be hard to reduce to under 200 KB to retain quality versus some images on mobile coudl easily be fine at 30 KB). Thanks so much for your help! Kind regards, Mike
-
Hello.I started learning javascript and my professor give me this to solve. Its program that turn on and turn off bulbs on different ways. It have number of bulbs and number of variations . The problem is that i don't know how to use function deleteBulbs because when i type smaller number , those who left must get changed with blank.jpg but they won't. Please help me and sorry for my bad english. I uploaded images with problem. In first example, 3 are turned on . So in example 2,when i type 1 and 0, last bulb is turned off and other 2 must be blank but they are not in my case. <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <p> <b> Task: </b> There are <i> n </i> bulbs in the room, each of which is turned on by a separate switch. How many ways can a room be lit? </p> Number of bulbs: <input id = "numOfBulbs" type = "number"> </p> Number of variations<input id="numOfVariations" type="number"></p> <p> <button type="button" onclick="numOfVariations();">Light up </button> </p> <img id="image7" src="blank.jpg"> <img id="image6" src="blank.jpg"> <img id="image5" src="blank.jpg"> <img id="image4" src="blank.jpg"> <img id="image3" src="blank.jpg"> <img id="image2" src="blank.jpg"> <img id="image1" src="blank.jpg"> <img id="image0" src="blank.jpg"> <p id="solution"></p> <script> function numOfVariations() { var n, i, p=1,v,s; n=document.getElementById("numOfBulbs").value; if(n>8 || n<=0) { window.alert("Incorrect number of bulbs!"); var s=document.getElementById("image0").value; s.src="blank.jpg" ; s=document.getElementById("image2").value; s.src="blank.jpg"; s=document.getElementById("image3").value; s.src="blank.jpg"; s=document.getElementById("image4").value; s.src="blank.jpg"; s=document.getElementById("image5").value; s.src="blank.jpg"; s=document.getElementById("image6").value; s.src="blank.jpg"; s=document.getElementById("image7").value; s.src="blank.jpg"; document.getElementById("solution").innerHTML="Total variations: 0"; return; } v=document.getElementById("numOfVariations").value; for (i=1;i<=n;i++) p*=2; if((v<0) || (v>=p)){ window.alert("Incorrect number of variations!"); var s=document.getElementById("image0").value; s.src="blank.jpg" ; s=document.getElementById("image1").value; s.src="blank.jpg"; s=document.getElementById("image2").value; s.src="blank.jpg"; s=document.getElementById("image3").value; s.src="blank.jpg"; s=document.getElementById("image4").value; s.src="blank.jpg"; s=document.getElementById("image5").value; s.src="blank.jpg"; s=document.getElementById("image6").value; s.src="blank.jpg"; s=document.getElementById("image7").value; s.src="blank.jpg"; document.getElementById("solution").innerHTML="Total variations:"+ p; return; } document.getElementById("solution").innerHTML="Total variations:"+ p; p=1; for(i=0;i<n;i++){ if(v&p) turnOn(i); else turnOff(i); p*=2; } } function turnOff(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="off.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="off.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="off.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="off.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="off.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="off.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="off.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="off.jpg"; } } function turnOn(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="on.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="on.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="on.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="on.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="on.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="on.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="on.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="on.jpg"; } } function deleteBulbs(i) { var s; if(i==0){ s=document.getElementById("image0"); s.src="blank.jpg"; } if(i==1){ s=document.getElementById("image1"); s.src="blank.jpg"; } if(i==2){ s=document.getElementById("image2"); s.src="blank.jpg"; } if(i==3){ s=document.getElementById("image3"); s.src="blank.jpg"; } if(i==4){ s=document.getElementById("image4"); s.src="blank.jpg"; } if(i==5){ s=document.getElementById("image5"); s.src="blank.jpg"; } if(i==6){ s=document.getElementById("image6"); s.src="blank.jpg"; } if(i==7){ s=document.getElementById("image7"); s.src="blank.jpg"; } } </script> </body> </html> y are not. bulbs translated.rar
-
https://www.w3schools.com/howto/howto_js_collapsible.asp Total noob, have some ideas, but still a bit unsure on the best approach. Was going to implement something similar to what's here (also see supplementary page) http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm thank-you!
-
<html> <head> <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css"> <script> function close() { document.getElementById("popup").style.display = "none"; } </script> <style> .popup { display: inline; position: fixed; height: 100%; width: 100%; z-index: 9999; background-color: red; } .inner-part { width: 90%; margin-left: 5%; margin-top: 50%; text-align: center; height: 30%; background-color: white; color: black; box-shadow: 0px 0.2vw 6vw black; } .close { position:absolute; right:6%; margin-top: 1%; background-color: lightgrey; padding: 2%; } .close:hover { background-color: red; } </style> </head> <body> <div class="popup" id="popup"> <div class="inner-part" > <div class="close" onclick="close()" >X</div> <p>Welcome on my website!</p> <p>This website is self written and has many issues. I would love any kind of feedback.</p> <p>Please select your language</p> <img src="en.png"> <img src="de.png"> </div> </div> </body> </html> -
Hello, I am customizing a form using a Wordpress plugin. In order to get the settings I prefer, I need to add my own custom HTML. The form does not support CSS. I want something that looks like this: <h1 style="color:#0EAD69; font-family:Montserrat; text-align:center;"> Join Our Newsletter </h1> Unfortunately, it isn't working when I enter the code in the appropriate spot. Am I doing something wrong? Thanks.
-
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow So I basically copied this whole thing but the css and js are externally because my school project requires it to be. When the website loads, it is supposed to display the first image in the slideshow. However, when I loaded it up with everything linked, it is just blank with no image shown. It makes me click one of the dots/one of the arrows to see an image. Can anyone help me fix? gallery.htmlgallery.cssgallery.js
-
Hello, I have a website named as Tinder Gold Apk. I want to add custom html code in my wordpree website. How i can edit it or how it is possible attach a landing page html and javascript code in to wordpress page?
-
I have set my page frame 1t 1920 by 1080 and want my video to fill that space. When I input my responsive HTML video code into a 1920 by 1080 frame with: width:100%;height:100%, the control bar is too small. (Image1) When I activate the full screen button, the control bar appears at the proper size. (Image 2) Is there a way to have the embed code automatically open with the "full screen" button activated? <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/XXXXXX330?title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> This image has 100% responsive image at 1920 by 1080 container. Second image has same code and frame size, after fullscreen button is activated.
-
Hi, I'm trying to implement a Server Side Event connection between a Node.js backend and the frontend with EventSource. It works perfectly... as long as I turn off my antivirus. As soon as it's on, it's silently blocking incoming responses. It doesn't matter if I try it on localhost or my Heroku VM. It just doesn't work. However, the example provided by W3Schools works: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse What's the magic? I've looked at the HTTP headers and replicated them... but to no avail. I offered a bounty on Stack Overflow for a solution: https://stackoverflow.com/questions/63716882/server-side-events-blocked-by-antivirus
-
I have a CSS style that creates a TOP button fixed to the bottom right of a web page so, as you scroll, it stays put. How can I detect when the browser window is maximized so as to keep the Top button on the lower right edge of the content? My page design uses an 850px wide whole page table for content so the page width is fixed whether the browser window is at 850px or maximized. This is how a Word or PDF document behaves. The Top button appears at the lower right of the window at 850px but at the center of the page when the browser is maximized. The basic properties position the Top button to the left and slightly above the bottom of the window. position: fixed; bottom: 85px; left: 800px; with other properties specifying font properties and border effects. Yours, Michael F
