Jump to content


Popular Content

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

  1. 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.
  2. 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>
  3. 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.
  4. 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()) })
  5. 1 point
    I meant display: properties not just display: inline-block. I think you are after a type of sticky footer effect, with rest of content vertically aligned middle and centre <!DOCTYPE HTML> <!-- Aerial by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>High Intensity Records</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--[if lte IE 8]><script src="http://highintensityrecords.com/assets/js/ie/html5shiv.js"></script><![endif]--> <link rel="stylesheet" href="http://highintensityrecords.com/assets/css/main.css" /> <!--[if lte IE 8]><link rel="stylesheet" href="http://highintensityrecords.com/assets/css/ie8.css" /><![endif]--> <!--[if lte IE 9]><link rel="stylesheet" href="http://highintensityrecords.com/assets/css/ie9.css" /><![endif]--> <style> body, html {height: 100%;} #footer {display: block;} #footer {position: relative; margin-top: -6em; overflow: hidden;} #wrapper {height: 100%; display: table;} #main { display: table-cell; padding:0; text-align: center; vertical-align: middle; } #main::before {content: none;} #main::after { content: ""; display: block; height: 4em; position: relative; } </style> </head> <body class="loading"> <div id="wrapper"> <div id="bg"></div> <div id="overlay"></div> <div id="main"> <!-- Header --> <header id="header"> <h1> <img src="http://highintensityrecords.com/images/hirwhite.png" alt="HTML5 Icon" width="500" height="250"></h1> <p>Bringing the <span style="font-weight:bold">highest quality </span>and <span style="font-weight:bold">intense beats</span> to flow inside your mind.</p> <p><span style="font-weight:bold">DEMOS </span>highintensityrecords@live.com</p> <p><span style="font-weight:bold">LICENSING </span>licensing.highintensityrecords@live.com</p> <nav> <ul> <li><a href="https://www.facebook.com/Highintensityrecords/" class="icon fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="https://twitter.com/highintenrecs" class="icon fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="https://soundcloud.com/highintensityrecords" class="icon fa-soundcloud"><span class="label">SoundCloud</span></a></li> <li><a href="https://soundcloud.com/highintensityrecords" class="icon fa-youtube"><span class="label">YouTube</span></a></li> <li><a href="https://www.beatport.com/label/high-intensity-records/28820" class="icon fa-headphones"><span class="label">Beatport</span></a></li> <li><a href="http://www.highintensityrecords.com/" class="icon fa-spotify"><span class="label">Spotify</span></a></li> </ul> </nav> </header> <!-- Footer --> </div> </div> <footer id="footer"> <span class="copyright">&copy; High Intensity Records 2017.</span> </footer> <!--[if lte IE 8]><script src="http://highintensityrecords.com/assets/js/ie/respond.min.js"></script><![endif]--> <script> window.onload = function() { document.body.className = ''; } window.ontouchmove = function() { return false; } window.onorientationchange = function() { document.body.scrollTop = 0; } </script> </body> </html>
  6. 1 point
    Let's start off at the very beginning. These are your requirements: But you have another requirement: So to summarize your requirements: Display popups on the page any time it loads except under the following conditions: The user arrived on the page from clicking that image. The user has refreshed the page. Now we have to determine the following: How do we know that the user clicked on that image? How do we know that the page was refreshed? The resulting logic should be very simple: if(!clickedOnImage() && !pageRefreshed()) { showPopups(); } function clickedOnImage() { // Return true if and only if the image was clicked // Return false otherwise } function pageRefreshed() { // Return true if and only if the page was refreshed // Return false otherwise return performance.navigation.type == 1; } function showPopups() { // All the code that creates the popups is in here // This code is irrelevant to the problem we're solving } How do you want to detect that the request came from the image? Is it alright to pass data in a query string or hash in the URL? You could make the image a link with the following href attribute: href="overview.html?fromimage=1" and then use the location.search property in Javascript to check for that value. Another option, if you only care that it came from the page that the image is on rather than the image itself, is to check the document.referrer property. clickedOnImage() returns true of document.referrer is " http://www.grammarcaptive.com/single_payment_acknowledgment.php "