Right and Left Scrolling with Button - javascript

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

Related

SlidingPanel Animation

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.

Trying to turn fluid width div into 100% wide modal

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.

How to keep div in the center of viewport

I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.
What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.
Ajax Page (this runs when the page is called)
$(document).ready(function(){
$(".popup").css({
top: "50%",
left: "50%",
marginLeft: -$(".popup").width() / 2,
marginTop: -$(".popup").height() / 2
});
});
If I can find the top of the viewport I think I'd be able to get this working right.
I've looked into: http://www.appelsiini.net/projects/viewport but it doesn't really solve my problem.
Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!
Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you're scrolled (which I assume is what you want).
So:
.popup {
position:fixed;
top:20px;
left:40px;
right:40px;
}
Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).
Next, setting both left AND right will "stretch" the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That's a convenient way of centering this popup div.
If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.
P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won't be able to vertically center it using the margin:auto trick.
Don't know if it's the case, but If $(".popup") it's initially hidden by display:none, then it's width and height will be zero on page load.

jQuery carousel with overflow-y to show popup outside of container

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

Is there a js function that scrolls a site left right up and down?

I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/

Categories