I am using jquerymobile, and i want to scroll my each div individually, something like :
<div data-role="content">
<div id="1"></div>
<div id="2"></div>
</div>
Now i want that, div#1 scroll left - right & div#2 scroll top - bottom . I am using scrollview plugin but i am not able to do this. Can anybody help me out with a little example code?
I assume you are using this with the experimental jQuery Mobile scrollview.
You can set a value for the data-scroll attribute as data-scroll="y" or data-scroll="x" to set the scrolling direction as vertical or horizontal.
Related
I'm having a problem trying to make my sidebar stick in the correct height and making the desired effect, this is my code:
https://jsfiddle.net/oavgLrf9/
I want my sidebar to add a fixed class when the second module reaches top, the problem is that both of the modules use height auto so their height change depending of the monitor.
<div class="sidebar">
<div class="mod-1"></div>
<div class="mod-2"></div>
</div>
Also I want that when the user scrolls top the side bar goes top too, and when it reaches bottom changes to absolute, like this example:
http://jsfiddle.net/gmolop/y3tdL9wd/
I tried using the sticky-kit plug in it does almost exactly what I want, would be the example 4, but it doesn't stick in the height I need because of these changing values.
you can use HcSticky to solve your problem.
http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/
see examples:
http://someweblog.com/demo/hcsticky/
I have a tricky little problem I can't wrap my head around.
Please see http://jsfiddle.net/KKczd/ for reference.
Scenario: I have two bootstrap ordered columns: On large screens, they sit next two each other, on smaller screens the one on the right flows above the left column.
<div class="row">
<h1>Header section</h1>
</div>
<div class="row">
<div class="col-md-3 col-md-push-9" id="right">...</div>
<div class="col-md-9 col-md-pull-3" id="left">...</div>
</div>
This basic layout and functionality works perfectly.
Goal:
For large screens, when the page scrolls down, I want the right column to stay on the top of the page at all times. For small screens, I want the right column (now the first row) to stay on top with content scrolling underneath it as the content scrolls up.
Problem:
I've written some javascript that only seems to make the right column get lower and lower - and it has no impact on the section on smaller screen widths - except some magical disappearing.
I have played with offset, and resetting offset, I have also tried using some css positioning but it just gets hackier and hackier. Also, I'm trying to use as many default bootstrap styles as possible, and as few positioning hacks as possible.
Is this even possible to do?
Goal:
{1}[For large screens, when the page scrolls down, I want the right column to stay on the top of the page at all times].
{2}[For small screens, I want the right column (now the first row) to stay on top with content scrolling underneath it as the content scrolls up.]
In bootstrap website itself they used your required concept for {1} use the class = 'affix' for the right column,
For {2} , I have an idea for that, Create one navbar at the top of the screen and set the class = 'navbar-default navbar-fixed-top visible-xs visible-sm hidden-lg hidden-md' and give the same right column content in that navbar also, In column right use the class = 'visible-lg visible-md hidden-sm hidden-xs'. When the screen size reaches small screen, it hides the content of right column, and shows the navbar content at the top.
Hope this will be useful, Thank you.
how to make a div stays in place while scrolled without jquery?
I wanted to make something like the The New Stuff | The Next Big Thing | What's Hot
header part of mashable without using jquery (only javascript)
can someone please help me with this?
Did you try CSS position:fixed with top and left set? It is the only way to make it happen without scripting.
Use this HTML:
<div id="myElement" style="position: absolute">This stays at the top</div>
Javascript:
$(window).scroll(function() {
$('#myElement').css('top', $(this).scrollTop() + "px");
});
It attaches an event to the window's scroll and moves the element down as far as you've scrolled.
You can very well do that using css.
#id_name{position:fixed;top:some_value;left:some_value;}
this will fix the div at the corresponding value you have given for left and top position
You can use the CSS Fixed position :
position:fixed;
And then position the element in relation to the window
left:50px;
top:50px;
This will fix the element in the window 50px from the top left corner.
You can manipulate this in Javascript in the onscroll event if you only want it to occur if they scroll to a certain height.
use css to place a div as fixed so that it will not scroll:
position:fixed
Have a look at the below demo. Hope this help
Js Fiddle Demo
<div class = "hello">
<ul>
<li>Welcome </li>
</ul>
</div>
I have 2 divs that both uses iScroll. Now I would like both divs to scroll when one of them are scrolled.
I want them to scroll simultaneously
Is this possible?
You can use scrollTo method to scroll the second div at a specified position on scrolling any div. It takes three arugments out of which timeout is optional.
scrollTo(x, y, timeout) - scrolls to any x,y location inside the scrolling area.
Try structuring the div as follows :
<div id=wrapper>
<div id="scroller">
<div id="div1">
<div id="child1"></div>
</div>
<div id="div2">
<div id="child2"></div>
</div>
</div>
</div>
Then define iscroll for #wrapper and you get to scroll both the div simultaneously. This is the easy way.
Or you can try to get the onScroll event. Though it is not possible to exactly get on scroll position during scroll but you can still get is in on onScrollMove and onScrollEnd. Hope this helps you.
I am experiencing problem with the layout of a page where my controls are shifting when I attempt to change the class using a javascript event. Can anyone help with some ideas around the problem. It only seems to be a problem in IE when the left scroll bar appears.
Here is an example of the html
<div id="container" style="overflow:auto;">
<div id="control1Container" style="left:17%;top:145px;display:inline;position:absolute;">
<div id="control1" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:67%;top:145px;display:inline;position:absolute;">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
So now the imagine that the controls within the container div take up enough space that the overflow margin appears on the left i.e. the controls extend below the bottom of the container div. If I attempt to change the listOUT class on control1 to say listIN using javascript the control will shift to the left. To me it almost seems like the browser is readjusting the control1Container to a new location that is 17% if the container div's new width with the scrollbar in place.
Any idea's?
You need to give to the container div position:relative, so that the absolute positioned elements inside it get positioned in relation to it ..