horizontal scroll on clicking button - javascript

I want to horizontally scroll a div by clicking on the button Left and Right but it is not working
$('#left').live('click' , function(){
$('#myDiv').scrollLeft(300)
})
$('#right').live('click' , function(){
$('#myDiv').scrollLeft(-300)
})
​
How can I scroll a div by a bytton click. I also want to remove the scroll bar
JS Fiddle

If you don't want to get rid of the scroll bars, why don't you just alter the CSS of the cropped content (i.e. its margin-left)?
Give the wrapping div a overflow:hidden and use the following JS:
$('#left').click(function(){
$('#myDiv').css('margin-left','-300px');
});
$('#right').click(function(){
$('#myDiv').css('margin-left','0');
});
Would look like this.
​

Is this what you want?
jsfiddle
i used css and margins for scroll, overflow hidden to hide the bar, float to align the pictures and changed some css...

Related

How to apply specific scroll size in css

I want to know if it's possible to set specific size to scroll vertical?
I have my <body></body> height of 2500px, I put an overlay div above witch contain a form and have a height of 1300px.
When I srcoll, my scoll bar take vertical size of body, I want to stop scroll bar at 1300 px of the top.
Can I do this in css or js ?
please help me!
You can probably achieve this using scroll() and scrolltop() JQuery functions.
Please have a look at link:
jquery scroll to a px count from top and then set a div to be fixed from the top for the rest of the scroll
Try to set scroll bar for your div element using the below css
div {
overflow-y: scroll;
}
If you want to disable the scroll bar for the body, you can try setting the height of the body to the height of the viewport.
You can use the slimcroll in jquery. Example:
// Add slimscroll to element
$('#MyElementID').slimscroll({
height : '1300px'
});
To use it remember to add an referenece to the plugin, of where you have the class:
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

Jquery animate toggle to shift marginTop - demo attached

I'm having troubles with an open/close tab using jquery. The purpose is for the tab to be clicked to reveal a fullscreen image of a slider sitting below. Technically, the slider itself doesn't change, it just simply alters the marginTop of the panel positioned below it to reveal the fullscreen image of the slider. There is a test link live at: http://www.the3rdobject.com/test-site/index.html - the top tab works perfectly though it is performing a similar function, but cannot get the lower tab to return to it's original position. Any help would be greatly appreciated.
To start, simply click on the lower tab 'Show fullscreen image' - this opens up to reveal the slider below. Just need to get it to close.
Any jquery experts, please help! I'm a jquery newb and going out my mind!
The code below should work:
// gets all the anchor elements inside the elements with a css class 'seefullscreentab'
$(".seefullscreentab a").click(function() {
// the margin to animate will be 0% if the anchor css class is 'opentab' and -15% if not
var margin = $(this).hasClass('opentab') ? '0%' : '-15%';
// animates the element with the css class 'scrollpage-container' to the margin above
$(".scrollpage-container").animate({ marginTop: margin }, 500);
// toggle the visibility of the anchors
// (the current visible anchor turns to hidden, and the hidden one turns to visible)
$(".seefullscreentab a").toggle();
});

Right and Left Scrolling with Button

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

How to make a top bar slide down by pulling a button?

I can't find a script or example of this... I'd like to have a little div on top of window, when you hover on it, a top horizontal bar slides down. I've made a schema :
thanks
Check the fiddle:
http://jsfiddle.net/EghgN/8/
You can add your menu contents to the structure.

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