jQuery delay stops working after first two "arguments(?)"

jQuery delay stops working after first two "arguments(?)" - javascript

I'm trying to delay each by instant then 300, then 600, then 900 etc
i want each element to slide in one after the other separated by 0.3s.
Here is the code:
HTML:
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="fourth">
</div>
<div class="fifth">
</div>
CSS:
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.first,
.second,
.third,
.fourth,
.fifth {
width: 960px;
padding:10px;
margin: 20px auto;
min-height: 50px;
background: white;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15);
transform: translateX(-150%);
transition: 0.5s ease;
background:orange;
.trans {
transform: translate(0);
transition:0.5s ease;
}
}
jQuery:
$(document).ready(function(){
$(".first").toggleClass("trans");
}).delay(300).queue(function(){
$(".second").toggleClass("trans");
}).delay(600).queue(function(){
$(".third").toggleClass("trans");
});
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
.first,
.second,
.third,
.fourth,
.fifth {
width: 960px;
height:50px;
padding:10px;
margin: 20px auto;
min-height: 50px;
background: white;
box-shadow: 0 2px 8px 2px rgba(0,0,0,0.15);
transform: translateX(-150%);
transition: 0.5s ease;
background:orange;
}
.trans {
transform: translate(0);
transition:0.5s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="fourth">
</div>
<div class="fifth">
</div>
I understand there is something called dequeuing? Although I do not know how to implement this into the code at all.
I tried adding .dequeue() before each .delay() but it didn't do anything, the elements third, fourth and fifth still weren't showing :(
Send help, please!
Here is the code pen: http://codepen.io/anon/pen/vyawXm
I've added a snippet too.
I've only put jQuery in for the third class, but that doesn't even show, and neither does fourth and fifth when they're added.

you need to add this line: $(this).dequeue();
in every queue callback function, after you call toggleClass function.

Related

how to make button stay pressed down until pressed again

i have a button that expands a section with background image to show hidden text, but how do i make it so that i can just press the button once instead of haviing to hover it or hold down? and then press it again to return to its default state
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>TITLE</title>
</head>
<body>
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>
</body>
</html>
#charset "utf-8";
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content:active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content:active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
........................................................................

I have never found a CSS-only solution regarding something like this, so using a splash of Javascript will help to toggle a different state using a class on your hidden-content container. Then, using the presence of the new class, you can edit the appearance of your HTML elements.
In other words, adding and removing a class can allow you to update it's appearance.
var trigger = document.querySelector('.bottom-arrow');
trigger.addEventListener('click', function(){
document.getElementById('hidden-content').classList.toggle('active');
});
body{
background-color: white;
}
.mainPic{
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding:0;
margin:0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow{
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section{position:relative;}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#hidden-content.active #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#hidden-content.active .bottom-arrow{
position:absolute;
bottom:-25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>

Technically speaking you don't have a button. HTML standard includes a button element which is what people think of when speaking of buttons in web pages / web apps.
You want to toggle the hidden attribute based on the click event of an element.
var label = document.querySelector("label");
label.addEventListener("click", function () {
document.getElementById("list").toggleAttribute("hidden");
});
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<label class="bottom-arrow" for="trigger">CLICK ME</label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>

Using a checkbox with the label allows you to use its state.
body {
background-color: white;
}
.mainPic {
background-image: url("images/background.webp");
background-repeat: no-repeat;
background-size: cover;
border: 1px solid black;
}
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 200;
padding: 0;
margin: 0;
font-size: 75px;
text-shadow: 1px 1px 2px red, 0 0 0.5em blue, 0 0 0.1em blue;
}
.bottom-arrow {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
cursor: pointer;
}
/*Custom CSS*/
section {
position: relative;
}
#hidden-content #list {
max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;
}
#trigger {
display: none;
}
#trigger:checked + label + #list {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
#trigger:checked + label.bottom-arrow {
position: absolute;
bottom: -25px;
transition: 0.25s ease-out;
}
<div class="mainPic">
<section>
<header style="text-align: center;">
<h1>TITLE & info</h1>
</header>
<div id="hidden-content">
<input type="checkbox" id="trigger">
<label class="bottom-arrow" for="trigger"></label>
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>
</section>
</div>

Divs are moving around when resizing/zooming-in/out page

