Background colour or image change with JS script - javascript

All,
I want to have a JS script in which when you scroll down the header ("Banner") of the website gets another colour. (Change from transaparant to a colour). (In the future i want it to change from an image to another image.. ).
i added a JS script from this website but it does not work yet. I think i need to know which div i need to use for the scrollbar.
Can anybode help with this?
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
(".banner" , 'background-color', 'blue');
} else {
(".banner" , 'background-color', 'red');
}
});
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
color: #333955;
top: 20px;
position: fixed;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>

You should change the background-color in css and also name the class in jquery proper:
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 20) {
$(".banner").css("backgroundColor", "red");
} else {
$(".banner").css("backgroundColor", "rgba(100,100,100,0.5)");
}
});
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
background-color: rgba(100,100,100,0.5);
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
}
.menutekst {
text-align: center;
font-size: 2vw;
top: 20px;
word-spacing: 1em;
}
.koopnubutton{
position: fixed;
background : #333955;
background : rgba(51, 57, 85, 1);
border-radius : 16px;
-moz-border-radius : 16px;
-webkit-border-radius : 16px;
;
color: #FFFFFF;
width: 200px;
}
.firstdiv {
position: relative;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
}
.eettellus {
position: absolute;
bottom: 30%;
width: auto;
left: 20%;
font-family: "Garisman Studio FreudianTwo";
color: #FDFDFD;
font-size: 3.5vw;
}
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>

You just need to measure the height of your banner in order to know where you need to switch the color:
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if (scroll_pos > $(".banner").height()) {
$(".banner").css("background-color", "blue");
} else {
$(".banner").css("background-color", "red");
}
});
.banner {
display: table;
clear: both;
position: fixed;
font-size: 1vw;
color: #333955;
font-family: "Garisman Studio FreudianTwo";
width: 100%;
z-index: 99;
align-content: center;
overflow: auto;
background-color: red;
}
body {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner" onKeyDown="asdasdf"><div class="menutekst">ons verhaal impact chocolade contact</div></div>

Use a native javascript in your html code :
<div class="banner" onscroll="myScript" ></div>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<title>Tellus Chocolade</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="banner" onscroll="myScript"><div class="menutekst">ons verhaal impact chocolade contact</div></div>
<div class= "firstdiv">
<img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/>
<div class="eettellus">Breng de natuur terug,<br>
<span style="font-size: 3.8vw">eet tellus chocolade</span></div></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jQueryAssets/script.js"></script>
</body>
</html>
and in your javascript
window.onscroll = function() {myScript()};
function myScript() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("banner").css('background-color', 'blue');
} else {
document.getElementById("banner").css('background-color', 'red');
}
}
I hope this answer will help you.

Related

JQuery/CSS Animation of Sprite image

I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;

How to show text on an image? (code is in question)

I am trying to learn coding in my freetime and have run into an issue. I am trying to have 'contact info' to be a on hover on profile picture so that it shows a way to contact me via phone, email, and shows my name. I'm hoping someone can help with this please.
Cut most of the HTML code in the process to allow post
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='Profile.jpg' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>
You've missed ; after top: 30%; in CSS #contactInfo class
var infoDivs = document.getElementsByClassName ('infoDivs');
var contactInfoDiv = document.getElementById('contactInfo');
function displayInfo(index) {
for (var i = 0; i < infoDivs.length; i++) {
infoDivs[i].style.display = 'none';
}
infoDivs[index].style.display = 'block';
}
function showcontactInfo() {
contactInfoDiv.style.display = 'block'
}
function hidecontactInfo() {
contactInfoDiv.style.display = 'none'
}
//line 12-18 is what should be my issue? Otherwise line 2? //
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
font-family: "verdana";
}
body {
background-image: url('https://imgur.com/GfUxQA7.jpg');
padding: 10px;
}
h1 {
font-size: 35px;
}
h2 {
margin: 0px;
font-size: 30px;
}
header {
margin: 20px;
height: 20%;
}
header img {
position: absolute;
right: 20px;
border-style: solid;
border-radius: 50%;
border-width: 2px;
}
header p {
margin-top: 50px;
}
#main {
position: relative;
height: 70%;
}
#navlist {
list-style: none;
display: inline-block;
height: 100%;
padding: 0px;
margin: 20px;
width: 25%;
font-size: 20px;
font-weight: bold;
}
#navlist li {
height: 18%;
}
#navlist li:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#infoContainer {
position: absolute;
display: inline-block;
top: 20px;
bottom: 20px;
right: 10%;
left: 25%;
height: 90%;
margin-left: 20px;
background-color: rgba(255, 255, 255, 0.2);
}
.infoDivs {
display: none;
margin: 20px;
}
.infoDivs h2 {
margin-bottom: 40px;
}
#bioDiv {
display: block;
}
#contactInfo {
background-color: white;
display: none;
position: fixed;
width: 50%;
left: 25%;
top: 30%; /* missed ; */
color: black;
text-align: center;
font-size: 3vw;
}
#media (max-width: 500px) {
#navList {
font-size: 15px;
margin-left: 10px;
}
#infoContainer {
margin-left: 10px;
}
}
#media (max-width: 400px) {
h1 {
font-size: 30px;
}
header img {
width: 50px;
right: 5px;
}
#navList {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS for my webpage.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My webpage</title>
</head>
<body>
<script src="Javascript html.js"></script>
<header>
<img onmouseover='showcontactInfo()' onmouseout='hidecontactInfo()' src='https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w100-h50-n-l50-sg-rj' alt="Profile picture"> <!--This is what line im having issue with i think?-->
<h1>My Webpage</h1>
<p>Welcome to my webpage where you can learn about me!</p>
</header>
<div id='main'>
<ul id='navlist'>
<li onclick='displayInfo(0)'>Bio</li>
<li onclick='displayInfo(1)'>Education</li>
<li onclick='displayInfo(2)'>Work</li>
<li onclick='displayInfo(3)'>Projects</li>
<li onclick='displayInfo(4)'>Interests</li>
</ul>
<div id='infoContainer'>
<div id='bioDiv' class='infoDivs'>
<h2>Bio</h2>
<p>Here is a little about myself and my background.</p>
<p>Hello my name is Antoly, I'm currently learning coding (HTML5, CSS, and Javascript) and teaching myself Italian language in my free time and attending school to become a Information Technology Network Specialist</p>
</div>
<div id='educationDiv' class='infoDivs'>
<h2>Education</h2>
<p>Here is some info about my schooling and courses that I've taken.</p>
</div>
</div>
</div>
</div>
<div id='contactInfo'> <!-- This is what I want to show my info when you put your mouse over my picture-->
<p>Antoly Borshkev</p>
<p>helloworld#gmail.com</p>
<p>1111111111</p>
</div>
</body>
</html>

