Im using the classic anchor tag approach to click and scroll to a specific div
<div id="scrollTo"></div>
The problem that im facing is that this approach scrolls till the div top margin in on the top of the screen. Is there a way of scrolling it only galf the way with css only, or I will have to use javscript?
You can use another element inside the div.
If you place a positioned element inside the scrollto div with a negative margin. The negative margin will be the offset you want. Make the inner element have a height of 0px, that way it won't be visible to your users.
You will need to put the id on that element of course.
<div id="olddiv">
<div id="scrollTo" style="margin-top: -100px"></div>
</div>
You can look at using an offset on the div you are using for the anchor:
offsetting an html anchor to adjust for fixed header
Related
I want to create this sliding scroll behavior in between divs. Let's say that the markup looks like this:
<main>
<div class="slide">Content</div>
<div class="slide">Content</div>
<div class="slide">Content</div>
</main>
Every .slide div would have different heights depending on the content inside them and would of course also change it's height depending on window size.
What I want is that when each div reaches it's bottom when scrolling the page, I. e. when the bottom of the div is at the bottom of the window, the div should become fixed and the div underneath should then scroll over the previous fixed div. And this behavior would be repeated for each div within the container (in this example main).
Do you have any ideas for how this could be achieved?
I figured that adding the following to each section through JavaScript (in my case jQuery just for this exercise) will make each div behave like I wanted on scroll:
$(".slide").each(function(){
$(this).css({
"top": `-${$(this).height() - $(window).height()}px`
})
})
Essentially applying a CSS top value that is the div height minus the window height.
This would also require the divs to have position: sticky applied to them through CSS.
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 was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/
Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/
I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?
I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image...
So is there any way to make the divs does not affect each other but also place them inside the container div?
Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot
Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.
<div style="position:relative" id="parentDiv">
<div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
<div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>
hope that helps
I have a scrollable div somewhere on-screen.
I have a child of that div somewhere in it.
How can I scroll the div to place this child in the center of the visible region?
(How would I determine the visible width and height of the div, and how would I scroll to place a rectangular control centered in this?)
element.scrollIntoView() might be what your looking for.
http://jsfiddle.net/a9s2G/
scrollIntoView docs
If you use jQuery you can try scrollTo plugin.
In pure js this can be done using element.scrollTop. You will need to get position of your element inside <div> and than using that value scroll main div.
To calculate inner element position you will need to get it offset top and left property related to the parent element using offsetTop and offsetLeft properties.
To center your element you may also need to use element.scrollLeft
I have a page that is basically this:
<div id="thelist" style="height:100%; width:100%"></div>
<script type="text/javascript">
$('#thelist').load('other.aspx', function () { });
</script>
the problem that I'm running into is that other.aspx has a lot of controls on it that contain absolute positioning, which I was to be absolute, but with respect to the div and not to the page. The controls are generated dynamically so they may be added in a different order than they will appear on the screen. Iframes are out of the question because the iPad does not allow you to scroll iframes. Basically what I need is a way to anchor the absolute positioning to the div instead of the entire page. Any help is appreciated. Thanks.
When you give a containing element "position: relative", then absolutely-positioned elements inside it use that container as the reference point. So, inside it the position "top: 0; left: 0" is the upper left corner of the container, not the whole window.