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.
})
});
});
Related
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();
});
Hi i'm trying to make some web.
It's a simple game
just drag the answer to the blank and if is the correct answer, the answer is in the blank.
ex image ,,, like this )
enter image description here
enter image description here
This is my current code.
I can drag the img. but can't put in answer to the blank.
html code -----
var css_test_idx = 10;
var pt1 = $("#pt1");
$('#n1')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
});
$("#n1")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
$('#n2')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n2")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
});
$('#n3')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n3")
.draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
})
.css('cursor', 'move');
});
$('#n4')
.draggable().css('cursor', 'move').mousedown(function() {
$(this).css('z-index', css_test_idx);
css_test_idx++;
$("#n4").draggable({
stop: function() {
$(this).animate({
top: 0,
left: 0
}, 250, 'easeOutBack');
}
}).css('cursor', 'move');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<style>
#leftbox {
float: left;
width: 170px;
height: 170px;
height: 250;
margin: 5px;
border: 3px solid blue;
}
#clock {
position: static;
width: 900px;
height: 650px;
margin-top: 50px
}
#box {
position: relative;
margin-left: 300px;
}
#n1 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n2 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n3 {
width: 150px;
height: 150px;
margin-left: 50px
}
#n4 {
width: 150px;
height: 150px;
margin-left: 50px
}
#blank {
width: 100%;
height: 100px
}
</style>
</head>
<body>
<center><img id="clock" src="image/clock.png"></div>
</center>
<div id="leftbox"></div>
<center>
<div class="box">
<img id="n1" src="image/n1.png" />
<img id="n2" src="image/n2.png" />
<img id="n3" src="image/n3.png" />
<img id="n4" src="image/n4.png" />
</div>
</center>
<script src="temp2.js" type="text/javascript"></script>
</body>
</html>
-- you can't run this code here because i use node express.
help~
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 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>
I am extremely new to JQuery, I just started looking into it today. I have searched all around for what might be causing this bit of code to not work. When you scroll down, I want the h1 to move to the side and a menu button to appear. That works, but when I scroll back up again, it takes an extremely long time to reverse itself. I have tried to fine anything that might be causing it like a delay or something, but as far as I can see, there isn't any problems.
Link to website: http://www.dragonmath.net/rockets
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css" />
<title>Rockets</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<header>
<img id="menu" src="images/menu1.png" />
<div id="headerdiv">
<h1>Rockets</h1>
<img id="logo" src="images/logo1.png" />
</div>
</header>
<nav>
<ul>
<li>
<a>Space Race</a>
</li>
<li>
<a>SpaceX</a>
</li>
</ul>
</nav>
<script>
$( document ).ready(function() {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
$(window).on('scroll', function () {
if ($(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.delay(800).slideDown(800);
$nav.addClass('testnav');
}
if ($(window).scrollTop() < 40) {
$menu.slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
}
});
});
</script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
color: #00AAFF;
font-family: Arial;
}
body {
height: 800px;
}
header {
position: fixed;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
background-color: #333;
z-index: 1;
}
div#headerdiv {
display: inline;
transition: all 1s;
}
h1 {
display: inline;
margin-left: 40px;
font-size: 40px;
}
header > img#menu {
position: fixed;
top: 20px;
left: 40px;
width: 40px;
height: 40px;
display: none;
}
header > div > img#logo {
display: inline;
width: 60px;
height: 60px;
position: relative;
top: 18px;
left: 20px;
transition: height 1s, width 1s;
}
nav {
position: relative;
top: 100px;
height: 40px;
width: 100%;
background-color: #333;
}
nav > ul {
list-style: none;
}
nav > ul > li {
display: inline-block;
height: 40px;
width: 200px;
text-align: center;
border-right: 1px solid #00AAFF;
}
nav > ul > li > a {
position: relative;
top: 6px;
}
.testheaderdiv {
margin-left: 80px;
transition: all 1s;
}
.testnav {
display: none;
}
The main problem I could see with the code is how scroll is handled, for every scroll event you are adding delay to the menu element.
So try
$(document).ready(function () {
var $menu = $('img#menu');
var $headerdiv = $("div#headerdiv")
var $nav = $('nav');
var flag;
$(window).on('scroll', function () {
if (flag !== 1 && $(window).scrollTop() > 40) {
$headerdiv.addClass("testheaderdiv");
$menu.stop(true, true).delay(800).slideDown(800);
$nav.addClass('testnav');
flag = 1;
}
if (flag !== 2 && $(window).scrollTop() < 40) {
$menu.stop(true, true).slideUp(800, function () {
$headerdiv.removeClass('testheaderdiv');
});
$nav.removeClass('testnav');
flag = 2;
}
});
});