Add Javascript Onclick To .css File

Question

I wonder whether someone may be able to help me please.

I'm using this page to allow users to view a gallery of their images.

You can see that I've added a cross at the bottom of each image which I will use to delete the image and this is set up in my .css file as:

 .galleria-thumbnails .galleria-image {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 7px 7px 0;
    border: 2px solid #fff;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
    padding-bottom: 20px;
    background-color:#FFFFFF;

The problem I have is that I'm very unsure how to link the image in the separate .ccs file with the Javascript command to delete the image which is on my gallery page.

I just wondered whether someone may be able to provide some guidance on how I may go about overcoming this problem.

Thanks and regards

Armatus · Accepted Answer · 2012-05-07 11:05:55Z

1

You need to add an element (e.g. span) which can handle the click. I can see that you actually already have something like this:

<span class="btn-delete icon-remove icon-white"></span>

You even have the click handler already:

$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src")); return false; });

All you need to do is apply the styles so you can actually use this. Something like:

.galleria-thumbnails .btn-delete {
    display: block; /* Or just use a div instead of a span*/
    position: absolute;
    bottom: 0px; /*align at the bottom*/
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
}

answered May 7, 2012 at 11:05

Armatus

2,20117 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IRHM Over a year ago

many thanks for taking the time to reply and for the solution. There's some minor tweaking to do as I'm trying to get the icon in the 'bottom middle', but it works a treat. Kind regards

Joseph · Accepted Answer · 2012-05-07 11:06:34Z

0

CSS is for styling, while JS is for behavior. You can't mix the two, and both are not related in terms of functionality. what you need is a JS that removes the image.

a standards compliant, JS version

var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
    dbLength = db.length,
    i;

for(i=0;i<dbLength;i++){
     db[i].addEventListener('click',function(){
        var thumbnail = this.parentNode;
        thumbnail.parentNode.removeChild(thumbnail);
    },false);
}

a jQuery 1.7+ version is this:

$('.galleria-thumbnails').on('click','.btn-delete',function(){
    $(this).closest('.galleria-image').remove()
})

answered May 7, 2012 at 11:06

Joseph

120k31 gold badges186 silver badges238 bronze badges

1 Comment

IRHM Over a year ago

thank you for taking the time to reply to my post and the solution. I guess this is a question for all 3 of you. You've all kindly provided me with solutions, quite different from one another. But I'm really very new to Javascript and associated coding. From a beginners perspective, how do you know which solution to use? Is it just down to personal preference. Kind regards

Arun Kumar · Accepted Answer · 2012-05-07 11:19:07Z

0

If you set this above style sheet with in a <td> just write onclick event...

here a sample

<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>

here my css

 .menubuttonhome
        {
            background-image: url('Images/homebutton.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: #005a8c;
            font-family: Arial;
            padding-top:11px;
            font-size: 10pt;
            font-weight: 500;
        }

answered May 7, 2012 at 11:19

Arun Kumar

3031 gold badge4 silver badges13 bronze badges

6 Comments

IRHM Over a year ago

Hi @Arun, many thanks for taking the time to reply to my post and for the helpful soltuion. Kind regards

Gary Over a year ago

Why create a table just to add a listener?

Arun Kumar Over a year ago

I created it to place many more buttons in appropriate place. If you have any better idea, share with me dude...

Gary Over a year ago

All these ideas are essentially the same; this just kinda defeats the purpose of tables.

Gary Over a year ago

But I guess someone who uses inline CSS/JavaScript isn't too concerned with semantics.

|

Collectives™ on Stack Overflow

Add Javascript Onclick To .css File

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related