SitePoint Sponsor

User Tag List

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

    how do i default hide elements then show them w/jquery.

    Hello. on this page:
    http://www.danielamorescalchi.com/coreCorp/staffing.php
    i have two empty gray divs.
    I'd like for them to be hidden. unless the user hover over the coresponding link.
    So for example if the user hovers over the left box the gray div should display and be clickable.
    I tried starting off with:

    Code:
    function(){
    $("#link1").hover(function(){
    	$("showLeft".show)("normal");
    })
    }
    But pretty sure I am not on the right path.
    Can you folks please advise as to the right code or info on where to get it?
    thx
    D

  2. #2
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    or was also trying this

    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;
    }
    which so far is not working either.
    is it:
    display:yes, visible, show???

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by pdxSherpa View Post
    So for example if the user hovers over the left box the gray div should display and be clickable.
    This shouldn't be too hard to accomplish, but it would help to first understand 100% what you are trying to achieve.

    On page load the divs should be hidden.
    When the user hovers over the left side of the photo the left div should appear.
    When a user hovers over the right side the right div should appear.
    So far, so good. But you say that the divs should become clickable.
    Does that mean that the user can move their mouse from the photo to the div and the div will remain visible (like a dropdown menu)?
    When do you want to hide the div again?
    When the user moves their mouse to an area that isn't the div and isn't the half of the photo that triggered the div to be shown?

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello Pullo!
    Yes you are correct in all of the above. That is my objective w/these divs.
    was trying to do that w/css but having some issues and wondering which was better. css or jquery in this case.
    Thx
    D

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hey Sherpa,

    I just sat down to have a look at this, but you changed the mark-up of the page.
    Could you put it back to how it was you wanted it?

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hello Pullo, thank you for taking the time to look at it, actually if you go to the index page you'll see the same thing.
    I sub the ul w/box-sizing. but have the same issue.
    http://www.danielamorescalchi.com/coreCorp/index.php
    two currently hidden boxes. I'd like for them to center on the page in front of the middle image and be availble to the user

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    just found this...
    Code:
    <script>
    $("li").hover(
    function () {
    $(this).append($("<span> ***</span>"));
    },
    function () {
    $(this).find("span:last").remove();
    }
    );
    //li with fade class
    $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
    </script>
    so will it out a version to suit. But please feel free to advise. would love to figure out how to center those suckers.

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ok, well so far not so good...
    Code:
    $("staffSpan").hover(
    function () {
    $(this).append($("<div class="txtBox">			
    					<div class="boxes"><a href="#">text here</a></div>
    					<div class="boxes"><a href="#">other text here</a></div>
    				</div>"));
    },
    function () {
    $(this).find("txtBox:last").remove();
    }
    );

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    You can center them, but you're still going to need to have the containing div appear on top of the picture that triggers the fade in.

    It's late here, so I'll have a look tomorrow.
    In the meantime, here is a small function which will center an element using jQuery.
    This might or might not be useful.

    Code:
    <script>
      jQuery.fn.center = function () {
        var maxHeight = $(window).height() - 100;
            
        if (this.height() > maxHeight){
          this.css("max-height",  maxHeight);
        } else {
          this.css("max-height",  "90%");
        }
            
        this.css("position","absolute");
        this.css("top", ($(window).height() - this.height()) / 2);
        this.css("left", ($(window).width() - this.width()) / 2);
        return this;
      }     
          
      $("#myDiv").center();
    </script>

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pullo!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Don't know if you got this working yet, but here's a demo anyway.


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
  •