How to make a large section of html fade using jQuery? - javascript

I am using html right now and I want to make my whole page fade in and fade out on a command through jQuery (whether its click animate etc...).
I thought of using a large fixed div over everything but won't that obscure everything else being clicked?
I also thought I could wrap everything in a span but that won't work.
Finally, I understand I can fade "body", but sometimes I want to fade large sections specifically within the body. Thank you for your help.

You may wanna use ids
<div id="object">content</div>
<script> $("#object").fadeOut(); </script>
Or with classes:
<div class="object">content</div>
<script> $(".object").fadeOut(); </script>

Related

How to get this glass shatter effect to work on multiple divs?

Situation
I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.
Take a look at the jSFiddle here:
https://fiddle.jshell.net/9n9ft9ks/3/
Problem
Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.
How I tried to fix it
The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work:
https://fiddle.jshell.net/9n9ft9ks/5/
So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:
document.getElementById('container');
to:
document.getElementsByClassName('container');
and
#container: {} to .container{}
But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/
Summary
I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/
You cannot use a single ID multiple times on the same page.
Use a class instead:
CSS:
.className {
/* attributes: values; */
}
HTML:
<div class="className"></div>
In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.
I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.
(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)
Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/

Skrollr instant popup text

I'm trying to make skrollr (https://github.com/Prinzhorn/skrollr) show text right away. Right now I can only get text to fade in and out. How can I make it just appear suddenly then disappear?
<div id="style" data-100="opacity:0; left:25%;" data-600="opacity:1;left:25%;" data- 700="opacity:0;left:25%;" >
Howdy World < /div
I would imagine you could try just using display:none and display:block instead of opacity.
I've found that Skrollr is fantastic for easing and transition stuff. However, if you just need scroll/viewport based actions and want a little more control you might want to check out http://imakewebthings.com/jquery-waypoints/.

jQuery Slide toggle and fade in issue

http://www.kflap.com/articles.php?id=2
As you can see when clicking on a number, the title fades in alright but the text just appears below instead of sliding into place. When closing however, the text slides back perfectly. I understand this may be a weird technicality due to the fade in and slide toggle being related.
JQUERY
$(document).ready(function(){
$(".revealHeader").click(function(){
$(".revealTitle", this).fadeIn("fast");
$(this).nextAll(".revealText").first().slideToggle();
});
});
HTML
<div id="reveal">
<span class="revealHeader">10. <span class="revealTitle">EXAMPLE</span></span>
<span class="revealText"><img src="EXAMPLE.JPG" /></span>
Please be aware I am terrible with jQuery as I stupidly never bothered to learn it properly. (Feel free to tear apart my code.)
try this... This will execute the slide AFTER the fade is finished.
$(".revealTitle", this).fadeIn("fast", function(){
$(this).nextAll(".revealText").first().slideToggle();
});
if you really want them both done at the same time, I think you will need to split the content into 2 containers. One for fading and one for scrolling.

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

javascript turned off help

I am creating a small application where I am displaying some text wrapped in 3 divs so I am actually displaying 1 div at a time also there are prev and next buttons for users to toggle between the div's. Now when javascript is turned off i just want to display 1 div without the prev and next buttons. I have and idea that it can be done with javascript by manipulating the CSS like.
document.getelementbyid("id1").style.display="visible";
document.getelementbyid("id1").style.display="none";
Thanks
You could use the <noscript> tag to both define the styles of the scripted elements and display your alternate div instead:
<noscript>
<style type="text/css">
#scripted-div1, #scripted-div2, #scripted-div3 { display:none; }
</style>
<div>
<!-- Alternate content goes here -->
</div>
</noscript>
Arrange your default page view as it would be displayed with javascript turned off, and then, if it is on, you will be able to add desired elements into desired positions.
You can set those div's to display:none; (in CSS) by default, add id for both, and after page load set document.getelementbyid(..).style.display="visible"; (in JavaScript)
PS. u could use jquery or other, will be much more easy ;)
try this:
[style]#prev, #next { display:none; }
[js]
function showButtons()
{
document.getElementById('next').style.display="block";
document.getElementById('prev').style.display="block";
}
[html]
body onload="showButtons()">
div id="next">next..
div id="prev">prev..
This way without JS prev/next wont be displayed, and with JS they will show after page loads.
Maybe you could set the style inside a noscript tag.
Also, perhaps you should accept previous answers and respect the answers other have given you.

Categories