Jump to content

Day

Members
  • Posts

    53
  • Joined

  • Last visited

Posts posted by Day

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

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

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

  4. Probably,creating a topic about it,was not even necessary.

     

    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.

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

    _____________________

    |_____________________|

    | | | | | |

    | | |_____________| | |

    | | | | | |

    | | | | | |

    | | | | | |

    |__|_|_____________|_|__|

    |_____________________|

  6. <!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>
  7. 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/

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

  9. Another thing I'm thinking about is that the image is sliding under the left sidebar if I make the screen size smaller. Any idea how can work on this?

     

    Thanks again

     

    It looks to be behaving correctly to me, can you show us a screen shot of the issue?

     

    Also, your photography is amazing!

    • Like 1
  10. 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.

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

  12. You've also got the background position values in the background-repeat declaration.

     

     

     

    background-repeat: no-repeat center top;

     

    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;}
  13. 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.

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

  15. i dont think it matter how tall the header is for a sticky footer

     

    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.

  16. 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;}
  17. 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...