I need to create a jQuery based carousel. On hovering over a carousel item it should bring up a related popup div just above it.
This popup div needs to be positioned to appear outside of the carousel wrapper, but still maintain the position along the x-axis above the hovered carousel item. As a result, I have placed the popup div inside the carousel item so it can be absolutely positioned with minus top attribute in the CSS but relative to the carousel item.
I have run into a problem where overflow:hidden needs to be applied to the carousel so it doesn't show all the carousel items on page load, but this will cut off the popup div when it needs to appear on hover.
In the CSS on the carousel wrapper I have tried using the following, but this has not worked, it just ended up behaving like overflow: hidden
overflow-x: hidden;
overflow-y: auto;
or
overflow-x: hidden;
overflow-y: visible;
I have provided an example is JSFiddle using caroufredsel plugin. In this example I have made the example popup div visible at all times rather than hover for clarity sake. You can see the text and a top of the red div gets cut off.
http://jsfiddle.net/melon/jRp2r/9/
One solution that came to mind, was to have the popup divs marked up outside of the carousel wrapper which would solve the problem of it being cut off. But then comes the problem in figuring out where to position/show it relative to the carousel item being hovered and also which item was being hovered. I wanted to see if there were any other ideas, perhaps better ones before I go down this path.
If someone could give me any direction to achieve the goal I have outlined, whether via CSS or perhaps some custom JS that would be great.
Thanks in anticipation.
UPDATE:
The accepted solution meant that if the carousel was in the middle of the page, the popup div would not stay in the same position along the Y-axis when scrolling the page.
I had amalgamated my initial solution with the accepted answer. I created a separate div outside of the carousel where I would fill it in with the popup HTML of the hovered carousel item. Then I would use the Jquery to absolutely reposition this. The following code example solved my problem eg:
$('.carousel_item').mouseenter(function() {
var $this = $(this);
var posLeft = ($this.offset().left);
var posTop = ($this.offset().top);
//Pop up height
var popHeight = ($('.popup', this).height());
//Turn into negative number
posTop = Math.abs(popHeight) * -1;;
var popup_html = $('.popup', $this).html();
$('#outside_popup').html(popup_html).css({
top: posTop,
left: posLeft
}).fadeIn('fast');
}).mouseleave(function() {
$('#outside_popup').fadeOut('fast');
});
I had to do something similar once myself. I'm sure somebody here will come up with a better solution but this is how I went about it:
Nest your pop up with the slide:
<div class="slide">
<div class="slide_content"></div>
<div class="popup">Hello!</div>
</div>
On mouse over, get the position of the slide. Set the position of the popup relative to the hovered slide. position: fixed; is key here. Then make it appear:
$('.slide').mouseenter(function() {
var $this = $(this);
var posLeft = ($this.offset().left)-10
var posTop = ($this.offset().top)-10
$('.popup', $this).css({
position: 'fixed',
top: posTop,
left: posLeft
}).fadeIn('fast');
}).mouseleave(function() {
$('.popup', this).fadeOut('fast');
});
Click here for a VERY basic example
Tested in IE7-9, Firefox, Chrome
EDIT: Here is a working example of your code
Related
I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.
I have an issue where a fixed-position menu needs to be scrolled, but the outer body already has scrollbars. Even if I remove the outer body's scrollbars then the menu div's scrollbars intersect with the "Close" button, which itself is fixed at the top-right of the screen.
From the image you can see that there are two scrollbars and the inner bar intersects the "Close" button. I'd like to have only 1 scrollbar and no intersect. However, when the menu is closed the scrollbar needs to scroll the page, and when the menu is open it needs to scroll the menu (which is in a fixed position div.)
Is there a way I can use the scrollbar from the entire page to scroll the page when the menu is closed and to scroll only the menu when the menu is open?
Or is there another way to achieve the desired effect?
Here's the code I suggest to freeze the webpage behind the menu when the menu is open:
var top;
function menuOpen() {
top = $("body").scrollTop();
$("html").css({"position":"fixed", "top":-top});
}
function menulose() {
$("html").css({"position":"static", "top":0});
$("html, body").scrollTop(top);
}
Following css is required for it to work properly:
html {
width: 100%
height: 100%;
}
Let me know if this code works, if not it migth be required to add overflow hidden to menuOpen and overflow auto/scroll to menuClose.
The close button is probably a whole different issue, post a link to the code or the website so we can look into that properly...
I have three divs: left, midle and right. Middle is for the contents, while the left div and the rightdiv is used only for a button that will scroll the middle div. The content of the middle div is going to be lists of pictures. So, if the user want to see the pictures that is still hidden in the right side of the middle div, they can click the right div to scroll it to the the right.
I hope my question can be understood.
This script is not working for my divs. I think anyone here can give me another script that can control those divs.
Here is only the script that I cannot use
$(document).ready(function () {
$("#left").click(function () {
var leftPos = $('.DivDataMain').scrollLeft();
$(".DivDataMain").animate({scrollLeft: leftPos + 250}, 600);
});
$("#right").click(function () {
var leftPos2 = $('.DivDataMain').scrollLeft();
$(".DivDataMain").animate({scrollLeft: leftPos2 - 250}, 600);
});
});
FIDDLE:
Scroll Left to Right with Button
Thanks in Advance
It looks like your script is accurate. I think the problem you're running into is two-fold:
You must have a width set on the container div
Your content in the middle div must exceed the current width of the div, otherwise jQuery won't scroll it
Here's a DEMO
.DivDataMain {
width:100%;
overflow:hidden;
display:block;
background:#000;
height:400px;
margin:auto;
position: relative;
}
You could just float and fix your right colomn to the right side with absolute layout.
And let the browser scroll right to left natively. Just margin pad the outer content to the same width as the right column div the same width as the right div. That way when they scroll all the way to the right the right div isn't hiding the remaining content.
as John says script is fine ... you might consider using slide in whole 's rather than animating the div by 250px ... that limits your choices of picture later ... try this https://github.com/eamonnkillian/Slide-in-Frames
You can see an example of what I've got now here.
I'm trying to get the div that's 'full' to expand from the middle out, pushing the others out of the way in the process. What I've got now will push them to the left edge and then expand them. I know that this is because I've got position:absolute. Any ideas on how I can acheive this effect?
Here is a working example of what I think you are describing: http://codepen.io/anon/pen/pKfAw
I removed display: table from div and set .min, .min p to width 0px with an overflow hidden and removed height 0%.
The issue why it was jumping is because you set all the min to 0 with the full floating left. That automatically pushed it to the left and then expanded out. Now all the divs are animating to 0 while .full is animating to 100%.
Not sure what you mean by "expand from the middle out". Here is a quick fix for your js:
$('div').on('click', function(){
var $this = $(this);
$this.toggleClass('full');
$this.siblings().toggleClass('min');
});
This only adds full class to the div which was clicked.
I'm trying to toggle a div from relative to fixed when I scroll down 200px using javascript. When I reach 200px from the top of the window, my div should toggle to fixed. And when I'm above that 200px from the top it should go back to relative. Does anyone have an idea on how to do this?
Something like:
$(window).on('scroll', function() {
$("#myDivID").css({
position: $(this).scrollTop()<200?'relative':'fixed',
top: $(this).scrollTop()<200?'200px':'0px'
});
});
You'll probably also have to reset the top position of the element.
I know there's at least a couple of plugins that do this. Can't remember the name of the one I saw last, but here's one I've written myself: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js
You use it like so:
$('#my-element').fixedIfNeeded();
There's one optional argument that specifies if the element should stop being fixed before it reaches another element (like a footer for example):
$('#my-element').fixedIfNeeded('#footer');