jquery add opacity while scrolling and loading the page - javascript

So I have a page that is loaded through pjax (non-pjax in IE) where a you have a bunch of links at the bottom.
Everytime you click on the hyperlinks , I make it scroll to the top of the page.
What's happening is that it scrolls to the top of the page while the page is still loading.
I am fine with that, but I was wondering is there a way to add some opacity while the page is loading?
Note: I am not sure of a solution that would work in both pjax and non-pjax enabled browsers.
$(document).on('click', 'my-link a', function() {
$('html, body').animate({ scrollTop: 0 }, 'fast');
})
;

I personally find your question really hard to understand, but I made an example for you:
DEMO
HTML:
<body>
<div class="loader"></div>
<div id="content">
<img src="http://0.tqn.com/d/studenttravel/1/0/i/T/Silleteros-1.jpg" />
</div>
</body>
JS:
$(window).load(function() {
$("body").css({ opacity: 1.0 });
})
CSS:
body {
opacity: 0.5;
}
While page is loading, body is set to opacity 0.5, after page is finished loading, opacity will be set to 1.0.
Also added code to example fiddle that will not load image from cache, so that effect will always shown when fiddle is run (if effect is not shown when running it first time, try running it again). Hope this helps you.

depending on what content is beeing loaded you can add event listeners for onload then scroll / change opacity to lower value on 'onclick' event and revert on 'onload'.

Related

Trigger 2 events on href? Scroll to top, then load

I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks
One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it

Show an element at the bottom of the page with javascript

In a guestbook I have a button at the bottom of the page which displays the input form on click:
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
});
The problem is that the appearing form is outside the current view port and only manual scrolling makes the form visible to the user. I couldn't find any solution from the web but this must be a very common issue. Isn't there a jquery command to "stick to bottom" or similar?
Next thing is: I use nanoScroller on the whole page, so normal downscrolling methods won't work here. nanoScroller has a method scroll:"bottom" but it isn't smooth...
Thank you very much,
Toni
You can easially scroll to the bottom of the page whenever your webpage expands :
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
$('html, body').animate({
scrollTop:$(document).height()
}, 'slow');
});
you can set the 'slow' of the .animate() to any speed in miliseconds.
jsFiddle
Just ajust the scrolling within your function
$("a#showform").click(function(){
$(this).hide();
$("div#post").show("slow");
/* $(scroll magically to #post) */
$("div#post").nanoScroller({ scroll: 'top' });
});
You may wish to use css to solve this problem if you aren't concerned with the post item covering other elements:
div#post {
position: fixed;
bottom: 0px;
}

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here
The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.

auto slidedown div not working when page fully loads

i want to make so when the page full loads the div content slides down once but not working here is code
$(document).ready(function() {
$('#slidercontent').delay(1000).slideDown(100);
});
no result ;( hot to fix it ?
html
<div id="slidercontent">(here goes my Slideshow)</div>
css
#slidercontent {width:1101px; height:195px; margin:0 auto;}
You just need to add display:none; in the CSS. Also I hope that you are including the jQuery library before your javascript:
Here's the working fiddle: http://jsfiddle.net/gopi1410/Sjarv/1/
(have increased the slideDown time to 1000 to make it more visible)
There is no default effect named slideLeft so you have to use:
$(document).ready(function(){
$("#selector").delay(1000).animate({width:0},500);
});
or you can use setTimeout() method
$(document).ready(function(){
setTimeout(function(){
$('#slidercontent').animate({width:0},100,function(){
// do some other stuff after the animation is complete
});
},1000);
});

Weird behavior of JavaScript (With jQuery) 'scrollTop' on Android WebView

I have an HTML file with an element inside it with id="start_section".
I want that when the page loads it will scroll down to this element so i added the following scrip:
jQuery(document).ready(function()
{
// scroll 20px above this div
jQuery('html, body').animate({ scrollTop: (jQuery('#start_section').offset().top)-20 }, 800);
});
Now, it's working just perfect on the first time the page is loaded.
But, As soon as the Activity is recreated for some reason, like orientation change, something weird happens: The page is reloaded, and then instead of scrolling down to the specific element, it is scrolling all the way to the bottom of the page.
I tried to disable the cache but it didn't help.
Any Ideas?
Try to just use "jQuery('body')" instead of "jQuery('html, body')"

Categories

Resources