Coding Javascript/CSS/HTML

**Ejac** · 2008-07-21 22:25

Ok, I'm using Dreamweaver CS3 as my coding/design program. I'm working on making a website from scratch. I've made them in the past with templates, so I know my way around coding somewhat.

What I'm working on at the moment is a script called "curvycorners". I found the script here and it's completely free to use.

Everytime I put the code into dreamweaver, it doesn't show up like it is supposed to... I know it's something really simple that I'm looking over. I would just appreciate any help I could get with this problem!

**VZX** · 2008-07-22 03:25

Hmmm... probably this is a stupid suggestion,
but have you published it and view it with your browser? I see that is a design area on the screenshot, so it doesn't really show what will be displayed in the browser

**Ejac** · 2008-07-22 09:02

Yea, I've tried saving and then viewing inside my browser. Always shows those stupid square boxes x_x

**Avanarius** · 2008-07-22 15:26

blocking javascript? idk if dreamweaver loads external JS in the display window but my firefox blocked that for sure.

**Ejac** · 2008-07-22 17:20

Well, the script actually has their own downloading page found here. I downloaded the newest version, extracted it, viewed the websites source code. Once I copied the entire source code from the downloaded demo, pasted that into dreamweaver, saved it, then viewed. The mother freaking box is still square!!! I'm getting very annoyed at coding

Any other suggestions?

**liami** · 2008-07-23 03:09

Dreamweaver won't show the js in the design view window, anything that is JS in your body will come up as a [JS] box in the design view.
Stupid question, but are you sure the curvyCorners.js is in the same directory as the html file you saved.
Dreamweaver has a nasty habit of loading your html into a tmp file and viewing that when you use the "preview in browser" / "debug in browser", meaning your curvyCorners.js file won't be included as it's not in your tmp folder.

Just open the file in your web-browser rather than use that "preview" crap.

And yeah check your noscript when viewing it in firefox!

**Blabj** · 2008-07-23 05:27

I went and had a look around and found the script's homepage ( http://www.curvycorners.net/index.php ) and downloaded the package, which included a demo.html, so I opened it and straight away it shows you how they create the javascript objects and how to edit them, try putting this in the head of your document.

Code:

<script type="text/JavaScript">
  window.onload = function()
  {
      settings = {
          tl: { radius: 10 },
          tr: { radius: 10 },
          bl: { radius: 10 },
          br: { radius: 10 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
  }
</script>

And then give your box the div class of myBox.

**Ejac** · 2008-07-23 09:51

Originally Posted by Blabj

I went and had a look around and found the script's homepage ( http://www.curvycorners.net/index.php ) and downloaded the package, which included a demo.html, so I opened it and straight away it shows you how they create the javascript objects and how to edit them, try putting this in the head of your document.

Code:

<script type="text/JavaScript">
  window.onload = function()
  {
      settings = {
          tl: { radius: 10 },
          tr: { radius: 10 },
          bl: { radius: 10 },
          br: { radius: 10 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
  }
</script>

And then give your box the div class of myBox.

I used this code when giving what you told me to do.

Code:

<!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>Untitled Document</title>

<script type="text/JavaScript">
  window.onload = function()
  {
      settings = {
          tl: { radius: 10 },
          tr: { radius: 10 },
          bl: { radius: 10 },
          br: { radius: 10 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
  }
</script>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:229px;
	top:21px;
	width:630px;
	height:117px;
	z-index:1;
	background-color: #0066FF;
}
.style1 {
	font-size: 36px;
	font-weight: bold;
}
-->
</style>
</head>

<body>
<div id="apDiv1">
  <div align="center" class="style1">Test Boxes</div>
</div>
</body>
</html>

and the box turned out looking like the test1.jpg attachment.

Then I changed the div id like you told me to do and the code looked like this:

Code:

<!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>Untitled Document</title>

<script type="text/JavaScript">
  window.onload = function()
  {
      settings = {
          tl: { radius: 10 },
          tr: { radius: 10 },
          bl: { radius: 10 },
          br: { radius: 10 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

      var myBoxObject = new curvyCorners(settings, "myBox");
      myBoxObject.applyCornersToAll();
  }
</script>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:229px;
	top:21px;
	width:630px;
	height:117px;
	z-index:1;
	background-color: #0066FF;
}
.style1 {
	font-size: 36px;
	font-weight: bold;
}
-->
</style>
</head>

<body>
<div id="myBox">
  <div align="center" class="style1">Test Boxes</div>
</div>
</body>
</html>

Bold is the only change I made to the script. After that I viewed it in firefox again and it showed up looking like test2.jpg attachment.

**Ejac** · 2008-07-23 09:53

Oh and on a side note, when I downloaded the curvycorners file and viewed the demo. I opened the source code for the demo, right. Ok, then I copied the ENTIRE source code. Pasted it into a new html document in dreamweaver. Saved it, then opened it up in firefox. Square boxes.......... What's up with that?

**liami** · 2008-07-23 09:56

you forgot to add

Code:

<script type="text/javascript" src="curvyCorners.js"></script>

before your other javascript, it's with your current code, you're calling a non-existant function

edit: just tried the code from the original website, simply pasted it into 2 files and it works fine with javascript enabled, attached it for your viewing pleasure

**Ejac** · 2008-07-23 12:27

Originally Posted by liami

you forgot to add

Code:

<script type="text/javascript" src="curvyCorners.js"></script>

before your other javascript, it's with your current code, you're calling a non-existant function

edit: just tried the code from the original website, simply pasted it into 2 files and it works fine with javascript enabled, attached it for your viewing pleasure

Where in my code do I need to put that line?

**Creeps** · 2008-07-23 13:50

Replace the script line right above your window.onload function

**Ejac** · 2008-07-23 14:30

Looks like I finally have it working if I copy the corner attachment below. The stupid thing is still confusing to me. Probably because I've looked at this same line of code for so long I'm just frustrated.

Thanks so much for all the help guys! Your the best around!

http://www.youtube.com/watch?v=9fWvub_WBho

Thread: Coding Javascript/CSS/HTML

Thread Tools

Coding Javascript/CSS/HTML

Latest Threads

Up & Coming Threads

Hottest Threads