Jump to content
xisto Community

dragoneye1405241521

Members
  • Content Count

    2
  • Joined

  • Last visited

Everything posted by dragoneye1405241521

  1. Welcome everybody to this litle tutorial. by v.DragonEyE.n09 Introduction: Using javascript you can find the height and width of a table, cell, div, image, etc.. the more simple way is to ask for this... The only problem we have here is that both, the width and height needs to be specified in the table properties as style attributes. What happen if you want to find out the width or height of a element with out those values specified. Well it's very simple, you just need to modify a little your javascript. The magic words in here are "clientHeight" and "clientWidth", those two work as magic, the only thing is that this only work in the most moderm version of Internet explorer and Netscape, I dont know if they work for mozilla fire fox. You can use those attibutes on eny kinf of object, almost. Well, thats all for now. Later I can show you a way to implement this code to a dinamic page where you want to load content into an iframe and resize the iframe to match the content's height and wdith or just one of them. Att. v.DragonEyE.n09
  2. Welcome everyone, this is my first post. The first thing you need to know is... CSS has two special attributes, the first one is "display" and the second is "visibility". The difference between these two goes like this. "display": has many properties or values, but the ones we need are "none" and "block". "none" is like a hide value, and "block" is like show. If you use the "none" value you will totally hide what ever html tag you have applied this css style. If you use "block" you will see the html tag and it's content. very simple. "visibility": has many values, but we want to know more about the "hidden" and "visible" values. "hidden" will work in the same way as the "block" value for display, but this will hide tag and it's content, but it will not hide the phisical space of that tag. For example, if you have a couple of text lines, then and image (picture) and then a table with three columns and two rows with icons and text. Now if you apply the visibility css with the hidden value to the image, the image will disappear but the space the image was using will remaing in it's place, in other words, you will end with a big space (hole) between the text and the table. Now if you use the "visible" value your target tag and it's elements will be visible again. For example of what I'm saying take a look to the following images. This is how it's looks if you use the "block" value for the display attribute. This is how it's looks if you use the "none" value for the display attribute. This is how it's looks if you use the "visible" value for the visibility attribute. This is how it's looks if you use the "hidden" value for the visibility attribute. I prefer to use the "display" atribute. This is how it's looks the source. <img style="display: block;" src="the_source_img_path" width="100" height="100" /> or <img style="display: none;" src="the_source_img_path" width="100" height="100" /> Now if you want to hide or show this image using a false link or a form button please follow the following instructions. first create the image html source... <img id="myIMG" style="display: none;" src="the_source_img_path" width="100" height="100" /> ... and place a "none" value for the display atribute and add an id element to the img source, "myIMG" for example. Now create a false text link... <span style="color: blue; text-decoration: underline; cursor: pointer;">Click Me</span> now lets add an "onclick event" to that span tag <span onclick="if(document.getElementById('myIMG').style.display=='none') {document.getElementById('myIMG').style.display='block';} else {document.getElementById('myIMG').style.display='none';}" style="color: blue; text-decoration: underline; cursor: pointer;"> Click Me </span> This javscript source will hide or show the image in the moment you click over the false link. The same thing can be applied to a form button. If you need to re-use the javascript source you can create a simple function, for example... <script>function changeme(id, action) { if (action=="hide") { document.getElementById(id).style.display = "none"; } else { document.getElementById(id).style.display = "block"; }}</script> You can call the function using the same way as for the previous example. <span onclick="changeme('myIMG', 'hide');" style="color: blue; text-decoration: underline; cursor: pointer;">Hide the image</span> <span onclick="changeme('myIMG', 'show');" style="color: blue; text-decoration: underline; cursor: pointer;">Show the image</span> Just remember to add the function at the begining of your html source inside your head tags. Well, thats all for now, I will post more advance ways to implement this little trick (tip). Remember, if you need help on this topic, just send me a PM or post directly in here. Att. v.DragonEyE.n09 P.S thank you "twitch" for the TIP
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | 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.