Jquery Rounded Corners

Question

tqmd1 0 Junior Poster

12 Years Ago

Dear Experts,

I have following codes

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.7600.16912">

<style type="text/css">

.back	{clear:both;width:100px;height:30px;padding:5px;color:green;font-style:bold;}

h3	{color:blue;font-style:bold;BACKGROUND: url(hotmail2.jpg) no-repeat center #90bade;line-height:30px;}

#box	{width:275px;height:275px;padding:5px;margin:5px;background:#e3eeff;text-align:center;border:1px solid #069;}
</style>

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('input[name="RD"]').click(function(){
alert("Please note \n Image corners will be rounded now")
        $("imgBox").corner("35px");
    });
  });

</script>

</head>

<body>
<center>
<h1>JQuery Tutorials</h1>

<div id="box">
	<H3>Rounded Corners</H3>
	<div id="imgBox"><img src="bg8.jpg" alt="" width=200 height=200></div><br>
	<input type="submit" class="back" name="RD" value="Apply">
</div>
</center>

</body>

</html>

I want to apply rounded corners to image.
For this when I press Apply button, then it does not work.
Please help me to locate where is what is wrong with my codes.

The attachment contains HTML file and Libraries.

Thanks

javascript jquery

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

Round.zip (125.58 KB)

1 Contributor
1 Reply
118 Views
2 Days Discussion Span
Latest Post 12 Years Ago Latest Post by tqmd1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tqmd1 0 Junior Poster · Answer 1 · 2012-01-30T12:49:02+00:00

These codes work fine

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.7600.16912">

<style type="text/css">

.back	{clear:both;width:100px;height:30px;padding:5px;color:green;font-style:bold;}

h3	{color:blue;font-style:bold;BACKGROUND: url(hotmail2.jpg) no-repeat center #90bade;line-height:30px;}

#box	{width:275px;height:275px;padding:5px;margin:5px;background:#e3eeff;text-align:center;border:1px solid #069;}

</style>

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="RD"]').click(function() {
  alert("Please note \n Image corners will be rounded now")
        $("#imgBox").corner("25px");
    });
  });

</script>
</head>

<body>
<center>
<h1>JQuery Tutorials</h1>

<div id="box">
	<h3>Rounded Corners</h3>
	<div id="imgBox" style=height:200;width:200;background: yellow;><img src="bg8.jpg" alt="" width=200 height=200></div><br>
	<input type="submit" class="back" id="RD" name="RD" value="Apply">
</div>
</center>


</body>

</html>