Link to home
Create AccountLog in
Avatar of peter_coop
peter_coopFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Create button from a div

Is it possible to create a clickable button from a div. I have posted the code I am currently using and would be grateful if someone could inform me if this is possible. Thanks

$myString = <<<EOF
		<div class='msgTrue' style='background-color:#F7F8FA;' data-message='%s' data-subject='%s' data-rowdate='%s' data-from='%s'>
		<img src="images/sml_new_mail_icon.jpg" valign="top">$subject;
		<div style="float:right;margin-right:35px;margin-top:5px;font-size:9px;">$rowdate</div><br />
		<span style="font-weight:bold;">$from</span>
		</div>
		<br />
		<!-- The following end tag need to be at the start of the line -->
EOF;
		printf($myString, $message, $subject, $rowdate, $from);

Open in new window

Avatar of darren-w-
darren-w-
Flag of United Kingdom of Great Britain and Northern Ireland image

Avatar of Julian Hansen
With jquery

$('#idofdiv').click(function() {
   // do something useful
});
Hey Peter,

Are you talking about styling the DIV to look like a button, or adding behaviour to act like a button. From previous questions, I thought you had the behaviour in place. Also which part of your code do you want to be the 'button'. And what behaviour to you need when it's clicked.

$('.msgTrue').click(function() {
    //The clicked DIV can be reference with $(this)
    alert ( $(this).data('message') ); //alert the value of data-message
    $(this).css('background-color', 'red'); //change the background of the DIV to red
});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of peter_coop

ASKER

Hi Chris

The behaviour is in place it is just styling to make then div act like a button. Cheers
Did you have a look at the fiddle. Obviously a 'button' can look any way you want it to, so I can't give you precise CSS for it without know how you want it to look.
Wondering if you mean act like a Submit Button, if this is the case take a look at the jquery function  http://api.jquery.com/submit/
@Chris

I would like to use an image as a button. Is this possible based on your fiddle code. Thanks

@darren

Thanks for link.
Yeah, sure. You can style a DIV anyway you like :)

Have a look at the fiddle now - I've set a background-image for the DIV, and added some padding.
excellent. Thanks very much Chris.
Thanks once again.