Mouseover overlay div stays positioned only with first result of loop - javascript

I have a script that overlays a div if you mouseover an image button.
This works great for one instance but if the results are more than one (in a mysql loop) the overlay box stays with the topmost result. How can I make this follow and jump down with each result listed instead of just the first one? If you mouseover each button down the list, it does popup but it's the positioning of the popup that won't move downwards.
I am sure this has to do with position: absolute vs. relative etc.. but when I change those, the script doesn't work anymore. Not sure if there is an alternative to this overlay feature?
The end result is that I have a list of results for a client to see. Each list has buttons where they can mouseover to see a note.
// divs that are in the loops...
<div style="float:left; position: relative;" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
<img style="padding:0 12px 0 12px;" src="/images/llm/button-account-notes.png">
<div id="child" class="areas_served_container shadow">
pop up content
</div>
</div>
// script that is in the footer
<script language="javascript">
function callMouseOver(){
document.getElementById("child").style.display = "inline";
}
function callMouseOut(){
document.getElementById("child").style.display = "none";
}
</script>
// style sheet for div that overlays
.areas_served_container {
display: none; position: absolute;
top:44px; left:94px;
z-index:999px;
width:350px; padding:20px;
}

You can't have more than one element with the same id. It have to be unique. Then you have to add parameter to you functions. But you should use jQuery instead of inventing a wheel.

Related

Overlapping dropdown

I want to embed a dropdown div in a wrapper div that has 0 height, so that it takes no space whether or not it is shown, and when it is shown, it overlays the contents placed below. Suppose that dropdown element is a div with content Foo. I did something like:
HTML
<div class="dropdown_wrapper">
<div id="dropdown_content">Foo</div>
</div>
CSS
.dropdown_wrapper{
height: 0;
overflow: visible;
}
And through Javascript, I switched the #dropdown_content's style between display: block and display: none. When it is the former, I expect the content to be shown, but it is actually not shown, hidden within the wrapper div that has 0 height.
How can this be fixed?
you probably do not want the wrapper to use any space in the document. to use it as an anchor point use
position: absolute;
overflow: visible;
on the wrapper. this way the content will set it's own bounding box.
the rest seems to work as you intended. check this FIDDLE

jQuery Traversing and simple code?

Okay, before I ask this question. Let me explain my goal: I want to write as little code as possible, and still be able to have tons of functionality at the same time. I have coined this as 'beautiful code' to myself and colleagues.
Here's the problem: I want to click a box, and a panel to fade in with the desired content based on which box I clicked. Except that I cant use two classes and cannot re-use id's.
Here's the code: http://jsfiddle.net/2Yr67/
$('.maingrid').click(function(){
//'maingrid' fade out
//'panel' fade in with proper content
});
I had two ideas that would please me.
A) Have one panel fade in, and content fill into the panel based on which 'maingrid' box that was 'click'ed
B) Have a specific panel with the content fade in, based on which 'maingrid' was selected
I'm not asking for you to do it for me, simply push me towards the syntax needed to do what I want
Thanks in advance!
The first thing to do is to move your panel HTML elements closer to the maingrid elements. This allows you to hide/show the correct elements in order. Having all of the panels in their own separate element causes you to do DOM manipulation should shouldn't need to do. For simplicity, I put each panel right after the maingrid element that it was associated with it.
HTML Structure
<div class=".mainContainer">
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
</div>
I added the panel class to have the same CSS as maingrid, as well as make it invisible at the start:
.maingrid, .panel {
height: 345px;
width: 345px;
float: left;
/* [disabled]background-color: #000; */
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
overflow: hidden;
}
.panel{
display:none;
color:white;
}
This will fade out the current element clicked and fade in the next panel element.
$('.maingrid').click(function(){
var $that = $(this);
$(this).fadeOut(function(){ //This will wait until the fadeOut is done before attempting to fadeIn.
$that.next().fadeIn();
});
});
$('.panel').click(function(){
var $that = $(this);
$(this).fadeOut(function(){
$that.prev().fadeIn();
});
});
There also seems to be a bug where the hover does not show the text on the first hover event.
JSFiddle: http://jsfiddle.net/mDJfE/

Setting Div position up on another content

I have a page content which have text in it.
underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
some code since I have to insert code tags if I want to post fiddle
here's a fiddle to demonstrate:
Click here for fiddle
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!
Update: Okay, I did it the way you specified: http://jsfiddle.net/2U7jB/3/. There are other ways to do it - it depends on your HTML.
Original Response: This is close to what you want: http://jsfiddle.net/2U7jB/2/
.popup {
display: none;
height: 35px;
width: 100%;
background-color: blue;
}
<div id="first">
<div class="popup"></div>
</div>
<div id="second">
<div class="popup"></div>
</div>
<div id="third">
<div class="popup"></div>
</div>
$('#first, #second, #third').on('mouseover', function() {
$(this).children('.popup').show();
});
$('#first, #second, #third').on('mouseleave', function() {
$(this).children('.popup').hide();
});
To get what you want, just create two divs inside #first, #second, and #third - the first div for the hidden (popup) content, and the second div for the nav menu / background color.

How to reposition CSS-hover popups to stay within a fixed frame?

