SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    webkit-transition questions

    Hello all. To us yankees...happy fourth, be mindful not to loose a finger or two, keep the pets inside. To everyone else, have an awesome day as well.
    Onto the transition thing now.

    On this page:
    http://www.danielamorescalchi.com/coreCorp/index.php
    I set up the first image to change when the user hovers over it. great...works. however the bottom image doesn't' resize.
    Any advice on how to affect the size of both images as the broweser re-adjusts in size.
    on this other page
    http://www.danielamorescalchi.com/coreCorp/staffing.php
    I have a thin animated line at the top I am testing out. of course it is fine in chrome. but it gives me scroll bar in ff & nothing at all in IE.
    The vendor prefixes are in...
    How can i fix this. Any suggestions please?
    Thx
    d

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    the bottom image doesn't' resize.
    I don't understand what you mean by that.

    But make sure to optimize your large background images. They are gigantic files, which isn't viable on the web. Use the Photoshop Save for Web option to reduce them to about 150 kb.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello Ralph, i mean the first image w/the oil platform. if you hover over it changes. but when you resize the browser you'll see the second image remain the same size and the both are then visible.
    Yes on the bg large sizes. Was actually wondering about preloading, but will try to re size & not loose the quality.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    when you resize the browser you'll see the second image remain the same size
    Try giving the <a> container position: relative;

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Genius! Ralph great suggestion, i had tried the containing div but not the a property.
    At first it re sized to a tiny bit but i used:
    Code:
    .imgCtr{
    display:block;
    position:relative;
    padding-bottom:225px;
    }
    the display:block did the trick.
    bottom margin/padding not kicking in which is interesting.
    this also works on the span w/the text that I added. but not if I stretch the browser way out...or way in.
    currenlty I set the size of the span to 100% you think setting a size would work better?
    thx
    D

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    wondering if I should just use an image for the title as well. but it'd be a lot neater to use css....

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    additionally:
    for the middle image I wanted to try and add more animation on hover: This is what I shot for, and so far it hasn't worked so looking for answers.
    in the html i have:
    Code:
    <div id="staffSpan" class="span3">
    				<a class="aImg" href="staffing.php">
    				<img class="img-btm" src="animate/bp01.jpg" alt="staffing">
    				<img class="img-top" src="animate/bp02.jpg" alt="staffing">
    				<span>Staffing</span>
    				<div class="txtBox">
    					<ul class="unstyled inline">
    					<li class="box1">text here</li>
    					<li class="box2">other text here</li>
    					<li></li>
    					</ul>
    				</div>
    				</a>
    			</div>
    in the css:

    Code:
    .txtBox{
    visibility:hidden;
    width:1000px;
    height:250px;
    color:#fff;
    background:#000;
    position:absolute;
    top:0;
    left:-100;
    }
    .txtBox:hover{
    visibility:visible;
    }
    .box01{
    display:block;
    width:500px;
    height:250px;
    }
    .box02{
    width:500px;
    height:250px;
    }
    so why isn't it kicking in?

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Try opacity instead of visibility... and cross your fingers.


    or maybe:
    Code:
    a:hover .txtBox {
        visibility:visible;
        cursor:pointer;
    }
    FYI: .box01 -vs- class="box1"

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    awesome! that did the trick. And I changed the z-index so now it shows up on top.
    Could you advise on how to position it?
    I tried giving it a top & left property (also tried at ul & li level) didn't work. currently chrome says they are "invalid property values" but I can't see where else they'd go.
    also on of the probs is that when I hover over the tech image i get the text boxes.
    On the other hand...crap...now I get an horizontal scroll bar...

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    I'm not following along very well. There seem to be two issues being discussed and two different test pages.

    Regarding the error message with the <ul>:
    Code:
    <span class="txtBox">
        <ul class="unstyled inline">
            <li class="box01"><a href="#">text here</a></li>
            <li class="box02"><a href="#">other text here</a></li>
            <li></li>
        </ul>
    </span>
    According to Firebug, the <ul> is not allowed inside the <span>. The reason is of course that block elements such as the <ul> are not allowed inside of an inline element, such as the <span>. You could probably change the <span> to a <div> and style the <div> as needed.

    The other questions I'm unclear about. What needs to be positioned?

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The other two Validator issues:

    Similar to the preceeding issue... you can use a <span> tag inside the <h3> tag, but not a <div> inside the <h3> tag.
    (line 113)
    Code:
    <h3 class="footToggle"><div class="upArrow"></div></h3>

    The </body> tag should be placed just above the </html> tag. The scripts should preceed the </body> tag.
    [code]
    </body>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/cdiJs.js"></script>
    </body>
    </html>
    [code]

  12. #12
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Done. Ronpat thank you for the clear explanation as why the span would not work w/a ul. Will take care of the other issues as well.
    As for clarifying.
    when i hover over staffing i'd like for those two boxes (that will hopfully be soon styled and more attractivly animated)
    to show up on top and centered over the staffing image.
    Right now regardless of me giving the .txtBox an absolute position it is stuck to the left side of the image.
    Also a bit problematic is that if i hover over the tech image for example the boxes display (understandable due to their size).
    So I was wondering how to fix that.
    (do have another question about the animation but not to muddle the waters will post a new one)
    Thank you.
    D

  13. #13
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    all right! yey...high five. solved the positioning, but only on local & chrome?!? wtf???
    If there is a better solution let me know.
    but here it is in case it helps anyone else:

    Code:
    .txtBox{
    opacity:0;
    width:100%;
    line-height:150px;
    color:#fff;
    position:absolute;
    left:500px;
    top:600px;
    }
    .txtBox:hover{
    opacity:1;
    -webkit-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    z-index:1000;
    }
    set the text box to absolute. Could have sworn I tried it last night.
    however would the
    Code:
    {display:none;}
    property be better than opacity. that whey when it is not hovered over it would not interfere w/the user hovering over the two other images?

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    opacity:0 makes the object invisible and preserves the space on the page; the object continues to respond to :hover.

    visiblilty:hidden makes the object invisible and preserves the space on the page, but the object does not respond to :hover.

    display:none makes the object invisible by removing it from the page entirely.

    Pick the one that suits your design.

    Ron

  15. #15
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi ronpat, saw that as well on http://www.w3schools.com/css/css_display_visibility.asp
    And now trying it out on http://www.danielamorescalchi.com/coreCorp/staffing.php
    but what is the opposite of display:none?
    display:show, display:visible, display:for the love of ceiling cat show up already?

    I tried this so far. I have taken out the div but would like to show up when I hover over the appropriate link.

    Code:
    #showLeft{
    display:hidden;
    width:350px;
    height:250px;
    position:absolute;
    background:url('imgs/xParentFtr.png');
    top:250px;
    left:-300px;
    z-index:100000;
    }
    
    
    #link1:hover #showLeft{
    display:show;
    }

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The opposite of display:none is display:box-type, where box-type is [block|inline-block|table|etc...]

    For a full list, see:

    http://reference.sitepoint.com/css/display

    I'll guess that #showLeft is a block object, so {display:block} will bring it back to life.

  17. #17
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    tried it. didn't work...

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,619
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    You cannot :hover over an object with the property {display:none} because it isn't there. That's why I suggested opacity as a possibility.

    I'm having a problem visualizing what you are trying to achieve. What is supposed to trigger what. Would you mind describing again how the objects are supposed to work on the page?

  19. #19
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    814
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sure thank you Ronpat.
    I'd want to add more animation to the page. both on the main and staffing page.
    so when the user hover over an image a div displays animation w/content.
    on the index page both boxes w/the content should show at once. on the staffing page the display based on which half of the image the user hovers over.
    I want to use positioned divs as I want the effects and animation to be larger than the original image. I don't just want a roll over.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •