Ok the deal is I have a page with a top banner 100% wide and 500px tall and below that a content area, say, 4000px tall. inside that content area there is a box (100 by 100) that I want to have act the way in a certain way. When I scroll down the page to the point were that box touches the top of the screen I want it to be fixed at the top until I scroll up and it becomes unfixed at the top of the parent container (so where it was to start). Anyone have any examples or simple fixes????
Edit:
I found this fix that I think will work but I don't know what I am doing wrong:
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
(code is in the head of the html document)
#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}
.sticky {
position: fixed;
top: 0;
}
I know this code is meant to add a class to the #contentSideIner div, .sticky {position: fixed; top: 0; }. am I making a kind of brain dead mistake here?
this is the jfiddel that is basicly what i have http://jsfiddle.net/07xe5tLf/
more code i have in use:
<!DOCTYPE HTML>
<html>
<head>
<title>Project Website: full review pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
<link rel="stylesheet" href="css/stylesMainReveiw.css" />
<style>
#banner { background-image: url("images/Destiny_Banner.jpg"); }
.playableOn {}
.rateBox { background-image: url("img/rating/rating3-big.png"); background-size: 150px 150px; }
#contentSide { height: 5100px; }
</style>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<ul>
<li>Home</li>
<li>Monthly Spotlight
<ul>
<li>Destiny</li>
<li>Diablo III</li>
<li>Shadow Of Mordor</li>
<li>The Last Of Us
<li>Bayonetta 2</li>
</ul>
</li>
<li>Older Reviews</li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<h1>destiny</h1>
<h2>"Same Quote for the game as seen in js-load"</h2>
<div class="playableOn"><p>Playable On:</p></div>
<div class="rateBox"></div>
</section>
<!-- Main -->
<section id="main" class="container">
<div id="contentSide">
<div id="contentSideIner">
</div>
</div>
This is what it seems you want
What you want is a sticky menu which requires javascript to find the current position of the page in the viewport and change the CSS or class to make it fixed. This is a bad example because there is no div that is made visible after you scroll and make the element fixed to prevent the page content below to fill in where the menubar was. This can be done simply by using jQuery to make this hidden div visible. If you need code then just ask.
It is called a sticky menu and I always forget what it is called. :)
How I remember is usually spending some time on Google searching specifically for what I want until I find it. Don't make StackOverflow your default goto for help because that is how you can get banned. You need to be specific and provide code on something like JSFiddle or spend some time making a visual example or find a site that does what you want. Many sites like Facebook use this technique and it is quite common. If this doesn't make sense then you should go to W3Schools and read up on some Javascript and CSS and find some tutorials on jQuery.
For your fiddle, you need to go and include jQuery in your head: http://jsfiddle.net/b2550/07xe5tLf/1/
I JSFiddle it is as simple as making that your framework in the sidebar and in your code you need to include this in your head (as I said above in the comments)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
So I made a display: block when the mouse hovers over a certain , and display: none when the cursor moves away. '
A div I have made that displays only when the mouse hovers over a certain link
the div has a display: none when the mouse moves away from the link
this is the code I have used
HTML:
Login/Sign Up
JavaScript:
function LoginShow (){
document.getElementById("log").style.display="block";}
function LoginHide(){
document.getElementById("log").style.display="none";}
But I can't click on the div because as soon as I try to move my cursor to the buttons in the div, the div goes to display none as I have to move my cursor away from the link.
I am new to JS, but I have seen other web pages do it, what's the way for the div to display on mouseover and can be clicked on and goes to display: none only when I move away from the div.
I have also tried
Login/Sign Up
<div class="login" id="log" onmouseover="LoginShow()"
onmouseout="LoginHide()">
It kind of solves the problem, but for the div to go to display none I have to move the cursor away from the div, if the move the cursor away from the anchor tag, it doesn't go away.
You can do it without any js, take a look at below snippet.
let target = document.getElementById('target');
function showLog() {
target.style.display = 'block';
}
function hideLog() {
target.style.display = 'none';
}
.wrapper {
background: #eee;
}
.wrapper .inner-content {
display: none;
position: absolute;
background: red;
}
<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
I am the wrapper
<div class="inner-content" id="target">
<p>Here is some content inside wrapper element</p>
</div>
</div>
i think it can be done with css selectors as you can make other div as the switch to change other elements.
Reference for css selectors
And i think your div is part of button which is the reason why they disappear. if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute". it might work.
Edited:
here is what i tried, its not appealing but just look at it, if it is what you are trying to achieve.
function LoginShow (){
document.getElementById("log").style.display="block";
}
function LoginHide(){
document.getElementById("log").style.display="none";
}
.container{
width:400px;
height:400px;
background:lightgreen;
border:1px red solid;
}
#log{
background:#efefef;
padding:20px;
width:100px;
text-align: center;
display:none;
}
.log>button{
padding:20px;
}
<!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="custom.css">
</head>
<body>
<div class="container">
Login/Sign Up
<div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div>
</div>
<script src="main.js"></script>
</body>
</html>
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 $
I am wondering if there is a compatibility problem between JQM and Flot.
I've looking for documentation about this, but there is not a lot...
Here is the issue: depending on the order in which I load the libraries, things work while others don't:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is not displayed: "Uncaught Invalid dimensions for plot, width = 671, height = 0"
Now if I remove JQM:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is displayed and the resize works, so I guess this problem comes from JQM but I have no idea what...
I've tried to load things in different orders, but nothing helps.
Does anybody know a workaround for this ?
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<style type="text/css">
html, body {
height: 100%; /* make the percentage height on placeholder work */
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot test</h1>
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"/>
<script type="text/javascript">
$(function () {
var c1_values = [[0, 0],[1, 1],[2, 4],[3, 9],[4, 16],[5, 25],[6, 36],[7, 49],[8, 64],[9, 81],[10, 100],[11, 121],[12, 144],[13, 169],[14, 196],[15, 225],[16, 256],[17, 289],[18, 324],[19, 361]];
var c1_data = [{ data: c1_values, label: "curve1"}];
$.plot($("#placeholder"), [
{
data: c1_values,
lines: { show: true, fill: false }
}
]);
});
</script>
</body>
</html>
I am currently trying this "no conflict" function, but no result for now.
jQuery Mobile automatically wraps all your content in a page if you don't include on yourself. Generally, that means you ought to do it yourself in your code! So, first step is to move your placeholder into a jQM template:
<div data-role="page">
<div data-role="header">
<h1>Flot test</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"
/></div>
<!-- /content -->
</div>
<!-- /page -->
Now, it seems to be a common problem that the content div does not stretch to fill the whole available vertical space. I found two solutions, neither of which seem very ideal.
Use CSS to try and make the content div full height (note that data-role"content" becomes a CSS class of ui-content):
.ui-content {
height:100%;
width:100%;
position:absolute;
}
Use Javascript to fix the content height dynamically as you go along (do this before your flot call). Taken from here:
var fixgeometry = function () {
/* Some orientation changes leave the scroll position at something
that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".ui-header:visible");
var footer = $(".ui-footer:visible");
var content = $(".ui-content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(window).bind("orientationchange resize pageshow", fixgeometry);
Neither of those solutions seemed to work particularly well for me, although they both did "work" as far as showing the graph.
I've posted an example of the 2nd version here: http://alpha.jsfiddle.net/ryleyb/mz24P/
The CSS is there as well, commented out if you want to try that instead.
I am creating a website that has this kind of structure:
Where the red box represents the user's browser window. When the user clicks a button on the home (bottom), it slides up to the new scene (stratosphere for example). Each scene is an entire image. Now the problem is, I need to account for users using different screen sizes and when they resize the window. I've looked up ways to resize backgrounds images using CSS or JavaScript, and that doesn't work well for me. I need to find some way to make them all fit for everyone using different screen sizes. An idea I have - I know this sounds clunky but would it be viable to write a PHP script which resizes an image to the dimension given by the JS? JS finds the browser window's size, hands it to PHP, PHP returns the image JS needs. And have this happen when a user resizes the browser window too...
How can I do this?
Update:
I tried SVG, and it's working beautifully. But now I am wondering how I can get the other elements to be in accordance with the SVG?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<!-- Date: 2012-08-01 -->
<style type="text/css" media="screen">
body { margin: 0px; }
.area { border: 3px solid red; background: green; margin-bottom: 0px; background: url(http://www.alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/beetle.svg) no-repeat; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
var slide = 'a3'
$(".area").height($(window).height());
$(window).resize(function() {
$(".area").height($(window).height());
$(".area").width($(window).width());
scroll_to(slide, 1, 0);
});
scroll_to('a2', 'slow', 0);
});
</script>
</head>
<body>
<div class="area" id="a3">
<h1>scene 3</h1>
</div>
<div class="area" id="a2">
<h1>scene 2</h1>
<div style="height: 100px; border: 1px solid black;" id="text">
hi
</div>
</div>
<div class="area" id="a1">
<h1>scene 1</h1>
</div>
</body>
</html>
Why don't you use an SVG as background image? Your scene seems fairly simple.
All browser but IE ≤ 8 understand background: url(some.svg): http://caniuse.com/svg-css
Use one large background-image. Set it up with something like this:
html, body {
margin: 0;
padding: 0;
width: 100%
}
body {
position: absolute;
bottom: 0;
height: 2000px;
background-image: url('background.png')
}
Then use JavaScript to set the bottom property of body to move up, like this:
window.addEventListener('keydown', keypressed, false);
function keypressed(e) {
if(String.fromCharCode(e.charCode) == ' ') {
document.body.style.bottom += parseInt(document.body.style.bottom) + 10 + 'px';
}
}
I'm afraid re-sizing the background image is going to be your best bet. Why don't you post the code you've already tried for such a solution and others can help you along from that angle.
You should definitely split the image into multiple images, one for each tab.
This is how I would do it: http://jsfiddle.net/4CwdX/3/
You don't need to resize the image. The browser can automatically stretch it for you with background-size: 100%.