Skip to main content

Forums

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 240 total)
  • Author
    Posts
  • in reply to: jQuery toggle doesn't work #261591

    bearhead
    Participant

    I’ve updated my pen to allow both to be closed at the same time.

    in reply to: jQuery toggle doesn't work #261582

    bearhead
    Participant

    Hi Ayala, is this the functionality you are looking for?

    I made the .more divs children of their respective .question divs (I think it simplifies the js) .

    Also, if you’re using jquery you need to make sure that the library is linked. In code pen you can do this by opening the js settings and selecting jquery under add external javascript.

    in reply to: Let's have an honest discussion about Minification #261176

    bearhead
    Participant

    Many developers work with prettified, well documented css, and then have a minified version generated automatically during the build process – it’s part of their work flow, so it doesn’t really take any effort. Plus they’ll never need to look at the minified files directly.

    I can’t think of many situations where a developer would want or care that a page’s css is easily read by visitors using view source.

    You can optimize images/gzip and still also minify css, html, and js files.

    Even if 30kb doesn’t impact performance noticeably, it is still extra data that the user is going to have to pay for if they’re on a mobile network.


    bearhead
    Participant

    yeah margin:0 auto; is going to be the most elegant solution… unless you want content in the other two columns eventually?

    in reply to: How would you tackle this page with Flexbox #257608

    bearhead
    Participant

    I agree with Paulie_D’s method for section A.

    For section B I would use css columns.

    in reply to: middle align (vertical) content in LI #257488

    bearhead
    Participant

    I would remove the div around the image, and applies the .icon class directly to it. Then add vertical-align:middle to .headline, .replies, and .icon:

    https://codepen.io/kvana/pen/NvpxGv

    in reply to: First- and last-of-type pseudo selectors. #257164

    bearhead
    Participant

    yes, p.test:last-of-type {color: yellow;} means apply yellow color to the last p with class test.

    The class isn’t ignored… it is important to raise the specificity of your selector, maybe the below example will clarify:

    The last-of-type selector targets the last type of an element. So if you were to write the selector as just .test:last-of-type and then have a p element followed by a span in your html (both with class test), both would be changed to yellow.
    example:

    https://codepen.io/kvana/pen/zdvJwj

    but if you write p.test:last-of-type, only the last p with class test will be yellow. That’s what I mean by the last of type targets elements and not classes.

    in reply to: First- and last-of-type pseudo selectors. #257131

    bearhead
    Participant

    In your example, you’re not applying the last-of-type selector to a specific class, instead you are applying it to last child p element of a given div with a specific class.

    BUT

    You should be able to accomplish what you are after… in fact you have the correct css for such in your demo. div.test2 p:last-of-type.

    Just note that the last of type selector is being applied to the p element and not the div.

    in reply to: Filtering tags? #256618

    bearhead
    Participant

    In that case it might be better to just use class names as tags:

    in reply to: Filtering tags? #256613

    bearhead
    Participant

    Here is a very simple example of how to show/hide divs based on data-* attributes (your “tags” essentially) with javascript:

    If you want animation, you’ll have to add/remove classes instead of just changing the display style directly.

    I would not recommend implementing this kind of interaction with only css.

    in reply to: change child div in parent's animation #254440

    bearhead
    Participant

    You can just add color declarations to the animation:


    bearhead
    Participant

    You have some rogue characters on lines 13 and 14:

    }
    */
    

    If you clean that up the row element will center as expected.

    If you want the columns centered in the row, you’ll have to change some things… either change the column widths to percentages, or give the row a fixed width. It would also be a good idea to use the clearfix hack on the row element.

    Ultimately it would probably be better to just use flexbox, unless you’re designing specifically for legacy browsers.

    in reply to: Is it possible for someone to create their own app? #254076

    bearhead
    Participant

    You’ll have to check out those services to see what their requirements are.

    Here is a link for google play: https://support.google.com/googleplay/android-developer/answer/113469?hl=en

    in reply to: Centering loading dot loop #254069

    bearhead
    Participant

    something like this maybe?
    https://jsfiddle.net/8huv76tp/

    in reply to: WebP images and Google Pagespeed Insights #254064

    bearhead
    Participant

    Are you using an “onerror” event on your webp images as a fallback? If so, maybe Pagespeed insights doesn’t like the javascript there?

    I honestly don’t know very much about webp images… a little searching did return some results of similar issues to your own, no real solutions though.

    If your page is loading reasonably fast, I wouldn’t get too concerned about what pagespeed insights is reporting.

Viewing 15 posts - 16 through 30 (of 240 total)
icon-link icon-logo-star icon-search icon-star