Topic: problem with <div id="mydiv" class="divclass "></div>

[jasonc]

having problems with my DIV's it seems to interfer with another DIV.

the resize functions do not work using the following code, but if i put the .divclass content in a style within the div instead of using class, all works but then does not validate with w3.org

can anyone see why this would be?

Code: [Select]

<script language="JavaScript" type="text/javascript">
function Div(id,hw,ud) {
var div=document.getElementById(id);

if (hw == "h"){
var h=parseInt(div.style.height)+ud;
if (h>=150){
div.style.height = h + "px";
//alert(hw + h);
}
} else if (hw == "w"){
var w=parseInt(div.style.width)+ud;
if (w>=150){
div.style.width = w + "px";
var inputdiv=document.getElementById('txt_message');
var inputw=parseInt(inputdiv.style.width)+ud;
if (inputw>=150){
inputdiv.style.width = inputw + "px";
}
//alert(hw + h);
}
}
}
</script>


Code: [Select]

.divclass { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; }


Code: [Select]

<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resize chat log&nbsp;<img src="resize_d.gif" width="21" height="9" onclick="Div('div_chat','h',20);">&nbsp;
<img src="resize_u.gif" width="21" height="9" onclick="Div('div_chat','h',-20);">&nbsp;&nbsp;
<img src="resize_r.gif" width="21" height="9" onclick="Div('div_chat','w',20);">&nbsp;
<img src="resize_l.gif" width="21" height="9" onclick="Div('div_chat','w',-20);">
</div>

<div id="mydiv" class="divclass "></div>


[Anti-Moronic]

jquery doesn't validate and everybody uses that. Don't ever worry about validation unless you have some small minded, uninformed client who thinks it matters. It doesn't.

Usability - now that matters.

[haku]

Some of us take pride in our work and want it to validate whether the client knows what that means or not.

OP: Can you show us the specific validation error you are getting?

Also you should note that the 'language' attribute of the script tag is deprecated and you only need to use the 'type' attribute.

[jasonc]

Some of us take pride in our work and want it to validate whether the client knows what that means or not.

OP: Can you show us the specific validation error you are getting?

Also you should note that the 'language' attribute of the script tag is deprecated and you only need to use the 'type' attribute.

Yes Haku that is so true, I am very proud of what I do for my friends and for myself when creating pages.

The error only shows should I use STYLE within the DIV instead of using CLASS
w3.org tells me I should not really use the style's but use class and have all of my CSS either in a seperate .CSS file or with in <style> tags in the top of my html code.

seems to be a clash with using 'id' and 'class' in a DIV.

Code: [Select]

<div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"></div>
this allows the script to work correctly.



where as this does not...

Code: [Select]

