Im having trouble with transitioning between two html pages. When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for.
Ive tried this code with my own code however it doesn't seem to be working the way it should. Anyone know how I can fix this? or properly implement this? Below is my code, Any help would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}
#font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}
p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}
#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}
#enter:hover {background-color:#04A12B;}
.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}
}
</style>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div class = "green">
<h1>Welcome to Elemental!</h1>
<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>
<button id = "enter">Enter</button>
</div>
<script>
function transitionPage() {
// Hide to left / show from left
$("#enter").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#enter').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</body>
</html>
What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. Your button
<button id = "enter">Enter</button>
is a button link to the new page. basically this opens the link before the javascript is run. for the javascript to be run on the same page, your first step, would be to remove the a href
<button id = "enter">Enter</button>
now this would run the code without loading the new page.
here is something close to what you want to do from my understanding
- the "landing page" or view the github repo
this code only works for me within the jsfiddle, below is just the javascript portion.
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. below would be your landingpage.html
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="Scripts/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
.nodisplay {
display: none;
}
#about {
position: relative;
width: 100%;
height: 100%;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>
<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div id="about">
<div id="about-1" class="page">
<p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to
discover and explore design elements inspired by nature throughout the
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</div>
</body>
</html>
then you just need your second page
<html>
<head>
<title>
Page 2
</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</body>
Related
I am trying to make a online code editor using html's contenteditable div.
The user will edit their code in the div, which supports a maxium of 19 without scrolling the div.
What I want to do is to make a line number for each line.
But as you can see, the line number won't change when the user is editing the code that overflows the div and makes the div scrolls. In order to fix this, I want to know the y-coordinate about scrolling of div. For example, if there's only 3 line, so the div doesn't scroll, the code returns 0, if there's 100 line and the caret is currently in the 100th line, which makes the div scrolls, the code returns 100-19=81.
Here's the code:
var textbox = document.getElementById("textbox");
var row_text = document.getElementById("row-text");
function update(){
//line numbers text. For example, if the top line's number should be 1, then it should return `1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19`
row_text.innerHTML="1\n2\n3";
}
setInterval(update, 1);
body{
background-color: #24292E;
}
#textbox-container{
border: 0.5px white solid;
width: 500px;
height: 300px;
left: 50%;
position: relative;
transform: translate(-248px, 2px);
}
#textbox{
width: 480px;
height: 292px;
resize: none;
left: 50%;
position: relative;
transform: translate(-233px, 2px);
overflow: hidden;
background-color: #24292E;
color: white;
font-family: 'Source Code Pro', monospace;
outline: none;
font-size: 12px;
overflow: hidden;
}
p{
width: 0px;
height: 0px;
margin: 0px;
transform: translate(3px, 2px);
font-family: 'Source Code Pro', monospace;
font-size: 12px;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<!--<link rel="stylesheet" type="text/css" href="style.css"></link>-->
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div id="textbox-container">
<p id="row-text"></p>
<div id="textbox" cols="50" rows="5" contenteditable="true"></div>
</div>
<!--<script src="script.js"></script>-->
</body>
</html>
Is there any way possible to get the y-coordinate about scrolling?
const textbox = document.getElementById('textbox');
const logger = document.getElementById('logger');
const bottomLogger = document.getElementById('bottomLogger');
setInterval(() => {
logger.value = textbox.scrollTop + 'px'; // Indentation from above
loggerRow.value = textbox.scrollTop / 15; // row number
bottomLogger.value = textbox.scrollHeight / 15;
}, 40)
#textbox {
background: aqua;
height: 150px;
width: 300px;
max-height: 150px;
overflow-y: scroll;
font-size: 13px;
line-height: 15px;
}
<div id=textbox contenteditable rows=5></div>
<ul>
<li>
<input id=logger>
</li>
<li>
<label>
<strong>Row number</strong>
<input id=loggerRow>
</label>
</li>
<li>
<label>
<strong>Bottom row</strong>
<input id=bottomLogger>
</label>
</li>
</ul>
scrollTop API
scrollHeight API
In the following code, I am allowing users to edit text content, save and recall changes from own "local storage". So every editor's browser "remembers" their own editing, and each editor sees his changes only. I want to realise an idea of the anonymous wiki and import every user edits and display the last one in the final HTML page.
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML = "Готово";
}
function checkEdits() {
//find out if the user has previously saved edits
if (localStorage.userEdits !== null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
body {
display: block;
padding: 50px;
margin: 50px;
width: 90%;
font-family: 'Oranienbaum', serif;
font-size: 30px;
margin-right: 50px;
height: 90%
}
#edit {
background-color: white;
margin: 5px;
padding: 0px;
text-align: inherit;
font-size: 40px;
font-family: 'Oranienbaum', serif;
}
#button {
background-color: silver;
border: none;
top: 100px;
margin: 5px;
padding: 10px;
font-family: 'Oranienbaum', serif;
font-size: 20px;
}
#update {
background-color: white;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 20px;
}
hr {
display: block;
margin-left: auto;
margin-right: auto;
border-style: dashed;
border-width: 1px;
}
.footer {
background-color: inherit;
top: 100px;
margin: 5px;
padding: 5px;
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Indexmod Encyclopedia — anonymous real-time editing </title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
#import url('https://fonts.googleapis.com/css?family=Oranienbaum');
</style>
</head>
<body onload="checkEdits()">
Indexmod Россия
<hr>
<div id="edit" contenteditable="true">
Here is Indexmod Encyclopedia anonymous real-time editing sandbox area
</div>
<hr>
<input type="button" id=button value="Сохранить" onclick="saveEdits()" />
<div id="update">Редактируй текст и нажми сохранить до следующего раза</div>
<p class="footer" id="footer"><span><script src="footer.js"></script></span>
</p>
</body>
</html>
While you're going to set item on local storage, the method goes to:
localStorage.setItem('userEdits', userVersion);
And get item
localStorage.getItem('userEdits');
Hope it would be help, This works for me.
See the reference: http://www.w3schools.com/html/html5_webstorage.asp
#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
Hey earthlings,
i started learning HTML and CSS. Currently I'm dealing with style classes. I created a simple example. What I want to reach is, that the titlebar changes the font color, the font-size and the background color if button1 is clicked.
Initially the titlebar has appended the titlebar-class, after button1 is clicked the darktitle-class should also be added and overwrite certain attributes.
However in this configuration it doesn't happen. If you change the order of the .darktitle and .titlebar class in css file it works. I wonder why.
The CSS Styles should be on the same priority level, so I would expect that the laterly assigned would overwrite the attributes.
TNX
you can use !important to override styles like this
.darktitle {
color: #000000!important;
background: grey!important;
font-size: 25px!important;
}
#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
The order of your css selectors matter when both selectors are being applied to the same element. Move the ".darktitle" below the ".titlebar" as in this example. Then when applied by the button the ".darktitle" sstyles will override those same properties in ".titlebar".
Please take a look at this link about CSS specificity, there you will read about your question and why not to use !important declaration.
Specificity at MDN
I have a sliding boxcaption and it works fine. But when you first view it has the box caption over it and then when you mouse over it works properly but it starts off with the caption on top. And I want the box caption only to show when the user mouses over the box. I cant figure out why it does that. It's kind of odd.
Take a look at it here so you can see what I am talking about.
http://ironbulldog.com/windows/test.html
Below is my source code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing</title>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5; }
h3{ margin: 190px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0px 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 260px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
</style>
<script type="text/javascript" src="http://www.microsoft.com/library/shared/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
});
//Header Text Comes in Later
$('.boxgrid.slidedown').hover(function(){
$(".delay", this).stop().animate({top:'0px'},{queue:false,duration:500});
}, function() {
$(".delay", this).stop().animate({top:'260px'},{queue:false,duration:500});
});
});
</script>
</head>
<body>
<div class="boxgrid slidedown">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<div class="delay boxcaption">
<h3>The Nonsense Society</h3>
</div>
</div>
</div>
</body>
</html>
Add this line to your css
.boxcaption.cover { top: 260px; }
just add top:260px to .boxcaption in your css
I'm going to apologize in advance for how basic this question is, but this is my first time using JavaScript in HTML.
Basically, I have a JavaScript that produces a different bit of random text every time a user loads the page. I'd like to format that text in Helvetica and then display it centred in the middle of the page. I'm attempting to do this with CSS as indicated below, but it is not working for me. Any suggestions much appreciated.
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="horizon">
<div id="content">
<script type="text/javascript" src="scripts.js"></script>
</div>
</div>
</body>
CSS
#horizon {
color: white;
background-color: #ffffff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
margin-left: -410px;
position: absolute;
top: -237px;
left: 50%;
width: 825px;
height: 475px;
visibility: visible
}
Well for starters, your missing your HTML tags.
You need to wrap your HTML code between HTML Tags.
Second, you will need to set your text to a different color as the background color. In your CSS, you will need to change the #horizon color to black, or something else.
Other than that, your code works.
try
#content
{
margin: auto;
width: 200px; /* however wide it should be (required) */
}
...
<div id="content">
stuff goes here from js / whatever
</div>
for vertical alignment you are looking at JS and not CSS.
How about using text-align: center?:
#content
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
text-align: center;
}