If i set position:absolute it stops moving and messing around page, while zooming(in/out) the page. but the location of div are automatically changing, and all the divs are mixing together in one location. any ideas? hope my question was clear. none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code And screenshot:Screenshot
<style>
/* KEYFRAMES */
/* IDS */
#changepos{
position:relative;
top:-250px;
}
#readmore{
position:relative;
top:-260px;
right:380px;
text-decoration-line:none;
border-radius:20px;
}
#movetext{
position:relative;
right:395px;
}
#wholepage{
width:500px;
margin-left:auto;
margin-right:auto;
}
#hello{
position:relative;
left:20px;
}
#hellos{
position:relative;
left:100px;
}
/* Body Visual */
input{
width:50%;
overflow:hidden;
}
main{
background-color:lightgray;
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-x:hidden;
}
body{
background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80');
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-wrap:hidden;
overflow-x:hidden;
}
/* Classes */
.typewriter {
font-family: Courier, monospace;
display: inline-block;
}
.typewriter-text {
display: inline-block;
overflow: hidden;
letter-spacing: 2px;
animation: typing 5s steps(30, end), blink .75s step-end infinite;
white-space: nowrap;
font-size: 30px;
font-weight: 700;
border-right: 4px solid orange;
box-sizing: border-box;
}
#keyframes typing {
from {
width: 0%
}
to {
width: 100%
}
}
#keyframes blink {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}
}
.forms{
position:relative;
left:50px;
}
.lineh{
border-bottom: 4px solid lightgray;
width:1400px;
height:3px;
cursor:default;
position:relative;
border-radius:100px;
top:-11px;
}
.lines{
border-bottom: 2px solid none;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
top:-195px;
right:400px;
}
.line{
 border-bottom: 2px solid pink;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
}
.movepic{
position:relative;
left:270px;
top: -200px;
right:0px;
bottom:0px;
cursor:default;
opacity:1;
transition:1s;
}
.movepic:hover{
transform:translateX(20px);
}
.joint{
font-family:monospace;
font-size:10px;
text-decoration-line:none;
text-decoration-color:none;
text-decoration:none;
color:white;
}
.transp{
position:relative;
border-style:solid;
border-radius:50px;
background-color:none;
opacity:0.6;
cursor:pointer;
border:none;
overflow:hidden;
transition:1s;
border-image-width: 5px;
}
.transp:hover{
transform:translate(30px);
opacity:1;
transform-style: preserve-3d;
}
.container{
text-align: center;
margin-top: 360px;
}
.btn{
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family:monospace;
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
.btn1,.btn2{
color: #3498db;
}
.btn3,.btn4{
color: #fff;
}
.btn1:hover,.btn2:hover{
color: #fff;
}
.btn3:hover,.btn4:hover{
color: #3498db;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
height: 0%;
}
</style>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roma's Portfolio</title>
<link rel="stylesheet" href="../sait/css/main.css">
<link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="350">
<style>
.putebi{
width: 100%;
border-radius:4px;
padding:12px;
border:1px solid #d9a7c9;
box-sizing: border-box;
margin-top:6px;
margin-bottom:16px;
resize:vertical;
}
.med{
position:relative;
outline:none;
border-style:none;
opacity:0.6;
}
.med:hover{
opacity:1;
}
.soc{
animation:socebi 3s;
outline:none;
border-style:none;
}
#keyframes socebi{
from{
opacity:0;
transform:translateX(-600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
.kont{
animation: animacia 3s;
}
#keyframes animacia{
from{
opacity:0;
transform:translateX(600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
</style>
</head>
<body>
<div>
<div style="overflow-x:hidden;"id="hello" class="transp"> <h1> Roma's Portfolio</h1> </div>
</div>
<div class="lineh"></div>
<div class="wholepage">
<div style="text-align:center; text-decoration:none">
<a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a>
<a style="text-decoration-line:none" class="btn btn1 container">Contact</a>
<a style="text-decoration-line:none" class="btn btn1 container">Projects</a>
<a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br>
<div class="typewriter">
<q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q>
</div><br><br>
<div style="cursor:default;"class="soc">
<a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img class="med" width="50px" src="../sait/images/instagram.png"></a><br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br>
</div>
<br><br><br>
</div>
</div>
</div>
<div id="wholepage">
<div id="movetext" style="color:white; font-family:monospace; font-size:large">
<h2 style="color:#64e873;text-shadow:2px 2px" class="line kont"> Hello!</h2> <br>
<h3 class="kont" style="text-align:left; font-size:large;"> I'm Roma. A Freelance Front End Developer based in Georgia. I specialise in creating interactive experiences and functional interfaces.I have worked on a multitude of web and print-baseds projects for a range of clients providing Web Design (Illustrator,Photoshop,Kdenlive) and Development(HTML,CSS,MYSQL,Wordpress).</h3>
</div>
<div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250" src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div>
<div class="changepos lines kont">
</div>
<button id="readmore" class="btn btn3 kont">Read More</button><br><br>
</div>
<div style="position:relative; top:-180px">
<form action=""style="text-align:center">
<h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1>
<div class="typewriter">
<h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1>
</div><br>
<label style="font-family:;"for="saxeli">Enter Username</label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br>
<label id="email">Enter Email </label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="email" type="email" name="email"><br><br>
<label for="free">Enter Text </label>
<textarea style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br>
<button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button>
</form>
<img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px" height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg">
</div>
</div>
<footer>
<p style="color:black; ">All Rights Reserved</p> -->
</footer>
</body>
</html>

It seems like, there is a problem with the background image, please try background-size: cover, if this also won't work then please share some more code using any online editor

The website is not responsive, add Media Queries to make your website look nice (the way you want) on any device screen size.

Disable input when no item got specific class name

I got a little codepen where you can select multiple tabs (with jQuery selectable widget). I wanna do the following: If no item got the class name .ui-selected the input #plannername gets disabled.
I thought something like this should work:
if ($('.ui-selected').length === 0){
$('#plannername').prop('disabled', true);
}
else{
$('#plannername').prop('disabled', false);
}
But that doesn't work. I created the following:
var count = $('.ui-selected').length;
console.log(count);
That's giving me the correct amount of tabs selected.
$(function() {
// define one function, to be used for both select/unselect
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
console.log(items);
var count = $('.ui-selected').length;
console.log(count);
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
});
});
*{
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#selectable .ui-selecting {
background: #9eefbc;
transition:.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
transition: transform 0.8s, background-color 0.8s;
-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
transform: perspective(300px) rotate3d(1,0,0,-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
#selectable .ui-selected {
background: #6dce91;
transition:all 0.8s;
}
#selectable {
list-style-type: none;
position:absolute;
width: 60%;
margin-left:20%;
display:flex;
transition:.3s ease-in-out;
z-index:1;
margin-top:3px;
}
#selectable li {
background:#ddffea;
padding: 0.6em;
font-size: 1.4em;
flex-grow:1;
transition:.3s ease-in-out;
border:none;
text-align:center;
line-height:0.8em;
}
#selectable .ui-selected:after,
#selectable .ui-selected::after {
position: absolute;
top: 44px;
margin-left:-50px;
transition: .2s ease-in-out;
content: '';
width: 0;
height: 0;
opacity:1;
animation:dreieckFade 1s forwards;
border-top: solid 15px #6dce91;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
#keyframes dreieckFade{
0%{opacity:0;border-top: solid 0px #6dce91;}
100%{opacity:1;border-top: solid 15px #6dce91;}
}
.ui-selectable-helper {
visibility: hidden;
}
#content{
width:60%;
background-color:#9eefbc;
margin-left:20%;
padding-top:70px;
margin-top:3px;
padding-bottom:30px;
}
.tabcontent{
top:44px;
background-color:transparent;
z-index:0;
transition:.3s ease-in-out;
font-size:2em;
display:none;
padding-left:100px;
}
#plannername{
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannername:focus{
outline:0;
}
#plannersubmit{
width:20%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
transition:.2s ease-in-out;
}
#plannersubmit:hover{
transition:.2s ease-in-out;
padding-left:40px;
cursor:pointer;
}
#plannersubmit:focus{
outline:0;
}
#plannersubmit:active{
color:white;
}
.plannerlist{
list-style-type:none;
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
<input id="plannername" placeholder="insert name" type="text" autocomplete="off"></input><!--
--><input id="plannersubmit" type="submit" value="sign up"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>

What you need to do is remove the disabled flag once the action of clicking one of the options has taken place. Essentially, what you should do is set the field to disabled by default, then enable it once a selection has been made:
$(function() {
$('#plannername').prop('disabled', true);
function selectionChange(event, ui) {
('#plannername').prop('disabled', false);
}
}
I've created an updated CodePen showcasing this here.
Hope this helps! :)

Beginner jQuery Themeroller Problems

I'm attempting to build a page using Themeroller widgets and I've run into some bugs and can't figure out why. The first one: my drag element keeps going behind my drop element instead of over it. Second one: My tabs aren't showing ups as tabs but rather an unordered list (This one isn't necessarily a bug, I'm just very new to jQuery UI and I'm having difficulty linking both custom themes and themes from a CDN, if anyone can explain what I'm doing wrong it'd be much appreciated). And the last one: I'm trying to use datepicker() (which of course doesn't have a theme right now) to have the user input their birthday. I would like them to press and go and receive a notification that just spits their birthday back at them, I can't seem to be able to do this with ($datepicker).value. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>ThemeRoller</title>
<link type="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css ">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
body{
height:680px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#draggable{
height:50px;
width:150px;
border:1px solid black;
top:40px;
left:550px;
background:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
overflow-y: auto;
overflow-x: hidden;
}
#draggable span{
display:table;
margin:0 auto;
margin-top:15px;
}
#droppable{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#droppable span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
border-bottom:2px solid ghostwhite;
position: absolute;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
}
#sortable{
width:200px;
bottom:0px;
right:0px;
top:75px;
border-top:2px solid ghostwhite;
border-bottom: 2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: absolute;
}
ol {
margin:0 0 10px 0
}
li:not(:last-child) {
margin-bottom: 10px;
}
</style>
<script>
$(init);
function init(){
var divdrag=$('#draggable');
var divdrop=$('#droppable');
var divsort=$('#fruitlist');
var divtab=$('#tabs');
divdrag.draggable()
divdrop.droppable({
drop:function(){
divdrag.text("Dropped!");
},
out: function(){
divdrag.text("No! Please drop me!");
},
over: function(){
divdrag.text("Please drop me! Pls...");
}
})
divsort.sortable();
divtab.tabs();
$('#datepicker').datepicker();
}
function birthday(){
var birth=$('#datepicker').value;
alert('You were born on: '+birth);
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='draggable'><span>Drag me!</span></div>
<div id='droppable'><span>Drop here!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul>
<li>Home</li>
<li><a href='#tabs-2'>About</a></li>
<li><a href='#tabs-3'>Products</a></li>
</ul>
<div id='#tabs-1'>Welcome to my best jQuery page yet!</div>
<div id='#tabs-2'>Sometimes I go a little overboard with compsci</div>
<div id='#tabs-3'>I also make and sell word clocks built with Arduino microcontrollers!</div>
</div>
<div id='sortable'><span>Sort me!</span>
<span id="fruits">
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
</body>
Edit: Oops. Well I got my theme working. was using type="stylesheet" instead of rel="stylesheet"
Edit 2: I made a second page with nearly identical drag and drop code and the drag element goes over the drop element. So something else in my page must be causing it but I don't know what. Here's the drag/drop code in the new document.
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
});
It is nearly identical. In fact, I copied and pasted this code into my original document and still get the drag element going behind the drop element in the original. Something tells me my CSS isn't playing nice with my code.

