ShadowMage
-
Posts
3,476 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by ShadowMage
-
-
As JSG mentioned, you use setInterval or setTimeout (probably setInterval in this case) to run a function periodically. In that function you would just tack another period or asterisk to the innerHTML property of your meter:You say, “It's pretty easy to set up a function to run on a timer that will add another period or whatever to a meter . . .” How? That’s exactly what I need! But when I tried to write it myself, it wouldn’t work. True, I setup a while loop on a timer to add another period each iteration, but then it wouldn’t print to the screen until it was all done.var t = setInterval(function() { meter.innerHTML += '*'; }, 1000); //run every 1000 milliseconds (1 second)(This code assumes meter is a global variable referencing your meter element. You'd also want to change the interval to the total time divided by the number of asterisks you want to have in your meter.) Of course, this still leaves you with the other issue JSG mentioned:
This is where the technique that davej mentions would be useful. Throughout the course of whatever process you're running, you periodically update the meter element by modifying the innerHTML like I showed you above (only this time you don't have to use setInterval/setTimeout).how do you plan to calculate the total time it's going to take? -
@scout1idfYours comes very close to what I need. Only two things:- The content does not stretch the full height of the window.- The entire sidebar scrolls. I would like, if possible, for only the #itemList div to scroll. Perhaps what I'm asking for is not even possible...If that is the case, I can work with what you gave me. I think I know how to make the #itemList scroll, but I'm still not sure how to stretch the #content...@manojnaanakI did not see any difference between your code and mine. What did you change?
-
I have the following test code set up to illustrate my problem:
<!DOCTYPE html><html><head><title>Test Page</title><style type='text/css'>* { margin: 0px; padding: 0px;}html, body { height: 100%;}body { width: 960px; margin: 0px auto;}#header { height: 100px; font-size: 36pt; font-weight: bold; background-color: #999;}#content { background-color: #ccc;}#sidebar { width: 115px; border-right: 2px ridge #999; padding: 0px 4px; margin-right: 8px; float: left;}#sidebar .col1, #sidebar .col2 { padding: 1px 4px; float: left;}#sidebar>.col1, #sidebar>.col2 { font-weight: bold;}#sidebar .col1 { width: 71px;}#sidebar .col2 { width: 28px;}</style></head><body><div id='header'>This is my header</div><div id='content'> <div id='sidebar'> <div class='col1'>Header 1</div> <div class='col2'>Hdr2</div> <div id='itemList'> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> <div class='col1'>Item</div> <div class='col2'>0</div> </div> </div> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p> <p>This is some content</p></div></body></html>I am trying to get the #content div to stretch to the bottom of the browser window. I also want the #itemList div to stretch to the bottom of the content div, but not to exceed it should there be more items than will fit in that space (in other words it should be the full height of the content div, but scroll if there is too much content).I just can't seem to wrap my head around how this can be accomplished. I have tried a wide variety of things including various "sticky footer" techniques, but nothing seems to work. The sticky footer techniques work for footers (obviously), but not when there is a header. This is a very common thing and I feel like I should know how to do this...Can anybody help me?
-
I never use margins on table cells nor do I use the cellpadding/cellspacing attributes, but I've never had any trouble with cells using the padding I set for them in CSS. I suppose maybe if I were to use cellpadding it might override the CSS, but it doesn't appear that OP is using cellpadding/cellspacing.
-
First of all, I would really, really recommend that you ditch the table for layout and use box model techniques instead. Tables are meant for tabular data only. But anyway, if you really want to stick with the table, try adding border-collapse: collapse; to the style for the table.
-
Ah yes, the document object. It must be used by the browser as an element. That would explain (most of) the odd behavior...It doesn't, however, explain why body is the default offsetParent.There is an element that isn't represented textually in the DOM. The "document" object accessible to Javascript. I'm not sure if it's used by the browser as an element or not but it can have event listeners and other properties pertaining to ordinary nodes. -
To add to the mystery, if you were to set position: relative on the html element, the absolute element positions itself according to the smaller height dimensions. So it seems that your original assumption of there being a "higher" element to position from is correct. Although, this doesn't quite make sense either because changing the position of the html element also changes the DOM offsetParent to the html element (you had originally stated that it is set to the body which, by default, it is). If the default offsetParent is the body it should position according to that, yet it doesn't...and if there is a "higher" element, one would think the offsetParent should be set to whatever that element is. The more I investigate this, the more confused I get...
-
After seeing the JavaScript DOM properties return the smaller height value, I would be inclined to agree. That and the fact that the behavior appears across all major browsers with one exception (see below).I would be cautious about labeling this behavior as a bug.
Oddly enough, this is the behavior exhibited by all major browsers (FF, C, O, S) except IE (surprise, surpriseIt seems to me its just the natural state of things across browsers(well, at least two of them anyway, didn't try Opera, and IE I avoid like the plague).
). IE (8 that is, I didn't test other versions) is the only one in which the DOM properties return the full window height. In IE, the developer tools also places a blue border around the entire window. However, adding a border to the html element only places the border around the content area....Ah, good old IE...
-
What you're seeing is probably buggy behavior in the developer's tools. Try applying a background color to the html element and you'll see that it does cover the entire viewing window.EDIT: Although, the JavaScript DOM properties also return a height that is not the full window (102 in FF). Even when explicitly setting the height of the html element in CSS, the background covers the entire window. Perhaps the background and the parenting of an absolutely positioned element are "immune" to the size restrictions of the html element.....I am sorry to be the bearer of bad news but that's not the way it works in my Chrome browser. When I hover the opening <html> tag in the elements window of the developer tools it highlights the <html> container in a light blue rectangle and reports the size in a bubble. In my example page it's reporting the size of the <html> container as 1920px x 80px. Surely you would agree that a height of 80px doesn't equate to anything near a whole window? I can take a snapshot of the screen with this information if its too hard for you to swallow.
Right, but the fallback element is the html element. If there is a parent with position other than static, it uses that parent. If not, it uses the html. It does not matter what the position type of the html element is.By the admission of the quoted text in my original post, for any element to be positioned "relative to its parent container" the parent container has to be positioned as anything 'but' static. And guess what the default positioning for the <html> element is as reported in my chrome browser? That's right. It's positioned as 'static' by default. Therefore, it does not act as an anchor for any positioned elements whatsoever. -
Ok, thanks for the confirmation.
-
For starters, does anybody know the difference between Python's / and // operators? What would be the PHP equivalents to those operators? From my understanding of this page:Python's / operator is the same as PHP's / operator.
x / y = x / y
Python's // operator is the same as using the floor function on the result of the / operation in PHP.
x // y = floor(x/y)
Can anyone confirm this? Or am I way off?
-
For the most part, yes. The most commonly used tags, attributes, techniques and properties will begin to stick in your memory after you've used them for a while. And unless you have an exceptional memory, you'll never memorize everything else. The important thing is to be familiar with the rest of the stuff and be able to research things when you need to.How do you keep it all in your head? Is it just a time thing? -
Or use margins. Margins should collapse into a single margin where they meet.
-
The difference is in the way that values are converted to boolean. In if statement only cares about boolean values when determining which block to execute, so any expression in the parens is converted to a boolean value. Some values are "truthy" and some are "falsey". Obviously, boolean true is truthy and false is falsey. The ones that aren't so obvious are the values 0, '' (empty string), and null (I think). Those values are falsey. Anything else is truthy. The indexOf function returns an integer referring to the position of the substring or -1 if the substring isn't found. Since any integer other than 0 is considered truthy, the if statement will evaluate to true for all cases except when the substring is at the beginning of the string being searched (thus returning 0, a falsey value). When you compare the return value to another value using != (or any other comparison operator) you are sending a boolean value to the if statement. Does that all make sense?
-
Yes, hovering on element 1 can change the style of element 2. Provided that element 2 is a descendant or sibling of element 1. If element 2 is a parent or completely unrelated to element 1, you'll need to use JavaScript.Can elements control other elements (for example I want that when I hover over element1 that element 2 changes color?) or I need some browser scripting language for that? -
Which is why I asked for your code, DarkxPunk. You may have a typo or something that is preventing things from working properly. There may also be other code conflicting with something in the code I provided. We can't know that unless we see what you have.I don't see that problem with the code in post 6, he did it correctly there. -
-
It was probably a typo, but just to be sure its getElementsByTagName.Thank you very much! It's funny last night I was on a roll but never found the getElementByTagName method. Thanks a bunch! -
What browser are you using? The following exhibits the behavior mentioned in that link in FF:
<!DOCTYPE html><html><head><title>Textarea Test</title> <script type='text/javascript'>window.onload=function() { var dump = document.getElementById('dump'); var txt = document.getElementById('txt'); dump.innerHTML += "<b>Before<b><br />"; dump.innerHTML += "innerHTML: "+txt.innerHTML; dump.innerHTML += "<br />defaultValue: "+txt.defaultValue; txt.innerHTML = "This is the new innerHTML"; dump.innerHTML += "<br /><b>After<b><br />"; dump.innerHTML += "innerHTML: "+txt.innerHTML; dump.innerHTML += "<br />defaultValue: "+txt.defaultValue;}</script></head> <body><div id='dump'></div><textarea id='txt'>This is the default value</textarea></body></html>EDIT:Chrome, Opera, and Safari also exhibit this behavior. IE (8) is the only one that did not modify the defaultValue when the innerHTML was changed.
-
Well, you can use the getElementsByTagName function to get all anchors in the page:
var anchors = document.getElementsByTagName('a');And then loop through them and assign the handler:
for (var x=0, y=anchors.length; x<y; x++) { anchors[x].onclick = function() { changePage(this); }}And for excluding certain links, you could add a class name to them and within your loop check to see if the anchor has the given class name before assigning the handler to it:
<a href='www.google.com' class='no_redirect'>Google</a>
for (var x=0, y=anchors.length; x<y; x++) { if (anchors[x].className.search(/\s*no_redirect\s*/) == -1) { anchors[x].onclick = function() { changePage(this); } }}There could be errors, as this was written off the top of my head and not tested, but that's the gist of it.
-
There is a gotcha, though, if you're using textareas with the defaultValue property. See http://www.sophox.com/wordpress/?p=921
-
This is because images are, by default, inline elements. Inline elements leave a bit of space below them for "hanging letters" like g, p, or q. You can fix this by setting their display to block (I think inline-block will also work) or by floating them.
-
I can think of two options. Make them absolutely positioned or animate the appropriate margins so the margins decrease as the size increases.
-
If you already have the calendar built, then why not use the same code? There is no difference between HTML 5 and HTML Transitional as far as syntax is concerned. The only difference is new tags and some that have been deprecated. If you're using an iframe, though, that tag is still valid in HTML 5. Just copy your working code into the new page, then run it through the W3 validator to find any deprecated tags/attributes. EDIT:Actually, I think I may have misunderstood you. I thought you had already implemented an iframe in HTML Transitional and linked it to the page where the calendar is, but didn't know how to do it in HTML 5. After re-reading your post, I do not think that is the case. I think you are asking how to link to (import) the calendar page in HTML 5 and that the calendar page is written in HTML Transitional.Have a look at the iframe reference.And AFAIK, any content in an iframe does not affect the validity (or standards compliance) of your page.
-
1
-
). IE (8 that is, I didn't test other versions) is the only one in which the DOM properties return the full window height. In IE, the developer tools also places a blue border around the entire window. However, adding a border to the html element only places the border around the content area....Ah, good old IE...
side by side text boxes
in CSS
Posted
Of course it is, just use float. If you want to maintain the grid layout (3 on top, 3 on bottom) you'll have to put them in a container.
#container { width: 600px; /*If you add borders/padding/margin to your grid boxes you'll need to adjust this*/}.gridBox1, .gridBox2 { height: 200px; width: 200px; background-color: #555; float: left;}.gridBox2 { background-color: #999;}