* Edited based on various feedback*
I was trying to implement Parallax effect in my Webpage as described in http://pixelcog.github.io/parallax.js/
Below is my HTML and CSS code :
HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "Parallax/parallax.js"></script>
</head>
<body id='ground'>
<div id='Main_Div'>
<div id = 'Sub_Div1'>
</div>
<div class="parallax-window" data-parallax="scroll" data-image-src="https://upload.wikimedia.org/wikipedia/commons/1/17/Mytikas.jpg">
<h3>Some Text</h3>
</div>
<div id = 'Sub_Div3'>
</div>
</div>
</body>
CSS Code
body {
margin: 0 auto;
width: 60%;
}
#Main_Div {
height: 2600px;
background: #FFFF00;
padding: 30px 0;
}
#Sub_Div1 {
height: 500px;
background: #800000;
padding: 30px 0;
}
#Sub_Div3 {
height: 500px;
background: #FFA500;
padding: 30px 0;
}
.parallax-window {
height: 400px;
background: transparent;
}
However with above code I could not achieve desired effect.
Appreciate if someone can point out any improvement in my code.
Thanks,
Related
I've built a basic image slider using HTML, CSS, and JS (Jquery). There are 5 images in total and users can switch between them using arrows, everything works fine so far but I want the right arrow to disappear if it reaches the last image and that's where I get stuck. The problem is that the right arrow disappears right after I reach the second image. Any idea on how to fix that? Thanks in advance!
IMG of the slider
IMG of my problem (the right arrow disappears immediately when I reach the second image, that's supposed to happen only with the last image.)
Here is the code
$(document).ready(function() {
$('.next').on('click',function(event) {
var images = $('.slider-inner').find('img');
var currentImg = $('.active')
var nextImg = currentImg.next();
var lastImg = images.last();
var rightArrow = $('.next');
images.not(':first').hide();
if (nextImg.length) {
currentImg.removeClass('active');
nextImg.addClass('active');
nextImg.fadeIn();
}
if (lastImg.length) {
rightArrow.hide();
}
event.preventDefault();
});
$('.prev').on('click',function() {
var currentImg = $('.active')
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active');
prevImg.addClass('active');
}
});
});
*,*::before,*::after {box-sizing: border-box;}
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
overflow: auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
margin: 0 auto;
max-width: 1200px;
max-height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: black solid 7px;
}
.slider-inner img {
display: none;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
float: left;
cursor: pointer;
}
.prev {
z-index: 100;
margin-right: -2.8125em;
position: relative;
}
.next {
margin-left: -2.8125em;
z-index: 100;
position: relative;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="img-slider/john-jpg.jpg" class="active" alt="A game character witha quote saying Dont you kids watch horror movies?, you never, ever, split up.">
<img src="img-slider/butterflies-jpg.jpg" alt="A game character looking at an enthogy">
<img src="img-slider/andrew-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past">
<img src="img-slider/taylor-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past"">
<img src="img-slider/vince-.jpg.jpg" alt="A bar with a guy sitting there">
<img src="img-slider/conrad.jpg" alt="Conrad">
</div>
<img src="img-slider/arrow-right.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
if (lastImg.hasClass("active")) {
rightArrow.hide();
}
The div with style contentdetailleft is absolute and so will be positioned to the div with the style container (since container is absolute). You can see that I have set left to 0px and top to 0px just to illustrate this. If you run it you will see the div with contentdetailleft overlap the div with style contentTop as you would expect. This is the HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:0px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Now remove the left:0px and top:0px on the contentdetailleft style (see the HTML below). Now the div with style contentdetailleft is within the div with style contentBottom. How can this be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Thanks
Ian
The reason you are seeing this change in behavior is because the default positioning that occurs when you use "position: absolute;" is "left: 0;". However, "top: 0;" is not default behavior, so when you add that (as you correctly said), ".contentdetailleft" is positioned to the ".container" element.
Because ".contentdetailleft" comes after ".contentheaderleft" in the DOM (*and more importantly, because ".containerBottom" and ".containerTop" are still default position - static), once ".containerdetailleft" becomes positioned absolutely it is pulled out of the normal flow of the DOM and positioned based on it's relative/absolute parent (".container"). At this point it is sitting at the top-left corner of container, on top of ".containerTop", and thus on top of ".contentheaderleft".
You don't need the style "left: 0;" on ".contentdetailleft" once it has been positioned absolutely. If you would like to keep it absolute and have the "top" styling, but not have it overlap/cover ".contentheaderleft", simply position it from the top at the exact height of ."contentheaderleft" (42px), i.e. "top: 42px;".
*see below, all I updated was the top position of ".contentdetailleft"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:42px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
I have this really weird problem. I just want to draw two simple lines that are a little bit spaced out between one another.
Here's the html:
<div class="hline">
</div>
<div class="hline">
</div>
And the CSS:
html, body {
background-color: white;
}
.hline {
background-color: black;
height: 2px;
margin: 50px;
}
When the background color is of the body is white, it works flawlessly, but when it's black, and the background color of my divs is white, there just seems to be one big white line in the black background. Why is that?
Thanks a lot in advance,
Luke :D
it's working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
background-color: black;
}
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline">
</div>
<div class="hline">
</div>
</body>
</html>
I tried your code and this is what I got for a black background and a white line
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { background-color: black; }
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline"></div><div class="hline"></div>
</body>
</html>
I want to add pasted text (that text goes down when user goes down of the page, etc.) at the top of my page, when somebody haven't got enabled JavaScript, something like that :
How to do this ? Is there any way to that using JavaScript or HTML ? I want not to use jQuery, because I don't know that language so good.
#EDIT : Sorry, that was my error - that cannot use JavaScript if user doesn't have JS enabled :)
This is a sample how you can make a info bar like SO:
HTML:
<noscript><div id="noscript"><p>NO JAVASCRIPT</p></div></noscript>
CSS:
div#noscript {
margin: 0 auto;
width: 100%;
padding: 10px 0;
position: fixed;
top: 0;
background: red;
z-index: 99999;
}
div#noscript p {
text-align: center;
color: white;
}
Here the JSfiddle
http://jsbin.com/AJUxayA/6/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="no_js_header">test</div>
<div id="content">content</div>
<div style="margin-top: 2200px"></div>
</body>
</html>
#no_js_header {
position:fixed;
width:100%;
background-color:red;
margin: 0px;
top: 0px;
left: 0px;
padding: 3px;
}
#content {
position: absolute;
top: 50px;
}
(uncomment for activation in the jsbin)
document.getElementById('no_js_header').style.display = 'none';
You can try using the noscript tag...
<noscript>
<div>
<p>ahhh, javascript is disabled!</p>
</div>
</noscript>
The background of the body is set background-attachment: fixed; and background-position: left bottom; This works great when the window is maximized, but when I go to full screen, there's an empty white space at the bottom. Here's the code:
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type = "text/javascript" src="script.js">
</script>
<div id = "container">
<body onLoad="baseSize()">
<div id = "head">
<div id = "icon"><p>Craig InTheDell</p></div>
</div>
<div id = "navcol">
<table>
<tr><td>Poetry</td></tr>
<tr><td>Essays</td></tr>
<tr><td>Stories</td></tr>
<tr><td>About</td></tr>
</table>
</div>
</body>
</div>
</html>
css
html {
font-family: "Times New Roman";
}
body {
background-image: url(treeshort.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
#container {
font-size: 16px;
width: 960px;
margin: 0 auto;
overflow: auto;
}
#head {
height: 100px;
}
#icon {
font-size: 50px;
float: right;
}
table {
position: absolute;
left: 950px;
font-size: 40px;
}
a {
color: #000000;
}
I also have some javascript that sets #container height to the availHeight of the window.
function baseSize() {
var available = window.screen.availHeight;
var container = document.getElementById("container");
container.style.height = available + "px";
}
First, fix the errors in your HTML. They look terrible.
Then, you calculate the height as screen.availHeight. That's a mistake, availHeight is the height of the desktop. Excluding things like taskbars and whatever you may have on your computer. What you need is screen.height.