Did it. Wasn't able to figure out how to do the datepicker value though.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
div{
font:12px normal arial, helvetica;
}
body{
height:670px;
width:auto;
background: -webkit-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -moz-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -ms-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: -o-linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
background: linear-gradient(bottom, #c7c7c7 10%, #00223E 90%);
color:ghostwhite;
}
#navbar{
height:30px;
width:auto;
border-bottom:2px solid ghostwhite;
top:45px;
left:0;
right:0;
position: absolute;
}
#dragdiv{
height:50px;
width:150px;
border:1px solid black;
top:100px;
left:565px;
background-color:#182E4C;
padding:5px;
box-shadow: 0px 0px 10px 5px ghostwhite;
position: absolute;
}
#dropdiv{
position: absolute;
top:225px;
left:490px;
width:300px;
height:150px;
border:1px solid black;
padding 5px;
background-color: #33526E;
box-shadow:0px 0px 50px 10px black;
}
#dragdiv span{
display:table;
margin:0 auto;
margin-top:15px;
}
#dropdiv span{
display: table;
margin: 0 auto;
margin-top: 60px;
}
#birthday{
position:absolute;
top:460px;
left:573px;
width:auto;
height:200px;
}
#birthday span{
display: table;
margin:0 auto;
margin-bottom:10px;
}
#tabs{
width:200px;
bottom:0px;
left:0px;
top:75px;
border-top:2px solid ghostwhite;
border-right:2px solid ghostwhite;
position: absolute;
background: #5D5D5D ;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: grey;;
color: #222;
}
.tab-content{
display: none;
background: grey;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
#sortable span{
display:table;
margin:0 auto;
margin-top: 20px;
margin-bottom: 10px;
}
#sortable{
width:200px;
left:1070px;
top:-5px;
height:620px;
border-top:2px solid ghostwhite;
border-left: 2px solid ghostwhite;
position: relative;
background:#5D5D5D ;
}
ol {
margin:0 0 10px 0;
cursor:pointer;
}
li:not(:last-child) {
margin-bottom: 10px;
}
#goback{
position: absolute;
top:550px;
left:620px;
}
</style>
<script>
$(function(){
var drag = $('#dragdiv');
var drop =$('#dropdiv');
drag.draggable();
drop.droppable({
drop: function(){
drag.text('Dropped!');},
out: function(){
drag.text('No! Please! Take me back!');},
over: function(){
drag.text('Please drop me! Pls...');
}
});
var divsort=$('#fruitlist');
divsort.sortable();
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$('#datepicker').datepicker();
});
function goBack(){
window.location = "http://www.javascriptpractice.pcriot.com/practiceSet5.html"
}
</script>
</head>
<body>
<h1 style="text-align:center">Themeroller</h1>
<div id="navbar"></div>
<div id='dropdiv'><span>Drop Here!</span></div>
<div id='dragdiv'><span>Drag Me!</span></div>
<div id='birthday'>
<span>Enter your birthday!</span>
<input type='text' id='datepicker'>
<input type='button' id='btn1' value='Go!' onClick=birthday()/>
</div>
<div id='tabs'>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Home</li>
<li class="tab-link" data-tab="tab-2">About<li>
<li class="tab-link" data-tab="tab-3">Products</li>
<li class="tab-link" data-tab="tab-4">Tabs</li>
</ul>
<div id="tab-1" class="tab-content current">
Welcome to my best jQuery page yet!
</div>
<div id="tab-2" class="tab-content">
I really like compsci. Sometimes I go overboard.
</div>
<div id="tab-3" class="tab-content">
I also make and sell word clocks with Arduino microcontrollers!
</div>
<div id="tab-4" class="tab-content">
Tabs aren't as easy as they look.
</div>
</div>
<div id='sortable'><span>Sort me!</span>
<ol id="fruitlist">
<li>Apples</li>
<li>Bananas</li>
<li>Pineapples</li>
<li>Lemons</li>
<li>Kiwis</li>
<li>Strawberries</li>
<li>Oranges</li>
<li>Mango</li>
<li>Plums</li>
<li>Peaches</li>
<li>Apricots</li>
<li>Squash</li>
<li>Honeydew</li>
<li>Watermelons</li>
</ol>
</div>
<input id='goback' type="button" value="Go Back" onClick='goBack()'/>
</body>
</html>

