jQuery/JavaScript issue

[cokecan]

Hey Guys

I have a small issue with a webpage I'm creating.

I have a few div boxes setup on the page that have <?php include("page.php"); ?> tags in them to load info into the div. This work's great and no problems.

The issue comes from me wanting rounded corners on the div boxes. I'm using the code from Nifty Corners to generate rounded corners without the need to have corner images positioned using CSS on each corner. I'm using they're JavaScript version to keep the page a bit cleaner. The rounded corners work fine on the div boxes like this:

<div id="box1">
 <p>hello world</p>
</div>

but it doesn't work on div boxes set out with the code below. Instead it looks like it's just adding the corners to what is essentially an empty div box then adding the content from the php page in after?

<div id="box2">
 <?php include("page.php"); ?>
</div>

If I add a simple <a>&nbsp;</a> into the div box then it works fine but I get a bit of extra height in the div which I don't want.

I've tried both window.onload=function(){ and $(document).ready(function(){ but they basically do the same thing

Does anyone know a way round this?

Cheers

 

[aftershxck]

What about trying the ready function at the end of the included file?

 

[Tripnologist]

That doesn't make sense at all to me because of the order things would go in.
1. Client requests page.
2. PHP is run server side.
3. Page is sent to client.
4. Javascript runs.

So having something in an include or not, should make zero difference to JS.
The issue must lie with something else in your code.

Could you put the page in question up somewhere? (as well as your php files)

 

[cokecan]

Thanks for posting guys, I've sorted the problem now.

I think it may have been something to do with that NIfty Corners stuff I was using. I switched to jQuery Corners and everything worked perfectly, plus less code is required

http://jquery.malsup.com/corner/

 

[Tripnologist]

Where you using the exact same content when testing with and without the include? Could be the content itself was causing nifty corners to choke... not that it matters now.

Good call on switching to jQuery Corner; it's the one I use and I rarely have a problem with it.

 

[cokecan]

yeah, the only bit I've actually changed is the call to the function for rounded corners. all the content is the same.

the include file just has a simple <ul> in it, nothing special but I guess the fact it was in an include could have been causing nifty corners to break?

 

[Tripnologist]

Nope, the fact it was an include had nothing to do with it.
When the server sends the page to the browser, the include line is already replaced with the contents of the file being included.

It had to be the content. Maybe something in the include was floated or something and the div with the corners applied to it wasn't clearfixed.

 

[aftershxck]

That doesn't make sense at all to me because of the order things would go in.
1. Client requests page.
2. PHP is run server side.
3. Page is sent to client.
4. Javascript runs.

Of course...

 

[ricky1981]

Keep an eye on CSS3, rounded corners with no javascript whatsoever sadly it won't work in IE but Firefox and Chrome work perfectly.

 

[GravyMonster]

TBH if you use IE, you deserve all you get IMO

 

[ricky1981]

haha sadly for us developers, we might not use IE but a lot of people still do. We're going to start using CSS3 more often but only when it's for extra effects rather than "necessary" ones/formatting.

 

[GravyMonster]

At work we've actually started quoting more if the client specifies IE6 compatibility - so thankfully we can get a bit more involved in CSS3.

Even if they don't specify IE6 compatibility we'll still try and make sure it renders correctly and all functionality works - we just don't spend hours trying to fix issues.