Grow your CSS skills. Land your dream job.

Injecting html for mobile-first

  • # September 17, 2013 at 3:56 am

    Hi, I’m coding a site and I’m using the “mobile-first” approach since it’s responsive. I have a slider which I don’t like to be visible in mobile version, right now I just made it display: none and I just make it visible on 600px up. So all assets(images,tags,etc) are downloaded still in mobile, right?

    How should I do this? Could I inject all html code for my slider using javascript when width = 600px up? How can I fire that javascript in css media queries?

    Thanks.

    # September 17, 2013 at 6:09 am

    Hi, I’m coding a site and I’m using the “mobile-first” approach since it’s responsive. I have a slider which I don’t like to be visible in mobile version, right now I just made it display: none and I just make it visible on 600px up. So all assets(images,tags,etc) are downloaded still in mobile, right?

    Correct.

    How should I do this? Could I inject all html code for my slider using javascript when width = 600px up? How can I fire that javascript in css media queries?

    I would keep it the way it is. It’s going to be a b**tch to inject HTML when it’s 600 and up without reloading the page (imagine when you have a tablet that’s 400 wide in portrait mode, and then you change orientation into landscape mode — all of a sudden you’ll need to inject HTML). In essence, that’s the “basic” way to go with media queries: showing and hiding stuff.

    Then again, maybe I’m just lazy. ;)

    # September 17, 2013 at 8:03 am

    How about keeping it that way but I will use Source Shuffling (http://www.jordanm.co.uk/lab/sourceshuffling “”) or any better way of changing the image when media query is met?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".