Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Day

  1. If you're want to share your desired design, like a mockup, I can help ya out. It's just hard to do without knowing the role of each section.
  2. well watch was giving me some undesirable results and I'd rather not use it until I fully understand what that plugin script from stack exchange is doing, but I did find an alternative solution to my problem. It's probably not the best way to handle it though function isHidden(el) { return /display:s*none/.test(el.getAttribute('style'));}if (fs.input[i].offsetParent !== null) { setWidths();}else { var nextParent = fs.input[i].parentNode; while (!isHidden(nextParent)) { if (isHidden(nextParent.parentNode)) { hiddenParent = nextParent.parentNode; break; } else nextParent = nextParent.parentNode; } var origStyle = hiddenParent.getAttribute('style'); var tempStyle = hiddenParent.getAttribute('style').replace(/display:s*none;*/, ''); hiddenParent.setAttribute('style',tempStyle); setWidths(); hiddenParent.setAttribute('style',origStyle);} This is all happening in a for loop. If the offsetParent property is null, it just finds the parent that has the display: none style, removes it, runs the setWidth() function, then adds the original style back again.
  3. Awesome! Thank you. I was being too specific in my searches, searching for listeners of changes to .offsetParent, instead of simply object property changes. The fix script isn't playing nice with my script in IE8, but it does make .watch work so now I just have to find out how to make them work together which is only a matter of time.
  4. I've got a few elements that get width based on the rendered width of other relative elements. However some of the relative elements are in hidden containers when the page loads so all of the elements that are using the relative element's width are getting a width of 0px. I was able to do the following to make sure the width is only applied when the relative element is visible by checking the value of .offsetParent if (el.offsetParent !== null) { // use el.offsetWidth to give other elements their width } Now I'm trying to figure out how to run the function once el.offsetParent changes from null. Can I create some sort of event listener for this behavior?
  5. Day


    add overflow: hidden; to #ok
  6. Day

    loop creation

    Sometimes it helps just to type it out, write it down, or say it out loud to help facilitate the problem solving process. If you saw my notebook at work, you might think I was crazy.
  7. There are multiple "right" ways to layout what you're describing, but for me it would depend on what the role of each section described would be. For instance, if the 20px right and left vertical sections are just to be a border, I wouldn't code the top and bottom ones out as different sections. Example: _____________________ |_____________________| | | | | | | | | |_____________| | | | | | | | | | | | | | | | | | | | | |__|_|_____________|_|__| |_____________________|
  8. Day

    Need help in width

    <!doctype html><html><head><style type="text/css" > p { text-align: center; } span { border: solid 3px orange; background-color: yellow; color:green; padding:40px; display: inline-block; }</style></head><body><p><span>This is the fist para</span></p></body></html>
  9. Day

    How to lose :focus

    I'm still seeing the same default behavior of losing focus when i click away from a div with a tabindex. If you have an example I can try to troubleshoot it for you. Just for good measure though, here is the forced behavior with JavaScript for divs with tabindexes: http://jsfiddle.net/RDay/DWa6Q/4/
  10. Day

    How to lose :focus

    Can you show an example? By default, a focusable element will lose focus when you've clicked off of it. if you wanted to force the behavior with JavaScript you could do something like what I have here: http://jsfiddle.net/RDay/DWa6Q/2/
  11. Day


    This isn't something you can do with javascript unfortunately. You will need to use a server side scripting language such as PHP or ASP to use includes. The only way to do it without server side scripting languages would be with iframes, which I've done here: http://jsfiddle.net/RDay/DhUa8/
  12. It looks to be behaving correctly to me, can you show us a screen shot of the issue? Also, your photography is amazing!
  13. I can't believe I read this entire thread. L8V2L, you are being pretty rude and demanding. I don't know why you feel so entitled or why everyone is so willing to help you. Just start building some things and if you have trouble, look in one of your manuals for a solution or just google it. This has already been said in this thread. I feel like you're just stringing everyone along here. With that said, I'm going to stay away from this thread to prevent encouraging your behavior.
  14. In order for an element to take on 100% height of the window, you'll have to give html and body 100% heights as well. Also, to do the math your trying to do in css, it needs to be written out as: height: calc(100%-140px); calc() isn't supported in earlier versions of IE, but you could also do something like this: http://daylidesign.com/tests/remainingHeight.html html: <div class="widthContainer"> <div class="topContent"> <p>Top Content</p> </div> <div class="remainingHeight_container"> <div class="bottomContent"> <p>Bottom Content</p> </div> </div></div> css: html, body { height: 100%; margin: 0;}.widthContainer { width: 960px; height: 100%; margin: 0 auto; position: relative;}.topContent { background: #CCC; width: 100%; height: 140px; position: absolute; top: 0;}.remainingHeight_container { background: #999; height: 100%; overflow: hidden;}.bottomContent { margin-top: 150px;} You could also use JavaScript.
  15. You've also got the background position values in the background-repeat declaration. This should be written out as background-repeat: no-repeat;background-position: center top; or if you'd like to have all of them under one selector you could write them out as body {background: #404040 url('Images/layer_bg.jpg') no-repeat center top;}
  16. It should be transparent by default if you haven't set a background. Can we see a screenshot of the issue? Or even better would be a link to the page.
  17. The problem is that the width of the links are relative to the content inside of them. The content isn't long enough to take up the full width of the container. As for the dropdown, the content in the drop down link is longer than the link it is dropping down under. If you want everything to line up, you'll have to set specific widths for the links instead of just padding.
  18. I'm not seeing white but I am seeing a pause before the content is shown. This is just the time it takes for the page to be loaded into the iframe. I would suggest dropping the iframe and using separate pages. The iframe is creating a second scroll bar which isn't a favorable experience for the user.
  19. I was referring to the header being sticky. Not the footer.
  20. It absolutely matters... Your telling me I could have a 500px high sticky header and it wouldn't matter? After a certain point the header becomes intrusive. Every design decision should contribute to the experience. At this height, I think it hurts the experience. The header looks good when the page loads, it is just when I start scrolling that it seems too tall. Maybe you can just have the height shrink as you scroll until it reaches a min-height and then becomes a sticky header.
  21. The header is a bit tall for a sticky header.
  22. I would remove the bold affect when you hover over nav dropdown items. the color change alone is sufficient and the bold is a bit jarring.
  23. As for languages, you will use HTML to structure your pages, CSS to format/style them, and you could use JavaScript for some of the interactive content, but PHP is capable of many of the things you would do with JavaScript.
  24. That looks like default ul padding. Instead of a negative left margin. Try just setting the padding to 0 for the ul, Or at least the left padding. edit: Just tested and confirmed. This will fix the problem. .nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; padding: 0;}
  25. It may just be the way the browser renders text. Some browser render text bigger/heavier than others and handle scaling of text slightly differently. Set specific px heights on the containers and try zooming again. If it fixes the alignment than it should tell you that it is most likely just the different text rendering.
  • Create New...