Tag: onclick
Nabin Nepal (Starx) javascript onclick security
May 3, 2012

How to prevent the clientside user from changing arguments in an onClick function?

Question by user1113531

user1113531user1113531

I just realized while testing an onClick function with firebug that it would be really easy for a user to change the value of the arguments being passed. This could mess thins up.

Is there any easy way to prevent this, especially when arguments need to be passed?

Answer by Quentin

QuentinQuentin

It is impossible. The code is executing on the user’s computer. They are in control.

If they edit it and “mess it up”, then that is on their head.

If they edit it and it submits an HTTP request to your server, and your server allows (for instance) that request to delete data belonging to another user then the problem is that your server didn’t check that the user submitting the request had permission to delete that data before following through.

Answer by Starx

StarxStarx

No, this simply can’t be done.

Once the script is loaded to the client’s machine. He can use/modify it, as he wants.

Nabin Nepal (Starx) class javascript jquery onclick swap
April 18, 2012

Swap class on click

Question by Will B

Will BWill B

I’ve been trying to figure out how I’m supposed to change a class of an element when you click it.

At the moment i have two classes (cOpen and cClosed). When you open the page the div is set to ‘cClosed’.

<div id="camera" class="cClosed" onClick="cameraToggle('weekLoaderWrapper', 'cameraContainer');">Kamera</div></a>

The things within onClick is not relevant to my question btw..

I’ve also put this script in the code

$('#camera').click(function() {
    $(this).toggleClass('cOpen');
    $(this).toggleClass('cClosed');
});

What I want it to do is to when you press the “camera”-div the class simply swaps to cClosed instead of cOpen, and vice verse when you click it again. This isn’t working atm.

My problem is how i’m supposed to “toggle” the div so it swaps the class of the “camera”-div.

Answer by Starx

StarxStarx

Why are you using two classes? Use one class to identify the open and none to denote closed.

$('#camera').click(function() {
    $(this).toggleClass('cOpen');
});
Nabin Nepal (Starx) function if-statement javascript jquery onclick
April 3, 2012

if/else statement in a function: using onclick as a switch

Question by Aurora Schmidt

Aurora SchmidtAurora Schmidt

I have looked for solutions to this on google for what seems like an eternity, but I can’t seem to formulate my search correctly, or nobody has posted the code I’m looking for earlier.

I am currently trying to make a function that will modify one or several margins of a div element. I want to use an if/else statement within the function, so that the onclick event will switch between the two conditions. This is what I have been working on so far;

function facebookToggle()
{
    if($('#facebooktab').style.margin-left == "-250px";)
    {
        document.getElementById("facebooktab").style.marginLeft="0px";
    }
    else
    {
        document.getElementById("facebooktab").style.marginLeft="-250px";
    }
}

I have tried twisting it around a little, like switching between “marginLeft” and “margin-left”, to see if I was just using the wrong terms.. I’m starting to wonder if it might not be possible to combine jQuery and regular javascript? I don’t know.. It’s all just guesses on my part at this point.

Anyway, I have a div, which is now positioned (fixed) so almost all of it is hidden outside the borders of the browser. I want the margin to change onclick so that it will be fully shown on the page. And when it is shown, I want to be able to hide it again by clicking it.

I might be approaching this in the wrong way, but I really hope someone can help me out, or even tell me another way to get the same results. Thank you for any help you can give me.

You can see it in action at: http://www.torucon.no/test/

(EDIT: By the way, I am a complete javascript novice, I have no experience with javascript prior to this experiment. Please don’t be too harsh, as I am aware I probably made some really stupid mistakes in this short code.)

Fixed problem:

function facebookToggle() {
var fb = $('#facebooktab'); // save reference to element
if( fb.css('margin-left') === '-250px' ) {
    fb.css('margin-left', '0px');
} else {
    fb.css('margin-left', '-250px');
}
}

Answer by paislee

paisleepaislee

A jQuery object doesn’t have a property called style, so

if($('#facebooktab').style.margin-left == "-250px";)
//                   also remove this semi-colon! ^

is going to throw an error. Some options for accessing CSS properties are (1)

document.getElementById("facebooktab").style.marginLeft;

which you have correctly used, or (2)

$('#facebooktab').css('margin-left');

Consider being consistent and using the same approach for all three cases. You can assign css properties with jQuery like

$('#facebooktab').css('margin-left', '-250px');

With these things in mind, here’s a suggested rewrite:

function facebookToggle() {
    var fb = $('#facebooktab'); // save reference to element
    if( fb.css('margin-left') === '-250px' ) {
        fb.css('margin-left', '0px');
    } else {
        fb.css('margin-left', '-250px');
    }
}

and here’s another that uses a predefined CSS class:

#facebooktab {
    margin-left: -250px; /** default state */
}

.no-left-margin {
    margin-left: 0px;
}

function facebookToggle() {
    $('#facebooktab').toggleClass('no-left-margin');
}

Answer by Starx

StarxStarx

Since you are mixing jQuery with javascript, you got mixed up. Apart from what paislee’s advice. you are do this too.

if($('#facebooktab')[0].style.margin-left == "-250px";){
    document.getElementById("facebooktab").style.marginLeft="0px";
}
else    {
    var fb = document.getElementById("facebooktab");
    fb.style.marginLeft="-250px";
}
...

Please fill the form - I will response as fast as I can!