I have a page filled with many fixed-size boxes in a grid layout (div's simply piled up with float:left). On hovering the mouse on any of them, a 'popup' - larger div with the same and also additional info is shown over it, as if the box expanded in all directions (but not moving the other boxes, it's shown also over them). Simplified html/css below. It's like thumbnails/full images, but the actual content is a pile of various html data, including links, etc.
The problem is that in this way the 'popup' div for the leftmost/rightmost boxes goes over the screen, triggering the scrollbar; or they are cut off if I don't allow the overflow.
I would like instead to reposition these popups to left/right so that they stay within the total borders. How to approach this need?
I can't do this server-side as the server does not know which boxes will be rightmost/leftmost - it depends on window size, how many columns will fit there. My first idea is to use javascript to change the positioning for all the popups right after the page is loaded, but I don't know how to a) find out which popups would be sticking out of the frame; and even b) find out the size of the popups, since they are hidden normally, which means width=height=0 until they are shown.
Perhaps a completely different approach of showing these popups would be easier than repositioning the div's that I currently have?
Currently Prototype/scriptaculous is used at some other pages, the server side is ruby on rails.
<div class="frame">
<div class="box", id="object123" >
small, fixed size content here
<div class="popup">
large, variable size/width/height content here that describes object123
</div>
</div>
<div class="box", id="object456" >
small, fixed size content here
<div class="popup">
large, variable size/width/height content here that describes object456
</div>
</div>
... many other similar boxes.
</div>
div.frame {
overflow: hidden;
}
div.box {
border:1px solid #efe9dc;
margin:5px;
position:relative;
float:left;
height:70px;
width:150px;
}
div.popup {
min-width:200px;
display:none;
position:absolute;
left:-30px;
top:-30px;
z-index:1000;
}
div.box:hover .popup { display: block; }
right now your div.popup is positioned absolute to div.box; if you removed the position from div.box and put it on div.frame, the popups would be absolute to the frame. you can then set left/top/right/bottom to be offset from the frame's edges instead.
i hope this helped :)
In the end this is what I did.
I replaced the popups with css+jquery script that expands the content box larger/above the normal grid; centers the 'popup' over the place of the original box, and if it goes over the sides, then adjusts the position.
As a bonus, the functionality works on everything that I tag with the 'expands' 'expand_show' 'expand_hide' classes, so no duplication as it is applied in several places.
sample html
<div class="box_grid expands">
<div class="box_content">
basic content that's always visible
<p class="expand_hide>short content summary shown in the small boxes</p>
<p class="expand_show> detailed content</p>
<div class="expand_show> detailed extra content</div>
</div>
</div>
css and javascript to show it
div.box_grid {
margin:5px;
float:left;
height:80px;
width:170px;
}
div.expanded { position:relative; }
div.expanded > * {
position:absolute;
width:auto;
height:auto;
z-index:1000;
min-width:100%;
min-height:100%;
}
div.expands .expand_show { display:none; }
div.expanded .expand_show { display: block; }
div.expanded .expand_hide { display: none; }
$(document).ready(function(){
$('.expands').hover(
function(){
grid = $(this);
expanded = grid.children();
border = $('.content_borders');
grid.addClass('expanded');
var top = (grid.outerHeight() - expanded.outerHeight())/2;
var left = (grid.outerWidth() - expanded.outerWidth())/2;
var left_limit = border.offset().left + 5 - grid.offset().left;
var right_limit = border.offset().left + border.outerWidth() - expanded.outerWidth() - 5 - grid.offset().left;
var bottom_limit = border.offset().top + border.outerHeight() - expanded.outerHeight() - 5 - grid.offset().top;
if (left < left_limit) { left = left_limit }
if (left > right_limit) { left = right_limit }
if (top > bottom_limit) { top = bottom_limit }
expanded.css('top',top);
expanded.css('left',left);
},
function(){ $(this).removeClass('expanded') }
);
});
As my understanding you have multiple small divs which ave the thumbnails and you have a div to sow large content for each image.
So for each image there are two divs.
Tats why you are having difficulty for each div.some will be left , some center , some on right.
Instead of that , use a common div to show large content for all the smaller div.
Pass a parameter on hover and show the content in that div using server side code.
That means your style is fine , you just position only one div in center by using
left:100px
top:100px
you modify it as you want. Put large content in that single div for all smaller divs
Use Firefox Firebug for better understanding of position

Displaying a list of texts sequentially with fade in and fade out effect

I would love to display the following list of text in sequential order, with fadein/out effect and eventually display the image and stops at there. I also would love to display all these texts in center.
<div>a<div>
<div>b</div>
<div>c</div>
<div>d</div>
<div><img src="mypict.jpg" alt="my pict" /></div>
This are all I have for the page, I want to make it as an intro page. I know jquery has fadein() and fadeout(), and I have tried the innerfade plugin. But it always place the text on the left and it loops infinitely.
Give the last div containing the image a class of "last":
<div class="last"><img src="mypict.jpg" alt="my pict" /></div>
$('div').each(function(){
$(this).fadeIn('slow');
if(!$(this).hasClass('last')){
$(this).fadeOut('slow');
}
});
You can also setTimeouts or callback functions within the fadeIn's and fadeOut's if you want something to happen afterward.
Pretty much copy-pasted from this page, at old.nabble.com
$(function() {
var $sequence = $('div').hide(), div = 0;
(function(){
$($sequence[div++]).fadeIn('slow', arguments.callee);
})();
});
Use CSS to position the divs in the center (horizontally):
div {margin: 0 auto; width: 50%; text-align: center; }
Width is defined since a block element -the div- would otherwise take the whole horizontal space. The text-align: center; is if you want the text to be centered within the divs.

Categories