How can I make an HTML element clickable only at certain screen sizes

I am trying to convert an old, custom website to be responsive. I have most of the CSS working and can get the dimensions and positioning that I want for the most part. There's one last part that gives me sadness.

I have a series of news articles displayed on a page. When I go to mobile phone displays I really want these headings to be clickable so I can use them to show / hide article details. But I don't want these titles to be available on larger screen sizes.

The main layout of each article ...

<article id="article-001">
    <div class="newsArticleTitle">Title goes here</div>
    <div class="newsArticleTeaser">
        <p>
            Teaser paragraph</p>
    </div>
    <div class="newsArticleContent">
        <p>
            Paragraph 1</p>
        <p>
            Paragraph 2</p>
    </div>
</article>

      

The relevant CSS that controls the display of these articles when the screen size is reduced is ...

@media only screen and (max-width: 479px) {
    .newsArticleTeaser {
        display: none;
    }
}


@media only screen and (max-width: 319px) {
    .newsArticleContent {
        display: none;
    }
}

      

... so only the title of the article is visible at the narrowest screen sizes. Then I need / need the article title (div c class="newsArticleTitle"

) to then become a clickable element so that the teaser and content visibility is toggled.

Is there a sane way to do this? My return method would probably be to duplicate the title element - once with the tag <a>

that wraps it, once without - and toggle the visibility of the two with CSS. It doesn't seem right though.

Has anyone solved this more elegantly, or got any suggestions for a better way to design it?

+3


source to share


5 answers


You can use pointer-events: none

css properties pointer-events: none

in combination with media queries:

.elementToClickInMobile {
    pointer-events: none;
    @media all and (max-width: 460px) {
        pointer-events: all
    }
}

      

this will prevent any click event on larger screens than 460px

EDIT // as correctly guessed, this works> IE10



fallback for an older (outdated) browser that you can use

$("elementToClick").click(function(e){
    var outerWidth = window.outerWidth
    if (outerWidth > 480) {
        e.preventDefault(); //for browsers
        e.returnValue = false; //for IE
        return false
    }
});

      

JS has not been tested, so feel free to comment on further suggestions!

EDIT2 // found a neat fallback for IE7 + pointer events including the preventClick()

! https://github.com/vistaprint/PointyJS

+8


source


If supporting older versions (<11) of Internet Explorer is not an issue for you, you can only do it with CSS using a property pointer-events

and media query:

@media all and (min-width:600px){
    h1{
        pointer-events:none;
    }
}

      



+2


source


If you like doing this through a script, you can check window.innerWidth

;

onclick = function() {
...
if(checkScreenSize()) {
    alert("Your screen is small!");
    ....
}
...
}

function checkScreenSize(){
    return window.innerWidth < 300; //The screen size you would like to enable the click;
}

      

Refer link .

Hope this helps!

+1


source


Something like this, what do you want? This uses JQuery to toggle the appropriate .NewsArticleContent to be displayed with one click of the title. You can test for CSS like this, since .newsArticleContent is set to display: none at an appropriate screen size. You can look into the .toggle () function to click the title a second time to hide the content again.

    if ($(".newsArticleContent").css("display") == "none") {
        $(".newsArticleTitle").bind("click", function(){
            $(this).siblings(".newsArticleContent").show();
        });
    }

      

0


source


Yes, the following works and is the best way to do it if you don't need to consider IE10.

.elementToClickInMobile {
    pointer-events: none;
    @media all and (max-width: 460px) {
        pointer-events: all
    }
}

      

You can also check the size of the viewport using window.innerWidth. Be careful not to use window.outerwidth because it gets the width outside of the browser window. It represents the width of the entire browser window, including the sidebar (if expanded), the chrome window, and the window sizing borders / handles.

0


source







All Articles