SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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.
    PHP Code:
            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 ?
    Tim Dawson
    Isle of Mull, Scotland

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    My suggestion would be to modify the script so that it only works if the screen is more than a certain width.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You could try this:

    Code:
    @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.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tim Dawson
    Isle of Mull, Scotland

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul,
    Thanks for that suggestion, I'll give it a try.
    Tim Dawson
    Isle of Mull, Scotland

  6. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul, again,
    Yes, that works a treat. Thank you.
    Tim Dawson
    Isle of Mull, Scotland

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ramasaig View Post
    I'd need to make the script aware of the screen width.
    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.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tim Dawson
    Isle of Mull, Scotland

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ramasaig View Post
    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.

  10. #10
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tim Dawson
    Isle of Mull, Scotland

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ramasaig View Post
    Is 'The Ultimate CSS Reference' available in printed form ?
    Yep: http://www.amazon.com/The-CSS-Ultima.../dp/0980285852

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  13. #13
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tim Dawson
    Isle of Mull, Scotland

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ramasaig View Post
    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).

  15. #15
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    350
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tim Dawson
    Isle of Mull, Scotland


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •