proper way jquery animate opacity, fade, & slide up page load effect [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
this is the first time I've actually made my own Jquery script from scratch, cause I couldn't find exactly what I was looking for. My code works how I want it to, although I don't know if I did it correctly. Just something about it is screaming to me although it works, I didn't do it properly. So I figured I would share what I have and see what you guys had to offer as a better way to accomplish this.
The Jquery I came up with is
$(window).load(function() {
$(".overlay").animate({
opacity: .5,
height: "0"
}, 1000, function() {
$(this).remove()
})
});
$(function() {
setTimeout(function() {
$(".somediv").animate({
opacity: 1
}, 600)
}, 600)
})
I have ran it though a js compressor which removed the ;'s, and then through a "beautifier" for readability, but it still seems to work and really I'm not even too sure how important those are in js lol, I'm a CSS guy and i know in CSS the last ; is not required... so figured I'd leave them out since it's working.
I set up an example of this in action Here: JSBin
so if anyone has any suggestions on my code as this being my first real attempt at JQuery I would love some feedback =)

What you did isn't wrong, but there is a delay function you could use here.
$(function() {
setTimeout(function() {
$(".somediv").animate({
opacity: 1
}, 600)
}, 600)
})
would become
$(function() {
$(".somediv").delay(600).animate({
opacity: 1
}, 600)
})
Both will work and are equally relevant code, delay is just a shortcut to what you did. What I would recommend however is using CSS3 animation rather than JQuery. It's smoother, and degrades more gracefully if for some reason JQuery can't load or JS is off or errors out. Granted these are rare issues but I would still use CSS because it's built into the browser and you can access hardware acceleration if you initiate it with tanslateZ(0). Then use JQuery to possibly add a class on window load or even use it for your delay.

Related

How To Disable Scrolling During Loading? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm working on my personal website and have implemented a preloader.
After adding a second div to my website, I noticed I can scroll during the page loading. I dunno about you but I find that ugly and disturbing.
Here is a quick video. (I use chromeOS)
Video
I really couldn't find anything on this because I think I was the only one with this problem. I'm not sure, however.
I used $(window).on("load",function(){$(".loader-wrapper").fadeOut("slow");}); as well
Here is the code (Github Repo)
Anyways, that's all I got.
Thanks in advance.
You can add by default a class to your body the class should be as follows.
// CSS
.no-scroll {
overflow: hidden;
}
<body class="no-scroll">
Once your script has completed or your function finishes you just call
document.body.classList.remove('no-scroll');
Make sure to add the following section at the end of your page.
<script type="text/javascript">
(function(){
function onReady() {
document.body.classList.remove('no-scroll');
}
if ( document.readyState === 'complete' ) {
onReady();
} else {
document.addEventListener('DOMContentLoaded', onReady);
}
})();
</script>
Or you can do it with jQuery
// Make sure this code is the last piece of code in your HTML.
$(window).on("load", function() {
document.body.classList.remove('no-scroll');
});
PS: Additionally to that consider the unlike scenario when someone does not have JavScript enabled so you add a default behavior. Take a look at <noscript> tag.

Animate height change on Bootstrap 3 Carousel

On researching the question "How to animate height change on Bootstrap 3 Carousel" I found this answer, however it doesn't have any effects on my bootstrap carousel. I can't comment yet and ask for clarification there, therefore a new Question.
The solution suggested there is
function bsCarouselAnimHeight()
{
$('.carousel').carousel({
interval: 5000
}).on('slide.bs.carousel', function (e)
{
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({ height: nextH }, 500);
});
}
But as I said, without any effect. Maybe I should modify any selectors in the Javascript in my case?
Update:
I updated the fiddle so it's actually showing the problem.
All ideas are appreciated! Thanks.
Your code is fine. You're just not calling function bsCarouselAnimHeight() anywhere so none of it is firing.
You can either take it out of the function declaration
http://jsfiddle.net/4HDBe/3/
or call the function at some point.
http://jsfiddle.net/4HDBe/4/

Preloading large images after page has finished loading [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I found this bit of code and it works great for preloading, but it totally clogs the page load initially. I've been trying for hours to get this thing to run only after the page is loaded with no success. I've been using one image, "big_image.jpg" (8MB) to test it out. As is, everything preloads using the below code, including the large file. Anytime I attempt to get it to pre-load after the document is ready, it fails. I've even tried other code that purports to do what I want, but they all fail - once the page loads, none will keep loading the really big image. Whats up with that?
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
$(['picture.jpg','background.jpg','vertical.jpg','big_image.jpg']).preload();
Since you found the answer based on my help:
It seems that you are using jQuery. You can wrap the function call inside a ready function: Specify a function to execute when the DOM is fully loaded.
function loadImages(){
var img1 = "http://farm3.staticflickr.com/2826/11581275325_d61be12908_h.jpg"
var markup = "<h3>Images after pageload</h2>"+"<img src='"+img1+"' />";
$("#images").html(markup);
}
$( document ).ready(function() {
// Handler for .ready() called.
loadImages();
});
You may take a look at my codepan example

Drop down menu disappearing before I can get to the links

How can I possibly delay the disappearance of the menu by some miliseconds/seconds?
going ahead and editing this fadesettings: {overduration: 350, outduration: 2000}in the js only changes the animation speed. But THAT IS NOT what I want =).
Please check this JSFiddle to see the JS, CSS, and HTML.
Thanks for the help guys
P.S:- about the top:80px gap that you see, I intentionally put it there cuz that's the way I'm styling my site so I want the gap there.
You can user the setTimeout function to add a delay before you call a function.
In your case, if you want to delay the fadeout of the menu, instead of just doing :
$this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration);
You could do
setTimeout(function() { $this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}, 2000);
to delay the call by 2 seconds.
Note that I cached the $(this) selector in your fiddle to still be able to access the variable.
http://jsfiddle.net/KB5Ve/
EDIT :
Added comments on the fiddle : http://jsfiddle.net/DBvq7/

Can anyone tell me about a jQuery modal dialog box library that doesn't suck [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
jQuery based modal dialog boxes are great as long as you do as much as the example tells you to. I need a jQuery based modal dialog box library that has to have the following characteristics:
Ideal implementation:
function showDialog(values)
{
processToChangeDom(values);
changeDivTobeDisplayed();
modalDialog.show();
}
It should be fast, something like the add and link dialog on StackOverflow. Most libraries take an eternity to load the dialog with its fancy effects and stuff.
I want to call it using a script. Show a hidden div or a span element inline. MOst of the libraries talk filling an anchor with rel, class and href=#hiddenDiv sort of things. I need to be able to what I want without adding unnecessary attributes to my anchor. Something like this
It should reflect changes I make to the DOM in the hidden Div. I used facebox and found out that it makes a copy of the hidden div and changes to the DOM doesn't reflect on the modal window.
I need to be able call the close modal div using javascript and also attach beforeOpen and afterClose handlers to the action.
Does anyone have any suggestions? I have already tried facebox, simplemodal and a whole range of libraries, most of them don't support one or the other of these functions I described above.
Try SimpleModal. I found it's API quite nice.
Have you looked into jQuery UI? http://jqueryui.com/demos/dialog/
The jQuery UI dialog does pretty much all that you are asking. Also, I haven't noticed that it takes very much time to display. You don't even need to have the DOM element existing to use it. One nice thing about the UI widgets is that you only need to load those components that you need plus the core. They're also widely available via CDN networks, so it's possible that the user's client already has the JS downloaded for it.
$(function() {
$('<div title="I am a dialog"><p>Put whatever you want in here</p></div>')
.dialog({
autoOpen: true,
modal: true,
open: function(event,ui) { ... },
close: function(event,ui) {
...
$(this).dialog('destroy');
}
draggable: false,
resizable: false,
...
})
});
jquery-ui dialog I have found to be light weight and dynamic
here an exmple of how you can use it in a funciton
function display_alert(message,title) {
title = title || "Alert";
$('#alert').text(message); // the message that will display in the dialog
$("#alert").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
title:title,
open: function() {
},
close: function (){
$(document).unbind('keypress');
},
buttons: {
OK: function() {
$(this).dialog('close');
}
}
});
$('#alert').dialog('option', 'title', title);
$("#alert").dialog('open');
}
ThickBox works pretty well, especially if you want to do things like videos or flash inside your modals.
If you happen to be using Twitter's Bootstrap framework then you should check out BootBoxJs.
I've looked into quite a few modal boxes myself, and the best one I came up with is ThickBox. The jquery UI box was ok too, but I did not like the way it handles the back button.
Thickbox covers points 1-3 in your list of requirements. The even handlers could be easily added since the source code is not too complicated.
Try BlockUI. I've found it to be pretty good.

Categories