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?
source to share
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
source to share
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!
source to share
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();
});
}
source to share
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.
source to share