Jump to content

JMRKER

Members
 View Profile  See their activity

  • Posts

    194

  • Joined

  • Last visited

  • Days Won

    5

 Content Type 

Everything posted by JMRKER

  1. JMRKER
    Here is 'Ingolme's suggestion in a test script. Very similar to original but without <br> <!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> h1 { /* width: 20em; /* single line */ margin: 0 auto; text-align: center; background: wheat; color: magenta; } h1.vertLine { width: 3em; } /* single vertical line */ h1.twoLines { width: 5em; } /* two horiz. lines */ </style> </head><body> <h1 class='vertLine'> We buy cars city</h1> <hr> <h1 class="twoLines"> We buy cars city</h1> <hr> <h1> We buy cars city</h1> <hr> <script> </script> </body></html>
  2. JMRKER
    Example of 'dsonesuk's suggestion: <!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> h1 { width: 20em; margin: 0 auto; text-align: center; background: wheat; color: magenta; } </style> </head><body> <h1> We buy <br> cars city</h1> <script> </script> </body></html> BTW, welcome to the forums.
  3. JMRKER

    Dropdown menu.

    JMRKER replied to oZorNick's topic in CSS

    Here is one very similar that works as you want. Compare codes for inspiration. <!DOCTYPE html><html lang="en"><head><title> Horizontal Drop-down Menu </title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <!-- Modified from: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar also: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click --> <style> ul { width: 800px; list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: wheat; } li { float: left; } li a, .dropbtn { display: inline-block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: lime; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: wheat; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: lime;} .dropdown:hover .dropdown-content { display: block; } .toRight { float: right; } </style> </head> <body> <ul> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Home</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li><a href="#news">News</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 1</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 2</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Dropdown 3</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <li class="dropdown toRight"> <a href="#" class="right">Enter</a> </li> </ul> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p> </body> </html>
  4. JMRKER
    Seventy items long seems excessive (to me). Is there no way to break the list into smaller groups by being more specific about the contents displayed? I don't know what your dropdown looks like, but as an example for a main heading of "Clothes" followed by all kinds of clothes I would break the clothes topic into smaller groups of 'Shirts', 'Blouses', 'Pants', 'Skirts', 'Ties', 'Scarfes', etc. I think any list longer than about 10 items should be split into smaller lists, even if the split is, for example, by alphabet: a-g, h-o, p-z
  5. JMRKER
    If you really need an array, you can convert from a collection to an array with the ES6 spread function. <!DOCTYPE html> <html> <body> <h2>JavaScript Arrays</h2> <p>This "home made" isArray() function returns true when used on an array:</p> <p id="demo"></p> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; // not used in this demonstration document.getElementById("demo").innerHTML = isArray(document.getElementsByTagName("p")); // false var parasCollection = document.getElementsByTagName('p'); // same as above document.getElementById("demo").innerHTML += '<br>' + isArray(parasCollection); // false var paraArray = [...parasCollection]; // convert collection to an array document.getElementById("demo").innerHTML += '<br>' + isArray(paraArray) + '<br>'; // true // shows tagName of collection array for (var i=0; i<paraArray.length; i++) { document.getElementById('demo').innerHTML += '<br>' + paraArray[i].tagName +' '; } function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; } </script> </body> </html>
  6. JMRKER
    Don't know what is causing this particular problem, but I removed the anchor links and the drop-down works fine. It might be a place to start further investigations. I don't know enough about PHP to help. <div class="dropdown-user-content" id="dropdown-user-content"> <a href="#"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a> <a href="#"><i class="fa fa-fw fa-envelope"></i> Mensajes</a> <a href="#"><i class="fa fa-fw fa-book"></i> Reglas</a> <a href="#" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a> </div>
  7. JMRKER
    Nope. You will need to add a database and server location somewhere. BTW, welcome to the forums.
  8. JMRKER
    Note addition in "Edited" at end. I was unable to alter posted code to show addition. <style> button { background: orange; } button:hover { background: cyan; } button:active { background: pink; } .active { background: lime; } .active:hover { background: yellow; } </style>
  9. JMRKER
    See if this test code can illustrate the actions and use of class .active and HTML active button:active has control only while element has focus as in a mouse click hold down mouse button to see color change with focus <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <title> Active test </title> <!-- For: http://w3schools.invisionzone.com/topic/60288-active-link-should-stay-colored/ --> <style> button { background: orange; } button:hover { background: cyan; } .active { background: lime; } .active:hover { background: yellow; } </style> </head> <body> <div id="btnLinks"> <button> Test 1 </button> <button> Test 2 </button> <button> Test 3 </button> </div> <script> console.clear(); function init() { const sel = document.querySelectorAll('#btnLinks button'); for (const [i, el] of sel.entries()) { el.addEventListener('click', function() { test(el, i); } ); } } init(); function test(elem, ndx) { elem.classList.toggle('active'); } </script> </body> </html>
  10. JMRKER
    Add the following just before the final script tag: acc[0].click();
  11. JMRKER
    I have no idea where your data is coming from but if you require a JS solution (not PHP) then you could modify this. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <title> HTML5 Test Page </title> <!-- For: http://w3schools.invisionzone.com/topic/60204-how-do-i-express-the-value-of-variables-in-table-cells/ --> <style> table { border-collapse: collapse; border-spacing: 0; border: 1px solid #ddd; width: 25%; } th, td { border: 1px solid black; padding: 2px; } tr:nth-child(even){background-color: #d2d2d2; } /* for table stripes */ </style> </head> <body> <table id="tbl"></table> <script> let $anarchistyes = 1, $anarchistno = 2, $anarchisthuh = 3, $conservativeyes = 4, $conservativeno = 5, $conservativehuh = 6; let tableArray = [ ['Anarchist', $anarchistyes, $anarchistno, $anarchisthuh], ['Conservative', $conservativeyes , $conservativeno , $conservativehuh ] ]; let str = ''; for (let i=0; i<tableArray.length; i++) { str += '<tr>'; for (let v of tableArray[i]) { str += `<td> ${v} </td>`; } str += '</tr>'; } document.getElementById('tbl').innerHTML = str; </script> </body> </html>
  12. JMRKER

    dropdown Menu width

    JMRKER replied to Borguas's topic in CSS

    Before the first <table> tag, you have <tr> and <td> tags without parent <table> tag. Why? Is this a mistake? You have some images within the table that are 900+ horizontal width. Why would you not expect that they might over-run the screen? Your code does not follow the example link to the W3 Schools code very closely. What are you really trying to accomplish? Is the program only meant for people with extra wide monitors? Will it be used by laptops or phone displays? BTW, welcome to the forums.
  13. JMRKER
    Sorry ... I just don't see the problem. When I click on the left menu items, it appears to go to a different display. It does not return to the 'print options' page unless I click on that item in the left menu. I am using the FF browser if that makes a difference (?) Or you have already fixed the problem (?)
  14. JMRKER
    I am having problems replicating your design. Do you have a link to the site or can you provide the entire HTML, JS and CSS you are using? Also, what is the purpose of using and <iframe> tag? Could you not just link to the site with an <a> tag?
  15. JMRKER
    Although this is the JS forum, there is a non-JS solution for programming completeness only. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/> <title> Hide/Show CSS only </title> <!-- For: http://w3schools.invisionzone.com/topic/60050-toggle-hideshow/ --> <style> #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; display: none; } #myBtn:checked + div { display: block; } label { border: 1px solid black; border-radius: 5px; background: lightblue; padding: 0.5em; } </style> </head> <body> <label for="myBtn">Click Me</label> <input type="checkbox" hidden id="myBtn"> <div id="myDIV"> This is my DIV element. </div> </body> </html> Moderators can move to CSS section if deemed appropriate.
  16. JMRKER
    Show some example code of what you have done as a starting point. How do you want it to differ from the example link you gave?
  17. JMRKER
    Three different functions that demonstrate: 1 (wheat color background): Successful match 2 (pink color background): Unsuccessful match <!DOCTYPE html> <html> <style> #demo1 { background: wheat; } #demo2 { background: pink; } </style> <body> <h1>Array includes()</h1> <!-- From: http://w3schools.invisionzone.com/topic/59508-javascript-search-if-a-word-is-inside-an-array/ --> <p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier versions).</p> <p>Check if the fruit array contains "Mango":</p> <p id="demo"></p> <pre id="demo1"></pre> <pre id="demo2"></pre> <script> const lookFor = 'Mango'; var fruits = ["Banana is yellow", "Orange juice", "Apple is red", "Mango is orange"]; document.getElementById('demo').innerHTML = `Original Array: fruits<br> ${fruits.join('<br>')}`; checkFor('demo1', lookFor); checkFor('demo2', 'XXX'); function checkFor(dw, lookFor) { document.getElementById(dw).innerHTML += `<p />Look for in 'fruits' array: ${lookFor}`; var n = fruits.includes(lookFor); document.getElementById(dw).innerHTML += `<p />fruits.includes(${lookFor}): ${n}`; var n1 = fruits.findIndex(element => element.includes(lookFor)); document.getElementById(dw).innerHTML += `<p />fruits.findIndex(${lookFor}): #${n1} ${fruits[n1]}`; var n2 = fruits.filter( function(x) { return (x.indexOf(lookFor) != -1) ? x : ''; } ); document.getElementById(dw).innerHTML += `<p />fruits.filter(${lookFor}): `+n2; } </script> </body> </html>
  18. JMRKER
    Do you have some small amount of code sample? The picture is too small to read.
  19. JMRKER

    animated CSS arrows

    JMRKER replied to westman's topic in CSS

    Where exactly in the CSS or HTML is that statement to be added? Thanks.
  20. JMRKER
    Welcome to the forums. Your question is kind of broad for me. Can you give a more specific example of what you wish to accomplish? If you just want some general direction, try googling Flexbox or Grid layouts with CSS.
  21. JMRKER
    No. I'm just not interested in reading through 18.31kB of code. You should at least be able to isolate your problem to a page or two of code with a small example.
  22. JMRKER
    This is not a count-down example, but it does illustrate the use of Date.toUTCDString() and Date.toString() functions. You should be able to modify for your needs along with the set Date() functions, if necessary. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/><title> .toUTCString / .toString </title><!-- link rel="stylesheet" href="common.css" media="screen" --><style></style></head><body><h1> Displays in console.log </h1><pre id="demo"></pre><script>const doc = (IDS) => document.getElementById(IDS);/* send console.log to element in body via assignment */// following modified from: https://stackoverflow.com/questions/16616722/sending-all-javascript-console-output-into-a-dom-elementvar former = console.log; // retain former actions of console.logconsole.log = function(...msg){ former(...msg); // maintains existing logging via the console. (optional) doc("demo").append(msg.join(' ')+'\n'); // output needs to be specified}</script><script> console.clear(); const Months = ['January','February','March', 'April', 'May', 'June', 'July', 'August', 'September','October','November','December']; const Days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; Array.prototype.lookFor = function (str) { // returns index of found string or -1 if not found let arr = this; for (let i=0; i<arr.length; i++) { if (arr[i].indexOf(str) != -1) { return i; } } return -1; } var getDaysInMonth = function(month,year) { // Day 0 is the last day in the previous month // return new Date(year, month, 0).getDate(); // Here January is 1 based// Alternative: return Number(new Date(year, month+1, 0).getDate()); // Here January is 0 based }; var getDayOfYear = function(year,month,day) { // Here January is 0 based; var tot = 0; for (let m = 0; m<month; m++) { tot += getDaysInMonth(m,year); } return tot+Number(day); }; Date.prototype.dayDiff = function(d) { return Math.floor(Math.abs(this-d)/86400000); }; console.clear; console.log('new Date.toUTCDString()\t',new Date().toUTCString()); var [day,date,mo,year,time,zone] = new Date().toUTCString().split(' '); console.log('Days-In-Month\t: ',getDaysInMonth(Months.lookFor(mo),year)); console.log('Day-Of-Year\t: ',getDayOfYear(year,Months.lookFor(mo),date)); console.log('Long month\t: ',Months[Months.lookFor(mo)]); console.log('Long day\t: ',Days[Days.lookFor(day.substr(0,3))]); console.log(); console.log('\nnew Date().toString(): \t',new Date().toString()); var [day,mo,date,year,time,zone,...rest] = new Date().toString().split(' '); console.log('Days-In-Month\t: ',getDaysInMonth(Months.lookFor(mo),year)); console.log('Day-Of-Year\t: ',getDayOfYear(year,Months.lookFor(mo),date)); console.log('Long month\t: ',Months[Months.lookFor(mo)]); console.log('Long day\t: ',Days[Days.lookFor(day)]); console.log(); console.log("Butch's BDay"); console.log('new Date().toString(1947,7,16): ',new Date(1947,7,16).toString()); var [day,mo,date,year,time,zone,...rest] = new Date(1947,7,16).toString().split(' '); console.log('Days-In-Month\t: ',getDaysInMonth(Months.lookFor(mo),year)); console.log('Day-Of-Year\t: ',getDayOfYear(year,Months.lookFor(mo),date)); console.log('Long month\t: ',Months[Months.lookFor(mo)]); console.log('Long day\t: ',Days[Days.lookFor(day)]); var today = new Date(), Jbday = new Date(1947,7,16), daysbetween = today.dayDiff(Jbday); console.log('days between\t: ', daysbetween, 'days or', (daysbetween/365).toFixed(2), 'years'); console.log(); console.log("Spike's BDay"); console.log('new Date().toString((1951,6,30): ',new Date(1951,6,30).toString()); var [day,mo,date,year,time,zone,...rest] = new Date(1951,6,30).toString().split(' '); console.log('Days-In-Month\t: ',getDaysInMonth(Months.lookFor(mo),year)); console.log('Day-Of-Year\t: ',getDayOfYear(year,Months.lookFor(mo),date)); console.log('Long month\t: ',Months[Months.lookFor(mo)]); console.log('Long day\t: ',Days[Days.lookFor(day)]); var today = new Date(), Kbday = new Date(1951,6,30), daysbetween = today.dayDiff(Kbday); console.log('days between\t: ', daysbetween, 'days or', (daysbetween/365).toFixed(2), 'years');</script></body></html>
  23. JMRKER
    This might be a little easier to understand. See links internal to code or https://htmldog.com/techniques/pullquotes/. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pull quotes 1</title> <!-- 2 Examples of PullQuote displays From: https://htmldog.com/techniques/pullquotes/ --> <!-- // style> body { font: 13px/1.5 arial, helvetica, sans-serif; } article { width: 500px; } .pquote { float: left; /* or right; */ width: 100px; background: #ddf; font-weight: bold; padding: 13px; margin: 0 13px 13px 0; } blockquote { margin: 0; } </style --> <style> body { font: 13px/1.5 arial, helvetica, sans-serif; } article { width: 500px; } .pquote { float: left; width: 200px; background: url(/examples/images/openquote.gif) top left no-repeat; color: #030; font-size: 26px; line-height: 0.9; font-style: italic; padding: 13px; } blockquote { margin: 0; } .pquote p:first-letter { font-size: 39px; font-weight: bold; } </style> </head> <body> <article> <p>If ever there was evidence of God, the humble pea is it.</p> <p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p> <aside class="pquote"> <blockquote> <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </blockquote> </aside> <p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p> <p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p> <p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p> <p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod. </p> <p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </article> <!-- Link back to HTML Dog: --> <p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p> </body> </html>
  24. JMRKER
    Can you provide a brief example of your problem that can be viewed without downloading files?
  25. JMRKER
    Not sure if this is the actual look-and-feel of what you are trying to do, but see if this is closer that what you have posted. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- From: http://w3schools.invisionzone.com/topic/59812-question-about-accordeons/ --> <style> .hide { display: none; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .collapsible:after { content: '\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .content, .subcontent { padding: 0 18px; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } </style> </head> <body> <h2>Collapsibles</h2> <p>Collapsible Set:</p> <button class="collapsible">Open Section 1</button> <div class="content hide"> <p>Bit of intro text.</p> <!-- sub sections --> <button class="collapsible">Open SubSection 1</button> <div class="subcontent hide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <button class="collapsible">Open SubSection 2</button> <div class="subcontent hide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <button class="collapsible">Open SubSection 3</button> <div class="subcontent hide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <!-- end subsections --> </div> <button class="collapsible">Open Section 2</button> <div class="content hide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <button class="collapsible">Open Section 3</button> <div class="content hide"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <script> var coll = document.getElementsByClassName("collapsible"); for (let i = 0; i < coll.length; i++) { coll[i].addEventListener( "click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; content.classList.toggle('hide'); } ); } </script> </body> </html>
×
×
  • Create New...