afryingpan
Reputation: 363
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><a href="#tabs-1">Home</a></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.
Upvotes: 0
Views: 54
Answers (1)
afryingpan
Reputation: 363
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>
Upvotes: 0
Related Questions
- widget used in jquery themeroller?
- jQuery UI ThemeRoller Developer Tool
- Page not loading custom jQuery UI Theme
- Using jQuery UI Themeroller together with a custom jQuery UI widget?
- Trouble with Jquery widget
- jqueryui themeroller
- jquery theme builder question
- jQuery UI Themeroller Question
- jQuery-ui themeroller base2.css
- jQuery UI ThemeRoller - Installing themes