How to apply specific scroll size in css - javascript

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>

Related

How to get the new size of a dynamically sized div?

I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps

Jssor Slider Fixed Height with dynamic width

I am using jssor`s simple fade slider and It is working fine but there is an issue with height and width ..
Actually I am using the width as percentage and the problem cause by it is that as I increases width height also increases similarly for vice versa..
What I want is height of the slider remain fixed but the width changes accordingly ..
The most I've been able to do is get the slider to scale the width before initializing, essentially working like 100% width and fixed height.
The only problem is it doesn't scale if the window resizes.
Either way, for anyone interested, just update the slider container divs with JS right before you initialize Jssor:
<!-- Jssor Trigger -->
<script>
var parentWidth = document.getElementById('slider').offsetWidth;
document.getElementById('slider1_container').style.width=parentWidth+'px';
document.getElementById('slider1_slides').style.width=parentWidth+'px';
jssor_slider1_starter('slider1_container');
</script>
If your page has a vertical scrollbar, you might have to call this code after the ending tag of the div you're getting your width value from, or simply just before closing the body tag.

Jquery-ui draggable glitch?

Hi I am trying to make a scroll bar (I'm still far from done, link here: http://jsfiddle.net/xD2Hy/24/ ), thing is that when I scroll (using the scroll bar) to the bottom, THEN and I resize the window to make it SMALLER, the scrollbar drowns under the window. To fix this, i tried adding a jquery offset to the scroll bar move it up when i resize. NOW when i scroll to bottom, then i resize, the scroll bar dissapears completely! I really dont know what to do, im still learning javascript, please help. Here's a the offset jquery of the code, check the link of the jsfiddle for the whole thing:
$('#scrollBar').offset({top:100});
It seems you're setting offset to 100px from document's top border. You need to set offset based on scrollbar's parent container offset and height, and scrollbar container's height. Try this instead:
var scrollContainer = $('#cow'),
scrollBar = $('#scrollBar');
scrollBar.offset({ top: scrollContainer.offset().top + scrollContainer.height() - scrollBar.height() });
Updated fiddle.

Show the bottom of a scrollable element, instead of default top

How can you make an element with a scrollbar start off at the bottom of the scroll?
I have a div that has overflow: scroll. When the element is loaded, by default, we see the top of the element and you have to scroll down. I want the view to start at the bottom of the div instead.
JS fiddle example. Goal is to load the bottom element by default:
http://jsfiddle.net/2WpQf/
If you can use javascript, then you may do this (demo: http://jsfiddle.net/2WpQf/1/):
var div = document.getElementById("div");
div.scrollTop = div.scrollHeight;
There's a Jquery Plugin called ScrollTo, which can scroll for you progamatically.
ScrollTo()

horizontal scroll on clicking button

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

Categories