Switch CSS styles on element click

3 Views

Sorry if this question has been asked a lot. I am currently working on a site that will have a custom gallery. Of all things to get stuck on right now, its the gallery page indicator.

On this page, the left portion will be made of a gallery of “galleries”, displaying 6 galleries per “page”. http://www.ct-social.com/ctsdev/aff/news-and-events/

Read More

Above the gallery are small blue dots that will serve as gallery indicators. The code to create the gallery indicators is as follows: 

    <?php for ($i=0; $i < $n2; $i++): ?>
    <div class="event-gallery-unselected"></div>
    <?php endfor; ?>

Upon loading I would like the left most dot to be given a different style that is attributed to class=”event-gallery-selected”. Upon clicking any other dot (except the current selection) the currently selected dot needs to revert back to “event-gallery-unselected” and the clicked dot takes on “event-gallery-selected”

I am kinda new to PHP, very new to JavaScript and JQuery. If using either of those languages as an example could you please breakdown your explanation? Thank you very much for all of your help.

Updated code:
CSS 

.event-gallery.selected {
position: relative; 
top: -0.7em;  
background: white;
background-color: #1e93bb;
width: 20px;
height: 20px;
margin: 7px;
border-radius: 50%; 
}
.event-gallery {    
position: relative; 
top: -1.1em;  
background: white;
background-color: #63c5e7;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 7px;
float: right;
cursor: pointer;
}

Updated Code JS 

<script type="text/javascript">
jQuery(document).ready(function($){
    $(".event-gallery").click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});
</script>

Just got it working now.

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. I would suggest having a class which is present on all of your gallery div elements. This will allow the common styles to be maintained and also allow you to have only 1 click handler. You can then have a separate selected class which you toggle as needed. Try this:

    <?php for ($i = 0; $i < $n2; $i++): ?>
    <div class="event-gallery"></div>
<?php endfor; ?>

    .event-gallery { 
    color: #000; /* default styling ... */
    padding: 5px;
}
.event-gallery.selected { 
    color: #FFF; /* selected item styling ... */
    background-color: #C00;
}

    $(".event-gallery").click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});

    Example fiddle

  3. If you have a set of elements:

    <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

    I typically handle it as such:

    var $items = $('#wrapper .item'); 
$('.item').click(function(){
    $items.removeClass('active'); // 'reset' the active links
    $(this).addClass('active'); // apply the active class to the clicked item
})

  4. This can easily be done with a little bit of help from jQuery.

    $(function() {
    $(".even-gallery-unselected").on("click", function() {
        this.removeClass("event-gallery-unselected")
            .addClass("event-gallery-selected");
    });
});