I'm trying to get a simple mobile navigation to work, but nothing happens when I click the trigger button. Any help would be much appreciated! My first steps in JS, so I apologise if I made a really stupid mistake...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
<script>
// When trigger is clicked, check if menu is currently hidden or shown
// Choose what action to perform
$('#trigger').click( function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
}
else {
hideMenu();
}
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
</script>
<style>
#menu {
position: fixed;
top: 0px;
left: -200px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
Thanks
Andreas
First, the main code had to be inside ready function in order to trigger:
"$(document).ready(function(){}"
And secondly for the CSS to work you have to move the left style to menu-hide
Working example:
$(document).ready(function() {
$('#trigger').click(function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
} else {
hideMenu();
}
});
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
#menu {
position: fixed;
top: 0px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
.menu-hide {
left: -200px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
</html>
Related
The item completely comes out of the box when when the cursor is near the bottom edge. There's an example:
https://jsfiddle.net/jufwvLsp/16/
My Browser Version: Firefox Developer Edition 88.0b9 (64-bit)
OS: Arch Linux
How can this be solved? It works perfectly in Google Chrome
const player = document.querySelector('.player');
const field = document.querySelector('.field');
field.addEventListener('mousemove', e => {
player.style.top = e.offsetY-25 + 'px';
player.style.left = e.offsetX-25 + 'px';
});
body {
perspective: 1250px;
}
.field {
margin-left: 100px;
width: 400px;
height: 500px;
transform: rotateX(65deg);
background: #000;
position: relative;
}
.player {
position: absolute;
width: 50px;
height: 50px;
background: #fff;
top: 50px;
left: 50px;
pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="field">
<div class="player"></div>
</div>
</body>
</html>
I trying write my first site and I don't know why js file doesn't work.
Maybe you can repair that. I can't write that, because I'm learning to program.
HTML here
<head>
<script type="text/javascript">
</script>
<meta charset="utf-8" />
<title>Makoto Designer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>
<header>
<div id="hed">
<img src="/img/logo_okr.png" class="logo">
<div class="biale"></div>
<div class="czarne"></div>
<img src="/img/md.png" class="md">
</div>
</header>
</body>
CSS here
.logo {
display: inline-block;
position: absolute;
width: 155px;
height: 155px;
left: 50px;
top: 50px;
filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.4));
cursor: pointer;
object-fit: cover;
z-index: 3;
}
.md {
display: inline-block;
position: absolute;
width: 532px;
height: 190px;
left: 230px;
top: 18px;
filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.4));
}
.czarne {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #00000099;
z-index: 1;
}
.biale {
position: absolute;
background-color: #FFFFFF;
left: 125px;
top: 55px;
width: 1px;
height: 140px;
z-index: 2;
transition: 2s;
transition-timing-function: ease-out;
}
.biale.on {
position: absolute;
background-color: #FFFFFF;
left: 125px;
top: 50px;
width: 650px;
height: 155px;
z-index: 2;
border-bottom-right-radius: 75px;
border-top-right-radius: 75px;
filter: drop-shadow(0px 7px 10px #00000066);
}
JavaScript here
function handleClicks() {
var logo = $(".logo"),
biale = $(".biale"),
czarne = $(".czarne"),
var menu = {
open: () => {
biale.addCalss("active");
czarne.fadeTo("fast", 1, () => czarne.show());
},
close: () => {
biale.removeClass("active");
czarne.fadeTo("fast", 0, () => czarne.hide());
}
};
logo.click(() => menu.open());
czarne.click(() => {
menu.close();
});
}
addEventListener('DOMContentLoaded', () => {
let biale = $(".biale")[0]
let logo = $(".logo")[0]
let toggle = false
logo.addEventListener('clock', () => {
toggle = !toggle
biale.className = toggle ? 'on' : ""
})
})
I want biale to slide behind the logo and then hide, but wen i click logo nothing happens. Why it not working?
mehh
Put your <script> in the bottom of body tag (not in head) - and also put semiclon after czarne = $(".czarne"); (not comma ,)
In your CSS, change .biale.on to .biale.active
You may want to look at this for help with your HTML file: https://www.w3schools.com/html/html5_intro.asp
Some changes you'll want to do:
Add doctype
Remove that empty js script in head for cleanliness. I'm assuming your JavaScript is going to be in the javas.js file.
Here's what your HTML could look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Makoto Designer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>
<header>
<div id="hed">
<!-- Don't forget to close your img tags like this. Do the second one too. -->
<img src="/img/logo_okr.png" class="logo" />
<div class="biale"></div>
<div class="czarne"></div>
<img src="/img/md.png" class="md">
</div>
</header>
</body>
<!-- Also close html at the end -->
</html>
In your javas.js file, try making these changes:
Remove the , comma at the end of the last var declaration. I eliminated the shortcut altogether below.
There was a typo with addClass.
I'm not sure you need the addEventListener. jQuery allows you to use its document ready feature to call your handleClicks function on load in order to set up the fades.
Here's an example:
function handleClicks() {
var logo = $(".logo");
var biale = $(".biale");
var czarne = $(".czarne");
var menu = {
open: () => {
biale.addClass("active");
czarne.fadeTo("fast", 1, () => czarne.show());
},
close: () => {
biale.removeClass("active");
czarne.fadeTo("fast", 0, () => czarne.hide());
}
};
logo.click(() => menu.open());
czarne.click(() => {
menu.close();
});
}
$(document).ready(function(){
handleClicks();
});
For a project, i need to get the dome of some websites and parse it. I find a solution with YQL. The request seems to work well on this site.
https://developer.yahoo.com/yql/
But when i use it on my local website with the following javascript :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BabylonJS - HexaGrid</title>
<style>
body, html {
margin:0;
padding: 0;
border: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
canvas { width: 100%; height: 100%; }
#vr {
position: absolute;
top: 10px;
left: 10px;
padding: 10px 15px;
border: 2px solid #ddd;
background: #4587ea;
color: #fff;
transition: all 0.3s;
}
#vr:hover {
transition: all 0.3s;
background: #449fff;
cursor: pointer;
}
</style>
</head>
<body>
<script type="text/javascript">
var url = 'https://www.brainpickings.org/2016/06/09/strange-trees/';
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=json'&callback=?", function(data){
// if there is data, filter it and render it out
if(data.results[0]){
var test = data.results[0];
alert(test);
} else {
var errormsg = "<p>Error: can't load the page.</p>";
alert(errormsg);
}
});
</script>
</body>
</html>
It only display a part of the request. I don't really what went wrong, if it's because the yql request is big and is not finish or i lack some knowledge for getting what remain.
Thanks in advance for your answers.
Your code is using but missing the jQuery library, and doesn't wait for the document to be ready. Here is the code fixed and working:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BabylonJS - HexaGrid</title>
<style>
body,
html {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
#vr {
position: absolute;
top: 10px;
left: 10px;
padding: 10px 15px;
border: 2px solid #ddd;
background: #4587ea;
color: #fff;
transition: all 0.3s;
}
#vr:hover {
transition: all 0.3s;
background: #449fff;
cursor: pointer;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
var url = 'https://www.brainpickings.org/2016/06/09/strange-trees/';
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(url)+
"%22&format=json'&callback=?", function(data){
// if there is data, filter it and render it out
if(data.results[0]){
var test = data.results[0];
alert(test);
} else {
var errormsg = "<p>Error: can't load the page.</p>";
alert(errormsg);
}
});
});
</script>
</body>
</html>
Well this is a kind of a hard question to ask, but i guess you will see why:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<style type="text/css">
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="player"></div>
<div class="obstacle"></div>
<script>
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y-75);
$("#player").css('margin-left', X-75);
//alert(X+" "+Y);
});
</script>
</body>
</html>
This code should create a div with an id of "player", then place it wherever your cursor currently is. (that works just fine) But then there is the "obstacle" which for some reason moves along with the player, although it shouldn't.
Why is this happenning? Could someone explain it to me?
A picture:
https://jsfiddle.net/fq4y4r41/
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('top', Y-75);
$("#player").css('left', X-75);
//alert(X+" "+Y);
});
and css
#player {
position: absolute;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
you changing margins which affects that block size, so bottom blocks moving too. try to change top and left instead and set it's position to absolute
that way you move that element away from flow - https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Since you want to move a block based on mouse movement, I think you might have to use a different position value, like absolute
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event) {
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y - 75);
$("#player").css('margin-left', X - 75);
//alert(X+" "+Y);
});
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="player"></div>
<div class="obstacle"></div>
Demo: Fiddle
You only need to change the css
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
here is the jsFiddle. Checkit out :)
I'm trying to move the form up a few pixels and this doesn't work. I don't know why.
The function is being called when I submit (I have tested it with an alert()), but the css part doesn't work.
This is the code:
<!DOCTYPE>
<html>
<head>
<title> Pagina de Luis </title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
top: -50 px;
});
});
});
</script>
<style type="text/css">
body,
p {
font-family: 'Source Sans Pro';
font-size: 30px;
line-height: 15px;
letter-spacing: 0px;
font-weight: bold;
}
#container {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#contenido {
width: 50%;
min-width: 300px;
margin-left: 60px;
letter-spacing: -1px;
padding: 20px 0 0px 0;
}
#texto {
padding: 20px;
margin-top: 30px;
}
#texto p {
margin: 0px;
padding-bottom: 20px;
}
#nombre {
font-family: 'Special Elite';
font-size: 30px;
padding-top: 15px;
border: 0px;
}
#imagen {
vertical-align: text-top;
width: 50%;
float: right;
}
input:focus {
outline: 0 !important;
}
</style>
</head>
<body>
<div id="container">
<div id="contenido">
<form method="POST" id="formulario">
<div id="texto">
<p>Hola, soy Luis.</p>
<p>Bienvenido a mi web personal.</p>
<p>Antes de nada,</p>
<p>¿podrías indicarme tu nombre?</p>
<input type="text" id="nombre" autofocus autocomplete="off" />
</div>
</form>
</div>
</div>
</body>
A live version of the code:
http://www.luisalmerich.com/
You are using css top without any position properties. Try using position absolute or relative
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
top: '-50px',
position: 'relative'
});
});
});
If you do not wish to change the position property, you can modify the margin-top property like
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
});
});
Finally, note that when a form submits, the page reloads so you will most likely only see this change temporarily. If you return false, the page will not reload(although this may not be what you want)
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
return false;
});
});
Can you try adding position: relative; also
$("#formulario").submit(function (event) {
$(this).css({
position: "relative",
top: "-50px"
});
});
If you want it to work with .animate() try this:
$(document).ready(function () {
$("#formulario").submit(function (event) {
event.preventDefault();
$(this).css('position', 'relative')
.animate({top: '-50px'}, 5000, function () {
// Animation complete.
})
});
});