JS not working to close overlay page

I'm starting with JS and I have a small problem (I think) with my code.
I'm trying to create an overlay consent page, but it seems my YES (button) is not working properly. When press YES, it should close the overlay and show website content. Can someone help me to fix it?
This is probably a small detail, as always.
function openDialog(id) {
document.getElementById(id).className += "show";
document.documentElement.style.overflow = "hidden";
}
function closeDialog(id) {
document.getElementById(id).className = "warning";
document.documentElement.style.overflow = "visible";
}
openDialog("warning");
body,
html {
overflow: hidden;
height: 100%;
margin: 0;
}
.consent-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.consentpage {
background: #000015;
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: #f8f8f8;
font-family: 'Raleway', monospace;
}
.consent-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.consent-content h1 {
text-transform: uppercase;
font-size: 4.8rem;
font-weight: 600;
letter-spacing: .1rem;
padding: 20px;
}
.consent-content p {
font-size: 2.4rem;
font-weight: 800;
text-transform: uppercase;
}
.button {
text-decoration: none;
display: inline-block;
font-size: 40px;
cursor: pointer;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div id="warning" class="consent-overlay show">
<div class="consentpage">
<div class="consent-content">
<div>
<div>
<h1>AVISO</h1>
<p>Este website exibe contéudo explícito!</p>
<div class="button">
<button class="btn btn-success" onclick="closeDialog("warning")">Tenho mais de 18 anos</button>
<button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think this is what you were looking for. I added the jQuery and boostrap <script>s to the <head> of the document. I also stripped out all the white spaces in the bootstrap <script> tag.
You don't need to add the class show as it adds itself automatically. You do however need to remove the show class and add a hide class.
Here's the code:
function openDialog()
{
document.documentElement.style.overflow = "hidden";
}
function closeDialog()
{
document.getElementById("warning").classList.remove( "show" )
document.getElementById("warning").classList.add("hide");
}
openDialog();
body,
html {
overflow: hidden;
height: 100%;
margin: 0;
}
.consent-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.consentpage {
background: #000015;
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: #f8f8f8;
font-family: 'Raleway', monospace;
}
.consent-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.consent-content h1 {
text-transform: uppercase;
font-size: 4.8rem;
font-weight: 600;
letter-spacing: .1rem;
padding: 20px;
}
.consent-content p {
font-size: 2.4rem;
font-weight: 800;
text-transform: uppercase;
}
.button {
text-decoration: none;
display: inline-block;
font-size: 40px;
cursor: pointer;
padding: 0px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="warning" class="consent-overlay show">
<div class="consentpage">
<div class="consent-content">
<div>
<div>
<h1>AVISO</h1>
<p>Este website exibe contéudo explícito!</p>
<div class="button">
<button class="btn btn-success" onclick="closeDialog()">Tenho mais de 18 anos</button>
<button class="btn btn-danger" onclick="location.href='https://www.webnode.com.br';">Tenho menos de 18 anos</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Example content -->
<div>
<div>This is some content here 1.</div>
<div>This is some content here 2.</div>
</div>
</body>
</html>

How to get jQuery to recognize mouse over image once per hover

I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:
1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).
2) What is wrong with my current jQuery syntax? The animation does not play.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<script type="text/javascript" src="scripts/test.js"></script>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
JS
$(document).ready(function()
{
$('#me-pic').hover(function()
{
$(".bounceIn").toggleClass("bounce");
});
});
My CSS
body,html
{
width: 100%;
min-width: 200px;
height: 100%;
padding: 0;
margin: 0;
}
.container
{
width: 100%;
min-width: 500px;
height: 100%;
}
.background
{
height: 100%;
width: 100%;
display: inline-block;
position: relative;
z-index: 1;
}
.align-vert
{
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.me-border
{
border-radius: 50%;
border: 2px solid #FFF;
vertical-align:middle
}
.navbar
{
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
margin: 0;
padding: 0;
width: 100%;
height: 50px;
z-index: 2;
}
.nav-text
{
color: #a3a3a3;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 16px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#home
{
margin-right: 50px;
}
#home:hover
{
color: #777777;
}
#home a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: inherit;
}
#archive
{
margin-left: 50px;
}
#archive:hover
{
color: #777777;
}
.daryl
{
font-family: 'Work Sans', sans-serif;
display: inline-block;
padding-left: 20px;
font-size: 30px;
color: #FFF;
}
#first
{
background: #2C2D45;
}
#second
{
background: #354677;
font-size: 40px;
font-family: 'Work Sans', sans-serif;
color: white;
}
See here for animate.css
Could my CSS files cause a conflict?
Thanks in advance!
In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.
$(document).ready(function()
{
$('#me-pic').on('mouseenter', function() {
$(".bounceIn").toggleClass("bounce");
});
$('#me-pic').on('mouseleave', function() {
$(".bounceIn").toggleClass("bounce");
});
});

Iframe in scrolling-system with jquery.mousewheel.js does not work fine

I was searching for a scrolling-system like this:
Scroll down to page, scroll up to top system like on a MEGA.co.nz download page
The scrolling works fine, but I've got a problem with an Iframe I want to use in the content div. If I open up the page the content part is 75% visible and above is the splash part. I just want that the splash part is fully visible if I open the page.
My CSS:
#font-face
{
font-family: 'hightide'; src: url(../resources/other/HighTide.woff) format('woff');
}
#font-face
{
font-family: 'ontwerp'; src: url(../resources/other/Ontwerp.woff) format('woff');
}
html, body {
height:100%;
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
p::selection {background: #000000; color:#ffffff;}
p::-moz-selection {background: #000000; color:#ffffff;}
a:link
{
text-decoration:none; font-weight:bold; color: #000;
}
a:visited
{
text-decoration:none; font-weight:bold; color: #000;
}
#wrapper
{
height:100%;
}
#splash
{
position: relative;
width: auto;
background: url(../resources/img/background2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
height: 100%;
}
#splash-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#content
{
position: relative;
height: 100%;
overflow: auto;
}
#content-footer
{
position: absolute;
top: 96%;
height: 4%;
background-color: black;
width: 100%;
text-align: center;
color: white;
font-family: "hightide", arial, sans-serif;
}
#quote
{
text-align: center;
font-family: "ontwerp", arial, sans-serif;
position: fixed;
top: 30%;
left: 25%;
font-size: 3.5em;
color: white;
width: 50%;
height: auto;
}
#cloudlogin
{
background-attachment: fixed;
width: 100%;
height: 97%;
bottom: 3%;
position: relativ;
}
#headerbar
{
position: fixed;
z-index: 3;
background: url(../resources/img/gamer752-header.png);
background-size: 15% auto;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 7%;
top: 0%;
left: 0%;
background-color: black;
}
My HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/stylesheet.css" media="screen">
<title>amer752: Public</title>
<link rel="icon" href="resources/img/favicon.ico" type="image/x-icon" />
<script src="resources/js/jquery-1.10.1.js"></script>
<script src="resources/js/jquery.mousewheel.js"></script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
/* scroll events */
$("#splash").on("mousewheel", function (e) {
if (e.deltaY <= 0) {
$('#splash').animate({
height: 0
}, 500);
}
});
$("#content").on("mousewheel", function (e) {
if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
$('#splash').animate({
height: '100%'
}, 500);
}
});
/* click events */
$("#splash-footer").on("click", function () {
$('#splash').animate({
height: 0
}, 500);
});
$("#content-footer").on("click", function () {
$('#splash').animate({
height: '100%'
}, 500);
});
});//]]>
</script>
<div id="headerbar"></div>
</head>
<div id="wrapper">
<div id="splash">
<div id="quote">
<p>The Art</p>
<p>Of</p>
<p>Doing Nothing.</p>
</div>
<div id="splash-footer">
<p>Click here or scroll</p>
</div>
</div>
<div id="content">
<div id="cloudlogin">
<iframe width=100% height=100% frameborder="0" src="cloud\index.html"></iframe>
</div>
<div id="content-footer">
<p>Click here or scroll</p>
</div>
</div>
</div>
</html>
I'm using Chrome and it will be enough when it just works for Chrome. Hope you guys know what's the matter.
PS. I'm new on stackoverflow. I do my best not to act like a total noob. If there's something I cloud do better just tell it me.
Thanks.

Categories