i want to use wow.js on my website. I got a sidebar which needs to have the content inside a container with overflow-x: auto;. Because of this wow.js does not work.
Is it possible to define in wow.js the scrolling container?
My site looks like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/js/wow.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/animate.css">
<script>
$("document").ready(function() {
new WOW().init();
})
</script>
<style>
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
position: relative;
}
#menu {
position: absolute;
width: 300px;
left: -300px;
background: red;
}
#content {
position: absolute;
width: 100%;
height: 100%;
background: green;
overflow-x: auto;
}
.wow {
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<nav id="menu">
<ul>
<li>sidebar1</li>
<li>sidebar2</li>
<li>sidebar3</li>
</ul>
</nav>
<div id="content">
contentcontent<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="wow bounce">text</div>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
<script>
</script>
</html>
Problem solved:
I've changed the Contentcontainer to a section and used this code to init wow.js
var wow = new WOW({ scrollContainer: "section"});
wow.init();
Thanks anyway
Related
I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this.
Also, I tried adding a margin-bottom to the form but no margin appears below the border.
$(document).ready(function () {
setFormsWidth();
});
function setFormsWidth() {
let scrollbox = document.createElement('div');
// Make box scrollable
scrollbox.style.overflow = 'scroll';
// Append box to document
document.body.appendChild(scrollbox);
// Measure inner width of box
scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
// Remove box
document.body.removeChild(scrollbox);
// Get current width of right margin, which should be 30% of the
// width of the form-panel parent (the content class).
var formPanel = document.getElementById("main-form");
// Get the current right margin and remove the px at end of number
var style = window.getComputedStyle(formPanel);
var marginRightString = style.getPropertyValue('margin-right');
var marginRight = marginRightString.slice(0,-2);
// now addthe scrollBarWidth to the right margin
var newMargin = marginRight + scrollBarWidth;
formPanel.style.marginRight = newMargin + "px";
}
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 1000px;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:1000px;">
<div class="content">
<form class="form-panel" id="main-form">THIS IS FORM</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.
Here is how to change the css.
Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element
If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.page {
flex: 1;
overflow: auto;
background: pink;
}
.content {
background-color: green;
height: 100%;
}
.tabs {
width: 70%;
height: 50px;
background-color: aqua;
margin: 0 auto;
border-bottom: solid #FE6D73 7px;
}
.form-panel {
width: 70%;
height: 100%;
background-color: #FFF;
margin: 0 auto;
overflow-y: auto;
border-bottom: solid #FE6D73 7px;
padding-bottom: 7px;
box-sizing: border-box;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="tabs">
THIS IS TAB
</div>
<div class="page" id="calculator">
<div style="height:100%;">
<div class="content">
<form class="form-panel" id="main-form">
<div style="height:1000px">
THIS IS FORM
</div>
</form>
</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
I know that z-index has problems with different positionings and in this snippet I need them to work together so that I could replicate the navigation on this website http://www.ericryananderson.com/
The problem is that when the overlay is activated the button needs to be z-indexed which the position sticky doesn't like and doesn't allow it causing the overlay to be unclosable. The position sticky is on the nav bar. Is there a workaround this?
var bars = document.querySelector('.bars')
var overlay = document.querySelector('.overlay')
var isMenuOpened = false;
bars.addEventListener('click', function() {
if (isMenuOpened === false) {
bars.classList.remove('fa-bars');
bars.classList.add('fa-times');
overlay.style.display = 'block'
isMenuOpened = true;
bars.style.position = 'fixed'
bars.style.top = '40px';
bars.style.right = '60px';
}else{
bars.classList.remove('fa-times');
bars.classList.add('fa-bars');
overlay.style.display = 'none'
bars.style.position = 'static'
isMenuOpened = false;
}
})
body{
height: 3000px;
}
.video{
width: 100%;
height: 700px;
background: red;
}
nav{
display: flex;
/* position: sticky; */
top: 0px;
justify-content: space-between;
padding: 50px;
background: green;
height: 10px;
}
i{
font-size: 30px;
z-index: 10;
}
.overlay{
position: fixed;
top:0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="video">
</div>
<div class="navigation">
<nav>
<h4>koreys site</h4>
<i class="fas fa-bars bars"></i>
</nav>
</div>
<div class="overlay">
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
MY issue is simple.
I have a header-box with 3 divs inside;
A background image (relative)
a overlay; background-color with opacity (relative)
and a text.
The issue is that i can't position my text in the middle;
I created a javascript function handeling the issue, but the script doesn't do anything
The only way to set the top, left value for the element is to write it into the css file.
Any guesses? (And no the JS / JQuery code did work; tested it without the div-boxing madness)
Here are the files:
Index.html:
<head>
<title> Website </title
<!-- CSS Files -->
<link rel="stylesheet" type="text/css" href="css/content.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/fontboxes.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<!-- jQuery Einbindung -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function adjust() {
getElementById("mediumfontbox").style.top = 125;
}
</script>
</head>
<body>
<header>
<img src="img/header1.jpg"> </img>
<div id="overlay1"></div>
<div class="mediumfontbox" onload="adjust()"> Inspirational Quote </div>
</header>
<div class="main"></div>
<footer id="overlay1">
<div id="copy">Copyright by Vancold</div>
</footer>
</body>
header.css
header
{
width:100%;
height:100%;
}
header > *
{
position:absolute;
}
img
{
z-index: 0;
width: 100%;
height:100%;
top: 0px; left:0px;
}
header > .mediumfontbox
{
z-index: 2;
}
header > #overlay1
{
z-index:1;
height: inherit;
}
header > #overlay2
{
z-index:1;
height: inherit;
}
header > #overlay3
{
z-index:1;
height: inherit;
}
fontboxes.css
.smallfontbox
{
width: 125px;
height: 125px;
}
.mediumfontbox
{
width: 250px;
height: 250px;
}
.bigfontbox
{
width: 500px;
height: 500px;
}
.font
{
color: white;
font-family: "Times New Roman", Times, serif;
font-size: 32px;
}
layout.css
* {
margin: 0px;
padding: 0px;
}
#overlay1
{
background: blue;
opacity: 0.125;
width: 100%;
}
#overlay2
{
background: red;
opacity: 0.125;
width: 100%;
}
#overlay3
{
background: green;
opacity: 0.125;
width: 100%;
}
Your script is running in the header of your file, before anything is rendered in the body. Try moving your script to the end of your document body.
The style value for top should be a string with a unit - for example '125px'.
getElementById is a function of document.
onload doesn't apply to div. Put it on body.
#mediumfontbox {
position: absolute;
}
<head>
<script>
function adjust() {
document.getElementById("mediumfontbox").style.top = '125px';
}
</script>
</head>
<body onload="adjust()">
<div id="mediumfontbox">
Inspirational quote
</div>
</body>
I am trying to label my picture inside a div container with a name in the h2 tag and health points on the bottom with a p tag, but its not working when I use .text. I am trying to insert the text in the js file, "Darth Vader" into the div h2 in the div container: charContainer
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256- laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<style type="text/css">
.characters
{
width: 100%;
overflow: auto;
margin-left: 50px;
}
.vade, .skywalker, .obi, .dmaul
{
width: 130px;
height: 100px;
margin-top: 30px;
margin-left: 35px;
}
.charContainer, .charContainer1, .charContainer2, .charContainer3
{
width: 200px;
height: 170px;
float: left;
border: solid;
border-color: green;
background-color: white;
}
h2
{
font-size: 50px;
width: 100%;
margin-left: 50px;
}
.your
{
width: 100%;
}
.enemies
{
width: 100%;
overflow: auto;
margin-top: 50px;
}
.c1
{
width: 100%;
font-size: 20px;
}
</style>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p class="c1hp"></p>
</div>
</div>
<div class="your">
<h2>Your Character</h2>
</div>
<div class="enemies">
<img class="dmaul" src="assets/images/maul.png">
</div>
</body>
</html>
JS File
$(document).ready(function(){
$('#c1').text("Darth Vader");
}
It's just a typo in your JS file.
Replace:
$(document).ready(function(){
$('#c1').text("Darth Vader");
}
with:
$(document).ready(function(){
$('#c1').text("Darth Vader");
});
Update 16 Oct 01:46
Your script import of the jQuery library contains an extra space between sha256- and laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=
You don't reference your JS file anywhere in index.html.
Add:
<script src="NAME-OF-JS-FILE.js"></script>
just before your closing </body> tag.
I found this code at ( http://code.google.com/p/prototype-carousel/ ) but somehow I can't manage him to work. Can someone help me please? The image load fine but the buttons simple does nothing. Thanks in advance.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="carousel.js"></script>
<style type="text/css">
#carousel-wrapper {
width: 980px;
height: 580px;
overflow: hidden;
}
#carousel-content {
width: 2500px;
}
#carousel-content .slide {
float: left;
width: 980px;
height: 580px;
}
</style>
</head>
<body>
<div id="carousel-wrapper">
<div class="controls">
Next
Previous
</div>
<div id="carousel-content">
<div class="slide">
<img src="sample1.jpg" />
</div>
<div class="slide">
<img src="sample2.jpg" />
</div>
<div class="slide">
<img src="sample3.jpg" />
</div>
</div>
<script type="text/javascript">
new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control'),
{ wheel:false, circular:true, auto:false, effect:scroll, frequency:5, duration:1, });
</script>
</div>
</body>
</html>
You need to include the CSS
#carousel-wrapper {
width: 500px;
height: 500px;
overflow: hidden;
}
#carousel-content {
width: 2500px;
}
#carousel-content .slide {
float: left;
width: 500px;
height: 500px;
}
You should probably also move the controls and <script> contents outside of the wrapper.
Here's a working example:
http://jsfiddle.net/eyweA/1/