Grow your CSS skills. Land your dream job.

Show and hide div from clicking on an image

  • # April 12, 2013 at 6:13 am

    Hey,

    If you go to http://oandg.co.uk.s156312.gridserver.com/#work and select a portfolio item and click ‘More’ you will see an image and a text box with a little ‘i’ in the corner.

    I would like to make it so if you clicked the little ‘i’ the text box would disappear and if you clicked it again it would show.

    I tried this but it does nothing:

    $(‘.rsABlock img.info’).click(function(e) {
    e.preventDefault();
    $(‘.caption-background’).addClass(‘hidden’);
    });

    Any ideas?

    # April 12, 2013 at 6:26 am

    Should work: http://jsfiddle.net/gSVfV/

    You have some errors though, check your log.

    Are you sure you add that click listener after that part of the DOM is loaded?

    # April 12, 2013 at 6:49 am

    Yeah that didn’t seem to work either. I am not entirely sure what is actually causing the main error – I can’t even find that code in my main.js file.

    Javascript isn’t really my thing so this is just trial and error for me!

    Here is my full js file with compression – http://oandg.co.uk.s156312.gridserver.com/js/main.js

    # April 12, 2013 at 6:58 am

    You can try to upload that file without compression so you get useful console feedback about that error (line number).

    # April 12, 2013 at 7:05 am

    Ah okay – I have managed to get rid of the errors. Still no luck with the show/hide though

    # April 12, 2013 at 7:23 am

    Ah… you need to attach that click listener after you opened the box and the ‘.rsABlock img.info’ is actually in the DOM. If you can attach a callback to whatever function you use to open the box, that’d be the right place to attach that click listener.

    # April 12, 2013 at 7:33 am

    For example, try to put that function inside this:

    $(“.openBoxButton”).click(function() {
    $(‘#colorbox’).fadeIn(1200);
    $.colorbox();
    });

    on line 420, right after `$.colorbox();`. That might work… but I’m not sure if it still works after you clicked the ‘next’ arrow.

    # April 12, 2013 at 7:38 am

    Like this?

    $(function() {
    $(“.openBoxButton”).click(function() {
    $(‘#colorbox’).fadeIn(1200);
    $.colorbox();
    $(‘.rsABlock img.info’).click(function(e) {
    e.preventDefault();
    $(‘.caption-background’).toggleClass(‘hidden’);
    });
    });
    });

    # April 12, 2013 at 7:45 am

    Yes, did it work?

    # April 12, 2013 at 7:56 am

    Nope ha this is so frustrating

    # April 13, 2013 at 2:44 am

    i have a pen that does it here http://codepen.io/htmlmainiac/pen/DErwn

    # April 13, 2013 at 8:23 am

    Thanks but that still gets ignored! I think it is because the colorbox is loaded after everything in the DOM so the script is always loaded before.

    http://oandg.co.uk.s156312.gridserver.com/

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".