Jump to content


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by Nillervision

  1. Jquery viewport trigger

    This method returns true if the current element is in the viewport jQuery.fn.isInViewport = function() { var elementTop = jQuery(this).offset().top; var elementBottom = elementTop + jQuery(this).outerHeight(); var viewportTop = jQuery(window).scrollTop(); var viewportBottom = viewportTop + jQuery(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }; Usage: if (jQuery('.my-element').isInViewport()) { //do something } DEMO: https://jsfiddle.net/Nillervision/fmgjbkps/ Note that this example is not listening for scroll events (which can be heavy for the browser) Instead the function is running on each animation frame: I'm not 100% sure but I think this give you a better performance because each frame is parsed by the browsers js engine anyway, and the interval between the frame "events" is determined by the device itself: var scroll = window.requestAnimationFrame; function loop() { if (jQuery('.my-element').isInViewport()) { //do something } // Recall the loop scroll(loop) } // Call the loop for the first time loop(); To support old browsers you can fallback to vendor prefixes or even a timer var scroll = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || // fallback to timer function(callback) { window.setTimeout(callback, 1000 / 60) };
  2. WooCommerce Size etc. Dropdown option

    This functionality is build into woocommerce it is called variable products. https://docs.woocommerce.com/document/variable-product/
  3. I'm sure this is only an issue because you have some links containing the query string somewhere on your site. Probably because of a quick copy/paste action, check the urls in your menus and inline links in your posts.
  4. What is the correct order of a site design

    Take a look at this test. Test Five: Background Image Where Desktop Image Set with Min-Width https://timkadlec.com/2012/04/media-query-asset-downloading-results/ Edit: I also found this: Source: https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/
  5. What is the correct order of a site design

    OK. Let me explain how I've reached this conclusion. Mobil first is a progressive enhancement model (at least from what I read everywhere). That means that our core product is designed to support the devices with the most limited features (in this case screen size/resolution) After we have provided our initial styles we gradually check if the device supports larger resolutions and if so we enhance the initial features (Alows the content to float in to columns etc.) If we were structuring our CSS in a way were the core styles (initial rules) would apply to larger screens and gracefully degrade to smaller screens, we would no longer be designing after a progressive enhancement model.
  6. Could be that the sitemap generator is indexing search results. ?s= is the url key that WP uses for search queries. If you are worried that search engines will make the same "mistake" as the sitemap generator you could take one of these precautions: Note: First of all go through the internal links on your site and make sure you dont have any links with the search query string in it. METHOD 1 In your robots.txt file add this line to prevent indexing of any search queries Disallow: /*?s METHOD 2 In your documents head element (probably located in header.php) you can use a Wordpress function to check if the page is the search result page (which can have endless amounts of URLs) and add a robots meta tag. <?php if ( is_search() ) { echo '<meta name="robots" content="noindex">'; } ?> Or use the Youst settings to do it manually on each page. (you can also manually set a canonical url) https://kb.yoast.com/kb/canonical-urls-in-wordpress-seo/ METHOD 3 Submit a sitemap to Google, Bing and other search engines with only the URLs you want indexed
  7. What is the correct order of a site design

    Not entirely. The mobile first approach also has to do with the structure of your CSS. All your your initial CSS (outside any media queries) would be the only CSS loaded on the smallest screens. Overrides to these initial styles would be placed in min-width media queries and would ONLY be loaded on larger screens which often goes hand in hand with faster connections. When using the desktop first approach the initial CSS rules would be for the largest screens possible. Devices with small screens would have to read all this CSS code only to have it overridden later by styles defined in max-width media queries.
  8. Looking for constructive criticism/feedback

    First of all thanks for making good use of my pure CSS slider @GrahamUK33 If you want I can place a HQ link on the tutorial page so people can see an example on a live production. Back on topic: When in doubt. I think it is always good to give the user a choice. Some users like scrolling, other users might prefer other options. To accommodate for this you could place a bar at the top of the timeline with either inputs for filtering or simple links, like @fisicx suggested. Here's an example fiddle: https://jsfiddle.net/Nillervision/9z3sqm1o/
  9. With "rendering" do you mean the browsers WebGL API? If so remember that everything in your 3D scene has to be compiled to JavaScript and transferred to the client over http and interpreted and rendered in a browser (which BTW was never designed for 3D calculations). With that in mind WebGL is pretty amazing. No matter what software you use to publish your 3D models on the web, you will see performance problems and slow load times if your scenes are to complex. Also, you never know the users specs (graphic card, CPU etc.) so it's really important to optimize your scenes as much as possible. A few tips for optimization: Bake details into a normal map and use the decimate modifier to reduce the polycount afterwards. Limit the number of light sources to a minimum and bake ambient occlusion and shadows into your textures rather than having them calculated in real time. Compress your bitmap textures as much as posible, and try to fit your textures to square images (256x256, 512x512 and 1024x1024 with JPEG compression usually works well) If you have repeating/ similar objects in your scene, use instances (objects with the same mesh and material data) rather than unique copies EDIT: You might also consider at gzip compression. You can either enable that in your servers configuration (.htacces file) or for the individual 3D scene
  10. My first computer

    If there are any geeks on this forum (Nah, probably not...) this might excite you. I was recently cleaning up and found this baby in the basement. I got it back in '92 or '93. Unfortunately I can't seem to find the power supply. But it should be fairly easy to build a new one. The specs are top-notch for the time. Commondore Amiga 1200HD 4 mb ram 120 mb build in hard drive (I wonder what's on it) Motorola 68EC020 14 MHz CPU 8 bit graphics (256 colours) Love the yellow coating that time has given it.
  11. Front end before or after backend?

    Most people would probably think that developing the logic to store and fetch data first, and worry about the UI later would be the best approach. But on larger projects I think it's a often a good idea to involve a frontend dev, a backend dev and a designer and have them workout the solutions together from the start. That is the model we use on complex projects at my workplace. Here is some of the reasons why. Estimates A project manager needs estimates and you can't really ask a backend dev what a logo design, or an animation will cost. Visualizing concepts The designer is usually better to communicate with the client/external shareholders because he/she can visualize the concepts with wireframes, mockups or moodboards. It is always important to have the concepts visualized, defined and agreed on before any coding starts, so that the developers don't have to rewrite large amounts of code later in the process. Better code/markup You can have the front end dev working on the UI and template/view files as soon as the visual concepts are approved by the client. The frontend dev can start by inserting dummy content in hardcoded html or even code functions that returns dummy content (if he/she knows a bit of backend). This can be a big help for the backend dev because, even though the functions would have to be rewritten, the backend dev would have a clear idea about what markup the frontender expects in the returned data. Better solutions Many problems have solutions that can be solved in both the backend and frontend domains. How do you find the best solution if your devs do not work together from the start? Say your backend dev have coded a function that fetches data via a slow external API. But the interface also have a filter function. Lets say a simple show-only-new-content-button. Instead of having the backend dev post back an argument to the function and perform a new slow API call, maybe the frontender could just code a JavaScript function that simply hides the older content when the button is clicked.
  12. Not a wordpress site

    A CMS will often be more vulnerable than PHP/HTML pages with hardcoded static content. If the CMS (or installed plugins) is poorly written, hackers can inject msql queries in form inputs or the address bar. However a site that does not use a database connection can also be hacked because the hacker can inject scripts with file operations and delete/alter your files. But if you write-protect your files, sanitize all your textinputs, and url queries, and you make sure that all your included class/funtion files have the .php extension (so no one can download them and see your code) you are making it extremely difficult to hack the site. EDIT: If your site uses a database the best way to secure it is to use prepared statements: http://php.net/manual/en/pdo.prepared-statements.php
  13. There is no way to make sure all colors will look the same in different applications. It depends on the systems and graphic cards settings for color management. You might be able to configure the settings for different applications under your graphic card settings. Make sure all applications uses the same color profile. Most browsers should suppport sRGB. Applications like PhotoShop uses advanced color management like AdobeRGB color profile which tend to render colors with more saturation than sRGB, color management in browsers are much more limited. EDIT: for more consistent results make sure your icons are saved as sRGB: https://om4.com.au/client/preparing-images-color-profiles-srgb-adobe-rgb/
  14. Nah. I think we're done. Let's wrap it in a <center> tag in the table heading and we're good to go. On second thought it might even be so good that we should to use it as a splash screen with an "enter site" button underneath. Edit: And the "Best viewed in Netscape" disclaimer of cause
  15. Jacks logo is almost perfect, it just needed to be animated.
  16. New site! Let us know what you think.

    The problem could be solved by closing the topic for everyone except the OP (and maybe users who have already commented on the topic) Thanks
  17. New site! Let us know what you think.

    No complaints from me, everything looks good, except maybe the posts are a bit to too wide on larger screens, resulting in veeeeery loooong lines of text.
  18. Gimp will allow you to create bezier curves when editing, but as soon as you add a stroke or fill to the curve the result will be a raster image. InkScape is IMO the best free alternative to AI. (Why do you hate it?) BTW if you go for inkScape, use the optimized SVG option, to remove unnecessary metadata, comments etc.
  19. Responsive menu not working

    There is a few issues first of all classnames must be separathed with a space This: if (x.className === "navigation-desktop") { x.className += "navigation-mobile"; } will result in: class="navigation-desktopnavigation-mobile" So you should ad a whitespace before the classname if (x.className === "navigation-desktop") { x.className += " navigation-mobile"; } or even better have a look at classList.toggle For the CSS you should remove the whitespace between .navigation-desktop .navigation-mobile You do not want to target a child element but the same element with the ekstra classname. I did a few other changes to your code (removed the click event from the HTML markup and added it to the script instead) Here is a working fiddle And here is the entire source: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> html,body { font-family: 'Open Sans',sans-serif; background-color: #ffffff; margin: 0px; } .container { position: relative; clear: both; padding: 0px; margin: 0px; } .navigation { background-color: #000099; height: 400px; color: #ffffff; } .navigation-desktop { overflow: hidden; background-color: #333; } .navigation-desktop a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navigation-desktop a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .navigation-desktop .icon { display: none; } /*-- solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+. --*/ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 */ } @media screen and (max-width: 1024px) { .navigation-desktop a:not(:first-child) { display: none; } .navigation-desktop a.icon { float: right; display: block; } .navigation-desktop.navigation-mobile { position: relative; } .navigation-desktop.navigation-mobile .icon { position: absolute; right: 0; top: 0; } .navigation-desktop.navigation-mobile a { float: none; display: block; text-align: left; } } </style> </head> <body> <div class="container navigation group"> <div class="navigation-desktop" id="myNavigation"> <a href="index.html" class="active">Home</a> <a href="index.html">Item 1</a> <a href="index.html">Item 2</a> <a href="index.html">Item 3</a> <a id="burger" href="#" style="font-size:15px;" class="icon">☰</a> </div> </div> <script> function myFunction(event) { event.preventDefault(); var x = document.getElementById("myNavigation"); if (x.className === "navigation-desktop") { x.className += " navigation-mobile"; } else { x.className = "navigation-desktop"; } } var burger = document.getElementById('burger'); burger.addEventListener('click', myFunction); </script> </body> </html>
  20. Urgent - Please Help!

    If you don't know how to code a site to match a mockup you shouldn't take the job. There are plenty of "shortcuts" (site builders, frameworks, themes, plugins etc.) in the world of web development, but they will not be of any help if you don't know what you are doing.
  21. You're welcome. Just happy to help
  22. Photo Gallery CMS

    Why not just install a CMS in a subfolder and let your client use the CMS to upload/delete the images. Then you just run a php script, on your bespoke page, that loops through all files in the media upload folder and echoes out an image-link for each result (PHP has functions to match specific patterns so you could probably get the cms-generated thumbnails as well) For each link you would of course also have to add the data or rel attributes that your favorite lightbox requires
  23. Generating content with JS does not guarantee that it will not be indexed . Google and other search engines can actually run JS on a page and decide that the generated content should be indexed. There are better ways to do exclude content from indexing. Try a noindex tag: <html> <head> </head> <body> <p>This content will be indexed</p> <!--noindex--> <p>This content will not be indexed</p> <p>Place your animation elements here</p> <!--/noindex--> <p>This content will be indexed</p> </body> </html> BTW your JavaScript syntax is wrong. It is innerHTML not InnerHTML, and the ID you want to select is a string so it should be in quotes document.getElementById("the-id-must-be-in-quotes").innerHTML = "The string you want to generate";
  24. Tables for Lightbox

    Yes, You get the idea
  25. Tables for Lightbox

    Get rid of the table elements and table row elements. Use divs instead. By changing the divs display property to table/table-row/table-cell you can get the same visual behavior as you would with "real" table elements.