I've included a simple javascript into a site that requests data from another site. When that code is present, the text in the header div jerks to the left and then to the center where it belongs while the site is loading. This happens every time you press refresh in the browser.
I am not sure if my div layout or CSS are contributing to the problem. I know that my code is not perfect, but I don't know if this problem is occurring because of it or in spite of it.
How can this be remedied?
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>
<body>
<div id="hello">
<div id="logo">
Text Logo Here
</div>
<span id="output">
<script>
function getIP(json) {
document.write(json.ip);
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
</span>
<div style="width:400px;height:45px">
</div>
</div>
</body>
</html>
You can redirect the output to this output div, by
function getIP(json) {
document.querySelector('#output').innerHTML=(json.ip);
}
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<html>
<head>
</head>
<body>
<div id="hello">
<div id="logo">
Text Logo Here
</div>
<span id="output">
</span>
<div style="width:400px;height:45px">
</div>
</div>
<script>
function getIP(json) {
document.querySelector('#output').innerHTML = (json.ip);
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
</body>
</html>
I moved the script at end of the body try now
#hello {
display: block; // or nothing at all as divs are block leveled as default
text-align: center;
}
You should append the IP , on a paragraph, Rather than writing, Here it produces, span which is inline.
if you want span to be centered then you should apply css rules to make it take full width, align center.
Instead of re-writing the HTML document with write, append a new DOM element to the body of the document.
Also, I would create an XMLHttpRequest request object to retrieve the JSON data.
loadJson('https://cors-anywhere.herokuapp.com/https://api.ipify.org?format=json', getIP);
function getIP(json) {
let el = document.createElement('DIV');
el.innerHTML = json.ip;
document.body.appendChild(el);
}
function loadJson(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onload = (e) => callback(xhr.response);
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send();
}
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<div id="hello">
<div id="logo">Text Logo Here</div>
<span id="output"></span>
<div style="width:400px;height:45px"></div>
</div>
use document.getElementById().innerHTML
Demo
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>
<body>
<div id="hello">
<div id="logo">
Text Logo Here
</div>
<span id="output">
</span>
<div style="width:400px;height:45px">
</div>
</div>
<script>
function getIP(json) {
document.getElementById('output').innerHTML = json.ip;
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
</body>
</html>
Related
My todo list appends every input value starting with the number of elements in the list. So, entering the first item "Do homework" outputs to "1. Do homework." And the second input "Learn JS" outputs to "2. Learn JS." However, when deleting an element in the middle of the list, the number adjacent to the item doesn't adjust accordingly to the number of current list elements.
For example, if the output is:
1. Do homework 2. Learn JS3. Practice piano
Deleting number 2 will return:
1. Do homework 3. Practice piano
Instead of the correct output:
1. Do homework 2. Practice piano
var listset = document.querySelector('#add').addEventListener('click', newItem);
function newItem() {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
var largo = lilist.length + 1
var node = document.createElement('li');
var inputValue = document.getElementById('input').value
const delButton = document.createElement('img')
delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg"
delButton.width = 15;
delButton.height = 15;
delButton.addEventListener('click', function(e){
e.target.closest('li').remove()
})
var textNode = document.createTextNode(largo +'. '+ inputValue + " ");
node.appendChild(textNode)
if (inputValue !== '') {
var item = document.getElementById('listForm').appendChild(node);
item.appendChild(delButton)
document.getElementById('input').value = '';
}
}
h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 35px;
text-align: center;
}
.header2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
}
.main-page {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ul {
list-style-type: none;
margin-top: 150px;
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
li {
margin-top: 10px;
}
.list {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin-left: 100px;
padding: 10px 10px;
width: 40%;
margin-bottom: -151px;
}
#input {
font-size: 18px;
}
#add {
background-color: rgb(233, 235, 235);
font-size: 18px;
margin-left: -3px;
}
#listForm {
color: black;
margin-left: 100px;
width: 284px;
}
li {
margin-bottom: -5px;
}
li:hover {
cursor: grab;
color: rgb(176, 171, 171)
}
#listForm .checked {
text-decoration: line-through;
}
.unchecked {
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To Do List: Raamis Ali</title>
<meta name="description" content="A todo list application">
<meta name="author" content="Raamis Ali">
<link rel="stylesheet" href="list.css"> </head>
<body>
<script src="javascript.js"></script>
<div class="main-page">
<h1>To Do List Web App</h1>
<p class="header2">Created by Raamis Ali</p>
<div class="list">
<input type="text" id="input" placeholder="Add items">
<input type="button" value="Add" id="add" onclick="newItem()"> </div>
<ul id="listForm">
</ul>
<br> </div>
</body>
</html>
I have tried implementing this event listener and function with different variations of this but I have had no success:
largo.addEventListener('change', updateValue())
function updateValue(e) {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
lilist.length + 1 == e.target.value;
}
For sure the number will not change, because you didn't re-initialize the list text with new numeric values.
As #Barmar suggest, it would better to use "ol" element instead of "ul" which will output the correct numeric order of the list.
var listset = document.querySelector('#add').addEventListener('click', newItem);
function newItem() {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
var node = document.createElement('li');
var inputValue = document.getElementById('input').value
const delButton = document.createElement('img')
delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg"
delButton.width = 15;
delButton.height = 15;
delButton.addEventListener('click', function(e){
e.target.closest('li').remove()
})
var textNode = document.createTextNode(inputValue + " ");
node.appendChild(textNode)
if (inputValue !== '') {
var item = document.getElementById('listForm').appendChild(node);
item.appendChild(delButton)
document.getElementById('input').value = '';
}
}
h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 35px;
text-align: center;
}
.header2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
}
.main-page {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ol {
margin-top: 150px;
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
li {
margin-top: 10px;
}
.list {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin-left: 100px;
padding: 10px 10px;
width: 40%;
margin-bottom: -151px;
}
#input {
font-size: 18px;
}
#add {
background-color: rgb(233, 235, 235);
font-size: 18px;
margin-left: -3px;
}
#listForm {
color: black;
margin-left: 100px;
width: 284px;
}
li {
margin-bottom: -5px;
}
li:hover {
cursor: grab;
color: rgb(176, 171, 171)
}
#listForm .checked {
text-decoration: line-through;
}
.unchecked {
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To Do List: Raamis Ali</title>
<meta name="description" content="A todo list application">
<meta name="author" content="Raamis Ali">
<link rel="stylesheet" href="list.css"> </head>
<body>
<script src="javascript.js"></script>
<div class="main-page">
<h1>To Do List Web App</h1>
<p class="header2">Created by Raamis Ali</p>
<div class="list">
<input type="text" id="input" placeholder="Add items">
<input type="button" value="Add" id="add" onclick="newItem()"> </div>
<ol id="listForm">
</ol>
<br> </div>
</body>
</html>
I want to extract the file created date from the DROPBOX API using JS. I have tried to fetch the modification date but not able to find the file creation date
Any help is greatly appreciated.
<!doctype html>
<html>
<head>
<title>Dropbox JavaScript SDK</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
}
.container {
display: block;
width: 90%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.container.main {
padding-top: 30px;
}
code, .code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #666;
}
.info {
font-size: 13px;
font-style: italic;
color: #666;
margin-top: 40px;
}
a {
color: #007ee5;
}
input {
border: 2px solid #007ee5;
border-radius: 3px;
padding: 8px;
font-size: 16px;
}
.button, button {
border-radius: 3px;
background-color: #007ee5;
border: none;
color: #fff;
font-size: 16px;
padding: 10px 15px;
text-decoration: none;
}
.page-header {
background-color: #007ee5;
padding: 10px 0 0 0;
}
.page-header .container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 150px;
}
.page-header a {
color: #fff;
text-decoration: none;
}
.page-header nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.page-header h1 {
display: flex;
align-items: center;
color: #fff;
font-size: 17px;
font-weight: 200;
}
.page-header .logo {
width: 100px;
margin-right: 10px;
}
.page-header .view-source {
font-weight: 200;
font-size: 12px;
}
.page-header h2 {
color: #fff;
font-size: 18px;
font-weight: normal;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#7/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.27.0/Dropbox-sdk.min.js" integrity="sha512-nTLJySi/DUYzRvvxWOxf31QS5191sN1gpoq6EqGFHPFH0RlM6xOiY6jEp9dmwhDlyFmCmicwLOMnE+fUmo02KQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- Example layout boilerplate -->
<header class="page-header">
<div class="container">
<nav>
<a href="/">
<h1>
<img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
JavaScript SDK Examples
</h1>
</a>
View Source
</nav>
<h2 class="code">
examples / basic
</h2>
</div>
</header>
<!-- Example description and UI -->
<section class="container main">
<textarea id="files"></textarea>
</section>
<!-- Scripts to run example -->
<script>
var form = document.getElementById('basic-form');
var ACCESS_TOKEN = '<TOKEN_HERE>';
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
var filesList = document.getElementById('files');
var li;
function listFiles(path) {
dbx.filesListFolder({path: path})
.then(function(response) {
console.log('response', response)
var items = response.result.entries;
var values = [];
for (var i = 0; i < items.length; i++) {
if(items[i][".tag"] == "file")
{
values.push('"'+[path+"/"+items[i].name, items[i].server_modified,items[i].size].join('","')+'"');
}
if(items[i][".tag"] == "folder")
listFiles(path+"/"+items[i].name)
}
document.getElementById("files").innerHTML = document.getElementById("files").innerHTML + "\n" + values.join("\n")
})
.catch(function(error) {
console.error(error);
});
}
listFiles('')
</script>
</body>
</html>
The Dropbox API doesn't return file creation dates (only modified dates), but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.
I'm making a website, which for testing reasons I have called yeet.io.
I'm currently trying to center an input and h1 inside of a div both vertically and horizontally, but for some reason, the elements always appear offsetted somehow.
Why is this? I want the elements to be centered in the middle like any regular "io game". I have some jQuery that makes the elements fade in, could this be the problem? I am stumped.
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
display: table;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>
You're currently making use of a table, by setting display: table on .container, and display: table-cell on .yeet.
This is probably unintentional, and in fact, simply removing these two declarations automatically produces your desired result -- you don't have to change the HTML at all, or create any new CSS rules.
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>
Hope this helps! :)
You need to wrap each element in their own fake table-row
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
display: table;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
.row{
display:table-row;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="yeet">yeet.io</h1>
</div>
<div class="row">
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</div>
</body>
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>
I'm creating a movie website for my UI/UX class but seem to have some broken scripts. I don't know the best way to format this, since I have multiple scripts,
I first put in CircleType.js to make the "BUDAPEST" arch like on the movie posters. That was all good and fine until I also put a jQuery tools overlay so that when you click on the "WATCH THE TRAILER" it overlays the background and opens an external link while in that window. I entered that in but it makes the text "BUDAPEST" not arch.
For background, I am pretty solid in HTML and CSS but pretty new to Javascript and jQuery. There is probably something small I'm doing wrong but I just don't have the knowledge to see it. Let me know if you have any questions, and thank you for any help in advance.
<script language="javascript">
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'black',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
/*****************CSS RESET*********/
header, body, div, blockquote, pre, a, em, small, strong, b, i, u, center, h1, h2, h3, h4, h5, h6, p, ol, li, ul, dl, dt, dd {
font-size: 11px;
font-style: normal;
margin: 0;
font-family: 'Copse', serif;
}
/*****************BACKGROUND**********/
body {
background-color: #575964;
height: 100%;
width: 100%;
}
#overlay {
background-image: url(overlay.png);
color: #efefef;
height: 450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height: 441px;
overflow-y: auto;
}
/*****************TITLE*************/
h2, h3 {
text-align: center;
color: #ffda85;
font-family: 'Halant', serif;
}
h2 {
font-size: 50px;
font-weight: 300;
}
h2.grand {
margin-top: -20px;
}
h3 {
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
}
h3.the {
margin-top: 60px;
}
h3.hotel {
margin: -50px 0 0 0;
}
#circle {
font-family: 'Halant', serif;
font-size: 80px;
margin: -50px 0 0 0;
font-weight: 300;
text-align: center;
color: #ffda85;
}
/****************BUTTONS***************/
div.container{
width: 100%;
margin-top: 50px;
}
div#left {
width: 600px;
margin-top: 120px;
margin-left: 80px;
float: left;
}
div#right {
margin-left: 600px;
margin-right: 100px;
margin-top: -40px;
float: right;
}
div.clear {
clear: both;
}
button {
font-family: 'Copse', serif;
background-color: Transparent;
color: #000;
text-decoration: none;
border: 1px solid #fff;
outline: none;
padding: 15px 90px;
font-size: 15px;
letter-spacing: 5px;
text-align: center;
}
a:hover {
background-color: rgba(255, 255, 255, 0.5);
padding: 19px 0 16px 0;
font-weight: 600;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Copse|Halant:300, 400,700" rel="stylesheet">
<title>GRAND BUDAPEST HOTEL</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="circletype.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
</head>
<body>
<h3 class="the">THE</h3><br>
<h2 class="grand">GRAND</h2><br>
<div id="circle">BUDAPEST</div>
<script>
$('#circle').circleType({
radius: 384
});
</script>
<h3 class="hotel">HOTEL</h3><br>
<div id="container">
<div id="left">
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
<button type="button">MEET THE CAST</button>
</a>
</div>
<div id="right">
<a href="trailer.htm" rel="#overlay" style="text-decoration:none">
<button type="button">WATCH THE TRAILER</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>
</div>
</body>
</html>
Start by making these changes:
<script language="javascript">
$(document).ready(function () {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'black',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
/*****************CSS RESET*********/
header, body, div, blockquote, pre, a, em, small, strong, b, i, u, center, h1, h2, h3, h4, h5, h6, p, ol, li, ul, dl, dt, dd {
font-size: 11px;
font-style: normal;
margin: 0;
font-family: 'Copse', serif;
}
/*****************BACKGROUND**********/
body {
background-color: #575964;
height: 100%;
width: 100%;
}
#overlay {
background-image: url(overlay.png);
color: #efefef;
height: 450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height: 441px;
overflow-y: auto;
}
/*****************TITLE*************/
h2, h3 {
text-align: center;
color: #ffda85;
font-family: 'Halant', serif;
}
h2 {
font-size: 50px;
font-weight: 300;
}
h2.grand {
margin-top: -20px;
}
h3 {
font-size: 20px;
font-weight: 400;
letter-spacing: 2px;
}
h3.the {
margin-top: 60px;
}
h3.hotel {
margin: -50px 0 0 0;
}
#circle {
font-family: 'Halant', serif;
font-size: 80px;
margin: -50px 0 0 0;
font-weight: 300;
text-align: center;
color: #ffda85;
}
/****************BUTTONS***************/
div.container{
width: 100%;
margin-top: 50px;
}
div#left {
width: 600px;
margin-top: 120px;
margin-left: 80px;
float: left;
}
div#right {
margin-left: 600px;
margin-right: 100px;
margin-top: -40px;
float: right;
}
div.clear {
clear: both;
}
button {
font-family: 'Copse', serif;
background-color: Transparent;
color: #000;
text-decoration: none;
border: 1px solid #fff;
outline: none;
padding: 15px 90px;
font-size: 15px;
letter-spacing: 5px;
text-align: center;
}
a:hover {
background-color: rgba(255, 255, 255, 0.5);
padding: 19px 0 16px 0;
font-weight: 600;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Copse|Halant:300, 400,700" rel="stylesheet">
<title>GRAND BUDAPEST HOTEL</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="circletype.min.js"></script>
<script type="text/javascript" src="jquery.tools.min.js"></script>
</head>
<body>
<h3 class="the">THE</h3><br>
<h2 class="grand">GRAND</h2><br>
<div id="circle">BUDAPEST</div>
<script>
$('#circle').circleType({
radius: 384
});
function meetCast() {
// Meet the cast
}
function watchTrailer() {
// Start the trailer
}
</script>
<h3 class="hotel">HOTEL</h3><br>
<div id="container">
<div id="left">
<button type="button" onclick="meetCast()">MEET THE CAST</button>
</div>
<div id="right">
<button type="button" onclick="watchTrailer()">WATCH THE TRAILER</button>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<div class="contentWrap"></div>
</div>
</div>
</body>
</html>
I've been implementing this awesome JS/Jquery expand/collapse function into a page, but it's got a little kink to it that I'd like to fix.
Specifically, the problem is that when you first click on the link Websites ▾, the menu expands nicely, but just before it's done it has a little jump to it, which I'd like to remove. The jump doesn't occur in the JS Fiddle, nor does it occurr when clicking to expand/collapse after the intial click, so I suspect my CSS might be the issue, but I'm just not sure.
Any help is greatly appreciated. Thanks for your time.
The JS was borrowed from this JS Fiddle
And here's a test page I've published
Additionaly, here's all the code (stripped of some excess content to simplify)
HTML
<!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" />
<link rel="stylesheet" href="css/webfonts.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/expandcollapse.js"></script>
</head>
<div class="container">
<div class="header">
<span>
<p> Websites ▾</p>
</span>
</div>
<div class="content">
<p>Human Rights Symbols</p>
<p>
Cornerstone Parks
</p>
<p>
Eileen Fisher (Video Page)
</p>
<p>
Suzy B Fine Jewelry*
</p>
<p class="para2">Niki International</p>
<p class="para2">Eliza's Eyes</p>
<p class="para2">Fabrikant-Tara</p>
<p class="para2">Branded Jewelry</p>
</div>
</div>
<h2>*To view password-protected links,
please request access by phone or email.
</h2>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.container {
/* Expand Collapse Styling */
width:100%;
}
.container div {
width:100%;
}
.container .header {
cursor: pointer;
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: gray;
}
.container .content {
display: none;
}
#LightSlateGrayBar {
/* Color: LightSlateGray, #778899, hsl(210, 22%, 60%) */
width: 100%;
height: 30px;
background-color: rgba(119, 136, 153, 0.95);
}
.TopBar {
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.25);
}
.BottomBar {
position: fixed;
bottom: 0;
left: 0;
box-shadow: -3px -3px 3px 0px rgba(0,0,0,0.25);
}
#box {
min-width: 600px;
max-width: 600px;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
text-align: center;
}
p {
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 14px;
line-height: 14px;
color: gray;
}
.para2 {
color: LightGray;
}
.paraBlue {
font-size: 18px;
color: #25438d;
margin-top: 26px;
}
h1 {
font-family: 'rokkittregular', arial, helvetica, sans-serif;
font-size: 42px;
color: #25438d;
margin-bottom: -20px;
}
.hyphen {
font-size: 34px;
letter-spacing: -2px;
}
h2 {
font-family: 'oxygenregular', arial, helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
letter-spacing: .5px;
line-height: 12px;
color: gray;
}
a:link {
transition: all 1s linear 0;
transition-timing-function: ease-in;
text-decoration:none;
color: gray;
}
a:visited {
text-decoration:none;
color: #8F8F8F;
}
a:hover {
text-decoration:underline;
color: black;
}
a:active {
text-decoration:none;
color: lightGray;
}
.heading {
cursor: pointer;
position: relative;
}
JS
// JavaScript Document
$(function() {
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.html(function () {
//change text based on condition
return $content.is(":visible") ? "Websites ▴" : "Websites ▾";
});
});
});
});
Initially the content inside your div#header is
<div class="header">
<span>
<p> Websites ▾</p>
</span>
</div>
From the first toggle onwards it'll change to
Websites ▾ // only the arrows character codes changes on further clicks, structure is same
without <span> and <p> elements, causing a difference in size, which in turn causes the jump. Returning the proper html content as the initial state like
return $content.is(":visible") ? "<span><p> Websites ▴</p></span>" : "<span><p> Websites ▾ </p></span>";
or changing the content initially to
<div class="header">
Websites ▾
</div>
Should fix the problem..