How can I make a auto scroll for each web page? - javascript

I want to make an auto-scroll down on my WordPress website which was built with elementor. In this video, you see that the auto-scroll code worked every page but I don't want that. I want that for each page(Screenshot). The scroll will be stopping in the red mark section.
How can I do it?
The page link
The auto-scroll will be working just for this page.
Here have a video link: https://drive.google.com/file/d/1yKPEtvGa82UB2kqSYXvXHg1M4r7B4Ecv/view?usp=sharing
The jQuery code:
The auto-scroll will be working just for this page. and will stop the red mark section.

instead of having a hardcoded scrolltop value, u should make this dynamic by giving the "red marked box" an identifier i.E id="stop_here" and in your code u will use the offset relative to the document, e.g:
.animate({scrollTop: $('#stop_here').offset().top, ...

Related

Create a Parallax effect using scroll as a button

What is the name or how can I make the effect of the scroll (when a scroll happens the page leads the user to another section of the page without showing the scrollbar) of the website below:
Website
And how it can be do it using pure css/js or React if possible?
It looks like the they're using a fullpage or fullscreen scrolling effect.
Here is the github link for the package they're using to do it:
https://github.com/alvarotrigo/fullPage.js/

JQuery colorbox iframe, hide bottom bar

I'm using colorbox to display an Iframe of my website's sign up page. Like so...
As you can see at the very bottom of the Iframe there is a white bar where the close 'X' used to be. I've removed every part of the border I can see to understand exists... Here is my JQuery for that...
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
$("#cboxClose").remove();
As far as I can tell this should be everything.
Add
$("#cboxLoadedContent").hide();
to the end of your jquery.colorbox.js file. :)
Used browser inspector and found it.

When loading, the page goes on the bottom of it

I have an issue with my website. My page loads normally in Firefox, but when I use either Chrome or Safari, it goes to the bottom of the page and I don't understand why. I tried putting the following snippet at the beginning of the page, but no luck.
<script>
$(document).ready(function() {
$(document).scrollTop(0);
});
</script>
Why does the page go to the bottom on loading?
When going to your site, I get redirected to http://www.ondinevermenot.fr/#start. That means the page will try to jump to the start element.
However, the start element is absolutely positioned. Therefore, when the page tries to jump down, the start element moves down with it. Therefore the page tries to jump down again. Then the start element moves down more. They keep going down until the bottom of the page, when there is no more room.
To fix it, don't redirect to #start when your page loads.
Because of the strangeness of jumping to something that's absolutely positioned, it's probably handled differently in different browsers.
Try to have your image and other contents put inside div and set the box attribute of the div to margin:auto. works well with HTML5.
i have an alturnative work around for you and incase you ever need to get to the top of the page - you can use this javascript as an alturnative:
((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight 0)");
however the other option would be to set a start up property: for example document.start("body.height = 0") something along those lines may work.
preferably id use option one as a code to start the broswer at a set height may not work so well for every browser. hope this helps.
I had 2 links to my home page in my footer. When I removed the links from my footer the problem went away.

javascript entire page fly in and out effect?

Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want

Javascript image scroll

I have an image scroll implemented onto the homepage and it's working fine.
The problem comes when I try to add in a href into the equation, I want each image on the scroll to link to a page on the site.
If I add this in now on my .js file it stops the functionality, is this going to be possible?

Categories