is there a trick to do this(cause i want my div to automatically scroll without javascript)
If you want do this without javascript you can make your div tag and hidden that. Then you can show your content when user scroll the page. Also you can use AOS library. Please see this link https://michalsnik.github.io/aos/
You can use a URL fragment:
example.com/example#divtoscrollto
<div> <div>{scrollable content}</div> <div id="divtoscrollto"></div> </div
Place an element at the bottom of the scroll content then if you change the url to that fragment for it's id it will jump to its location.
Related
I've created a block which his position is fixed.
my goal is to let the user a scroll down option in the block so he could see all the data that displays in the block, I know that iframe lets the user a scroll down, up and a scroll left and right option so the user can watch all the data. is it possiable to do the same thing but instead of watching a different website. it will display the code instead. for example <iframe>code</iframe>
If I understand you properly, using an iframe is a bad idea if you are loading content from the same URL. Perhaps you could use CSS to control the element's scroll to do what you want, for example using
overflow: auto;
Example: https://jsfiddle.net/hhox2uc1/
I'm putting together a horizontally scrolling layout to display nested content (think files within folders within folders ad infinitum). For purposes of graceful degradation, is there any way whatsoever to load the page initially scrolled all the way to the right, without JavaScript? It's easy to scroll it all the way to the bottom by adding <a id="foo"></a> to the end of the page and appeding #foo to the URL, but that doesn't seem to work horizontally.
Yep! Check out this fiddle. You can see that I'm using an anchor to reference an element way on the right of the page (the yellow div), and the browser is scrolling that element into view just as it would scroll downward to bring an element into view that was below the window's edge.
In HTML, how to Auto scroll specific div without using jquery? I want to scroll only specific div or textarea to autoscroll on page load.
Easiest way is to create a ID anchor in your page like:
<span id="scrollHere"></span>
Then on page load you can call some javascript to auto scroll to that point:
location.href = "#scrollHere";
This wont animate the scroll but it will do what you need.
In an attempt to fully answer your question, if you want to scroll a textarea (presuming you mean a and not just a paragraph of text. you will need to use Js for this also, you can use:
scrollTo();
or
scrollBy(dx,dy);
to scroll an element. An example would be:
document.getElementById('textareaID').scrollBy(0, 50);
I have checked the questions:
How do I Scroll parent page to top when child page is click within iframe?
and
Scrolling parent page when remote content loads in iframe
But I would like to avoid javascript if possible.
I have an iframe
<iframe name="MapFrame" id="MapFrameID" src="http://maps.google.ch/maps?f=q&..."></iframe>
And some links that point to it:
mostra sulla mappa
My problem is that some of the links are far below in the page and when they are "clicked" the iframe is not visible or only partially visible.
How can I force the page to scroll to the top without using javascript?
I already have a div at the top of the page with id=Fascione that I use in my footer to "go to the top"
<img class="NoBackground" alt="Go to top" src="images/common/go_up_black.png" width="30" height="30">
and I would like to re-use it; is this possible (again without javascript)?
You may want to try this piece of code:
Go to the top
This is a easy way to scroll the page to the top.
I think you will have to use Javascript, which isn't that hard. Here's what to change:
mostra sulla mappa
The href="#Fascione" will push the page to the top, and changing the SRC on the iframe will automatically trigger the update.
I am working on a webpage with navigation at the top. I was wondering how to make an area of an html page clickable. That way one could click not just on the text in the navigation bar but a general area around the text in order to navigate from page to page. When I keep trying to do it, it generally messes up the divs I already have on the page.
Any help would be appreciated!
Thanks!
If I understood your problem propertly:
Try setup display: block; for your menu text links, + add them padding. Also possible to use width and height
So active link will be not only the text, but also the area around it.
There are only a small set of HTML elements that you can place inside an <a>, and I am guessing none of them is doing the job for you. For example, a div cannot be placed inside an <a>.
In that case, you can use javascript or jQuery to listen for a click on a certain defined area, say a div, on the page and respond to it by changing the address (say by changing window.location.href). This will have the same effect that you are looking for.
Please note though that usability and design ethics demand that a user of your website knows that a certain area is a link and will take you somewhere else before they click it.
I'm assuming by area you mean an entire div? We can use javascript (jQuery) to do this:
$("#mydiv").click(function() {
window.location = 'http://www.google.com'; // redirect here on click
});
<div id="mydiv">
<!-- this area we can click -->
</div>