1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript Break Point Help

Discussion in 'JavaScript' started by KewL, Jun 8, 2016.

0
  1. #1
    Hey guys, I'm trying to make a little javascript plugin. In this plugin I need to do stuff when CSS breakpoints are hit. I know the standard method for this is checking is for css property values (since window width stuff is not always in sync).

    So my idea was to append an element #sizeCheck and styles that change the z-index with the CSS breakpoints.

    So basically I appended a <style> element and a #sizeCheck div. Then i set up a debounced window resize listener and used .getComputedValue(), but that returns the original value of "auto" every time, my appended styles don't register (even though it dev tools it says they are).

    Anyway how can I make my method work? or is there a better way to do this?

    No jQuery answers please, and nothing that has to be hard coded in the css file.

    Thanks!
     
    KewL, Jun 8, 2016 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi KewL.
    So when window resizes, that listener will check the width of div#sizeCheck,
    and based on that width listener will then perform something... is that it?

    Hendra
     
    hdewantara, Jun 8, 2016 IP
  3. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #3
    I'm trying to avoid using widths. I guess checking the width of the element would work huh? I've done window width in the passed and it wasn't the same points as the css.
     
    KewL, Jun 8, 2016 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    Agreed. Further, if breakpoints have already detected the widths why bother detecting it again with javascript, correct?

    Not sure if the following helps but I had a thought long long ago about a script. I called it "css based script" and it is as follows: a page has an array of texts and page has to display one of the TEXT along with its LENGTH, based on screen width. Former task can be achieved by CSS media queries, but not the latter (counting text length).

    I failed to solve the problem at that time, but now here's what I've come up with:
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>a css based script test</title>
        <style>
            /* define breakpoints */
            @media screen and (max-width: 599px){
                div:before{
                    content: 'narrow';
                }
            }
            @media screen and (min-width: 600px) and (max-width: 799px){
                div:before{
                    content: 'medium';
                }
            }
            @media screen and (min-width: 800px){
                div:before{
                    content: 'wide';
                }
            }
          
            /* hide breakpoints */
            div:before{
                display: none;
            }
        </style>
        <script>
            //based on settimeout() example in: https://developer.mozilla.org/en-US/docs/Web/Events/resize
            window.addEventListener('resize', resizeThrottler, false);
            var resizeTimeout;
            function resizeThrottler() {
                if ( !resizeTimeout ) { // ignore resize events as long as an actualResizeHandler execution is in the queue
                    resizeTimeout = setTimeout(function() {
                        resizeTimeout = null;
                        actualResizeHandler();
                    }, 66); // The actualResizeHandler will execute at a rate of 15fps
                }
            }
            function actualResizeHandler() { // handle the resize event
                var txtEl = document.getElementById('txt'),
                    //ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
                    currWidth = getComputedStyle(txtEl, ':before').content.slice(1,-1);
                if (currWidth != prevWidth){
                    switch(currWidth){
                        case 'narrow':
                            txtEl.childNodes[0].nodeValue = txtArr[0];
                            break;
                        case 'medium':
                            txtEl.childNodes[0].nodeValue = txtArr[1];
                            break;
                        case 'wide':
                            txtEl.childNodes[0].nodeValue = txtArr[2];
                            break;
                    }
                    document.getElementById('len').value = txtEl.childNodes[0].nodeValue.length;
                    prevWidth = currWidth;
                }
            }
            var prevWidth,
                txtArr = [
                    'for narrow screens < 600px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis est risus. Nunc porta nibh libero, nec lacinia dui volutpat eget. Nunc ut est id neque semper facilisis. Etiam sed blandit felis. Donec tempor metus metus, non facilisis urna faucibus ac.',
                    'for medium screens, 600px to 800px. Aliquam non ante nisi. Nam vitae felis eu enim elementum porttitor nec eu nulla. Donec ut lorem faucibus mauris tristique faucibus et at augue. Vestibulum egestas ante ut odio mattis elementum. Pellentesque egestas posuere velit, id pulvinar ligula pretium sed.',
                    'for wide screens > 800px. Nam accumsan metus in ligula dignissim condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris at iaculis lectus. Etiam scelerisque faucibus lorem tristique vulputate. Maecenas aliquam sapien non purus tincidunt congue.'
                ];
          
        </script>
    </head>
    <body>
        <div id="txt">Try resize my screen!</div>
        <label>
            <span>Length of text:</span>
            <input id="len" readonly>
        </label>
    </body>
</html>
    HTML:
    PS: You may want to fist ignore about the MDN resize handling there.
     
    Last edited: Jun 9, 2016
    hdewantara, Jun 9, 2016 IP