Disabling a link in responsive design

I’m converting a ‘desk-top’ web site to Responsive Design. The desktop version may be seen here (some responsive features have been included just to demonstrate this post)
In the desktop design almost all images are clickable, and when clicked are shown enlarged via a jQuery ‘lightbox’ process. There is also a Gallery page. On a smart phone tapping the image has the same effect, but the result is a mess and there’s no obvious way to go back.

		echo "<div class='rcolimg'>";
		echo "<a href='/gallery/" . $imgref . ".jpg' class='lightbox' title='" . $title . "'><img src='/gallery/" . $imgref . ".jpg' alt='" . $title . "' /></a>";

The snippet above is part of a loop, and the value of the variables is taken from an array, a different image is shown with each iteration.

I’m looking for a way to prevent this happening on a phone, essentially by preventing the call to the lightbox altogether, since it serves no purpose at this size, and I don’t wish to download the larger image either. I can hide the anchors with CSS, but that hides the images too, which is not what I want.

Any suggestions, please ?

My suggestion would be to modify the script so that it only works if the screen is more than a certain width.

HI,

You could try this:



@media screen and (max-width:600px) {
div.rcolimg:after{
position:absolute;
content:" ";
left:0;
top:0;
width:100%;
bottom:0;
z-index:9999;
}
}

It shims an element over the image so it can’t be clicked at less than 600px.

Hello Ralph,
The script is PHP. So I’d need to make the script aware of the screen width. I don’t know how to do that (or even if it’s possible). Perhaps someone can tell me, please.

Hello Paul,
Thanks for that suggestion, I’ll give it a try.

Hello Paul, again,
Yes, that works a treat. Thank you.

Yes, that shouldn’t be difficult in JS, but I tried a few experiments that didn’t quite work. But I’m not a JS/jQuery guy. But it would be easy enough for an aficionado. Anyhow, Paul’s is a clever alternative. :slight_smile:

Ralph M,
Thanks. I too thought it might be possible in jQuery, but hadn’t actually tried. Paul’s pure CSS solution seems perfect to me, and so easy to implement.

I use the same technique in navigation where all the navigation elements are links but you don’t want the current page to be a link and reload the same page. You just shim a pseudo element over the top and stop it being clicked. It’s ideal where the navigation is an include and you don’t want to fiddle with the current page and complicate the include.

Thanks Paul, that confirms what I thought would be a further use of the same principle. My navigation is also an included file, and for smaller screens I will need to disable the ‘Gallery’ link in the menu. Disabling the link on the current page that way is a good idea too.

PS: Is ‘The Ultimate CSS Reference’ available in printed form ? I’ve followed the link on Sitepoint but only (so far) found an e-book, although I can see an image of a printed book.

Yep: http://www.amazon.com/The-CSS-Ultimate-Reference/dp/0980285852

I thought it was out of print by now but I guess there are still some in stock. At $0.87 it seems a bargain :). I would use the online version instead these days as that’s free and has some useful comments added. It’s a shame the book and site were never updated as that was a good reference even if I say so myself.:slight_smile:

Thanks. It looks as if the printed version dates from 2008. I was hoping for a complete reference to CSS3. Eric Meyer seems to be taking his time over a new ‘Definitive Guide’, although some features have been published in smaller volumes.

The problem with books is that they take about 18 months to write and by the time you get them out of the door the landscape has changed so for css3 you are better looking at resources that are on the web now. CSS is evolving daily so the best place to keep up to date is on the w3c website and on the many css sites around today.

Books are good for showing best techniques and design practices but the cutting edge stuff is out on the web now (see the weekly css links at the top of the forum for some good resources).

That’s good advice, thank you. I do a fair amount of searching on the web; I’m also old-fashioned enough to prefer to read printed stuff on paper rather than on screen. Less switching of windows, too. A good excuse to have dual monitors, though.