JMRKER
-
Posts
194 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Everything posted by JMRKER
-
Show some of you code attempts. Much easier to discuss what you have done than what we can guess you might have done.
-
Is this what you are trying to accomplish? <!DOCTYPE html><html lang="en"><head><title> Gallery Switch </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- From: http://w3schools.invisionzone.com/topic/61317-how-to-make-a-switch-button-useful/ and: https://www.w3schools.com/howto/howto_css_switch.asp --> <title> Gallery Switch </title> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .flex { display: flex; flex-wrap: wrap; list-style-type: none; margin: 0; padding: 0; } .flex li { flex: 1 0 20%; min-width: 14em; /* optional 200px, etc */ text-align: center; border: 1px solid black; } .hide { display: none; } img { width: 10em; height: 5em; margin: 1em; } </style> <style> .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } </style> </head> <body> <h2>Toggle Galleries Switch</h2> <label class="switch"> <input type="checkbox" id="gallery12"> <span class="slider"></span> </label> <p> <div id="gallery1" class=""> <h2>Gallery 1</h2> <ul class="flex"> <li><img alt="Gallery 1 - Image 1"></li> <li><img alt="Gallery 1 - Image 2"></li> <li><img alt="Gallery 1 - Image 3"></li> <li><img alt="Gallery 1 - Image 4"></li> <li><img alt="Gallery 1 - Image 5"></li> <li><img alt="Gallery 1 - Image 6"></li> <li><img alt="Gallery 1 - Image 7"></li> <li><img alt="Gallery 1 - Image 8"></li> <li><img alt="Gallery 1 - Image 9"></li> <li><img alt="Gallery 1 - Image 10"></li> </ul> </div> <div id="gallery2" class="hide"> <h2>Gallery 2</h2> <ul class="flex"> <li><img alt="Gallery 2 - Image 1"></li> <li><img alt="Gallery 2 - Image 2"></li> <li><img alt="Gallery 2 - Image 3"></li> <li><img alt="Gallery 2 - Image 4"></li> <li><img alt="Gallery 2 - Image 5"></li> </ul> </div> <script> function init() { document.getElementById('gallery12').addEventListener('click', function () { document.getElementById('gallery1').classList.toggle('hide'); document.getElementById('gallery2').classList.toggle('hide'); } ); } init(); </script> </body> </html>
-
What have you tried or what have you changed? Which example (of the many available) are you using?
-
There are many examples on the web. Do you have one particular example you would like to emulate? BTW, welcome to the forums.
-
This would not be a very easy project using HTML only. You might consider using a PHP program and/or an SQL database to collect and store/retrieve you data.
-
Looks like DW cannot process 'template' commands using the backtick. Also, if you want to apply code to both older and newer versions of the browsers you will need to maintain a lot of unnecessary code and documentation. Can not use newer versions of JS if you are stuck using older browsers and frameworks. Sorry.
-
As soon as you execute the "document.write()" statement, the program reloads the page and you lose all earlier calculations and references. Consider writing the results to another element and use ID values to help with references. BTW, welcome to the forums.
-
What does your code look like? Where is the URL of the location where you found this tutorial code? To modify your statement: "I don't understand why they you don't fully explain ..." the problem without an example. I understand you are a "newbie", but you've still got to help us understand the problem. BTW, welcome to the forums.
-
No, it does not use JQuery. If you copy the code into a text editor and save it with the .html extension, you should be able to execute it from your local computer as is. The entire "datePicker" (as you call it) are included by the HTML5 tags with the type="date" and the information between the <script> tags. It is just simple HTML, CSS and JS code without anything else to load or execute.
-
Question: Did you try the code? The second date does not appear until the first is selected. The second date can then be changed if necessary without effecting the first. I did not include any validation/checks, but you did not specify any at the time. It's your project, so you can choose to do whatever you please. Unless your browser does not support the new tags, it should work as needed without a lot of confusing callbacks that I'm not sure I see the need for (?) but you may desire for some other reason you haven't specified in your code yet. Either way, good luck!
-
Not sure I understand the desired output, so this is just a guess. It does not use your "TheDatePicker" functions, but it does use the new HTML 5 type="date" element. Try it out and see if you can use it as is or modify to add additional validation checks. See references in the code documentation <!DOCTYPE html><html lang="en"><head><title> Test Page </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- From: http://w3schools.invisionzone.com/topic/61265-using-thedatepicker/ See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date --> <style> #date1, #date2 { width: 10em; } </style> </head><body> <table> <tbody> <tr> <td style="text-align:center"> <div id="input-wrapper" class="w3-container" style="text-align:center"> <input id="date1" type="date" onchange="dateExtend()" class="form-control w3-show-inline-block w3-border")> </div> </td> <!-- 2ND DATE FIELD --> <td id="wrapper2"> <div class="w3-container" style="text-align:center"> <input id="date2" type="date" placeholder="Last show" class="form-control w3-right w3-border"> </div> </td> </tr> </tbody> </table> <script> Date.prototype.addDays = function (days) { return new Date(this.getTime() + days*24*60*60*1000); } Date.prototype.toYYYYMMDD = function() { return `${this.getFullYear()}-${(''+(this.getMonth()+1)).padStart(2,'0')}-${this.getDate()}`; } function dateExtend() { const minDate = document.getElementById('date1').value; const maxDate = document.getElementById('date2'); maxD = new Date(minDate).addDays(11); maxDate.value = maxD.toYYYYMMDD(); } </script> </body></html> BTW, welcome to the forums.
-
I am unclear of your request, so this is just an attempt toward a solution. First, move the height and width definitions in the <img> tags to the CSS section. Also, be consistent in using the 'px' notation which is not used in the tag portions. Second, change .myDIV:hover + .hide { to .myDIV:hover .hide { to get the effect I think you desire. Finally, I don't know what is to happen with the displays of the first and last <div> elements. You hide the second with the '.hide' class, but you show the first when you don't have any definition to hide it. What are you trying to do here. <!DOCTYPE html> <html> <head> <title>Display Hidden Content OnhoverEvent</title> <!-- From: http://w3schools.invisionzone.com/topic/61228-display-hidden-element-when-hovering/ --> <style> body { padding: 50px 10px; margin: 0 auto; max-width: 900px; } .hide { display: none; } .myDIV:hover .hide { display: block; color: red; } img { display: inline-block; height: 100px; width: 100px; } </style> </head> <body> <div class"outputr1"> I want to display Hidden/hover content here </div> <br><br> <div class="myDIV"> <img src="1.png" alt="1.png"> <div class="hide"> Hover content 1 </div> </div> <div class="myDIV"> <img src="2.png" alt="2.png"> <div class="hide"> Hover content 2 </div> </div> <div class="myDIV"> <img src="3.png" alt="3.png"> <div class="hide"> Display Hover content 3 </div> </div> <div class="hide"> I am Hover Content but i don't want this to display.</div> </body> </html> Note: I don't have a reference to your '.png' image files so I just inserted an "alt=xxx" attribute as a place holder. Always a good idea to include description of the images in case they are not show for some reason. BTW, welcome to the forums.
-
How do you plan on getting the input? Are you typing in the word or can it be a button (radio, checkbox or dropdown) selection?
-
I'm unclear of the second part of your question, but you can fix the first part with the following change. Add the following to the last line of the openMainCategory function: evt.currentTarget.className += " active"; openSubCategory(null,''); }
-
In the last post, just add this one line: } openCity('click','London'); </script> before the closing script tag.
-
What does your webpage look like? What code are you using? Make it as simple an example as you can.
-
Move the id="defaultOpen" From: <button class="tablink" onclick="openPage('Home', this, 'red')">Home</button> <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button> To: <button class="tablink" onclick="openPage('Home', this, 'red')" id="defaultOpen">Home</button> <button class="tablink" onclick="openPage('News', this, 'green')" >News</button> BTW, welcome to the forums.
-
Needs following change to make it work. <script> function select() { var sel = document.getElementById("cars").value; document.getElementById("cars1").options[sel-1].disabled = true; } </script> Note also that it will ONLY disable the selection without the ability to deselect a choice once chosen. Also, the label tag 'for=option' is useless as the 'for' applies to an ID not an 'option' to the select tag.
-
Unclear of request. Clarification please. Are you wanting to display an image each letter of 'Joy' based upon user input? Or, are you trying to display a symbol of each letter of 'Joy' based upon some substitution logic? Or, are you wanting to display 'Joy' as a different font family or size or color? Do you have an example of what you are trying to create?
-
Your request is very unclear, but just to prove that you code can be used in a 'switch' statement, consider this: <!DOCTYPE html><html lang="en"><head><title> Test Page </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- link rel="stylesheet" href="common.css" media="screen" --> <style> </style> </head><body> <button onclick="rnd5()">Test</button> <pre id='demo'></pre> <script> function rnd5() { var number = 9; var r = Math.floor(Math.random() * number); // document.getElementById('demo').innerHTML = r+'\n'; // Simple display switch (r) { case 0: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 1: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 2: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 3: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 4: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 5: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 6: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 7: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; case 8: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break; } } </script> </body></html>
-
It would be a lot easier to help if you include the HTML with your CSS to determine what interactions would suit your problem best. Without seeing anything but the CSS above my first area to check would be the 'margin-top: -12px;' statement.
-
Table would not automatically reformat to vertical display as in suggested code, but would be clipped and lost if the images are too large for the screen.
-
Which, if you looked at the code, is exactly what I suggested.
-
You will not be able to upload the text files from your desktop using JS. I would be possible to load them from the server.
-
Too little code to help. For example: 1. What does '.toggler' look like? 2. What does the HTML look like? 3. Is any JS being used to trigger the color change? BTW, welcome to the forums. PS: going by the name, not the # of posts.
