I'm working on a website for a school project and I'm having trouble with using the javascript. I am not a fan of js because I always have issues with it and I can never seem to get them figured out without help, but it is one of the requirements for the project. I am trying to make the title in the page move in from off the left side of the page and into the center when the page loads. Here is my code:
JS:
function animate() {
function movetext() {
obj = document.getElementById('spacer');
obj.style.position ='relative';
obj.style.left = '-100px'; //still needs to be adjusted
}
function moveright() {
obj.style.alignContent="center";
obj.style.animation="move 2s";
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lockport, NY - Activities</title>
<link rel="stylesheet" href="project.css">
<link href='https://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps' rel='stylesheet' type='text/css'>
</head>
<body onload="animate();">
<!-- Background -->
<div class="background">
<!-- Navigation -->
<?php
include 'includes/nav.php';
?>
<!-- Title -->
<div id="spacer"><p span class="titles">Activities...</p></div>
<div id="wrapper">
<div id="main">
//code removed for readability
</div>
<!-- Footer -->
<?php
include 'includes/footer.php';
?>
</div>
</div>
</body>
<script src="project1.js"></script>
</html>
I know I'm not the greatest when it comes to coding, and I know its probably a simple fix but I can't find it. Help is appreciated.
You can do this easily with CSS animations:
setTimeout(function() {
document.getElementById('spacer').classList.add('show');
}, 100);
#spacer {
position: absolute;
right: 100%;
transition: right 3s;
}
#spacer.show {
right: 50%;
}
<div id="spacer">
<p class="titles">
Hello
</p>
</div>
A more elegant solution for this would be to use two classes (e.g. .centerpos, .title) and just assign the class with the styling for centering the text via js.
So it would look something like that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lockport, NY - Activities</title>
<link href='https://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps' rel='stylesheet' type='text/css'>
</head>
<style>
.title {
position: absolute;
left: -100px;
transition: left 2s;
}
.title.centerpos {
left: 50%;
transform: translate(-50%, 0);
}
</style>
<body onload="document.querySelector('.title').classList.add('centerpos');">
<div class="background">
<div id="spacer"><p span class="titles title">Activities...</p></div>
<div id="wrapper">
<div id="main">
//code removed for readability
</div>
</div>
</div>
</body>
</html>
Related
I am trying to show products and when I apply the animation it applies to the whole div
for instance
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
$(document).ready(function()
{
$(".product_area").slideUp(); //Whole div slides up.
$(".product").slideUp(); //Just one product slides up.
}
What I want that one by one the product slides in from right.
Check this out
$(function(){
//$(".product_area").slideUp(); //Whole div slides up.
//$(".product").slideUp(); //Just one product slides up.
var delay = 500
$('.product').each(function(){
$(this).delay(delay).toggle( "slide" );
delay = delay+1500;
});
});
/* Put your css in here */
.product {
display:none;
width:100px;
background-color:#ccc;
padding:15px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="product_area">
<div class="product">1</div>
<div class="product">2</div>
<div class="product">3</div>
<div class="product">4</div>
<div class="product">5</div>
</div>
</body>
</html>
I've downloaded and implemented the Nivo Slider on my website. Since implementing it, I've found a few bugs, but I'm looking for help with getting my caption centered on the screen.
Margin:auto usually works for this to ensure a div is always centered (I think..) - but I can't get it to work with my site..
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
My CSS for the caption:
.nivo-caption1 {
position: absolute;
margin:auto;
top: 5%;
overflow:hidden;
background:none;
font-family: 'Gotham';
color:#FFF;
font-weight:bold;
font-size:50px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
If I remove the Margin-Top the caption doesn't even appear.. I've added margin:auto to all the other divs that contain this caption/slider.
Anyone got any ideas of how I could ensure the nivo-caption is always centered even when I resize the browser window?
Attached is a photo of how it looks now..
Any help would be great!
Thanks,
Maxenter image description here
The reason margin:auto isn't working for this particular case is two-fold.
You need to have a width set.
The caption is being positioned absolutely and this will override it. Even if you do set a width, it won't matter in this case.
It's ok to position it absolutely for the slider. I don't think it would work out too well if you didn't. All that needs to be done here is to set the left attribute on the caption so that it pushes the caption over to the center of the screen.
In order to do this you would need to calculate the difference between the width of the slider and the width of the caption and divide the result in half. This will give you the correct amount. It looks like the slider spans the full width of the page, so we would need to calculate this difference dynamically because when the window size changes, so does the width of the slider. We'll need a little help from javascript to accomplish this.
Something like this might help:
function centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
}
Here is a slimmed down working example:
https://jsfiddle.net/sm1215/ma645ao8/2/
When you fix your class name, I believe that if you set a width to your div and then use margin-left:auto and margin-right:auto, the element should center.
.nivo-caption {
width:300px;
margin-left:auto;
margin-right:auto;
}
This assumes you don't have other elements that force that element to not be able to move.
So I found a solution to my problem. I'm not sure if it's the correct way things should be coded, but it works.. If anyone can see how my code might cause issues in the future, please let me know.
I added some bits of code to the css and it solved everything.
My HTML is exactly the same as above:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
The New CSS for the NivoCaption container:
/* Caption styles */
.nivo-caption {
position: absolute;
justify-content: center;
margin-left: -150px;
margin-top: -200px;
width: 100%;
font-family: 'Gotham', sans-serif;
color:#FFF;
font-weight:bold;
font-size:45px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
.nivo-caption1 {
position: absolute;
margin: auto;
margin-top:5px;
}
The pieces I added to ensure center alignment were:
justify-content: center;
margin-left: -85px;
margin-top: -200px;
width: 100%;
Now I just have to figure out solutions to the other bugs with this slider:
pauseTime not being applied to all slides.
Delay on caption load.
Cheers for your helps guys!
Max
I want to set a header and footer in my presentation. I used the following issue as a starting point: https://github.com/hakimel/reveal.js/issues/806 and http://www.ciges.net/revealjs_demo/#/
My current implementation gives the following output:
Now as far as I have understand reveal.js uses fixed size for the presentation by default with a width of 960px and height of 700px. This size is completely fine to me. However, I want the headers and footer not to be fixed in this window. They need to adapt to the actual screen size. That is to say, I want the left header to be aligned to the top left corner of the screen. Likewise for the other header and footers, see also the image. How can I achieve this? Currently it seems that my headers and footers are fixed within the default window (960x700).
I use the following code (index.html) with reveal.js 3.2.0
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js – The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/simple.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
.reveal div.header-left {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}
.reveal div.header-right {
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
}
.reveal div.footer-left {
position: absolute;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
}
.reveal div.footer-right {
position: absolute;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="hidden" style="display:none;">
<div id="header">
<div class="header-left">test header left</div>
<div class="header-right">test header right</div>
<div class="footer-left">test footer left</div>
<div class="footer-right">test footer right</div>
</div>
</div>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>The HTML Presentation Framework</h3>
<p>
<small>Created by $x^2$ Hakim El Hattab / #hakimel</small>
</p>
</section>
<section>
<h2>Hello There</h2>
<p>
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>Vertical Slides</h2>
<p>Slides can be nested inside of each other.</p>
<p>Use the <em>Space</em> key to navigate through all slides.</p>
<br>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
</section>
<section>
<h2>Basement Level 2</h2>
<p>That's it, time to go back up.</p>
<br>
<a href="#/2">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
</a>
</section>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: false,
progress: true,
slideNumber: true,
history: true,
center: false,
transition: 'slide', // none/fade/slide/convex/concave/zoom
math: {
mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/math/math.js', async: true }
]
});
</script>
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
var header = $('#header').html();
if ( window.location.search.match( /print-pdf/gi ) ) {
$('.slides > section').prepend(header);
} else {
$('.slides').prepend(header);
}
</script>
</body>
</html>
Here is a slightly more complicated answer that also works with the pdf-export print version:
Add the elements to the slide-background <div> (instead of section, slides, or reveal). This <div> is dynamically generated, so we must wait for the Reveal.js ready event. When printing there is a slight delay followed by unnecessary animation of the headers and footers moving into place, but all the headers/footers are rendered in the PDF as desired.
Pseudo-code:
Style header/footer <div> so they are positioned as desired.
Create hidden header/footer <div>
On Reveal.js ready event, copy header/footer <div> into each .slide-background <div>
Code: this can be copy-pasted into the end of a reveal.js file (right before the end </body> tag):
<style type="text/css">
/* 1. Style header/footer <div> so they are positioned as desired. */
#header-left {
position: absolute;
top: 0%;
left: 0%;
}
#header-right {
position: absolute;
top: 0%;
right: 0%;
}
#footer-left {
position: absolute;
bottom: 0%;
left: 0%;
}
</style>
<!-- 2. Create hidden header/footer <div> -->
<div id="hidden" style="display:none;">
<div id="header">
<div id="header-left">HEADER-LEFT</div>
<div id="header-right">HEADER-RIGHT</div>
<div id="footer-left">FOOTER-LEFT</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 3. On Reveal.js ready event, copy header/footer <div> into each `.slide-background` <div>
var header = $('#header').html();
if ( window.location.search.match( /print-pdf/gi ) ) {
Reveal.addEventListener( 'ready', function( event ) {
$('.slide-background').append(header);
});
}
else {
$('div.reveal').append(header);
}
</script>
Insert the header/footer elements into the div.reveal element instead of the .slides slides element.
The position within the DOM tree you where insert the header/footer elements affects which CSS is applied, which in turn affects their positioning.
$('.slides').prepend(header) adds the elements inside the slides <div>. The elements will be fixed to the default (960x700) window because that is how the slides <div> is sized.
$('div.reveal').append(header) adds the elements inside the reveal <div>. The elements will be fixed to the screen because the reveal <div> is sized to take up the entire browser view port.
Note this does not work for the print/pdf version... I'm still trying to figure that one out...
I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:
<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
div#info_box {
height: 221px;
width: 221px;
}
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
<img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
<img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
<span class="custom info">
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('div#trigger').click(function() {
//Get info_box
var info = $('div#info_box');
//Fade the box in during 1 sec, show it for 5, and let it fade out again
info.fadeIn(1000).delay(10).fadeOut(1000);
});
});
</script>
I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.
Google chrome says Uncaught Reference Error: $ is not defined
but I'm not sure what to do with that.
If more information could help please ask which and I'll put it up.
Please include Jquery to the top of the scripts as many plugin use it.
http://jquery.com/download/
Add this link to <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
You need jquery reference when using $
Placing a tab container on titlepane looks weird in any browser but if I use the dojo v1.6 it appears perfectly. Am I doing something wrong here while porting code to 1.8.4 Or something broken in later versions?
Please change the dojo version in this code and see the difference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/**1.6**/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.TabContainer");
//require(["dojo/dnd/move", "dojo/_base/declare", "dojo/dom-construct", "dijit/layout/TabContainer", "dijit/TitlePane", "dijit/layout/BorderContainer", "dojox/layout/ExpandoPane", "dojo/domReady!"]);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
<div dojotype="dijit.layout.ContentPane" region="center" style="width:500px;height:500px; border:1px solid #000;padding:0;">
<div style="position:absolute;width:500px;height:500px; left:30px; top:10px; z-Index:999;">
<div id="titlepane" dojoType="dijit.TitlePane" title="Show Tabs" closable="false" open="false">
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
<div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
Tab 1 content
</div>
<div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
Tab 2 content
</div>
<div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
Tab 3 content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Two problems. First, the code has TitlePane inside of a BorderContainer, but TitlePane is not designed to reside inside of layout widgets:
It extends ContentPane but since it isn’t used inside other layout widgets
Second, as written, the TabContainer inside the title pane needs an absolute height, not relative. You can get away with a relative height for TabContainers inside of BorderContainers (or other layout widgets), because BorderContainer calculates the absolute height for you. Since TitlePane does not provide that calculation, you must specify an absolute height...
or, you can tell TabContainer not to do its own layout with "doLayout=false":
<!DOCTYPE html>
<html>
<head>
<link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
</head>
<body class='claro'>
<div data-dojo-id='titlePane' data-dojo-type='dijit/TitlePane' data-dojo-props='region:"trailing"'>
<div data-dojo-id='tabContainer' data-dojo-type='dijit/layout/TabContainer' data-dojo-props='doLayout:false'>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 1"'>Hi!</div>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 2"'>There!</div>
<div>
</div>
<script type='text/javascript'>
require(['dojo/ready', 'dojo/parser'], function (ready, Parser) {
ready(function () {
Parser.parse().then(function () {
});
});
});
</script>
</body>
</html>
You can replace the data-dojo-props on the TabContainer with style='height:100px;' and get a similar effect. The only difference is that doLayout false uses the auto height from the contained content, while height:100px gives you a static height.