How do i default hide elements then show them w/jquery

JavaScript
1

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:

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 
#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

Hi there,

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

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

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

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

just found this…

<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

ok, well so far not so good…

$("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

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.

<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

Thank you Pullo!

11

Don’t know if you got this working yet, but here’s a demo anyway.