This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
<div class="snippet">
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({portalId: "4801849",formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"});
</script>
</div>
<div class="location">
<strong>Our Locations</strong>
<p>Mumbai</p>
<p>Inventrom Private Limited, Unit no. B 32-A, B-wing, 2nd Floor, Raj Industrial Complex, Military Road, Marol, Andheri East, Mumbai, Maharashtra-400059</p>
<p>Goa</p>
<p>Inventrom Private Limited, 10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa-403001, Near People's High School</p>
<p></p>
<strong>Contact Us</strong>
<p>79, 11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka-560038, India</p>
<p>(+91) 8881197198</p>
<p>contactus#boltiot.com</p>
</div>
How do I put 2 divs side by side?? I've many things to fix this but nothing seems to be helpful. I want the 1st div to be on the left-hand side of the main div and the 2nd div to be on the right-hand side
There are several ways to achieve this. One of the simplest ones is to use a flex wrapper.
<div class="wrapper">
<div class="snippet">
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({portalId: "4801849",formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"});
</script>
</div>
<div class="location">
<strong>Our Locations</strong>
<p>Mumbai</p>
<p>Inventrom Private Limited, Unit no. B 32-A, B-wing, 2nd Floor, Raj Industrial Complex, Military Road, Marol, Andheri East, Mumbai, Maharashtra-400059</p>
<p>Goa</p>
<p>Inventrom Private Limited, 10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa-403001, Near People's High School</p>
<p></p>
<strong>Contact Us</strong>
<p>79, 11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka-560038, India</p>
<p>(+91) 8881197198</p>
<p>contactus#boltiot.com</p>
</div>
</div>
.wrapper {
display: flex;
}
This will put the two divs side by side.
<div class="snippet">
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({portalId: "4801849",formId: "b021b49f-c504-4b1d-ad2b-1bb9e587287c"});
</script>
</div>
<div class="location" style="display:flex">
<strong>Our Locations</strong>
<p>Mumbai</p>
<p>Inventrom Private Limited, Unit no. B 32-A, B-wing, 2nd Floor, Raj Industrial Complex, Military Road, Marol, Andheri East, Mumbai, Maharashtra-400059</p>
<p>Goa</p>
<p>Inventrom Private Limited, 10, Gaspar Apartment, behind Suzuki showroom, Panjim, Goa-403001, Near People's High School</p>
<p></p>
<strong>Contact Us</strong>
<p>79, 11th Cross Rd, Binnamangala Indiranagar, Bengaluru, Karnataka-560038, India</p>
<p>(+91) 8881197198</p>
<p>contactus#boltiot.com</p>
</div>
Related
I'm working on making a word search for whatever word is entered into the input box. I'm trying to create a div element that would show a string consisting of all words found at least once in each paragraph, for successive searches, below the input box. I also want to create a span element that maintains a count of the words that are found in all paragraphs for all searches. I'm just pretty lost with all of it and unsure where to even start.
/*window.onload = function()
{
document.getElementById("searchbutton").onclick = searchClick;
};
I needed to bring this one line lower to work on commenting out */
but1 = document.querySelector("#searchbutton");
but1.addEventListener('click', searchClick);
// Called when the Search button is clicked.
// Looks for paragraphs matching a search string and highlights them.
function searchClick() {
var searchPhrase = document.getElementById("searchtext").value;
/*var main = document.querySelector("#main");*/
var mainParas = document.getElementsByTagName("p");
for (var i = 0; i < mainParas.length; i++) {
if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) { mainParas[i].className = "highlighted"; } // highlight
else {
mainParas[i].className = null; // un-highlight
}
}
}
<body>
<div id="main">
<p>The Phoenix Suns are a professional basketball team based in
Phoenix, Arizona. They are members of the ...</p>
<p>The Suns have been generally successful since they began play as an
expansion team in 1968. In forty years of play they have posted ...</p>
<p>On January 22, 1968, the NBA awarded expansion franchises to an
ownership group from Phoenix and one from Milwaukee. ...</p>
<ul>
<li>Richard L. Bloch, investment broker/real estate developer...</li>
<li>Karl Eller, outdoor advertising company owner and former...</li>
<li>Donald Pitt, Tucson-based attorney;</li>
<li>Don Diamond, Tucson-based real estate investor.</li>
</ul>
</div>
<p>Page by Marty Stepp. <br />
Some (all) information taken from Wikipedia.</p>
<hr />
<div>
Search for text:
<input id="searchtext" type="text" />
<button id="searchbutton">Search</button>
</div>
</body>
Your problem seems to be that document.querySelector("#searchbutton") returns null so that but1.addEventListener('click', searchClick); fails. Instead of searching for the reason I skipped adding a listener and directly attached the onclick function with
<button id="searchbutton" onclick="searchClick()">Search</button>
in the html. This worked, but I had to define a css rule for highlighting that wasn't posted in your code.
Edit 01.05.2021 - I didn't cover counting the matches, so here it is completely:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
p.highlighted { background-color: Yellow; }
</style>
</head>
<body>
<body>
<script type="text/javascript">
function searchClick() {
var count = 0;
var searchPhrase = document.getElementById("searchtext").value;
var mainParas = document.getElementsByTagName("p");
for (var i = 0; i < mainParas.length; i++) {
if (mainParas[i].textContent.indexOf(searchPhrase) >= 0) {
mainParas[i].className = "highlighted"; // highlight
count += mainParas[i].textContent.split(searchPhrase).length - 1;
} else {
mainParas[i].className = null; // un-highlight
}
}
document.getElementById("found").textContent = count + " matches found";
}
</script>
<div id="main">
<p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>
<p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>
<p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>
<ul>
<li>Richard L. Bloch, investment broker/real estate developer...</li>
<li>Karl Eller, outdoor advertising company owner and former...</li>
<li>Donald Pitt, Tucson-based attorney;</li>
<li>Don Diamond, Tucson-based real estate investor.</li>
</ul>
</div>
<p>Page by Marty Stepp. <br />
Some (all) information taken from Wikipedia.</p>
<hr />
<div>Search for text:
<input id="searchtext" type="text" />
<button id="searchbutton" onclick="searchClick()">Search</button>
<span id="found"></span>
</div>
</body>
</html>
The counting happens with the loop checking the paragraphs. Before, a variable count is defined, inside it gets increased if matches occur, and after the loop the span id="found" is updated with the value of that variable.
For counting matches of the phrase and not numbers of paragraphs with matches, the text content is split up using the search phrase as delimiter. Then the number of pieces minus one is the number of occurences. Counted are phrases, not words. The phrase "the" is found in both " the " and " they ", but not in "The". Case sensitivity wasn't asked and isn't hard to implement. Just uppercase both the search phrase and the text being searched.
For simplicity, I put together HTML, Javascript and CSS into one file.
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 an option to select which engine package for a product on one of my e-commerce listing/product pages. Link: https://www.inflatableboats.net/avon-seasport-inflatable-boat-seasport-470-neo-2017-with-yamaha-four-stroke/.
I have a small script that changes the product description according to which engine is selected above. The problem I am running into is that I have added several other options and now it is hiding my description when the other options are selected. Here is my script as it sits on my website:
$(function() {
"use strict";
$(".specs div:gt(0)").hide();
$(".form-field-control input").click(function() {
var clicked = $(".form-field-control input").index(this);
var descriptionToShow = $(".specs div:eq(" + clicked + ")");
descriptionToShow.show();
$(".specs div").not(descriptionToShow).hide();
});
});
Now, I see part of the issue and have added an additional selector and that created a new problem.
I swapped:
var clicked = $(".form-field-control input").index(this);
to be:
var clicked = $(".form-field-radio > .form-field-control input").index(this);
This changed my problem from hiding my div to not switching back from the first div to the second. Any help is greatly appreciated, as I am not a JS expert by any means.
Here is the HTML for the engine option and the next option below it:
<div class="form-field form-field-options form-field-radio form-required" data-product-attribute="set-radio">
<div class="form-field-title product-option-title">
Engine Choice
<span class="required-text">(required)</span>
</div>
<div class="form-field-control">
<label class="form-label" data-product-attribute-value="143">
<input class="form-input form-radio" id="attribute-143" name="attribute[705]" value="143" checked="" required="" aria-required="" type="radio">
<span class="form-label-text">Yamaha F70LA Four Stroke</span>
</label>
<label class="form-label" data-product-attribute-value="144">
<input class="form-input form-radio" id="attribute-144" name="attribute[705]" value="144" required="" aria-required="" type="radio">
<span class="form-label-text">Yamaha F90LB Four Stroke</span>
</label>
</div>
</div>
<div class="form-field form-field-options form-field-checkbox form-required" data-product-attribute="input-checkbox">
<div class="form-field-title">
Pre Delivery Inspection
<span class="required-text">(required)</span>
</div>
<div class="form-field-control">
<label class="form-label ">
<input class="form-input form-checkbox" id="attribute-706" name="attribute[706]" value="116" required="" aria-required="true" type="checkbox">
<span class="form-label-text">$600 - Standard Fee requested by manufacturers, performed on new vessels, for preparing & testing the vessel on & off the water for turn-key delivery. Validates warranties. REQUIRED FEE</span>
</label>
</div>
</div>
And here is the product description html:
<div class="specs">
<p>The largest of the Zodiac Avon Seasport Deluxe inflatables, the 470 is the big boy. We rig these with Yamaha F90’s or F70's, which sound like race car engines when revved. The 470 has the deep “V” and the stern seat is moved forward a bit to support the motor and assist with planing. This boat can be expected to reach 40-45 mph on the top end, depending on conditions. The boat has a large fuel tank of 22.5 gallons, giving you a full day of play. The 470 also has many options available from the factory like a fresh water shower and picnic table, as well as synthetic teak decking and a bathing ladder.</p>
<div id="Description1">
<br />
<h3 class="specstitle">Boat Specifications</h3>
<ul class="specdetails">
<li>LOA: 15'5"</li>
<li>Beam: 6'9"</li>
<li>Weight: 910 lbs (Boat Only)</li>
<li>Capacity: 9 persons or 2083 lbs</li>
<li>Max Motor: 90 hp Long</li>
<li>Rec Motor: 70 hp Long</li>
<li>Tube Diameter: 20"</li>
<li>Air Chambers: 5</li>
<li>Fuel Tank: 22.5 gals</li>
<li>Fabric Type: Hypalon</li>
<li>Factory Warranty: 5 years</li>
</ul>
<br />
<h3 class="specstitle">Standard Features</h3>
<p>V-shaped fiberglass hull with built-in flaps, Anchor locker with upholstered seat, Rear locker with gas strut, 1 bow D-ring, 2 stern rings, Stainless steel bow rail, Rear boarding steps, Steering wheel + steering system + cable + glove box, Built-in fuel tank + gauge + fuel/water separator, Recess for extinguisher, Double pilot/co-pilot seat with removable upholstered seat, Passenger seats with removable upholstered cushion, 4 stainless steel mooring cleats, 3 lifting points, Courtesy light, Navigation lights, Battery switch + box, Automatic bilge pump, 2 paddles, foot pump, pressure gauge, repair kit, owner's manual</p>
<br />
<h3 class="specstitle">Motor Specifications</h3>
<ul class="specdetails">
<li>Engine Type: Yamaha F70LA 4-stroke</li>
<li>Horsepower: 70 hp</li>
<li>Cylinders: 4 cyl</li>
<li>Shaft Length: 20"</li>
<li>Steering: Remote mech</li>
<li>Starter: Electric</li>
<li>Weight: 253 lbs</li>
<li>Full Throttle Range: 5300 - 6300 rpm</li>
<li>Displacement: 996cc</li>
<li>Induction System: DOHC EFI</li>
<li>Warranty: 3 years</li>
</ul>
<br />
<h3 class="specstitle">Standard Features</h3>
<p>Electric start, remote mech steering, power trim & tilt, aluminum propeller, easy flush system</p>
<br />
<h3 class="specstitle">Standard Rigging</h3>
<p>Flush mounted remote control with harness and separate keyswitch, Command Link round tach and speedo, water/fuel separator, mechanical control cables</p>
</div>
<div id="Description2">
<br />
<h3 class="specstitle">Boat Specifications</h3>
<ul class="specdetails">
<li>LOA: 15'5"</li>
<li>Beam: 6'9"</li>
<li>Weight: 910 lbs (Boat Only)</li>
<li>Capacity: 9 persons or 2083 lbs</li>
<li>Max Motor: 90 hp Long</li>
<li>Rec Motor: 70 hp Long</li>
<li>Tube Diameter: 20"</li>
<li>Air Chambers: 5</li>
<li>Fuel Tank: 22.5 gals</li>
<li>Fabric Type: Hypalon</li>
<li>Factory Warranty: 5 years</li>
</ul>
<br />
<h3 class="specstitle">Standard Features</h3>
<p>V-shaped fiberglass hull with built-in flaps, Anchor locker with upholstered seat, Rear locker with gas strut, 1 bow D-ring, 2 stern rings, Stainless steel bow rail, Rear boarding steps, Steering wheel + steering system + cable + glove box, Built-in fuel tank + gauge + fuel/water separator, Recess for extinguisher, Double pilot/co-pilot seat with removable upholstered seat, Passenger seats with removable upholstered cushion, 4 stainless steel mooring cleats, 3 lifting points, Courtesy light, Navigation lights, Battery switch + box, Automatic bilge pump, 2 paddles, foot pump, pressure gauge, repair kit, owner's manual</p>
<br />
<h3 class="specstitle">Motor Specifications</h3>
<ul class="specdetails">
<li>Engine Type: Yamaha F90LB 4-stroke</li>
<li>Horsepower: 90 hp</li>
<li>Cylinders: 4 cyl</li>
<li>Shaft Length: 20"</li>
<li>Steering: Remote mech</li>
<li>Starter: Electric</li>
<li>Weight: 353 lbs</li>
<li>Full Throttle Range: 5000 - 6000 rpm</li>
<li>Displacement: 1832cc</li>
<li>Induction System: DOHC EFI</li>
<li>Warranty: 3 years</li>
</ul>
<br />
<h3 class="specstitle">Standard Features</h3>
<p>Electric start, remote mech steering, power trim & tilt, aluminum propeller, easy flush system</p>
<br />
<h3 class="specstitle">Standard Rigging</h3>
<p>Flush mounted remote control with harness and separate keyswitch, Command Link round tach and speedo, water/fuel separator, mechanical control cables</p>
</div>
</div>
I believe I have solved my own riddle. I changed my script to this and it is working. Probably only as long as I don't use radio buttons for anything else on the page.
$(function() {
"use strict";
$(".specs div:gt(0)").hide();
$(".form-radio").click(function() {
var clicked = $(".form-radio").index(this);
var descriptionToShow = $(".specs div:eq(" + clicked + ")");
descriptionToShow.show();
$(".specs div").not(descriptionToShow).hide();
});
});
I am using jQuery UI, I have added links to the javascript files (jquery ui.min, jquery-ui.css) in the (head) section, however when I apply jQuery to the menu (#shMenu) - it doesn't render. What are my doing wrong ?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>
</head>
<style>
.highlight{background-color:yellow;
}
#wrapper {
width:500px;
margin:auto;
}
.ui-menu {
width:15em;
}
#cartDiv {
border-style:solid;
border-width:5px;
}
</style>
<body>
<div id = "wrapper">
<ul id = "shMenu">
<li>Super Heroes
<ul>
<li>Hulk</li>
<li>Batman</li>
<li>Spider-Man</li>
</li>Thor</li>
</ul>
</li>
<li>Comic Books
<ul>
<li>Hulk</li>
<li>Batman</li>
<li>Spider-Man</li>
<li>Thor</li>
</ul>
</li>
</ul><br/>
<div id = "accordion">
<h3>Batman</h3>
<div>
A young Bruce Wayne (Christian Bale) travels to the Far East,
where he's trained in the martial arts by Henri Ducard (Liam Neeson),
a member of the mysterious League of Shadows. When Ducard reveals the League's true purpose
-- the complete destruction of Gotham City -- Wayne returns to Gotham intent on cleaning up the city without resorting to murder.
With the help of Alfred (Michael Caine), his loyal butler, and Lucius Fox (Morgan Freeman),
a tech expert at Wayne Enterprises, Batman is born.
</div>
<h3>Thor</h3>
<div>
As the son of Odin (Anthony Hopkins), king of the Norse gods,
Thor (Chris Hemsworth) will soon inherit the throne of Asgard from his aging
father. However, on the day that he is to be crowned, Thor reacts with brutality when the gods' enemies,
the Frost Giants, enter the palace in violation of their treaty. As punishment, Odin banishes Thor to Earth. While Loki (Tom Hiddleston),
Thor's brother, plots mischief in Asgard,
Thor, now stripped of his powers, faces his greatest threat..
</div>
<h3>SpiderMan</h3>
<div>
"Spider-Man" centers on student Peter Parker (Tobey Maguire) who,
after being bitten by a genetically-altered spider, gains superhuman
strength and the spider-like ability to cling to any surface. He vows
to use his abilities to fight crime, coming to understand the words of his
beloved Uncle Ben:
"With great power comes great responsibility."
</div>
<div id = "shTabs">
<ul>
<li>Ironman</li>
<li>Hulk</li>
<li>thor</li>
<li>SpiderMan</li>
</ul>
</div>
<div id = "ironman">
A billionaire industrialist and genius inventor, Tony Stark (Robert Downey Jr.),
is conducting weapons tests overseas, but terrorists kidnap him to force him to build a devastating
weapon. Instead, he builds an armored suit and upends his captors. Returning to America,
Stark refines the suit and uses it to combat crime and terrorism.
</div>
<div id = "hulk">
Eric Bana ("Black Hawk Down") stars as scientist Bruce Banner,
whose inner demons transform him in the aftermath of a catastrophic experiment;
Jennifer Connelly portrays Betty Ross, whose scientific genius unwittingly helps unleash the Hulk;
Nick Nolte plays Banner's brilliant father, who passes on a tragic legacy to his son; and Sam Elliott
portrays the commander of a top-secret military research center.
</div>
<div id = "thor">
As the son of Odin (Anthony Hopkins), king of the Norse gods,
Thor (Chris Hemsworth) will soon inherit the throne of Asgard from his aging
father. However, on the day that he is to be crowned, Thor reacts with brutality when the gods' enemies,
the Frost Giants, enter the palace in violation of their treaty. As punishment, Odin banishes Thor to Earth. While Loki (Tom Hiddleston),
Thor's brother, plots mischief in Asgard,
Thor, now stripped of his powers, faces his greatest threat..
</div>
<div id = "spiderman">
"Spider-Man" centers on student Peter Parker (Tobey Maguire) who,
after being bitten by a genetically-altered spider, gains superhuman
strength and the spider-like ability to cling to any surface. He vows
to use his abilities to fight crime, coming to understand the words of his
beloved Uncle Ben:
"With great power comes great responsibility."
</div>
<div></br>
<div id = "customDialog" title = "custom Dialog">
<p>A random dialog box that contains important information</p>
</div>
Open Dialog<br/><br/>
<script type = "text/javascript">
$('document').ready(function() {
$("#shMenu").menu({
position: {
my: "center top"
at: "center bottom"
};
});
});
</script>
</div>
</body>
</html>
You have syntax errors in your JQuery code. The code should read:
$('document').ready(function() {
$("#shMenu").menu({
position: {
my: "center top",
at: "center bottom"
}
});
});
See working example: https://jsfiddle.net/Twisty/3z80bLed/
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>