Jump to content

change style onclick


Guest emtx

Recommended Posts

Guest emtx

Hi There, Can someone help me out? I have several div's with text in them, they all have the same class but none have id's. The divs are generated content that I cannot change. What I want to do is change the style of the div (specifically the height) when it is clicked... How might I go about doing this? And once the syle has been changed I want another click to send it back...

Link to comment
Share on other sites

EXAMPLE:JAVASCRIPT

var status=falsefunction styleChange(e){if(status==false){e.style.height='300px'; status=true}else {e.style.height='0px'; status=false}}

HTML

<div onclick="styleChange(this)"> Click </div>

Edited by eTianbun
Link to comment
Share on other sites

Ah! but what happens when you click one of the other MANY div elements? the status has change (true) for previous clicked div... you have to click it twice! once will return status to false (height: 0;) then again to set it to true (height 300px). Also! setting height to 0, will make div disappear one at a time, height='1em' will at least let you click some part of the div.

Link to comment
Share on other sites

Well, i got what you mean, but as you can see onTop of my post, i wrote "EXPAMPLE", which means, it is an example, and i did not realy mean that him/her should do it that way. It is up to the user to confiqure the code to his/her taste. OR did you expect me to provide all the code for him/her?

Link to comment
Share on other sites

...What I want to do is change the style of the divs (specifically the height) when it is clicked...
In the above quote, (s)he said 'div' (singular) and not 'divs' (plural)... Lol... Ok, lets say i was wrong Bro :-) Edited by eTianbun
Link to comment
Share on other sites

When you have several div's (plural), at the point of clicking you are clicking div (singular), which is one div (singular) of many div's (plural), what's the matter, am i not allowed to point out the EXAMPLE is only intended to work with 1 div, and height needs adjusting.

Link to comment
Share on other sites

Guest emtx

ah thats great... one big problem is I can't edit the div to put the onclick part in it.Is there a way to make a div (or part of the text in it) clickable by only using script in the head?

Link to comment
Share on other sites

window.onload=function(){var div_elem = document.getElementsByTagName("div"); for(i=0; i<div_elem.length;i++)  {  if(div_elem[i].className == 'target_me')   {   div_elem[i].onclick=function()	{	styleChange(this)	}   }   } } function styleChange(e){e.style.height != '300px' ? e.style.height = '300px' : e.style.height = '1em'}

<div class="dont_target_me">you can click me, but i won't do anything</div><div class="target_me"> Click </div><div class="target_me"> Click </div><div class="dont_target_me">you can click me, but i won't do anything</div><div class="target_me"> Click </div><div>you can click me, but i won't do anything</div><div class="target_me"> Click </div>

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Guest emtx

Oh wow thats perfect! Thank you so much!My javascript knowledge is rather basic, it would've taken me forever to figure that out :) ...One more thing- Is it possible to target a keyword in the div, instead of the whole div?

Link to comment
Share on other sites

what like

function styleChange(e){if(e.innerHTML.search("Click me") > -1){e.style.height != '300px' ? e.style.height = '300px' : e.style.height = '1em';}}

<div class="dont_target_me">you can click me, but i won't do anything</div><div class="target_me"> Click me </div><div class="target_me"> Click </div><div class="dont_target_me">you can click me, but i won't do anything</div><div class="target_me"> Click </div><div>you can click me, but i won't do anything</div><div class="target_me"> Click me </div>

Link to comment
Share on other sites

So! as you can't add anything within the div container, you want to target any keyword, or specific keyword that appears in all show/hide div containers that will trigger the show/hide function. one requires array storage of different keyword belonging to specific div elements, finding these specific keywords and surrounding with a anchor link with classname, and applying a onclick event to show and hide its parent div container, other will use all the previous steps, but without the array storage.

Link to comment
Share on other sites

Guest emtx

Actually, that is getting more complicated than I'd like... However could you explain to me why adding the css 'text-overflow' makes it so the text wont fill the box after resizing it?

<html><head><script type="text/javascript">window.onload=function(){var div_elem = document.getElementsByTagName("div");for(i=0; i<div_elem.length;i++)  {  if(div_elem[i].className == 'test')   {   div_elem[i].onclick=function()    {    styleChange(this)    }   }  }}function styleChange(e){e.style.height != '200px' ? e.style.height = '200px' : e.style.height = '1.5em'}</script><style type="text/css">div.test{width:200px;height:1.5em;overflow:hidden;border:1px solid #000000;white-space: nowrap;text-overflow: " (more...)";}</style></head><body><div class="test">This is some long text that will not fit in the box.</div><div class="test">This is some long text that will not fit in the box.</div><div class="test">This is some long text that will not fit in the box.</div></body></html>

Link to comment
Share on other sites

With overflow: hidden; any beyond width 220px becomes hidden, white-space: nowrap; will prevent text moving to new line when reaching end of container, text-overflow: ??? new to me! never used it, as far as i can see you get the same result using overflow: hidden;

Link to comment
Share on other sites

Guest emtx

text-overflow: "blah"; will put "blah" at the end of any text that is bigger than it's box. In the example I put in the code above it will put " (more...)" just before the space runs out in the box. But this only works with white-space: nowrap; How do I tell the javascript to change the white-space as well as the height? I am guessing doing this is incorrect:

function styleChange(e){e.style.height != '200px' ? e.style.height = '200px' : e.style.height = '1.5em'e.style.white-space != 'normal' ? e.style.white-space = 'normal' : e.style.white-space = 'nowrap'}

Link to comment
Share on other sites

Guest emtx

Oh I get it, I need to write white-space as whiteSpace when working with javascript. Thanks a lot!

Edited by emtx
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...