Positioning a JQuery/HTML script on blog on Squarespace - javascript

I am trying to position the JQuery animation nicely (lower, centered) on this page:
http://www.edoardocroce.com/
I am using snippets of code that I found here and there. You can find the code that I am using here below.
Anybody can tell me if this is possible without much work?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js">
</script>
<script type="text/javascript">
var myName = "Edo's Blog";
var letterColors=[black,black,black];
if(10 < 9) {
bubbleShape = "circle";
}
else {
bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles();
</script>
</body>
</html>

Just add styling to #myCanvas, or add a element above it with the styling, like:
<div id="header"><canvas id="myCanvas"></canvas></div>
and on your css:
#header { text-align: center; width: 100% }
#myCanvas { margin-top: 100px }
This will center the canvas and lower the header by 100px.

add css to center and lower your canvas... for example:
#myCanvas {
margin: 0 auto; /*to center*/
margin-top: 80px; /*to lower*/
}
In case you don't know, css goes in the head, like this
<head>
<style>
#myCanvas {
margin: 0 auto; /*to center*/
margin-top: 80px; /*to lower*/
}
</style>
.....
</head>
Or you can link to an external css sheet, the 'proper' way to do things.

Related

Smoothly scale an img and automatically scrollIntoView

I am trying to set up a basic functionality to smoothly toggle an img on click from being longer than screen to being on a display (fit to window size) (back and forth). It kinda works already using percentages etc.
My issue is I'd like to have a smooth animated transition between the 2 states but the img is being brutally scaled.
Also whenever I try to work with "transition" or "animation", when the img come back to its original size, it will block the scrolling. Same issue happened after I tried to use keyframes.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
}
.scaled {
width: auto;
height: 100vh;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this).scrollIntoView();
});
</script>
</html>
Also I'd like to have the window view (by that I mean the location of the scrolling on the page) centered on the img whenever it is scaled. I am currently trying to use scrollIntoView for that purpose but nothing seems to happen.
Thank you in advance. First time posting here. I don't feel like this should be too difficult but will probably be on a different level than what I can figure out for now ଘ(੭ˊᵕˋ)੭ ̀ˋ
Also tried the following, but the img stay stuck at 90vw and 100vh ...
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
object-fit: contain;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
$(this).animate({
height: "none",
width: "90vw"
}, 1000);
$(this).removeClass('scaled');
}
else {
$(this).animate({
width: "none",
height: "100vh"
}, 1000);
$(this).addClass('scaled');
}
});
</script></html>
To scroll to clicked item, use $(this)[0].scrollIntoView(); because .scrollIntoView() is JavaScript function, not jQuery.
Smooth scale (transition).
CSS does not support from auto width to specific width or the same to height transition. Reference: 1, 2
Option 1. Use one side instead.
You can use max-height or max-width only. The good thing is you write less JavaScript and CSS responsive (media query) also supported without any addition. Bad thing is it just only support one side (width or height).
Full code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
max-width: 100vw;
box-sizing: border-box;
transition: all .3s;
}
.scaled {
max-width: 50vw;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
See it in action
Option 2. Use JavaScript.
The code below will be use a lot of JavaScript to make CSS transition work properly from width to height. Good thing: of cause support transition between width and height. Bad thing: CSS media query for responsive image will not work properly. Need more JS for that.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
box-sizing: border-box;
transition: all .3s;
height: auto;
width: 90vw;
}
.scaled {
height: 100vh;
width: auto;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(window).on("load", function() {
// wait until all images loaded.
// loop each <img> that has class `item` and set height.
$('img.item').each((index, item) => {
$(item).attr('data-original-height', $(item)[0].offsetHeight);
$(item).css({
'height': $(item)[0].offsetHeight
});
});
});
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
// if already has class `scaled`
// going to remove that class after this.
if ($(this).attr('data-scaled-width') === undefined) {
// get and set original width to data attribute.
$(this).attr('data-scaled-width', $(this)[0].offsetWidth);
}
$(this).css({
'height': $(this).data('originalHeight'),
'width': ''
});
$(this).removeAttr('data-original-height');
$(this).removeClass('scaled');
} else {
// if going to add `scaled` class.
if ($(this).attr('data-original-height') === undefined) {
// get and set original height to data attribute.
$(this).attr('data-original-height', $(this)[0].offsetHeight);
}
$(this).css({
'height': '',
'width': $(this).data('scaledWidth')
});
$(this).removeAttr('data-scaled-width');
$(this).addClass('scaled');
// check again to make sure that width has been set.
if ($(this)[0].style.width === '') {
setTimeout(() => {
console.log($(this)[0].style.width);
$(this).css({
'width': $(this)[0].offsetWidth
});
console.log('css width for image was set after added class.');
}, 500);// set timeout more than transition duration in CSS.
}
}
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
See it in action

