Jump to content

Search the Community

Showing results for tags 'HTML'.



More search options

  • 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 778 results

  1. AJ2021

    Nav bar spruce up

    Hi, I'm new to web design and need help w/ my nav bar. I need help spacing my page links on the nav bar as well as spacing my nav bar within the page. I have my nav bar spaced right now but I don"t know if it will work well w/my page and the page links aren't spaced correctly and I'm not sure how to space them. I also got my page links to be white but the rest of the words in the nav bar are still black & I want it white as well. Any help would be greatly appreciated. HTML: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jackson Lawton_homePage</title> <link href="_CSS/main.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header> <h1>Jackson Lawton and Family</h1> <nav> <ul> <li><a href="index.html">Home</a> </li> <li><a href="contact.html">Contact</a> </li> <li><a href="media.html">Media</a> </li> <li><a href="gallery.html">Gallery</a> </li> <li><a href="resume.html">Resume</a> </li> </ul> </nav> </header> <section> <h1 id="pagename">Home</h1> <h2>Welcome to the Lawtons</h2> </section> </div><!-- end of wrapper --> </body> </html> CSS: @charset "utf-8"; /* CSS Document */ #wrapper { width: 1920px; min-height: 1080px; position: relative; margin: 0 auto; background-color: #5DD7FE } header { width: 1778px; min-height: 62px; background-color: #808080; position: absolute; top: 48px; left: 142px; } header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px; } header nav ul li { list-style-type: none; display: inline-block; } header nav ul li a { text-decoration: none; color: #ffffff; font-size: 18px; } header nav ul li a:hover { color: red; } header nav { position: absolute; top: 6px; left: 500px; } /* Style inputs with type="text", select elements and textareas */ input[type=text], select, textarea { width: 100%; /* Full width */ padding: 12px; /* Some padding */ border: 1px solid #ccc; /* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */ resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ } /* Style the submit button with a specific background color etc */ input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* When moving the mouse over the submit button, add a darker green color */ input[type=submit]:hover { background-color: #45a049; } /* Add a background color and some padding around the form */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } Also line 24 which is position:absolute under header h1 in Dreamweaver is coming up as a problem and I can't seem to find out why. header h1 { font-size: 40px; color: #ffffff position: absolute; width: 425px;
  2. Hello everyone, I was searching for a technique to make an element on my html page staying at the same place even if we scroll the page. I found 2 methods : This one and this one. What is the difference between these two techniques ? (apart from how it's coded) Also, I have a problem with these methods : when we scroll down, it stay at the same place - that's nice - but the rest of the page goes in front of my sticky element and not behind, like it does on the two methods I mentioned before. Have anyone an answer to my to questions ? Thank you in advance, Maxi_Mega PS: Sorry for my english, I'm french :s
  3. I would like to call the jquery text() method with a string argument that includes the HTML character entity for the copyright symbol (&copy;). I've tried numerous variations of the following theme: $('#copyright').text('&copy; ' + date.getFullYear() + ' John Doe'); So far, nothing I've tried has produced the desired result. Specifically, the HTML "& copy;" entity is not getting translated into the copyright symbol. Is it possible to pass an HTML character entity in this way?
  4. I am using a drop-down menu with a search option that excludes short-code search (based on my last post: How to ignore shortcode on html text search). Basically, it needs to look like this Country selection page: Now I have this very long drop-down menu that I would like to manage in a controlled window and I thought that using the select size function will work for me. Unfortunately, it didn't... Please see the following attached screenshots & codes that describe the problem. 1. This is the one that is working well but with a very long list (without the select size function): Working code but long list And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a> <a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a> <a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a> <a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a> <a href="/professional-network/asia/India">[flag=in] <span>India</span></a> <a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a> <a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a> <a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a> <a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a> <a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a> <a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a> <a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a> <a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a> <a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a> <a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a> <a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a> <a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a> <a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a> <a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a> <a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a> <a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a> <a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a> <a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a> <a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a> <a href="/professional-network/asia/China">[flag=cn] <span>China</span></a> <a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a> <a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a> <a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a> <a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a> <a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a> <a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a> <a href="/professional-network/asia/China">[flag=sg] <span>China</span></a> <a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a> <a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a> <a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a> <a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a> <a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a> <a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a> <a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a> <a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a> <a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a> <a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a> <a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> This is the one that is using the select size function but with bugs and not working (broke the search, the flags, the design and not opening properly on the website): The code problem And the code is: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn{background-color:white;color:black;padding:4px;font-size:18px;border:none;cursor:pointer;border-radius: 7px;border: 2px solid #008CBA;-webkit-transition-duration: 0.8s; /* Safari */ transition-duration: 0.8s; }.dropbtn:focus,.dropbtn:hover{background-color:#4db8ff}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.Country{position:relative;display:inline-block}.Country-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.Country-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.Country a:hover{background-color:#ddd}.show{display:block} } #myInput { border-box: box-sizing; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .Country { position: relative; display: inline-block; } .Country-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .Country-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .Country a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="Country"> <button onclick="myFunction()" class="dropbtn">Country</button> <div id="myCountry" class="Country-content"> <input type="text" placeholder="Search here..." id="myInput" onkeyup="filterFunction()"> <select size="20"> <option><a href="/professional-network/asia/Afghanistan">[flag=af] <span>Afghanistan</span></a> <option><a href="/professional-network/asia/Armenia">[flag=am] <span>Armenia</span></a> <option><a href="/professional-network/asia/Azerbaijan">[flag=az] <span>Azerbaijan</span></a> <option><a href="/professional-network/asia/Bahrain">[flag=bh] <span>Bahrain</span></a> <option><a href="/professional-network/asia/Bangladesh">[flag=bd] <span>Bangladesh</span></a> <option><a href="/professional-network/asia/Bhutan">[flag=bt] <span>Bhutan</span></a> <option><a href="/professional-network/asia/Brunei">[flag=bn] <span>Brunei</span></a> <option><a href="/professional-network/asia/Cambodia">[flag=kh] <span>Cambodia</span></a></option> <option><a href="/professional-network/asia/Cyprus">[flag=cy] <span>Cyprus</span></a></option> <option><a href="/professional-network/asia/East Timor">[flag=tl] <span>East Timor</span></a></option> <option><a href="/professional-network/asia//Georgia">[flag=ge] <span>Georgia</span></a></option> <option><a href="/professional-network/asia/India">[flag=in] <span>India</span></a></option> <option><a href="/professional-network/asia/Indonesia">[flag=id] <span>Indonesia</span></a></option> <option><a href="/professional-network/asia/Iran">[flag=ir] <span>Iran</span></a></option> <option><a href="/professional-network/asia/Iraq">[flag=iq] <span>Iraq</span></a></option> <option><a href="/professional-network/asia/Israel">[flag=il] <span>Israel</span></a></option> <option><a href="/professional-network/asia/Japan">[flag=jp] <span>Japan</span></a></option> <option><a href="/professional-network/asia/Jordan">[flag=jo] <span>Jordan</span></a></option> <option><a href="/professional-network/asia/Kazakhstan">[flag=kz] <span>Kazakhstan</span></a></option> <option><a href="/professional-network/asia/Kuwait">[flag=kw] <span>Kuwait</span></a></option> <option><a href="/professional-network/asia/Kyrgyzstan">[flag=kg] <span>Kyrgyzstan</span></a></option> <option><a href="/professional-network/asia/Laos">[flag=la] <span>Laos</span></a></option> <option><a href="/professional-network/asia/Lebanon">[flag=lb] <span>Lebanon</span></a></option> <option><a href="/professional-network/asia/Malaysia">[flag=my] <span>Malaysia</span></a></option> <option><a href="/professional-network/asia/Maldives">[flag=mv] <span>Maldives</span></a></option> <option><a href="/professional-network/asia/Mongolia">[flag=mn] <span>Mongolia</span></a></option> <option><a href="/professional-network/asia/Myanmar">[flag=mm] <span>Myanmar</span></a></option> <option><a href="/professional-network/asia/Nepal">[flag=np] <span>Nepal</span></a></option> <option><a href="/professional-network/asia/North Korea">[flag=kp] <span>North Korea</span></a></option> <option><a href="/professional-network/asia/Oman">[flag=om] <span>Oman</span></a></option> <option><a href="/professional-network/asia/Pakistan">[flag=pk] <span>Pakistan</span></a></option> <option><a href="/professional-network/asia/China">[flag=cn] <span>China</span></a></option> <option><option><a href="/professional-network/asia/The Philippines">[flag=ph] <span>The Philippines</span></a></option> <option><a href="/professional-network/asia/Qatar">[flag=qa] <span>Qatar</span></a></option> <option><a href="/professional-network/asia/Taiwan">[flag=tw] <span>Taiwan</span></a></option> <option><a href="/professional-network/asia/Russia">[flag=ru] <span>Russia</span></a></option> <option><a href="/professional-network/asia/Saudi Arabia">[flag=sa] <span>Saudi Arabia</span></a></option> <option><a href="/professional-network/asia/Singapore">[flag=sg] <span>Singapore</span></a></option> <option><a href="/professional-network/asia/China">[flag=sg] <span>China</span></a></option> <option><a href="/professional-network/asia/South Korea">[flag=kr] <span>South Korea</span></a></option> <option><a href="/professional-network/asia/Sri Lanka">[flag=lk] <span>Sri Lanka</span></a></option> <option><a href="/professional-network/asia/Syria">[flag=sy] <span>Syria</span></a></option> <option><a href="/professional-network/asia/Tajikistan">[flag=tj] <span>Tajikistan</span></a></option> <option><a href="/professional-network/asia/Thailand">[flag=th] <span>Thailand</span></a></option> <option><a href="/professional-network/asia/The United Arab Emirates">[flag=ae] <span>The United Arab Emirates</span></a></option> <option><a href="/professional-network/asiaTurkey">[flag=tr] <span>Turkey</span></a></option> <option><a href="/professional-network/asia/Turkmenistan">[flag=tm] <span>Turkmenistan</span></a></option> <option><a href="/professional-network/asia/Uzbekistan">[flag=uz] <span>Uzbekistan</span></a></option> <option><a href="/professional-network/asia/Vietnam">[flag=vn] <span>Vietnam</span></a></option> <option><a href="/professional-network/asia/Yemen">[flag=ye] <span>Yemen</span></a> </div> </div> <script> function myFunction() { document.getElementById("myCountry").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myCountry"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { var label = a[i].querySelector('span'); if (label.innerText.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } } </script> </body> </html> Obviously, I have done something wrong so if you can help me fix it I will appreciate this a lot!
  5. First of all, I'm no way near any skilled "programmer" or website builder, I mostly just copy things and modify the styles and stuff! So this is probably a nooby question, you have been warned. I've this website I'm building for a school project and I've a few problems left and I've given up trying to fix them, I need to start working on other stuff. First of all so am I trying to get this slider between the three pictures and the navigation bar in the supposedly start page, but the animation disappear when you put it in and I don't think the autoplays work either. This is the main thing I'm trying to do. Secondly, When you go on mobile view and press the dropdown menu it doesn't seem to find the script, which i don't understand why. In the header I have <script src="/online-store-header/js/flertdown.js"></script> and the body I've the code <a href="javascript:void(0);" style="font-size:25px;position: absolute; top: 65px; right: 0; border: 0;" class="icon" onclick="specificName()">☰</a> The console returns this error: Uncaught TypeError: Cannot read property 'className' of null at specificName (flertdown.js:3) at HTMLAnchorElement.onclick (final.html:195) Dropdown js code Any help would be really appreciated, i really need to be done this site soon :)) And I'm really sorry if the index file is totally chaos, elements seems to have a life of their own and come back and reproduce to multiple of the same element after I've deleted them, I've lost control of what i've created (or copied)
  6. So I've searched the web and tried for hours now and I'm just giving up. I've this header, and I want it so when you're on mobile it looks like something like this. So when you're on desktop the full menu is in the header and if your're on mobile you get a dropdown menu. Can someone tell me how I do this? Thank you
  7. I'm trying to create a script that contains an if/else statement that uses an outside input to change the color of a box in the html file. Currently I am not seeing any changes, so right now I'm checking if the script is even being noticed and ran. I'll admit that I'm not very good at this, so I apologize if these are really simple problems to fix or that they've been fixed before and I missed it when searching for other posts. If it's the latter, could you send me a link. Placement: Currently the script is inside the a style tag, and both are outside the body. Should I not have it in the style tag? Should I keep it outside of the body? If the issue is placement, where should I place it. Currently the if/else statement is not in a function. Does it need to be in a function? If so, how should I set it up so the function gets called every time, but does nothing until the if condition is met? if I don't need it to be a function to run this, how else can I set it up so it will run? Here's the part of the code that I'm working on, Ignore the contents as all I'm looking for is how to get the script to be noticed and ran. <script= text/javascript> var StopTimePivatic = [[175]]; if (StopTimePivatic != 0){ #b[[141]]{ style.background-color= silver; } } else{ #b80, #b81, #b82, #b83, #b84, #b85, #b86, #b87, #b88, #b89, #b90 { style.background-color = Yellow; style.color = black; } #b0, #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10, #b11, #b12, #b13, #b14, #b15, #b16, #b17, #b18, #b19, #b20, #b21, #b22, #b23, #b24, #b25, #b26, #b27, #b28, #b29, #b30, #b31, #b32, #b33, #b34, #b35, #b36, #b37, #b38, #b39, #b40, #b41, #b42, #b43, #b44, #b45, #b46, #b47, #b48, #b49, #b50, #b51, #b52, #b53, #b54, #b55, #b56, #b57, #b58, #b59, #b60, #b61, #b62, #b63, #b64, #b65, #b66, #b67, #b68, #b69, #b70, #b71, #b72, #b73, #b74, #b75, #b76, #b77, #b78, #b79 { style.background-color = red; } } </script> </style> <body onload="bundle()"> As I said previously, If as similar problem to this has been solved, please let me know where i can find it.
  8. Hi Am trying to submit the data to server, nothing is received on server. I mean "dismissed students" and "failed students " am filling and sending but not receiving on server side. How to get the data on server side. <div id="Examination" class="tabcontent"> <html> <body> <p id="exam"></p> dismissed students: <input type="text" name="index1" size="10"> <br><br> failed students: <input type="text" name="index2" size="10"> <button type="button" onclick="entry()">submit</button> <script> function entry() { var formData = new FormData(); var valid = new XMLHttpRequest(); valid.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("exam").innerHTML = this.responseText; } }; valid.open("POST", "exam.txt", true); xhttp.send(formData); } </script> I just added "formData" and i get just some junk characters not original data.How to fill the data in "formData" How to get the data, anything else is required to make it work. Thanks Avinash
  9. ALERT: This question can be answered by both new and old users who do not like pop-ups, because it is an iPhone -- an environment in which the now infamous/famous Grammar Captive splash panel is forever suppressed. BACKGROUND: After many excruciating hours the responsive design of Grammar Captive is nearly complete. One of the several known outstanding problems that remains occurs when one uses Grammar Captive's custom search engines with an iPhone. In order to enter one's search word or phrase the iPhone keyboard appears. It works like a bad wine that starts with an attractive bouquet and flavor, but ends with a strong, even foul, after taste. An alternative analogy is a misbehaved (innocent or malevolent) child that leaves his parents or older siblings to clean up after his after he has played. In effect, the keyboard takes up the entire width of the viewport, but does not return the webpage that hosts the form input control that evokes it. Although I was able to find a possible solution on StackOverflow it has proven difficult to implement. PROPOSED SOLUTION: Add an id attribute to the page's meta tag that hosts the viewport control and reference that tag when the search is submitted. Before Search: <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"> After Search: $('#viewport').attr('content', 'width=device-width, initial-scale=0.5'); I believe the reason that this works for others, but not for me is that Javascript cannot find #viewport. This is because of the sequencing of the Javascript that produces the dynamically loaded center panel. In brief, overview.js is loaded with overview.html (the Grammar Captive mainpage) search_letter.js is loaded by overview.js after the search panel has loaded, but before a search is made. If the After Search modification is to be implement, then it must be implemented after the search has been completed. QUESTION ONE: Am I likely correct in my assessment? QUESTION TWO: If so, how might I resolve the problem? Roddy
  10. Hello everybody, I was playing with a template from the w3.css templates from w3 schools and found an issue that I can't get around. In the template called Parralax template or the forth one from top, with the man with grey hat, I saw that the home screen image was loaded from the css .bgimg-1{ min-height: 100%; background-image: url(/w3images/parallax1.jpg); } (from the style brackets after the head tag ) I wanted to do a transition between two images but only found examples on the web that it is possible only when the image is loaded from an html image tag, so I removed the "background-image" from the above css code and added an <img src="/w3images/parallax1.jpg"> tag under the div where the class name was bgimg-1: <!-- First Parallax Image with Logo Text --> <div class="bgimg-1 w3-display-container w3-opacity-min" id="home"> <img src="/w3images/parallax1.jpg"> <div class="w3-display-middle" style="white-space:nowrap;"> <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span> </div> </div> However, the image now has an empty white space from it's right side and I can't make it full. Does anybody know how to fix that?
  11. BACKGROUND: Recently I had occasion to make a search on my own website using the Newsletter search engine. What I discovered was the most bizarre of behaviors. I could perform one search in Japanese and then no more. In other languages such as French, German, and English I could perform as many searches as I liked -- even repeating the same words more than once -- and I always I was able to produce the expected result. Mind you, this bizarre one-find-stop--all-further-finds behavior in the Japanese language was not the case when I first installed my search engines. Now, I have checked my PHP error.log file and found nothing related to this problem. I have also checked that the parameter value of the AJAX call is being properly passed; here too there is no unusual behavior. This bizarre behavior was not always the case. It appears to have begun taking place all of its own. Any ideas? Roddy
  12. BACKGROUND: I am baffled by the failure of this code to display "Return User" when the browser page is refreshed or the browser page is closed and then reopened. The vslue of the console.log(localStorage) displays: Storage { return_user: "true", length: 1 } CODE: const output = document.querySelector('.output'); if (typeof localStorage !== "undefined") { var localStorage = window.localStorage; if(localStorage.getItem("return_user")) { output.innerHTML = "Return User"; } else { output.innerHTML = "New User"; localStorage.setItem("return_user", true); console.log(localStorage); } } else { output.innerHTML = "Sorry, local storage is not supported."; } QUESTION: Any ideas? Roddy
  13. Hello & Thanks , Seems to me that I once saw a chart of Html elements showing the allowable properties and values and inheritances of each element . Anyone know where this is located ? Ugh ! I forgot to bookmark it . Thanks
  14. Hi everyone, inside PhpStorm, seem tag of frame has been strike, it might mean it is not support. I want to create like paginate data, but I just want to have page inside frame on page, so I can leave video on left, then other column can be change page by link. Anyone can help? Thanks, Gary
  15. Hello & Thanks , I am having trouble giving a <div> a background color : <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> I am using this example: https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 I am using inline style= , when I get proper results , then I will transpose code into css styles . <!DOCTYPE html> <html lang="en"> <head> <title>HTML5</title> <meta charset="utf-8"> <style> body { font-family: Verdana, sans-serif; font-size: 0.8em; } header, nav, section, article, footer, div.city { border: 1px solid grey; margin: 5px; padding: 8px; } nav ul { margin: 0; padding: 0; } nav ul li { display: inline; margin: 5px; } </style> </head> <body> <header> <h1>HTML5 Skeleton</h1> </header> <nav> <ul> <li>News</li> <li>Sports</li> <li>Weather</li> </ul> </nav> <article> <h2>Famous Cities</h2> <div class="London" style="background-color: #00FF00;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="Paris" style="background-color: #FF0000;"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="Tokyo" style="background-color: #0000FF;"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </article> <footer> <p>&copy; 2014 W3Schools. All rights reserved.</p> </footer> </body> </html> And here is my example code: <!DOCTYPE html> <html> <head> <title>DIVs Template WIP</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DivsOnlyTemplate</title> <!-- file:///C:/vmars.us/DivsOnly-STARTover.html https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/ https://htmlformatter.com/ https://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_migrate_7 --> <style type="text/css"> </style> </head> <body style="background-color: #FFFFFF;"> <br> <div class="Table" style="border-style: solid; text-align: center; border-color: #5A697D; border-width: 16px;"> <!-- ============NewRow============== --> <p></p> <div class="Row" style="border-style: solid solid solid solid; border-width: 4px; border-color: #000000;"> <div class="Cell" style="width: 25%; border-style: solid; border-color: #FF0000; background-color: D3DDEB; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p style="border-style: solid; border-color: #0000FF; background-color: D3DDEB"> Row 1 Column 1 <br><img src="Empty.png" alt="Empty.png"></p> </div> <!-- <div class="Cell" --> <div class="Cell" style="width:70%; border-style: solid; border-color: #00FF00; background-color: 000000; display: inline-block; padding-left: 5px; padding-right: 5px; "> <p> Row 1 Column 2 <br><img src="Empty.png" alt="Empty.png"> </p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> </div> <!-- <div class="Table"> --> </body> </html> Please what am I doing wrong ? Thanks
  16. Hello & Thanks , In the code below , I am getting an extraneous "_" underscore after each "Button" . Pls , how can I avoid this ? Thanks <!DOCTYPE html> <html> <head> <title>Previous-Next-Buttons-NoCss</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Previous-Next-Buttons-NoCss-W3invision.html</h2> <p style="text-align:center"> <br> <br> <a href="Previous-Next-Buttons-NoCss-01.html"> <input type="button" value="Previous-Next-Buttons-NoCss-01.html" /> </a> &nbsp; &nbsp <a href="Previous-Next-Buttons-NoCss-02.html"> <input type="button" value="Previous-Next-Buttons-NoCss-02.html" /> </a> &nbsp; &nbsp <a href="Previous-Next-Buttons-NoCss-03.html"> <input type="button" value="Previous-Next-Buttons-NoCss-03.html" /> </a> <br> <br> </p> </body> </html>
  17. Greetings to all the users and administrators of w3scools invisionzone forum. I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently. Any feedback regarding the design and contents would be highly appreciated. Thankyou
  18. Hello Guys, I'm working on a website for my aunt, due to the new privacy law, she needs to update the page with a new Button in the menu. I lost the programm which I created the old .png buttons, so I can't create the new one in the same style. I want to replace the old buttons with new ones, written in css. The only problem is the size of the buttons, they keep scaling with the writting in the button, but I want them all the same size. I attached the code of the css and html, can you help me? I know, the website is written in an old style, her former programmer did all the writting and I overtook the project a while ago. CSS.css Schwarzwaldverein Ortsgruppe Achern.html
  19. Hi Am working on nested tabs, but level 1 tabs work fine but all the level 2 tabs displays data at once. I have attached a source code . For example, with attached code when i click on London->open Collapsible That time internal 3 tabs data in "open collapsible" are visible at once. How can i hide it? Please suggest Thanks and Regards Rizwan Syed test.txt
  20. Hi all ! I wrote this short code : <html> <head> <style> table, th{ max-width: 600px; } .e2 { width: 200px; } </style> </head> <div style="background-color:TRANSPARENT;width:603px"> <body> <table> <tr bgcolor="TRANSPARENT" height="20"> <td class="e2" style="background-color:GREEN"></td> </tr> </table> </body> </div> </html> I have a data base column (in oracle apex), And I would like to have something like that (a multiplication) : .e2 { width = #column# * 600; } Because I would like to have a green horizontal bar chart with different size depending on the values in my database column. So, I tried calc() : did not work... And I also tried : <td style="background-color:GREEN" width=#column#*600></td> <td style="background-color:GREEN" width=calc(#column#*600)></td> Those 2 lines did not work too.. Do you have any idea how to do this multiplication please ? Best regards, acnos
  21. Hi everyone, I'm trying to have little blur on background which is video. I added filer:blur(5px) on this video, but it won't work. Is there any way to make it work? I searched in google to see some code in, but none of them are working. Can anyone help? Thanks, Gary Taylor
  22. Hi! I need some help with an exercise I am doing. In my exercise, the borders on the right side is taking too much space, I would like it to take only as much space as it needs, with only around 2em of padding, but for some reason, the left side and the upper side seems to have a lot of space....I would appreciate a lot if you could help me. Attached you can find the file and here is a link with the exercise I am doing (the first one). Exercises Thank you! Ejercicio1prueba.htm
  23. I am creating a re-usable email template. I am not sure if this can be done but wanted to throw it out there and see if anyone had any ideas. I have a button with a link to a form. The link pre-fills fields in the form with merge tags in the url. I need to make/create a "placeholder" for one of the tags so that I can edit/insert different values as needed. Is this possible with HTML? This all resides in PARDOT, which does have a WYSIWYG editor. When I click on the lick I can pull up the WYSIWIG and change attributes etc. I would love to be able to click the link and have an "Event ID" that would change the portion of the link containing "Event ID" to what I need so that when clicked it pre-fills the field on the form with the correct "Event ID". Everything works fine, I am just trying to find a way to make it easier for the end user when utilizing the template. Hopefully this isn't too vague and I have illustrated what I am trying to do. Thanks!
  24. juan.rojas89

    Block Size

    I have been using the <block-size: XX%;> property to prevent a table from resizing on different screens but I can't seem to get it right, what could I use to solve this? this is an example of how I'm applying the code: HTML <div .div-central> <tr>example1</tr> <tr>example2</tr> <tr>example3</tr> </div> Css .div-central { block-size: 60%; }
  25. Hello I have a problem when it comes to traversing through DOM nodes and accessing their data(values). Please have a look at the following code HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="js.js"></script> </head> <body> <div id="div1" class="div1"> <img src="1.png" style="width:100px;height:100px;"/> <h1>This is a Heading1</h1> <p>This is a paragraph1.</p> <button onclick="a(0);">Press me</button> </div> <div id="div1" class="div1"> <img src="2.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading2</h1> <p>This is a paragraph2.</p> <button onclick="a(1);">Press me</button> </div> <div id="div1" class="div1"> <img src="3.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading3</h1> <p>This is a paragraph3.</p> <button onclick="a(2);">Press me</button> </div> </body> </html> JAVASCRIPT var elements = document.getElementsByClassName("div1"); function a(index) { var d = elements[index].childNodes[3].nodeValue; alert(d); } Okay so according to my understanding if I want to access and alert the first div's h1 text value which is "This is Heading1" then my JavaScript code should be var d = elements[index].childNodes[1].nodeValue; However I do not get the text value? Also nodeValue gives me NULL if I use innerHTML I get the text value but at childNodes[3] and not childNodes[1] where you'd expect it to be? Also this example contradicts everything you find at https://www.w3schools.com/js/js_htmldom_navigation.asp Can someone please elaborate on this as it is very important to understand and I am tearing my hair out trying to figure this out.
×
×
  • Create New...