Jump to content

Leaderboard


Popular Content

Showing most liked content since 09/07/2011 in all areas

  1. 2 points
    Included files must have <?php ?> blocks around the code.
  2. 2 points
    There's nothing formal to tell you things like that. People do it themselves, and it tends to illustrate the Dunning-Kruger effect. People who just recently started tend to rate themselves highly, and only when you get more into something do you realize how much you don't know. I wouldn't put any weight on things like that. If you want to evaluate someone's capabilities look for a portfolio or things they've actually finished.
  3. 2 points
    You had wrongly referenced a JavaScript function, and wrongly named a css selector so very important position: relative was not applied. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0} .mySlides {display:none; width: 100%;} /* Slideshow container */ .slideshow { /*NOT slideshow-container*/ max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #f44336; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div id="wrapper"> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <a class="prev" onclick="plusDivs(-1, 0)">&#10094;</a> <a class="next" onclick="plusDivs(1, 0)">&#10095;</a> <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1, 0)"></span> <span class="dot" onclick="currentDiv(2, 0)"></span> </div> </div> <hr> <div class="slideshow w3-container w3-half"> <div class="w3-content w3-display-container"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_nature_wide.jpg"> <img class="mySlides fade" src="https://www.w3schools.com/howto/img_fjords_wide.jpg"> <a class="prev" onclick="plusDivs(-1, 1)">&#10094;</a> <a class="next" onclick="plusDivs(1, 1)">&#10095;</a> <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) --> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentDiv(1, 1)"></span> <span class="dot" onclick="currentDiv(2, 1)"></span> </div> </div> <script> var slideIndex = 1; var z = document.getElementsByClassName("slideshow"); for (i = 0; i < z.length; i++) { //set custom data attribute to first current image index z[i].setAttribute("data-currentslide", 1); showDivs(z[i].getAttribute("data-currentslide"), i); } function plusDivs(n, j) { //get custom data attribute value of current image index to slideshow class index j slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]); showDivs(slideIndex += n, j); } function currentDiv(n, j) { showDivs(slideIndex = n, j); /* showDivs Not showSlides*/ } function showDivs(n, j) { var i; var z = document.getElementsByClassName("slideshow")[j]; var x = z.getElementsByClassName("mySlides"); var dots = z.getElementsByClassName("dot"); if (n > x.length) { slideIndex = 1 } if (n < 1) { slideIndex = x.length; } //set custom data attribute to current image index z.setAttribute("data-currentslide", slideIndex); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } </script> </div> </body> </html>
  4. 2 points
    I don't know where there's a list. Generally you should never develop for specific devices, you should just make your layout flexible enough (with help of media queries) to wotk on any screen regardless of size. This is usually achieved by testing your page in the responsive mode of your browser and resizing the viewport until it breaks, then you add a media query to correct the layout. But for reference, I start off with a design for the following devices, then make extra adjustments later: Small mobile (iPhone 4):Up to 374px (I usually use this just for specific elements that didn't fit) Mobile or small mobile in landscape): Up to 767px Tablet portrait: 768px Tablet landscape: 1024px (breakpoint usually between 800px and 900px) Desktop: 1025px and above Some people make designs for large desktop computers (1440px and above), but that's up to you. In general, there isn't one specific strategy for responsive design, this is just the approach from the companies I work with.
  5. 2 points
    Like astralaaron said using closest class and the index class in jquery you can get the index of the tr, have a look at the fiddle. https://jsfiddle.net/8hL46ftj/ hope this helps $('img').click(function(){ alert($(this).closest('tr').index()) })
  6. 1 point
    You would want to merge the two arrays, you can use array_merge() for that.
  7. 1 point
    I always use a single numeric ID as the primary key unless I have a really good reason to do anything else, like if it is only a lookup table with 2 columns and then I make both columns primary. The ID is used internally by the database only and would never need to be changed, I do not use it as an identifier that anyone else would need to know. If you want to give your podcasts a number for people to identify them, make that another database field other than the ID. If you want a revision number, make that another database field. That way the ID will refer to a specific episode and revision. For as long as I've been doing this I haven't found a great use case for not just using an auto-increment primary key. No, it's one of storage. A char field always stores the maximum number of characters that the field allows. A varchar only stores what is necessary but has a maximum length. See here for storage requirements. Note also that an int field always uses 4 bytes regardless of the length you gave it. If a number has a smaller range than use one of the smaller int types. I agree, and that is what char fields do, they always store the maximum number of characters. You would only use a char field if the values will always be the same length, like for a GUID. So why not utf8_unicode_ci? Do you want to allow people to have the same username with different capitalization or characters that look the same but are different unicode code points? That's what using utf8_bin would allow, it looks at binary data only and does not take into account case or whether two characters have the same meaning but are different code points. It's just a question about data normalization. Databases have been around for decades, we have this figured out now. If there is a one-to-one relationship, that goes in a single table. If there is a one-to-many relationship, that's a parent and child table. If there is a many-to-many relationship, that's 2 tables with a third lookup table. The database is specifically designed to work with this kind of data, let it do its job. Don't increase the time required to insert, update, or select data because it's less complex for you. Data storage should be optimized for a computer, not a person. You can display it however you want it to show up, but make it easy for the database to do its job. That should be an auto-increment primary key. There's no reason to store a counter like that in a table, you can use SQL to get the count and then it's always going to be correct and you don't have to worry about updating it when things change. The way that's set up now, if you select the rows and order them by ID then it makes the count redundant, you don't need to store that data. I do use columns like that for display order if I want to allow the display order to be specified (as opposed to ordering by date or some other field), where it will be a sequential series, but if you're only storing the count there's no reason to do that.
  8. 1 point
    What happens when you increase the width of your window? Is your viewport large enough to see both tables side-by-side? I ask this, because this is how you have them positioned with your CSS. .scColl {position:absolute; top:0; left:0; width:1050px; height:2000px; border:2px solid red;} .scTot {position:absolute; top:0; right:0; width:250px; height:2000px; border:2px solid red;} Both DIV elements are position top:0. One is positioned left:0 and the other right:0. This should produce a row, not column effect. Yes, XMLHttpRequest is a reserved word, but the variable to which you assign the returned object is not. It will not disturb your code to name the returned object differently. In fact, it will increase your ability to manipulate what is returned. Find the icon in the bottom right corner of any entry and pass your cursor over it. it is there where you will find the trophy. Roddy
  9. 1 point
    div>p {background-color: yellow;} Will set paragraphs that's a direct child element of parent element div with background yellow https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_element_gt it won't change paragraphs nested within other child elements of the div parent. div p {background-color: yellow;} will change ALL child paragraphs within parent div whether they are nested or not. :root will target the <html> element, it being the outermost containing element (root) * universal selector: meaning target ALL elements. : single colon used for pseudo classes such as :hover, :link, : visited :: used for pseudo element ::after, ::before used to create content before or after a elements content, NOTE: older IE browsers use the single colon, but both can be used for modern better browsers than IE and Edge.
×