Forums

mellonboyles

This is my first time using jQuery.

Here is my link http://www.allthingsprintuk.co.uk/sidebartest.html

I am trying to achieve rounded corners on my sidebarcontainer (that houses my sidebarcontent list & my main image (the Boat)) using jQuery.
Not sure what I have done to my code to not make it work. Any Ideas?

Thanks in advance.

AlCapone

I might be being really stupid but where is your link to jquery library?

mellonboyles

I thought I had linked it in the head, underneath the body BG col? But I have most probably got this wrong (see below code). I tried to follow the jQuery rounded corners screencast here. So maybe I have missed something out?
My JS files are in the correct folder.

What do I need to do?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>All Things Print managment and solutions</title>

</style>
<link href="sidebartest.css" rel="stylesheet" type="text/css" /><style type="text/css">

body {
background-color: #F7A700;
}
-->

<script src="jquery-1.3.2.min.js" type="text/javascript" charset"utf-8"></script>
<script src="jquery.curvycorners.min.js" type="text/javascript" charset"utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.sidebarcontainer').css({background: '#3f3f3f'}).corner('round 8px')
});
</script>

</style>
</head>

<body>

JaredAM

Yeah your code is a little messed up. The script call is inside your style declaration.



<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>All Things Print managment and solutions</title>

<!-- </style> <-------- *** Not sure why this line is here ***  -->
<link href=\"sidebartest.css\" rel=\"stylesheet\" type=\"text/css\" /><style type=\"text/css\">

body {
background-color: #F7A700;
}
-->
</style> <!-- <----- *** Close the style here *** -->
<script src=\"jquery-1.3.2.min.js\" type=\"text/javascript\" charset\"utf-8\"></script>
<script src=\"jquery.curvycorners.min.js\" type=\"text/javascript\" charset\"utf-8\"></script>

<script type=\"text/javascript\">
$(document).ready(function(){
$('.sidebarcontainer').css({background: '#3f3f3f'}).corner('round 8px')
});
</script>

<!-- </style> <-------- *** get rid of this line *** -->
</head>

AlCapone

Lol, i thought my code was messy, yeah just read what JaredAm wrote and that should fix it.

mellonboyles

Thanks for your reply.

I have done this and still no luck.
Here is new html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>All Things Print managment and solutions</title>

<link href="sidebartest.css" rel="stylesheet" type="text/css" />

<style type="text/css">

body {
background-color: #F7A700;
}
-->
</style>

<script src="jquery-1.3.2.min.js" type="text/javascript" charset"utf-8"></script>
<script src="jquery.curvycorners.min.js" type="text/javascript" charset"utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.sidebarcontainer').css({background: '#3f3f3f'}).corner('round 8px')
});
</script>

</head>

mellonboyles

It seems to be working now!

Thank you for your help.

treehouse : what would you like to learn today?

Forums

jQuery rounded corners not working