I'm been researching online for a while no on how to make div's fade in as you scroll. I've watched/ read several tutorials and none seem to be working quite right. It either doesn't work at all, or the Div's turn invisible completely and don't load. I don't know if it's an issue with my code, or the method is not correct. Is there a better solution to having DIV's fade in on scrolling down?
Heres a jsfiddle: https://jsfiddle.net/0zvrjg9b/
Heres the Github: https://github.com/Darkstar93/Resume
Thanks for the help
$(function() {
$(window).scroll( function(){
$('#fadeInBlock').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */
bottom_of_window = bottom_of_window + 200;
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
/* Load scroll */
.fadeInBlock {
opacity: 0;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="xp">
<h1 id="work">Work Experience</h1>
<div class="sprintxp" id="fadeInBlock">
<img alt="sprintlogo" id="sprintlogo" src="images/sprint.png">
<p id="jobs">Technical Consultant</p>
<p id="dates">December 2014 - December 2015</p>
<ul class="sprintul">
<li>Performed software and hardware repairs on devices which
reduced phone replacements.</li>
<li>Conducted inventory checks which resulted in lowering the
accessory, and device, discrepancies.</li>
<li>Maintained near-perfect customer satisfaction scores for
entirety of employment.</li>
<li>Established a base of loyal customer clientele allowing me
to consistently surpass quotas.</li>
<li>Utilized in store sales systems such as SalesForce to close
transactions and create opportunities.</li>
<li>Adapted quickly to new technological innovations within the
cell phone industry and memorized new company promotional plans
on a monthly basis, resulting in less churn rate and high
customer satisfaction.</li>
</ul>
</div>
<div class="mensxp" id="fadeInBlock">
<img alt="menswarehouselogo" id="menslogo" src="images/mens.png">
<p id="jobs">Sales Associate</p>
<p id="dates">February 2014 - August 2014</p>
<ul class="mensul">
<li>Improved store displays by implementing my personal designs
and creativity.</li>
<li>Provided all customers with outstanding customer
service.</li>
<li>Product knowledge leader for all new merchandise and trends
in men’s fashion.</li>
<li>Highest sales per quarter.</li>
<li>Responsible for training of new hires to be effective sales
representatives.</li>
</ul>
</div>
</div>
<div class="education" id="fadeInBlock">
<h1 id="edu">Education</h1>
<div class="uvuedu">
<img alt="uvulogo" id="uvulogo" src="images/uvu.png">
<h3>Utah Valley University</h3>
<p>Associates of Science</p>
<p>Major: Business Management</p>
<p>Graduation - Fall 2017</p>
</div>
<div class="thinkfuledu" id="fadeInBlock">
<img alt="thinkfullogo" id="thinklogo" src="images/thinkful.png">
<h3>Thinkful</h3>
<p>Online Course</p>
<p>Front End Web Developer</p>
<p>Graduation - February 2015</p>
</div>
</div>
</body>
</html>
Related
I need some help with toggling one question at time. I want to display one question and when I click the other question the old one will disappear.
Heading
Here is my code
I am not sure how to get them to show up one at a time I have tried many different ways and still haven't came up with anything.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the
server.
</p>
</div>
<h2>What is jQuery?</h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most
likely
to need as you develop websites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>
:
"use strict";
var $ = function(id) { return document.getElementById(id); };
// the event handler for the click event of each h2 element
var toggle = function() {
var h2 = this;
// clicked h2 tag
var div = h2.nextElementSibling;
// h2 tag's sibling div tag
// toggle plus and minus image in h2 elements by adding or removing a class
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
//toggle div visibility by adding or removing a class
if (div.hasAttribute("class")) {
div.removeAttribute("class");
} else {
div.setAttribute("class", "open");
}
};
Do as follows:
Hide all the answers initially with CSS
Save questions and answers to the variables in JS file
Add function which is executed when any of the questions is clicked
Hide all the answers
Show the answer related to the clicked question
var questions = $("h2 a");
var answers = $("h2 + div");
questions.on("click", function(event) {
event.preventDefault();
var answer = $($(this).attr("href"));
answers.hide();
answer.show();
});
h2 + div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#q1" >What is JavaScript?</a></h2>
<div id="q1">
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the
server.
</p>
</div>
<h2>What is jQuery?</h2>
<div id="q2">
<p>jQuery is a library of the JavaScript functions that you're most
likely
to need as you develop websites.
</p>
</div>
<h2>Why is jQuery becoming so popular?</h2>
<div id="q3">
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
I have a slider on my website but it is working fine on google chrome but not working on mozilla firefox. Please help me to fix this problem.
javascript code:
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 230;
var slides = $('.clienttestslide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="clienttestslideHolder"></div>')
slides.css({ 'float' : 'left' });
$('#clienttestslideHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
} else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#clienttestslideHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
</script>
html code:
<div id="clienttest">
<div id="clienttestwindow">
<div class="clienttestslide">
<div class="statementup">
<div class="statementdown">
<p>I recently booked a tour with
Green Apple Travel around Kathmandu. This is the second time I use their
services.
I have traveled worldwide for the last 50 years and have been in
business with dozens of t... </p>
</div>
</div>
<div class="anno_textarea_text">
<p style="margin-left:20px; color:#e30715;"><strong>Client Name</strong></p>
</div>
</div>
<div class="clienttest">
<div class="statementup">
<div class="statementdown">
<p>I recently booked a tour with
Green Apple Travel around Kathmandu. This is the second time I use their
services.
I have traveled worldwide for the last 50 years and have been in
business with dozens of t... </p>
</div>
</div>
<div class="anno_textarea_text">
<p style="margin-left:20px; color:#e30715;"><strong>Client Name</strong></p>
</div>
</div>
<div class="clienttestslide">
<div class="statementup">
<div class="statementdown">
<p>I recently booked a tour with
Green Apple Travel around Kathmandu. This is the second time I use their
services.
I have traveled worldwide for the last 50 years and have been in
business with dozens of t... </p>
</div>
</div>
<div class="anno_textarea_text">
<p style="margin-left:20px; color:#e30715;"><strong>Client Name</strong></p>
</div>
</div>
</div>
</div>
Slider is working perfectly on chrome but when i tested it on mozilla firefox it is not working and shows blank on it. I hope someone will be available for the help. Thank you in advance.
I need to make sure only one of the .togglecontent divs show up at once, so when one slides down the other should slide up.
Here is what I have so far
(function($) {
$(document).ready(function() {
$('.toggler h3').click(function() {
var currentContent = $(this).siblings('.togglecontent');
$('.togglecontent').not(currentContent).slideUp();
currentContent.slideToggle();
});
});
})(jQuery);
<div class="toggler-wrap">
<div class="toggler">
<h3><span class="fa fa-angle-double-right"></span> What I offer employees</h3>
<div class="togglecontent">
I have extensive experience litigating a full range of employment claims:
<ul>
<li>discrimination, harassment, retaliation, and wrongful termination</li>
<li>claims involving disability, religious, and pregnancy accommodations</li>
<li>California’s complex leave laws</li>
<li>the California Fair Employment and Housing Act (FEHA)</li>
<li>the California Family Rights Act (CFRA)</li>
<li>the Pregnancy Disability Leave Law (PDLL)</li>
<li>Title VII</li>
<li>the Family and Medical Leave Act (FMLA)</li>
<li>the Americans with Disabilities Act (ADA)</li>
<li>invasion of privacy claims under California law</li>
</ul>
</div>
</div>
<div class="toggler">
<h3><span class="fa fa-angle-double-right"></span> Consulting services for business</h3>
<div class="togglecontent">
For your business, prevention is the key to successful employment practices. I have years of experience helping businesses comply with federal and California employment laws, as well as those in other states.
<ul>
<li>I counsel business on a wide range of policies:
<ul>
<li>leaves of absence
<li>disability accommodation
<li>hiring and dismissal decisions
<li>performance management, policies and handbooks, and
<li>background checks.
</ul>
<li>I’ve conducted nearly 100 workplace training sessions on a wide range of subjects.
<li>If a problem arises, I can give you an independent evaluation.
<li>I’ve also conducted hundreds of workplace investigations.
</ul>
</div>
</div>
</div>
Here is a demo http://jsfiddle.net/4ae6afmj/
You can do something like this
$('.toggler h3').click(function() {
var currentContent = $(this).siblings('.togglecontent');
$('.togglecontent').not(currentContent).slideUp(); // <--- slide up all other .togglecontent except the current one
currentContent.slideToggle();
});
Here is a demo http://jsfiddle.net/dhirajbodicherla/4ae6afmj/3/
use can use .not()
(function($) {
$(document).ready(function() {
$('.toggler h3').click(function() {
$('.togglecontent').not($(this).closest('.toggler').find(' .togglecontent')).slideUp(0);
$(this).closest('.toggler').find('.togglecontent').slideToggle();
});
});
})(jQuery);
DEMO
and you can use
(function($) {
$(document).ready(function() {
$('.toggler h3').click(function() {
var thisContent = $(this).closest('.toggler').find(' .togglecontent');
$('.togglecontent').not(thisContent).slideUp(0);
thisContent.slideToggle();
});
});
})(jQuery);
DEMO
Check this DEMO : http://jsfiddle.net/4ae6afmj/5/
JQUERY
(function ($) {
$(document).ready(function () {
$('.toggler h3').click(function () {
$('.togglecontent').slideUp();
if($(this).siblings('div').css('display') === 'none')
$(this).siblings('div').slideDown();
else
$(this).siblings('div').slideUp();
});
});
})(jQuery);
Hello I have a site I am working on an for this site I am making three panels flip when they are clicked on, you can think of it as a flip card concept. I have everything working but I realized that since the div itself is wrapped in an anchor tag and has a display of "block". What I have is the content inside that are links to external pages but since the div is clickable it only reads that anchor. I tried using the z-index but that doesn't seem to help as all.
This is my markup:
What is ElectedFace?
<div class="flip_content" id="flip1">
<div class="content-info">
<h5 style="text-align:center; font-size:20px; margin:3px 0 0 0; font-family:Arial, Helvetica, sans-serif;"><span class="blue">Elected</span><span class="red">face</span></h5>
<p>electedface is America's free social network delivering more real time news, faster than any other website.</p>
<p>electedface connects subscribers to their elected officials with active electedface accounts</p>
<p>electedface empowers subscribers to share their voice and turn social networking into constructive civil action.</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip2" data-flip_container="#flip_box2">
<div class="flipbox" id="flip_box2">
<h4>Getting Started</h4>
</div>
</a>
<div class="flip_content" id="flip2">
<div class="content-info">
<p> There are three ways to connect:</p>
<p>Read top news stories and Read local news stories</p>
<p>Connect to your elected officials and start a group in your community</p>
<p>Register for free membership</p>
</div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip3" data-flip_container="#flip_box3">
<div class="flipbox" id="flip_box3">
<h4>Next Steps</h4>
</div>
</a>
<div class="flip_content" id="flip3">
<div class="content-info">
<p>Elected officials: activate your electedface account, connect to your electorate, and enlist supporters.</p>
</div>
</div>
Heres my Javascript
<script type="text/javascript">
$(function(){
$('.flip_switch').bind("click",function(){
var element = $(this);
var content = element.data("content_container");
var flip_container = element.data("flip_container");
var active_flipbox = $('.activeFlip');
if(element.hasClass('activeFlip')){
//If the flipbox is already flipped
flip_container.revertFlip();
}
else{
if(active_flipbox){
//Revert active flipbox
active_flipbox.revertFlip();
//Remove active status
active_flipbox.removeClass('activeFlip');
}
$(flip_container).flip({
direction: 'rl',
color: '#c8cbce',
content: $(content).html(),
speed:100,
onBefore: function(){
$(flip_container).addClass('activeFlip');
}
});
}
return false;
});
});
</script>
It seems to me your problem is so called bubbling
What you need is (most likely :) :
http://api.jquery.com/event.stopPropagation/
I am 95% finished with this (I hope). I am working on an accordion function that changes the text in the head of the accordion depending if the accordion is opened or closed. (I've got a plus and minus image working).
At present if the client clicks on the accordion to open and close it the title changes correctly, but if the client opens a different accordion the original accordion will slide up, but the title is not updated. I've tried a couple of options I thought would work, but no success as yet.
I've made a jsfiddle here
jquery is:
$(document).ready(function() {
// accordion functionality
$('.accordion-head').click(function(e){
var content = $(this).parent().find('.accordion-content');
var head = $(this).parent().find('.accordion-head');
var $showMore = "Show me more";
var $hideContent = "Hide this offer";
content.addClass('actual');
$('.accordion-content').not('.actual').each(function(){
if ($(this).hasClass('accordion-opened')){
$(this).slideUp(200,function(){
$(this).toggleClass('accordion-opened');
$(this).parent().find('.accordion-head').toggleClass('accordion-open');
});
}
});
$(this).toggleClass('accordion-open');
content.removeClass('actual');
if($(this).hasClass('accordion-open')){
content.slideDown(200,function(){
content.toggleClass('accordion-opened');
head.html($hideContent);
});
}else{
content.slideUp(200,function(){
content.toggleClass('accordion-opened');
head.html($showMore);
});
}
e.preventDefault();
});
});
HTML looks like this:
<div class="accordion">
<div class="accordion-head">
<a href="#">
<span class="accordion-heading">Show me more</span>
</a>
</div>
<div class="accordion-content">
Including Thames Water, Severn Trent, Anglian Water, Yorkshire Water and many more, plus all council tax local authorities. Cashback on mortgage payments up to maximum monthly mortgage payment of £1,000.
</div>
</div>
<span class="spacer"></span>
<div class="accordion">
<div class="accordion-head">
<a href="#">
<span class="accordion-heading">Show me more</span>
</a>
</div>
<div class="accordion-content">
Including British Gas, SSE, EDF Energy, E.ON, npower and many more.
</div>
</div>
<span class="spacer"></span>
etc.
Hope someone can help.
You could rewrite the header during the collapse loop by removing head.html($showMore) & changing
$(this).parent().find('.accordion-head').toggleClass('accordion-open');
to
$(this).parent().find('.accordion-head').toggleClass('accordion-open').html($showMore);
You can also insert $('.accordion-head').html($showMore); inside click function , which will update all the headers intially to show more and then update the individual headers according to the conditions.
var $showMore = "Show me more";
var $hideContent = "Hide this offer";
$('.accordion-head').html($showMore);
content.addClass('actual');