dsonesuk

Members
  • Content count

    8,400
  • Joined

  • Last visited

  • Days Won

    218

Everything posted by dsonesuk

  1. I don't exactly get what you mean? there is a unit vh and vw which relate to percentage of viewport/browser window area of device used
  2. That would mean you will have to adjust the background image container height to give it same aspect ratio, otherwise you would have same distorted image you experienced using 100% 100%; OR using graphics program, create same aspect ratio canvas, place image in it to fill total height, then stretch trees at sides to fill remaining space, the house will be normal, but trees depending on how good you are might be odd looking, but the main important house proportions will be OK!.
  3. Being inline, width and margins to centre won't work, with your current code just add display: block;
  4. Because they show as the order they are laid out from the beginning. There are several ways to do this, but will involve cloning the current hidden divs, in the order they were selected, removing the original hidden selected and then appending cloned divs in correct selected order.
  5. window.location.href = 'whatever.com' OR window.location.replace(‘whatever.com')
  6. With the code I provided, it does not require being placed in function, it runs its own anonymous function if a specific classed element within a specific parent id element is clicked even if a specific currently classed element already exists OR is newly created which is what 'on()' is specifically used for.
  7. <!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,user-scalable=no" /> <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> <style type="text/css"> body { background-color: #f6f6f6; width: 400px; margin: 20px auto; font: normal 13px/100% sans-serif; color: #444; } div { display: none; padding: 10px; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; margin-bottom: 5px; background-color: #f1f1f1; } a, a:visited { color: #33739E; text-decoration: none; display: block; margin: 10px 0; } a:hover { text-decoration: none; } #loadLess { display: none; } #loadMore, #loadLess{ padding: 10px; text-align: center; background-color: #33739E; color: #fff; border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; box-shadow: 0 1px 1px #ccc; transition: all 600ms ease-in-out; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; } #loadMore:hover { background-color: #fff; color: #33739E; } </style> </head> <body> <div>Content #1</div> <div>Content #2</div> <div>Content #3</div> <div>Content #4</div> <div>Content #5</div> <div>Content #6</div> <div>Content #7</div> <div>Content #8</div> <div>Content #9</div> <div>Content #10</div> <div>Content #11</div> <div>Content #12</div> <a href="#" id="loadMore">Load More</a> <!--<a href="#" id="loadLess">Load Less</a>--> <script type="text/javascript"> $(function() { $("div").slice(0, 4).show(); $(document).on('click', "#loadMore:not(.less)", function(e) { e.preventDefault(); $("div:hidden").slice(0, 4).slideDown({ }); if ($("div:hidden").length === 0) { $(this).fadeOut('slow', function() { $(this).html('Load Less'); $(this).fadeIn('slow', function() { $(this).addClass('less'); }); }); } desiredHeight(0); }); $(document).on('click', '#loadMore.less', function(e) { e.preventDefault(); $('div:gt(3)').fadeOut(); $(this).html('Load More'); $(this).removeClass('less'); var DHeight = $(window).height(); desiredHeight(DHeight); }); function desiredHeight(DHeight) { var offsetElement = $('html,body'); $(offsetElement).animate({ scrollTop: $(offsetElement).offset().top + parseInt(DHeight) }, 1500); } }); </script> </body> </html>
  8. Events like these are applied to elements on loading of the page, if you place them in a function you apply the exactly the same event with same outcome again everytime the function is called, very inefficient, generally if these are placed in function you are doing it wrong. You don't even require the function, you just need to target the parent and then the newly created class references. function addFlowLine() { var table = document.getElementById("query_content_unexe"); var row = table.insertRow(0); row.insertCell(0).innerHTML = '<button class="up">up</button>'; row.insertCell(1).innerHTML = '<button class="down">down</button>'; row.insertCell(2).innerHTML = 'add'; } $("#unexe_table").on("click", ".up, .down", function() { var row = $(this).parents("tr:first"); if ($(this).is(".up")) { row.insertBefore(row.prev()); } else { row.insertAfter(row.next()); } });
  9. These are the elements you need to target .topnav.responsive a:first-child ~ a:not(:last-child) { }
  10. I've been through this already, in great detail, but this topic was lost when upgrade was preformed, he wants the mobile menu not to appear instantly, but to slide from nothing from left to right. I explain he had 2 options 1) Reduce width of all anchor links to 0 but home and hamburger, and increase to 100% width on hover or click using css3 transition: 2) Force all menu anchor links outside beyond left edge of browser, but again not! home and hamburger, using positioning or css3 transform: translateX(); then make whole menu link come back into view (left: 0; translatex(0)) on hover or click using css3 transition: again! He want you to do it ALL for him/her.
  11. What is The news of this forum site going down? Hack? Update Problem? Someone pressing wrong button, messing where they should not? I know there was a spammer which required removing before the site went down, and I notice that some topics I replied to have gone as well! New design coding header::before { background: rgba(0, 0, 0, 0) url("w3choolsBG_.png") repeat scroll 0 0; content: ""; height: 63px; left: 0; position: absolute; right: 0; top: 0; } #ipsLayout_header header { background-color: #2c5687; margin-bottom: -125px; padding: 0 0 125px; position: relative; } #elLogo img { max-width: 100%; min-width: 358px; } .ipsLayout_container { overflow: hidden; padding: 0 15px; }
  12. The problem is not why, but the how they have done it, no friends listed, topics and members missing, configuration and dezign not finalized, in other words ill prepared, not thought out, and what should have been done BEFORE going live which I would expect from any professional developer.
  13. Hacked and made it so unusable, including DB, and NO backup? So had to go for upgrade its the only scenario that makes sense. guess we will never know.
  14. So it was hack or foul up then, if it was upgrade would it have been better to do all reconfiguration, design change, before making it live. Surely they would have had a backup as well? So restore original, while working on new.
  15. No Email notification when someone replies to topic, Think I prefer the older one.
  16. But! why has topics/ members been lost, even friends are all gone now, this is a administrator decision to upgrade, it does not automatically update, because you have to select convert 'friends' to what are called 'followers' now. IT sounds like either admin foul up on maintenance/updating, or recovering from hack which brought site down gone wrong.