This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I am building a todo app. When I add a todo and then click on the todo item below, its text should be crossed (line-through) but its not happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
<title>Todo</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Todo</h1>
<div class="add">
<div class="text">
<input class="data" placeholder="Enter data">
</input>
</div>
<div class="submit">
<div class="submit-text">
Add
</div>
</div>
</div>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="script.js" ></script>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
}
.container{
width:600px;
margin:0 auto;
color:#000;
}
.header{
background:#dddddd;
height:200px;
}
.header h1{
color:#FFF;
font-size:50px;
text-align: center;
margin-top:0px;
}
.add{
height:50px;
background:#FFF;
border-left:1px solid #dddddd;
}
.text,.submit{
display:inline-block;
float:left;
}
.text{
width:70%;
height:100%;
}
.submit{
width:30%;
background:green;
height:100%;
font-size: 30px;
}
.data{
font-size: 30px;
/* margin-top: 10px; */
/* padding: 10px 0; */
padding-left: 10px;
width:100%;
border: none;
padding-top: 8px;
padding-bottom: 8px;
}
.submit-text{
/* margin-top: 10px; */
padding: 10px 0;
text-align: center;
color:#FFF;
}
.todorow{
width:100%;
height:50px;
font-size: 30px;
padding-top:10px;
background:#000000;
color:#FFF;
}
.todoitem{
width:95%;
float:left;
display:inline-block;
}
.todoremove{
width:5%;
float:left;
display:inline-block;
}
.strike{
text-decoration: line-through;
}
JS:
console.log("loads");
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(".todoitem").on("click", "#__internal", function(){
$(".todoitem").addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
Fiddle
Your fiddle was not working because $ was not defined, but I've fixed it and managed to find the error. You subscribing to .todoitem selector, when there are no todo items. Years ago we used .live() as a workaround, but now we use even simpler syntax.
$(document).ready(function(){
$(".submit").click(function(){
// if (document.getElementsByClassName("data")[0].innerHTML >0)
//{
var value = "<div class='todorow'><div class='todoitem'>"+$('.data').val()+"</div><div class='todoremove'>X</div></div>";
$(".container").append(value);
//}
});
$(document).on("click", ".todoitem", function(){
$(this).addClass("strike");
alert("done");
console.log("done");
});
console.log("loads");
});
So basically you add handler to document with delegated event. You can read more using this link http://api.jquery.com/on/
Related
I'm having some troubles with Javascript. I'm not that advanced when it comes to programming in Javascript, so I'm having a tough time.
What I gotta do is making a calendar from scratch, the problem I have right now, is having my code to only display THIS WEEK, and only this week. then when pressed on the right arrow, it should display the next week, or when pressed on the left arrow, it should display the next before.
Everything is made local.
Everything on the site itself, is in Danish, but I've commented in english, and named the variables in english, so dont worry about all the output text.
here's some code
!! UPDATE !!
JSFIDDLE https://jsfiddle.net/b6n3d36a/
the days wont display at all, please help
** !! UPDATE 2 !!*
I fixed it. I got help from a co-worker. We got it working.
Thanks to everyone looking into this.
THE INDEX FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" />
<title>Nikolaj kalender</title>
<script src="js/libs/handlebars/handlebars-v4.0.5.js"></script>
<script src="js/libs/moment/moment-with-locales.js"></script>
<script src="js/libs/jquery-1.12.4.min.js"></script>
<script src="js/core.js"></script>
<!-- RESPONSIVE STYLESHEET -->
<link rel="stylesheet" href="style/responsive/responsive.css">
<!-- STANDARD STYLE SHEET -->
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<script>
$(document).ready(function () {
moment.locale('da'); //danish language
startdate = moment("2016-06-07"); //todays date (yy-mm-dd-h:i:s) not sure if right format thought
var new_date = moment(startdate, "DD").add(5, 'days');
var day = new_date.format('ddd');
// var month = new_date.format('MM');
// var year = new_date.format('YYYY');
var dataSet = {
dates: []
}
var today = moment();
var todayDay = today.format('ddd'); // get TODAY date (ex; 2nd)
function generateDaterange() {
var start = new Date();
var dates = [];
for (var i = 0; i < 7; i++) {
var d = new Date(start.getTime());
d.setDate(d.getDate() + i);
console.log(d);
var date = {
date: d,
date_human: moment(d).format('ddd'),
date_humanDays: moment(d).format('Do')
//date_human_today: moment(d).text("hello")
}
dates.push(date);
}
console.log(dates);
console.log("heroppe ovenover")
dataSet.dates = dates;
}
// var dataSetToday = dataSet[0]; //todays date in our array
// var val_to_replace = ","; //this is what has to be replaced
// var replace_with = "--"; //this is what shall be there instead
// $.each(dataSetToday, function(key, val){
// dataSetToday[key] = val.replace(val_to_replace, replace_with);
// }
// console.log(dataSetToday);
function init() {
generateDaterange();
buildDaterange();
}
init();
function buildDaterange() {
console.log('build')
$.each(dataSet.dates, function (k, v) {
var title = String(v.date_human).substr(0, 1);
if(dateIsToday(new Date(), v.date))
title = 'I DAG';
$('.cal_header thead th').eq(k).text(title)
$('.cal_header tbody td p').eq(k).text(v.date_humanDays)
})
}
var startweek = moment().startOf('isoWeek');
var endweek = moment().endOf('isoWeek');
console.log("herunder er slut for ugen");
console.log(endweek);
function dateIsToday(date_a, date_b){
return (
date_a.getDate() == date_b.getDate() &&
date_a.getMonth() == date_b.getMonth() &&
date_a.getFullYear() == date_b.getFullYear()
)
}
function thisWeek(date_c, date_d){
}
});
</script>
<div class="create_form">
</div>
<div id="wrapper">
<div id="header_for_cal">
<div id="back_btn"><p><span> < </span>Tilbage</p></div>
<div id="cal_header_title"><h3>Kalender</h3></div>
<div><p>+</p></div>
<div class="clear"></div>
</div>
<div class="contentForDate">
<div class="dateHeader">
<img src="images/content/header.jpg">
</div>
<div class="date_content">
<div>
<h3>Svømmehal</h3>
<p>Aarup Svømmehal</p>
</div>
<div>
<p>Tirsdag, 13 Juni, 2016</p>
<p>10:00 - 12:00</p>
</div>
<div>
<p>
ge Lorem Ipsum er, at teksten indeholder mere
eller mindre almindelig tekstopbygning
i modsætning til "Tekst her – og mere tekst her", mens det samtidigt ligner almindelig tekst.
Mange layoutprogrammer og we
</p>
</div>
</div>
</div>
</div>
<div class="cal_header">
<div id="left_arrow">
<p> < </p>
</div>
<div class="calendar">
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
</tr>
</tbody>
</table>
</div>
<div id="right_arrow">
<p> > </p>
</div>
</div>
<div class="activities">
<ul id="swimming">
<li class="activi_time">KL 09:00</li>
<li class="activi_title">Svømmehal
<p class="title_sub">Aarup Svømmehal</p></li>
</ul>
<ul>
<li class="activi_time">KL 10:00<p class="time_sub">KL 10:30</p></li>
<li class="activi_title">Vaske tøj</li>
</ul>
<ul>
<li class="activi_time">KL 13:00</li>
<li class="activi_title">Lav Té</li>
</ul>
<ul>
<li class="activi_time">KL 22:00</li>
<li class="activi_title">Godnat</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<ul>
<li>
<img src="images/icons/calendar.png">
<p>Kalendar</p>
</li>
<li>
<img src="images/icons/walkthrough.png">
<p>Gennemgange</p>
</li>
<li>
<img src="images/icons/food.png">
<p>Mad</p>
</li>
<li>
<img src="images/icons/activities.png">
<p>Aktiviteter</p>
</li>
<li>
<img src="images/icons/more.png">
<p>Mere</p>
</li>
</ul>
</div>
</body>
</html>
HERE'S THE CSS
*{
margin:0;
padding:0;
font-family:helvetica, arial, sans-serif;
}
body{
background-color:lightgrey;
}
.clear{
clear:both;
}
#wrapper{
overflow:hidden;
max-width:100%;
}
.contentForDate{
width:100%;
max-width:100%;
position:absolute;
background-color:white;
right:-100%;
z-index:9999;
}
.date_content{
padding:0px 10px;
}
.contentForDate .dateHeader img{
min-width:100%;
max-width:100%;
}
.contentForDate div{
max-width:100%;
margin-bottom:20px;
}
.contentForcccDate div:nth-of-type(2){
display:flex;
justify-content: space-between;
}
.contentForDate div:nth-of-type(2) p{
max-width:100%;
color:grey;
font-size:14px;
}
.contentForDate div:nth-of-type(3) p{
color:grey;
margin-top:7px;
max-width:90%;
}
.cal_header{
width:100%;
min-height: 10px;
background-color: #efeff4;
display:flex;
justify-content:space-between;
position:relative;
overflow:hidden;
}
.activities ul{
background-color:white;
list-style:none;
border-bottom:2px solid lightgrey;
z-index:8;
}
.activities ul li{
display:inline-block;
font-size:15px;
position:relative;
}
.activities ul li:first-of-type{
margin-left:35px;
padding:10px 10px 25px 0px;
border-right:2px solid #0273b2;
z-index:99;
}
.activities ul li p{
font-size:12px;
position:absolute;
width:100px;
}
.timerange li{
display:block ;
float:left;
}
table {
width: 100%;
border-collapse: collapse;
border:none;
}
/* Zebra striping */
tr:nth-of-type(odd) {
}
th {
background-color: #f6f6f6;
padding:12px;
text-transform: uppercase;
font-weight:lighter;
}
tbody tr{
border-top:1px solid grey;
}
td{
width:20px;
}
td {
padding: 6px;
text-align: center;
font-weight: lighter;
font-size:14px;
}
td.currentDay{
color:gray;
}
td p{
padding:7px;
width:20px;
margin:0 auto;
}
p#selectedDate{
background-color: #0273b2;
color:white;
border-radius: 50%;
}
.calendar{
width: 100%;
}
#left_arrow, #right_arrow{
width:40px;
background-color:darkgrey;
position:relative;
}
#left_arrow p, #right_arrow p{
position:absolute;
top: 35%;
left: 40%;
color:white;
font-weight:lighter;
}
#header_for_cal{
display:flex;
width:100%;
background-color:#0273b2;
color:white;
font-weight:lighter;
padding:20px 0;
z-index:99999;
}
#header_for_cal h3{
font-weight:lighter;
display:inline-block;
font-size:21px;
}
#cal_header_title{
flex-grow: 1;
}
#cal_header_title {
text-align:right;
}
#header_for_cal div:nth-of-type(2){
flex-grow:1;
}
#header_for_cal div:nth-of-type(3){
flex-grow: 1;
}
#header_for_cal div:nth-of-type(3) p{
float:right;
}
#header_for_cal p{
display:inline-block;
font-weight:lighter;
font-size:17px;
}
#swimming{
cursor:pointer;
}
#footer{
width:100%;
position:absolute;
bottom:0;
background-color:white;
border-top:2px solid grey;
}
#footer ul{
text-align:center;
}
#footer ul li{
display: inline-block;
padding:7px 10px;
margin:0px 4px;
color:#0273b2;
}
#footer ul li img{
max-width:35px;
}
HERE'S THE JQUERY CODE FOR SOME ANIMATED STUFF (NOT THAT IMPORTANT AT THIS MOMENT)
$(document).ready(function() {
$(".contentForDate").hide();
$(".cal_header p").click(function(e){
$('.cal_header p#selectedDate').removeAttr('id');
if($(e.target).is('.cal_header td p')){
$(this).attr('id', 'selectedDate');
}
});
$("#back_btn").hide();
$("#swimming").click(function(){
if ( $(".contentForDate" ).is( ":hidden")) {
$(".contentForDate").show(200);
var left = $('.contentForDate').offset().left;
$(".contentForDate").css({left:left}).animate({"left":"0%"}, "fast");
$("#back_btn").show();
}
});
$("#back_btn").click(function(){
if($(".contentForDate").css("display", "block")){
$(".contentForDate" ).hide(200);
$("#back_btn").hide();
}
});
});
Hope you can help me, I've ran out of ideas to what to do, and I've tried searching for it on here, but nothing seems to work. So here goes nothing :)
I am having issues coding a chat box program for a school project. I am having 3 problems with the program. First, my chat message does not post properly in my chat box. Secondly, I want to be able to click exit and have it close to window but am not completely sure how to do it. Lastly, I would like the chat to echo the message or to have ahard coded response at the least. I'm researching how to do that I'm not quite sure how to do this. I have a style sheet and html. Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
<link rel="stylesheet" type="text/css" href="jQuery.css">
//my issues seem to be in my Javascript between here************************************
<script type="text/javascript">
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val()
var old = $('#chatbox').html()
$('#chatbox').html(old + '<p>' + message + '</p>');
});
});
</script>
<script >
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
//and here*****************************************************************************
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome <b></b></p>
//Possible issue here*******************************************************************
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
</body>
</html>
Here is my css:
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
Some of the css is unnecessary I'm pretty sure but when I tried taking some out it caused issues. Any help is greatly appreciated.
try copying the following - i put the styling into the head, moved the javascript to the end, and swapped the input for a button. This is ties to the onclick and appends the new comment into the chat window. It works, but could be done better, also I have not addressed the issue of closing the window, but this does post the new comment into the chat region.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<style>
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome</p>
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message">
<input name="usermsg" type="text" id="usermsg" size="63" />
<button type="button" id="submitmsg" value="send">Send</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
});
});
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
</body>
</html>
one problem is that you are using a form that then posts to the same page - reloading it.
I copied your code into a testpage (called chatTest.html) and got the following url after hitting the send button:
chatTest.html?usermsg=test+message&submitmsg=Send
your message does get posted into the chat section but is then removed when the page reloads. and because you are not specifying a method - it is treating it as a get form and posting the message as a querystring appended to the url.
if you are planning on saving the comments to a database, then you should change the action of the form to a different php page, process the results and return the saved content into the chat section- perhaps using Ajax so that you don;t have to reload the page on every chat submission.
I wanna use colorbox for 'join us menu' but it isn't working.
and I also tried fancybox, and got a same result..
actually colorbox performed well until I add mootools v1.1 to my jsp code.
I dont know what is mootools v1.1. I just copy some source that from
some awesome website for
using scroll view effect(I dont know exactly what this effect's name) on my page
scroll view effect is working well. you can see that when you clicked 'append1,2,3'
sorry for my poor english skill.
here is my code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>
<script type="text/javascript">
$(function(){
$('.joinus').colorbox({
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Times New Roman', serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
#main_header{
width:1280px;
padding-left: 10px;
line-height:60px;
background: #59DA50;
color:#FFFFFF;
}
#main_bar{
overflow: hidden;
background: #EAEAEA;
}
#main_bar>ul.main_bar_left{
overflow: hidden;
float: left;
}
#main_bar>ul.main_bar_right{
overflow: hidden;
float: right;
}
#main_bar>ul.main_bar_left>li{
float:left;
}
#main_bar>ul.main_bar_right>li{
float:left;
}
#main_bar a{
display: block;
padding: 5px 20px;
border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{
background: #CEF279;
}
#main_bar input{
margin:5px;
width: 80px;
}
#main_footer{
width:1280px;
margin:0 auto;
margin-bottom: 10px;
background: #353535;
color: #FFFFFF;
text-align: center;
padding: 10px;
}
#main_content {
margin:0px;
overflow:hidden;
/*height:387px;
width:99,9%;*/
border:none;
position:relative;
}
#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}
.section_content {
width:990px;
height:380px;
position:absolute;
}
#section1 {
left:0px;
top:0px;
}
#section2 {
left:1570px;
top:0px;
}
#section3 {
left:2880px;
top:0px;
}
</style>
</head>
<body>
<header id="main_header">
<h1>Spring Builder</h1>
</header>
<nav id="main_bar">
<ul class="main_bar_left">
<li><a id="append1" href="#">append1</a></li>
<li><a id="append2" href="#">append2</a></li>
<li><a id="append3" href="#">append3</a></li>
</ul>
<ul class="main_bar_right">
<li><input type="text" value="id" id="id" name="id"/></li>
<li><input type="password" id="pw" name="pw"/></li>
<li>Login</li>
<li>Join us</li>
</ul>
</nav>
<div id="main_content">
<div id="main_content_bg">
<div id="section1" class="section_content">
<h1>section1</h1></div>
<div id="section2" class="section_content">
<h1>section2</h1></div>
<div id="section3" class="section_content">
<h1>section3</h1></div>
</div>
</div>
<footer id="main_footer">
</footer>
<script src="scrollstyle.js" type="text/javascript"></script>
</body>
</html>
It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:
jQuery(function(){
jQuery('.joinus').colorbox({
});
});
or wrap your code inside:
jQuery(function($) {
$('.joinus').colorbox({
});
});
Could you tell me why this js is working in Firefox and Chrome, but is not working in Internet Explorer? I am trying to solve that 3 days now, and I have no idea why it is not working. I would like this to be working at least on IE 8,9 and 10. I will be really happy if anyone would now how to fix this.
SCRIPT
$(document).ready(function() {
$('<img class="envtop" src="images/envtop.jpg" alt=" "/>').prependTo('#testimo li');
$('<img class="envbot" src="images/envbot.png" alt=" "/>').appendTo('#testimo li');
$('<img class="envshadow" src="images/shadow.png" alt=" "/>').appendTo('#testimo li');
$('.envelope').mouseover(function() {
$(this).find('.envtop').addClass('envani')
.end().find('.envbot').addClass('envani')
.end().find('.list').addClass('listani');
});
$(".envelope").mouseout(function() {
$(this).find('.envtop').removeClass('envani')
.end().find('.envbot').removeClass('envani')
.end().find('.list').removeClass('listani');
});
$('.envelope').click(function() {
$(this).find('.list')
.toggleClass("listmove");
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.33897.js"></script>
<script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<ul id="testimo">
<li class="envelope">
<div class="list">
<blockquote>XXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX XXXXXXXXXXXXX XXXXXXXXX XXXXXXXX XXXXXX</blockquote>
</div>
</li>
</ul>
</body>
</html>
CSS
.envelope {
width:300px;
height:150px;
position:relative;
padding: 120px 24px 0;
overflow: hidden;
float: left;
-webkit-transition:1s;
transition:1s;
cursor: pointer;
}
.list {
width:236px;
height:180px;
background:white;
padding: 30px 20px 0;
font-size: 16px;
-webkit-transition:1s;
position:absolute;
top:120px;
left:36px;
z-index:2;
-webkit-transition:0.8s;
transition:0.8s;
font-size: 16px;
background:gray;
}
.envtop {
position:absolute;
top:20px;
left: 24px;
z-index:1;
-webkit-transition:0.5s;
transition:0.5s;
}
.envbot {
position:absolute;
top:20px;
left: 24px;
z-index:3;
-webkit-transition:0.5s;
transition:0.5s;
}
.envani {
-ms-transform:rotate(6deg);
-webkit-transform:rotate(6deg);
transform:rotate(6deg);
left: 35px;
top: 10px;
}
.listani {
top:80px;
left: 45px;
}
.envshadow {
position: absolute;
bottom:0;
z-index: 4;
left: 0;
}
.listmove {
top:0px;
}
Can you check the given below jsfiddle link in IE10
LINK
Note : Where you wrote your js code?. Is it external js?. If it is internal(page itself) js you need to write javascript within <script type="text/javascript" language="javascript"> ... </javascript> tag.
Why does this keep happening?
I add a draggable element, move it into place and then it prepends and moves everything down or make the page huge? Is there a way I can make the div appear in the same place and not move the other elements on the page? This is driving me crazy!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="stylesheet.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2></h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<table><tr><td id="place"></td></tr></table>
</body>
</html>
JavaScript:
$(document).ready(function()
{
//$( '#draggable' ).draggable();
$('#button').click(function()
{
var toAdd = $('input[name=checkListItem]').val();
var $newdiv = "<div id='draggable'>" + toAdd + "</div>";
//$("#place").html($($newdiv).draggable());
$("#place").prepend($($newdiv).draggable());
});
});
CSS:
#draggable {
z-index:1;
width: 100px;
height: 100px;
background: #ccc;
}
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button{
display:inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
#item {
font-family:garamond;
color:#000000;
width:90%;
height:800px;
background-color:#cc0000;
}
#place {
z-index:1;
font-family:garamond;
color:#000;
width:800px;
height:800px;
background-color:#f00;
}
Cheers in advance!!!!
Here is the fully working code: jsFiddle: http://jsfiddle.net/ycgmt/
Changes:
1: <div> instead of <table>
2: append() instead of prepend()
3: class instead of id
4: position:absolute
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<h2></h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div id="place"></div>
</body>
</html>
CSS
.draggable {
width: 100px;
height: 100px;
background: #ccc;
position:absolute;
}
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button{
display:inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
#item {
font-family:garamond;
color:#000000;
width:90%;
height:800px;
background-color:#cc0000;
}
#place {
z-index:1;
font-family:garamond;
color:#000;
width:800px;
height:800px;
background-color:#f00;
}
JS
$(document).ready(function()
{
$('#button').click(function()
{
var toAdd = $('input[name=checkListItem]').val();
var newdiv = $("<div class='draggable'>" + toAdd + "</div>");
$("#place").append(newdiv);
$(newdiv).draggable();
});
});