<style type="text/css" media="screen"><!--
.chatwindow { height: 300px; width: 500px; overflow: auto;
background-color: #CCCCCC; border: 1px solid #555555; }
--></style>
..
..
<div id="div_chat" class="chatwindow"></div>


[haku]

Ya, but what's the error?

[Anti-Moronic]

Some of us take pride in our work and want it to validate whether the client knows what that means or not.

OP: Can you show us the specific validation error you are getting?

Also you should note that the 'language' attribute of the script tag is deprecated and you only need to use the 'type' attribute.

Oh, and I don't because I place more emphasis on usability than silly validation warnings?

Admittedly, errors should not be present, but I straight ignore most validation 'warnings'. Did I not say, jquery does not validate, nor does hardly any large site I visit. Yahoo, google, facebook, phpfreaks! None of them validate, but does that mean they don't take pride in their work?

Find that very insulting to say the least.

But me advocating that people completely ignore validation [I guess] is stupid.

[Anti-Moronic]

As haku said, you need to paste the exact error. It's hard to suss out which it may be just from explanation.

..when you use the second block:

Code: [Select]

<style type="text/css" media="screen"><!--
.chatwindow { height: 300px; width: 500px; overflow: auto;
background-color: #CCCCCC; border: 1px solid #555555; }
--></style>
..
..
<div id="div_chat" class="chatwindow"></div>

..and you say the script doesn't work correctly, do you mean the styles are not applied?

Are you aware you are commenting out the styles here with <!-- --> so the style declarations should be:

Code: [Select]

<style type="text/css" media="screen">

.chatwindow { height: 300px; width: 500px; overflow: auto;
background-color: #CCCCCC; border: 1px solid #555555; }

</style>


[jasonc]

ok
what is not happening is the DIV mydiv is not resizing.

if i do not use 'class' but use 'style' in the DIV mydiv then all works ok.

but i wish for all my cs to be in a seperate file not in the index.html file.  as it should really be done.

Code: [Select]

<script language="JavaScript" type="text/javascript">
function Div(id,hw,ud) {
var div=document.getElementById(id);

if (hw == "h"){
var h=parseInt(div.style.height)+ud;
if (h>=150){
div.style.height = h + "px";
//alert(hw + h);
}
} else if (hw == "w"){
var w=parseInt(div.style.width)+ud;
if (w>=150){
div.style.width = w + "px";
var inputdiv=document.getElementById('txt_message');
var inputw=parseInt(inputdiv.style.width)+ud;
if (inputw>=150){
inputdiv.style.width = inputw + "px";
}
//alert(hw + h);
}
}
}
</script>


Code: [Select]

.divclass { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; }


Code: [Select]

<div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resize chat log&nbsp;<img src="resize_d.gif" width="21" height="9" onclick="Div('div_chat','h',20);">&nbsp;
<img src="resize_u.gif" width="21" height="9" onclick="Div('div_chat','h',-20);">&nbsp;&nbsp;
<img src="resize_r.gif" width="21" height="9" onclick="Div('div_chat','w',20);">&nbsp;
<img src="resize_l.gif" width="21" height="9" onclick="Div('div_chat','w',-20);">
</div>

<div id="mydiv" class="divclass "></div>


[Anti-Moronic]

Don't use more than of these:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

That's bad practice. Use css to apply a margin or padding.

You're js should also be in a separate file.

---

From a closer look this could be an assigning issue. The script is looking for styles applied to div_chat - not the class you used. So, what you should do is apply the styles you want to the id instead like so:


#div_chat{ height: 300px; width: 500px; overflow: auto;
background-color: #CCCCCC; border: 1px solid #555555; }

That should work. Let us know.

[haku]

Did I not say, jquery does not validate

Funny, I use it in almost every site I build, and 99.9% of my pages are valid.

Code: [Select]

nor does hardly any large site I visit. Yahoo, google, facebook, phpfreaks!phpfreaks validates for me.

Code: [Select]

None of them validate, but does that mean they don't take pride in their work?

Find that very insulting to say the least.
So is telling some guy that what he obviously thinks is important enough to start a thread about isn't important.

But me advocating that people completely ignore validation [I guess] is stupid.

Well yes, I would agree. If it's something they want to do, then who are you to tell them not to bother?

[haku]

Jason: Can you show us the HTML output of the invalid code, as well as the actual W3C error that you are getting?

[Anti-Moronic]

Jason: Can you show us the HTML output of the invalid code, as well as the actual W3C error that you are getting?

The error doesn't matter any more. My above post is the solution and is perfectly valid.

[haku]

Ya, I didn't bother reading your post.

[Anti-Moronic]

Ya, I didn't bother reading your post.

Wow, how did an offensive moron like you get to be a moderator? You're not exactly representing phpfreaks very well.

..regardless of how I'm representing who I work for.

[haku]

I'm not a moderator mate. And I haven't treated you any differently than you've treated me. Other than the fact that I haven't called you any names that is.

[haku]

I'm not a moderator mate. And I've only treated you in the manner you've treated me, other than the fact that I haven't called you any names, though you can't say the same, can you.