using a javascript file as a background in css

I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!
I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.
Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:

html css and js not working

This is my code:
<!doctype html>
<html lang="en-US">
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
</head>
<body class="menu">
<header>
Toggle
<nav class="menu-side">
This is a side menu
</nav>
</header>
<p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
<p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>
The css:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu{
overflow-x:hidden;
position: relative;
left: 0px;
}
.menu-open {
left: 231px;
}
And the jquery:
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
return false;
});
})();
I'm using the Brackets program to write my code, but when I go to the live view after I saved everything and i press "toggle" the page wont move and I looked over everything and Im 98% sure its correct.
Put <script src="Home.js"></script> before the </body> tag.
I made another class
.menu-side-open{
left:0px;
}
and JQuery
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
$('.menu-side').toggleClass('menu-side-open');
return false;
});
})();
Also added
.menu, .menu-side{
transition: 300ms;
}
for a nice slide :)
JSFiddle demo
You need to include jQuery if you want to use it.
Add this line
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
In your html's head or before you use jQuery!
e.g.
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
Change this:
body.toggleClass('menu-open');
to this:
$('.menu-side').toggleClass('menu-open');
And change the .menu-open css class to this:
.menu-open {
top:10%;
left: 0px;
}
Here is the JSFiddle demo
Its the .menu-side that is hidden on the left. Therefore you should be applying the menu-open class to .menu-side and not the body tag.
Your CSS was setting the left of .menu-side to 231px, setting it back to 0px is enough to make the menu appear back into view. And when the menu appeared, it covered the 'Toggle' link, therefore I also added top:10% to the .menu-open class CSS.
I think it is related to a missing file from the computer. I have the same issue with my computer and it does not really matter wether you put the CSS and JS into the HTML page. The result will be the same. When you open the page in the browser, you won`t see any changes, and if I press F12 it says: Failed to load resource: net::ERR_FILE_NOT_FOUND or dll file not found or something like that

Javascript/HTML/CSS popup

I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.
I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?
The site is here: http://0034.eu/townapp/
And here's the code:
The JS:
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
<script language="text/javascript">
window.onload = function() {
$('#overlay-back').fadeIn(500);
}
</script>
<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>
The HTML:
<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>
The CSS:
#popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
Thanks a lot in advance!
You must include jquery for this to work
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
</head>
If you want to try another popup, the following link will help you,
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/

my overlay is not being centered using css

<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
position: absolute;
background-color: #ccffcc;
display: none;
height: 200px;
margin: 0 auto;
width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
}
//]]>
</script>
so when the user clicks it runs show() which places the css box on top. However i want it to be centered in the browser. I've set the margin: 0 auto; which should be doing the trick shouldnt it?
I'm just trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.
Thanks
Margin: 0 auto won't work on position absolute elements, they exist in their own little world, outside of normal flow. So in order to pull this off, you need to do an extra step. The CSS dead centre technique will work here.
Try setting the top and left attributes on your overlay.
Use % to set top and left position. Set css attribute top:10%; Left 40%;

Categories