Thanks for the help guys!
I have been looking at some of these ready-made scripts but my rounded
corners have a particular design (if you can believe that).
Anyway... I have now become obsessed with knowing how to do this. Its
like spending the whole day washing your car and then you decide to
leave one wheel unwashed. It´s driving me crazy !!!
I have now changed the code slightly and have managed to get things
working 99%.
There is just a slight problem with the code that jQuery is
outputting.
This is what I have now:
$(document).ready(function(){
$(".box").prepend('<div class="inside">');
$(".box").append('</div>'+'<div class="tl"></div>'+'<div class="tr"></
div>'+'<div class="bl"></div>'+'<div class="br"></div>');
});
Now if I add " <div class="box"><p>Lorem ipsum dolor</p></div> " in my
mark-up, jQuery inserts the rest and the DOM changes to the following:
<div class="box">
<div class="inside">
<p>Lorem ipsum dolor</p>
<div class="tl"/></div>
<div class="tr"/></div>
<div class="bl"/></div>
<div class="br"/></div>
</div>
The only problem here is that <div class="inside"> does not get closed
after the closing <p>, infact, it does not get closed at all.
I want it to look like this:
<div class="box">
<div class="inside">
<p>Lorem ipsum dolor</p>
</div>
<div class="tl"/></div>
<div class="tr"/></div>
<div class="bl"/></div>
<div class="br"/></div>
</div>
As you can see in the jQuery, I have prepended <div class="inside"> by
itself, and in the appended content it´s closing tag (</div>) is first
up.
Now for some reason that does not work because it´s closing tag is
ignored completely.
Do the divs that one prepends/append need to be complete with its
closing tag or can they be separated like this? Does not seem to work
here.
Any suggestions will be appreciated.
Q.
On Sep 30, 12:39 am, ricardobeat <[EMAIL PROTECTED]> wrote:
> That is probably a float or clear being (or not being) applied
> somewhere. If you have floated elements inside a non-floated block
> margins don't work.
>
> Why don't you try one of the existent 'rounded corners'
> implementations? I haven't had much success with them, but who
> knows :)
>
> http://www.html.it/articoli/nifty/index.htmlhttp://www.curvycorners.net/http://www.editsite.net/blog/rounded_corners.htmlhttp://www.phatfusion.net/roundedcorners/
>
> - Ricardo
>
> On Sep 29, 7:45 am,thelemondropkid<[EMAIL PROTECTED]> wrote:
>
> > Thanks for the reply.
>
> > What I would like to do is to reduce the page´s mark-up in general
> > because there are going to be more-or-less 7-8 of these boxes on the
> > home page (excluding the other content. These boxes have rounded
> > corners, hence the empty tr, tl, bl, br divs. What I would like to do
> > is to just add <div class="box"> and it´s content and have jQuery take
> > care of inserting the necessary mark-up to complete the box. I know it
> > seems silly but I want to keep the code as clean as possible without
> > repeating the same thing over and over in the mark-up.
>
> > Like this:
>
> > <div class="box">
> > <h3>Some header</h3>
> > <img name="Image" src="photo.jpg" width="268" height="122"
> > alt="" /
> > <p>Lorem ipsum dolor sit amet.</p>
> > </div>
>
> > As apposed to this:
>
> > <div class="box-two">
> > <div class="inside">
> > <h3>Some header</h3>
> > <img name="Image" src="photo.jpg" width="268" height="122"
> > alt="" /
> > <p>Lorem ipsum dolor sit amet.</p>
> > </div>
> > <div class="tl"></div>
> > <div class="tr"></div>
> > <div class="bl"></div>
> > <div class="br"></div>
> > </div>
>
> > As you can see, it is less cluttered.
>
> > I have managed to get jQuery to apply the mark-up to all the divs with
> > class of "box" by swapping the order of the code from this:
>
> > $(document).ready(function(){
> > $("div.box").each(function() {
> > $("div.box> *").wrapAll('<div class="inside"></div>');
> > $("div.box").append('<div class="tl"></div>'+'<div
> > class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></div>');
> > });
>
> > });
>
> > to this:
>
> > $(document).ready(function(){
> > $("div.box").each(function() {
> > $("div.box").append('<div class="tl"></div>'+'<div
> > class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></div>');
> > $("div.box> *").wrapAll('<div class="inside"></div>');
> > });
>
> > });
>
> > For some reason when the wrap function is placed after the append
> > function it works.
>
> > The only problem I have now is that the css does not hook into the
> > mark-up properly. Now when I have a 2nd instance of "box" directly
> > after the other, they overlap each other slightly ignoring the bottom-
> > margin of 1em of "box". If I remove the jQuery from the page and place
> > the mark-up into the page itself, the css is properly applied and
> > works the way it should. Very odd!
>
> > On Sep 27, 4:20 pm, Jonathan <[EMAIL PROTECTED]> wrote:
>
> > > If you used each then it should repeat for each DIV with the class of
> > > box on the page.
>
> > > $(document).ready(function(){
> > > $("div.box").each(function() {
> > > $("div.box> *").wrapAll('<div class="inside"></div>');
> > > $("div.box").append('<div class="tl"></div>'+'<div
> > > class="tr"></div>'+'<div class="bl"></div>'+'<div class="br"></
> > > div>');
> > > });
>
> > > });
>
> > > What exactly are you trying to achieve though? Couldn't you just have
> > > all the DIVs laid out already and then style them with CSS to make
> > > them look the same?
>
> > > On Sep 26, 2:17 pm,thelemondropkid<[EMAIL PROTECTED]> wrote:
>
> > > > Thanks to the help I have received on this group, I am making
> > > > progress.
> > > > But now that all is working fine, the question beckons: Can jQuery do
> > > > it all over again?
>
> > > > This is my code:
>
> > > > <div class="box">
> > > > <h3>some header</h3>
> > > > <img name="Image" src="photo.jpg" width="268" height="122" alt="" /
>
> > > > <p>Lorem ipsum dolor sit amet.</p>
> > > > </div>
>
> > > > And the jQuery:
>
> > > > $(document).ready(function(){
> > > > $("div.box> *").wrapAll('<div class="inside"></div>');
> > > > $("div.box").append('<div class="tl"></div>'+'<div class="tr"></
> > > > div>'+'<div class="bl"></div>'+'<div class="br"></div>');
>
> > > > });
>
> > > > The problem:
>
> > > > I would have thought that jQuery would repeat the above process if I
> > > > created another div with a class of "box" below the previous one. I
> > > > was wrong!
>
> > > > Is there a way to do that because I would like to create various boxes
> > > > with a class of "box" and have them all look the same.
>
> > > > Thanks folks
