Rounded Corners for Text box

  • Resolved cableghost

    (@cableghost)


    17 years ago

    I would like to execute rounded corners for text boxes on my pages and the best approach seems to be using jquery. Though they (http://www.atblabs.com/jquery.corners.html) have provided the code (below) and the js files, I do not know how to call the js files from the script provided…any suggestions would be appreciated.

    <div style="background-color:#acc; padding:5px" class="rounded">
  Simple Example
</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

    I would suspect I could place the above script into my header.php, but how does the script and the class=”rounded” know where the js files are? I have placed the js files into a folder called scripts on my main directory.

    -Scott

Viewing 8 replies - 1 through 8 (of 8 total)
  • Lari

    (@lari)

    17 years ago

    Try

    <script>jQuery(document).ready( function($){
  $('.rounded').corners();
});</script>

    instead.

    Thread Starter cableghost

    (@cableghost)

    17 years ago

    Thanks Lori,

    1. where do I place that script and how do I activate it?

    2. Could I place the code in my header.php template?

    3. How do I make the layer/div recognize it…is it as simple as adding class=”rounded” as the example above?

    -Scott

    Thread Starter cableghost

    (@cableghost)

    17 years ago

    Once again, I’m having difficulty in executing this code. I’m not certain how to call the jquery script.

    Place the following code in the <Head> section of Header.php:

    <script>jQuery(document).ready( function($){
  $('.rounded').corners();
});</script>

    Here’s the box to be placed in the post:
    <div class="rounded">Simple Example</div>

    Here’s the CSS code:
    .rounded{background-color:#acc; padding:5px}

    If jquery.corners.js is located in a folder called /scripts on the root directory, how do I call it into action?

    -Scott

    OthelloBloke

    (@othellobloke)

    17 years ago

    I know this doesn’t help but if they’re not at 90 degrees they’re not corners. A corner can’t be rounded – that’s a curve 😉

    Thread Starter cableghost

    (@cableghost)

    17 years ago

    Semantics. I actually wonder how people that make such comments have the time to do it. If you could offer anything positively substantial to this topic, I’m all ears (though I realize that statement isn’t true either).

    -Scott

    Clayton James

    (@claytonjames)

    17 years ago

    At the risk of being pedantic, ( and thinking simply that you may not have seen this ) was anything located here at all useful?

    “To use Javascript repeatedly within your site, you can either set the call for the Javascript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using Javascript in any HTML page. To “load” the Javascript file into your site, in the head, add something like this:”

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

    Thread Starter cableghost

    (@cableghost)

    17 years ago

    Thank you Clayton, though I may still not understand. Please correct my errors below…

    I place the following 2 scripts in my Header.php <head> section…

    <script type="text/javascript" src="http://www.mysite.com/scripts/jquery.corners.js"></script>
<script type="text/javascript" src="http://www.mysite.com/scripts/jquery.corners.min.js"></script>

    I create css code such as…

    #divsample
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3em;
	padding: 0;
	text-align: left;
	background-color: #eeeeee;
        width:80%;
	}

    Finally, I create the <div> below…
    <div id="divsample">Rounded</div>

    What am I missing to make this function?

    -Scott

    Clayton James

    (@claytonjames)

    17 years ago

    To be bluntly honest, I just read through this example code, and I don’t have a clue. Sorry.

    http://www.atblabs.com/jquery.corners.html

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Rounded Corners for Text box’ is closed to new replies.

Tags