Jump to content

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


jasonc

Recommended Posts

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?

 

<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>

 

 

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

 

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

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

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

<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...

 

<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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

 

<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:

 

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

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

</style>

 

 

 

 

Link to comment
Share on other sites

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.

 

<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>

 

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

 

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

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

 

 

Link to comment
Share on other sites

Don't use more than of these:

 

        &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.

Link to comment
Share on other sites

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.

 

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

phpfreaks validates for me.

 

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?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.