View RSS Feed

JavaScript & Ajax

  1. Change viewport metatag when matchMedia detects width

    A few months ago I was involved in a discussion on the CSS Tricks forum, where a fellow developer had built some non-responsive website applications.

    The required minimum layout width was 960px, expanding wider when more space was available, but the min-width had caused issues on iPad where the initial view was zoomed in on its 768 x 1024px screen.

    I don't have access to the actual problem site, but I recreated the issue on an old non-responsive site of mine that displays ...

    Updated 10-28-2016 at 12:59 PM by Beverleyh

    Categories
    JavaScript & Ajax , Web Design issues
  2. 'SiteShow' with slides scheduled for specific times or dates (PHP/JS)

    Building on my previous SiteShow with Controls - Fade-in a list of web pages/URLs as a fullscreen 'SiteShow' blog post, this article shows you how to adapt the scripts to schedule in additional slides for certain times, or specific dates, using PHP.

    The PHP
    To start off, using the full-screen demo page as a base, we'll set a few PHP variables at the top of the page to set our local timezone and identify the time, date and weekday;
    Code:
    <?php 
    
    date_default_timezone_set('Europe/London');
    ...

    Updated 09-30-2016 at 11:43 AM by Beverleyh

    Categories
    JavaScript & Ajax , PHP coding
  3. SiteShow with Controls - Fade-in a list of web pages/URLs as a fullscreen 'SiteShow'

    Last year I wrote about my digital signage work and the mechanics of how I displayed news and updates on a web page in a Simple Sweep-in News Scroller (CSS3/JS). The web page was displayed on a large TV screen that was mounted in a lobby/reception area, with several more installations visible around the grounds. At the time, I didn't explain that along with a web page of scrolling updates, there were many additional web pages that all displayed on a cycle, with each page redirecting to the next ...

    Updated 08-11-2016 at 08:27 AM by Beverleyh (formatting code a little better)

    Categories
    JavaScript & Ajax , Web Design issues
  4. Img Src to Background-Image - Dealing with images inserted via a CMS

    This small JavaScript function converts the src attribute of an <img> tag into a CSS background-image, where background-size:cover; kicks in for visual containment and faux-cropping. In other words, it forces image size to be consistent.

    Backstory
    While I've been working with folks who update their own web pages - training them to use a CMS and the likes - one common issue that crops up has to do with the arrangement of images on a web page. Inevitably, at some point, ...

    Updated 06-25-2016 at 08:21 AM by Beverleyh

    Categories
    JavaScript & Ajax , CSS related , Web Design issues
  5. iOS 'Sticky Hover' Fix - Unhovering dropdown CSS menus

    One line of JavaScript to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element (button, link) is clicked. With this script, a tap of the surrounding area will remove hover CSS.

    What's the problem?
    In the opening paragraph, I state that a problem with hover activated CSS on iOS is that hover styles aren't removed until another element takes focus. A notable case for this is with CSS-only dropdown menus - ...

    Updated 05-30-2016 at 01:20 PM by Beverleyh

    Categories
    JavaScript & Ajax , CSS related , Web Design issues
Page 1 of 4 123 ... LastLast