Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Forum Replies Created

Viewing 15 posts - 31 through 45 (of 67 total)
  • Author
    Posts
  • in reply to: Media Queries for JS? #169221
    Chromawoods
    Participant

    I’ve used jRespond on several projects and it is working very well. Might be overkill if you only have one single function to trigger, but once your project grows and more JS needs to trigger on breakpoints, it’s a nice lib to have.

    Plus, it also does some nice things for performance, like window resize event throttling.

    https://github.com/ten1seven/jRespond

    in reply to: AJAX page transition effect #169021
    Chromawoods
    Participant

    Something like this? (might be a bit sloppy, but hopefully you get the idea)..
    http://codepen.io/chromawoods/pen/nywfc

    The trick here is to use a callback function for jQuery’s fadeOut function, which fires after the animation is done. So basically, first fadeOut the content. Then, fetch the new content and fadeIn. You could also add a loading animation between the first content has faded out and the new content begins to fade in.

    in reply to: Using Gruntfile.js? #168080
    Chromawoods
    Participant

    Plugins totally vary depending on the size and complexity of the project. The ones I usually use regardless are: jshint, concat, uglify, sass and watch

    And then as the project grows, more might be needed (I probably forgot some):

    bump – for better controlling the version of your app
    yuidoc – if more devs are working on the same project, documentation is nice
    copy – depending on different vars or environments, sometimes you don’t want to process a file, just copy it to another location
    replace – I sometimes use this to replace strings in my JS-config module. For example, it can replace something like devMode = %DEV_MODE%; to devMode = true; depending on Grunt params
    newer – only operate on src files that have actually changed
    imagemin – optimize images

    in reply to: Error with variables in JavaScript #167570
    Chromawoods
    Participant

    Uncaught ReferenceError: $ is not defined

    You have not included jQuery?

    in reply to: Sidebar Problems #166918
    Chromawoods
    Participant

    Without knowing, I would suspect that flex-box would solve that problem, but that solution might not be all good depending on which browsers you need to support.

    However, there is an ol’ CSS hack for making a column fill the entire height. Might be a solution for you. See this pen:

    http://codepen.io/chromawoods/pen/fodaF/

    Notice the huge padding and negative margin on the sidebar, along with overflow-y: hidden on the containing element. That’s basically it.

    in reply to: [Solved] Trying to understand css container shadows #166822
    Chromawoods
    Participant

    EDIT: Was going to ask for a code example but then you posted one, GJ! :)

    Also, you can play around with http://css3generator.com/ if you want to experiment and see how the shadow behaves depending on its configuration.

    in reply to: IE8 Loading issue.. #166817
    Chromawoods
    Participant

    Need a bit more info.. What have you tried so far? Do you have a code example?

    When you say “gradients” I assume you’re talking about CSS3 gradients? They won’t work in IE8 without a polyfill or a CSS filter property if I’m not mistaken.

    How are you testing for IE8? Are you using Emulation in IE’s Developer Tools or are you running a real native installation?

    in reply to: hover effect on divs with same id #166472
    Chromawoods
    Participant

    Something like this? http://codepen.io/chromawoods/pen/zKdwk/

    Like @Paulie_D said, you should never use the same ID attribute more than once on a page. However, when capturing an event with jQuery, you can target the specific element using $(this), even if your original jQuery selection was targeting a whole class of elements.

    In my example, I make a selection on any .box element but then I use $(this) to add/remove a CSS class on the currently hovered box. You can do whatever you need to the targeted element.

    in reply to: Click to call – function #166293
    Chromawoods
    Participant

    Wow. Yeah that might be it. Totally different story. Can’t help you there. :)

    in reply to: Click to call – function #166246
    Chromawoods
    Participant

    If you’re using jQuery:
    https://api.jquery.com/on/

    For example:

    $('#my-element').on('click', myFunction);
    

    If you want to use straight up JavaScript:
    https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

    Plenty of examples there. For plain JS, your code might need to look different depending on what browsers you need to support.

    Chromawoods
    Participant

    Use your console to detect syntax errors in your JavaScript. There’s a stray curly brace:

    Line 109: } --- Expected '(end)' and instead saw '}'

    Start there.

    in reply to: Matchmedia & listener not working #166033
    Chromawoods
    Participant

    You can’t just specify 700 – you need to define what kind of measurement you are using, for example px or em.

    So if you want to use pixels in your example, you would do min-width:700px.

    in reply to: Change Body Border color on Scroll #165538
    Chromawoods
    Participant

    Sure. Here’s a fork: http://codepen.io/chromawoods/pen/Iulgb

    So, basically the jQuery selection is already done and has a reference every time the event fires, which can be quite frequently. We do the heavy lifting before bombarding the browser with onscroll-events.

    in reply to: Change Body Border color on Scroll #165531
    Chromawoods
    Participant

    As a small performance improvement, might I suggest saving references to $(".corner") and $(window) outside of the scroll function? Otherwise I believe jQuery will perform that selection every time the scroll event fires, which is very unnecessary. So above the scroll function, have something like

    var $corner = $(".corner"), $window = $(window);
    

    ..and then reference those inside the function.

    in reply to: [Solved] Max-width on fluid images does not work for IE #165509
    Chromawoods
    Participant

    IE handles this fine, the error is in your CSS. You have defined the width property twice for that image rule (line 1007), and the lower one looks broken. It says “width:auto\9;”. Remove that property and stick with the “width:100%;” one.

Viewing 15 posts - 31 through 45 (of 67 total)