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
    This selector only targets the first direct children element/s of a parent element, not including any hierarchical child element/s of the first direct child element/s within it.
  7. 1 point
    Here's an example of letting JavaScript do the work for you, once you give it required minimum data. NOTE: its not a good idea to have spacing in image file names, it tends to cause problems in coding, use underscore or hyphens instead. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style> .mySlides {display:none} .demo {cursor:pointer} </style> </head> <body> <table width="1000px" align="center" border="1"> <tr> <td class="style_shop_text" colspan="3"> <a href="/shop/shop_prod1_menu_1.shtml"> <img alt="Product 1" src="/images/site/shop/prod1.jpg"> </a> </td> </tr> <div class="w3-content" style="max-width:1000px"> <tr> <td style="width: 333px" valign="top"> <P class="style_shop_text"></br> Product - £11</br></br> Dimensions : 5cm (approx)</br></br> BLAH BLAH BLAH</br> </P> </td> <td valign="top" align="center" valign="top" colspan="2"> <img class="mySlides" src="/images/work/prod 1-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 1-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 1-3.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 2-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 2-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 2-3.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 3-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 3-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 3-3.jpg" width="400" height="400" alt="Product 1"> <!-- <img class="mySlides" src="/images/work/prod 4-1.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 4-2.jpg" width="400" height="400" alt="Product 1"> <img class="mySlides" src="/images/work/prod 4-3.jpg" width="400" height="400" alt="Product 1">--> </td> </tr> <tr> <td> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="xxxxxxxxxxx"> <table> <tr> <td> <input type="hidden" name="on0" value="Product_combo"> </td> </tr> <tr> <td> <select name="os0" id="Product_combo"> <option value="Product 1-1" data-src='["prod 1-1", "prod 1-2", "prod 1-3"]'>Product 1 £11.00 GBP</option> <option value="Product 1-2" data-src='["prod 2-1", "prod 2-2", "prod 2-3"]'>Product 2 £11.00 GBP</option> <option value="Product 1-3" data-src='["prod 3-1", "prod 3-2", "prod 3-3"]'>Product 3 £11.00 GBP</option> <!-- <option value="Product 1-4" data-img-index="9" data-src1="/images/work/prod 4-1.jpg" data-src2="/images/work/prod 4-2.jpg" data-src3="/images/work/prod 4-3.jpg">Product 4 £11.00 GBP</option>--> </select> </td> </tr> </table> <input type="hidden" name="currency_code" value="GBP"> <!-- <input type="image" src="http://www.mywebsite.co.uk/images/site/button_add_to.jpg" border="0" name="submit" alt="PayPal – The safer, easier way to pay online."> <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">--> </form> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" > <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="xxxxxxxxxxxxxx"> <input type="hidden" name="display" value="1"> <!-- <input type="image" src="http://www.mywebsite.co.uk/images/site/button_view_cart.jpg" border="0" name="submit" alt="View Shopping basket"> <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">--> </form> </td> <div class="w3-row-padding w3-section"> <td colspan="2" valign="top"> <table width="100%" border="0" valign="top" id="imageTable"> <tr> <div class="w3-col s4" valign="top"> <td style="width:33%" align="center"> <img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_1" height="200" src="/images/work/prod 1-1.jpg" width="200" alt="Product" onclick="currentDiv(1)"> </td> </div> <div class="w3-col s4" valign="top"> <td style="width:33%" align="center"> <img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_2" height="200" src="/images/work/prod 1-2.jpg" width="200" alt="Product" onclick="currentDiv(2)"> </td> </div> <div class="w3-col s4" valign="top"> <td style="width:33%" align="center"> <img class="w3-opacity w3-hover-opacity-off" id="prod_menu_image_3" height="200" src="/images/work/prod 1-3.jpg" width="200" alt="Product" onclick="currentDiv(3)"> </td> </div> </tr> </table> </td> </div> <tr> <td colspan="3"> </BR> </td> </tr> </div> </table> <script> $("#Product_combo").on('change', function() { parentTable = document.getElementById("imageTable"); imgTag = parentTable.getElementsByTagName('img'); dataSrcArray = JSON.parse($(this).find(":selected").attr("data-src")); $.each(imgTag, function(key) { $(this).attr('src', "/images/work/" + dataSrcArray[key] + ".jpg"); }); var myslideElem = document.getElementsByClassName("mySlides"); $.each(myslideElem, function(indexkey) { $(this).css({"display": "none"}); myslideThis = $(this); $.each(imgTag, function() { if (myslideThis.attr('src') === decodeURIComponent($(this).attr('src'))) { $(this).attr("title", indexkey + 1); $(this).attr("onclick", "currentDiv(" + (indexkey + 1) + ")"); } if (decodeURIComponent(imgTag[0].src).indexOf(myslideThis.attr('src')) !== -1) { //imgTag[0].attr('src', myslideThis.src); myslideThis.css({"display": "block"}); } }); }); }); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } var slideIndex = 1; showDivs(slideIndex); function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("product_slides"); if (n > x.length) { slideIndex = 1; } if (n < 1) { slideIndex = x.length; } for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace("w3-opacity-off", ""); } x[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " w3-opacity-off"; } </script> </body> </html> Now could add extra custom data for image path, or add full image file name and path, (but it looks cleaner without the path) to data-src, up to you.
  8. 1 point
    I wasn't referring to the for loop, I was talking about the variable definition. The error message says you are using a tuple, and like it points out tuples do not have an insert method (you misspelled that in the error message). If that's true, then it sounds like you've defined the variable using parentheses instead of square brackets, which is why I was asking if that is the actual code you are executing or if you copied and pasted that code from another source.
  9. 1 point
    Misplaced ',' instead of ' ' in margin styling, and ending semi-colon ';' for 'src = val' document.getElementById('btn').onclick = function() { var container = document.createElement("div"); container.style.maxWidth = "270px"; /* just for testing purposes dsonesuk*/ container.style.backgroundColor = "red"; /* just for testing purposes dsonesuk*/ container.style.display = "inline-block"; /* just for testing purposes dsonesuk*/ container.style.verticalAlign = "top"; /* just for testing purposes dsonesuk*/ //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; /* replaced ',' with ';' dsonesuk */ img.src = src; //document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px 50px"; /* removed ',' dsonesuk*/ //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.style.display = 'block'; des.style.backgroundColor = "green"; /* just for testing purposes dsonesuk*/ /* des.style.top = '0px'; des.style.left = '0px'; removed because obsolete without position used dsonesuk*/ des.style.height = "160px"; des.style.padding = "10px"; des.appendChild(tex); //also tried tex.appendChild(des); container.appendChild(img); container.appendChild(des); //container.appendChild(tex); also tried this document.body.appendChild(container); }; With css and class Name <style type="text/css"> .img_descrip_wrap { display: inline-block; max-width: 270px; vertical-align: top; } .img_descrip_wrap img {width:150px; height: 150px; padding:10px; margin: 0 50px; display: block;} </style> document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); container.className = "img_descrip_wrap"; var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val; img.src = src; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(img); container.appendChild(des); document.body.appendChild(container); };
  10. 1 point
    var SelOrderArray=[]; $.each($selected,function(i){ //loop through selected possible multiple selected options if(SelOrderArray.indexOf($selected[i]) === -1){ //if current looped through $selected value not in array then add to array SelOrderArray.push($selected[i]); } }); // loop through ordered array of slected options $.each(SelOrderArray,function(i){ //clone element with specific id to temp storage variable var TmpDivClone = $("#"+SelOrderArray[i]).clone(); //remove current existing element with specific id $("#"+SelOrderArray[i]).remove(); // prepend temp cloned element to div #result wrapping mydiv1 elements so prepending remains below dropdown and show TmpDivClone.prependTo('#result').show(); }); Not tested, written on tablet
  11. 1 point
    Please don't rot your mind with an editor!!!! :)You learn so much more by using notepad and hand coding. You develope much stronger coding skills. Even with .Net I use Notepad at home...I only us VS.net at work because I have to.Just my opinion though.
×