Trace div on hover?

Right now I have six floated divs, each with an image as a background. There is a 4.5px margin on each div so it looks like there is a border.
I want to make it so that on hover, the div's "border" is traced/filled up in a different color. How do I do that?
<div id="one" >
</div>
<div id="two" >
</div>
<div id="three" >
</div>
<div id="four" >
</div>
<div id="five" >
</div>
<div id="six" >
</div>
Here's the css:
#one,#two,#three,#four,#five,#six{
max-height:400px;
background-color: grey;
margin:4.5px;
height:60vh;
width:417px;
max-width:417px;
float:left;
background-size: cover;
opacity:.9;
text-align:center;
}
#one{
background-image:url('../images/1.jpg');
}
#two{
background-image:url('../images/2.jpg');
}
#three{
background-image:url('../images/3.jpg');
}
#four{
background-image:url('../images/4.jpg');
}
#five{
background-image:url('../images/5.jpg');
}
#six{
background-image:url('../images/6.jpg');
}
#one:hover,#two:hover,#three:hover,#four:hover,#five:hover,#six:hover{
opacity:1;
box-shadow: 0 0 0 8px white;
}

One approach is to use an svg element instead of a div to animate the border (stroke) using stroke-dashoffset and stroke-dasharray.
http://jsfiddle.net/zLuercaa/

Make
margin:0;
and then add a real border to each div
border: 4px solid blue;
and then on :hover you can change the border color.

Simply add transition-duration: 0.4s; or whatever time you want to your divelements.
body {
background-color: black;
}
#one,
#two,
#three,
#four,
#five,
#six {
background-image: url('http://lorempixel.com/400/300');
max-height: 400px;
background-color: grey;
margin: 4.5px;
height: 60vh;
width: 417px;
max-width: 417px;
float: left;
background-size: cover;
opacity: .9;
text-align: center;
transition-duration: 0.4s;
}
#one:hover,
#two:hover,
#three:hover,
#four:hover,
#five:hover,
#six:hover {
opacity: 1;
box-shadow: 0 0 0 8px white;
}
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>

Develop Reference

JavaScript is the programming language of the Web.

jQuery delay stops working after first two "arguments(?)" - javascript

you need to add this line: $(this).dequeue(); in every queue callback function, after you call toggleClass function.

Related

how to make button stay pressed down until pressed again

Divs are moving around when resizing/zooming-in/out page

Disable input when no item got specific class name

Beginner jQuery Themeroller Problems

Trace div on hover?

Categories

Resources