I am trying to set up a grid view for a widget I'm building with angular matirial.
Basically I want a side bar with fixed width on the left, and on the right the content with three sections in a column: a header with fixed height (60px), a content which should fill the widget, and a footer with fixed height (60px);
Here is a plunker I have setup.
Plunker
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layot="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layot="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
JS:
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
Right now my content view does not appear at all (width of 0). I think I am missing something with angular material, but what?
Also I added draggable and resizable options from jquery-ui but I dont think that is the problem.
Thanks for the help.
Edit 1:
Just a typo, the plunker is fixed and working, hope it would help someone.
You made a typo.
In the div which has class my-main change layot="column to layout="column". The same mistake is made in the div which has class my-sidebar.
angular.module("main", ["ngMaterial"]);
angular.module("main")
.run(function (){
$("#widget").draggable();
$("#widget").resizable();
});
*{
direction: rtl;
}
.widget-container{
position: absolute;
top:20%;
left: 30%;
width: 40%;
height: 40%;
}
.box-shadow{
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.my-main{
width: 100%;
}
.my-header{
background-color: brown;
width:60px;
}
.my-content{
background-color: blue;
}
.my-footer{
background-color: chartreuse;
width:60px;
}
.my-sidebar{
width: 60px;
background-color: aqua;
}
<!DOCTYPE html>
<html ng-app="main">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="widget" class="widget-container box-shadow">
<div layout="row" layout-fill flex>
<div class="my-main" layout="column" layout-fill flex>
<div class="my-header" ></div>
<div class="my-content" flex></div>
<div class="my-footer" ></div>
</div>
<div class="my-sidebar" layout="column" ></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
I've all my CSS and Javascript inside my HTML file on Django which looks as follows:
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
<style type="text/css">
.toggle-btn {
position:absolute;
left:180px;
top:70px
}
.toggle-btn span {
display:block;
width:30px;
height:5px;
background:#000000;
margin: 5px 0px;
}
.sidebar {
height:100%;
width:160px;
position: fixed;
z-index:1;
top:0;
let:0;
background-color:#111;
overflow-x: hidden;
padding-top:70px;
}
.sidebar.active {
left:0px
}
.sidebar a {
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:18px;
color: #818181;
display:block;
}
.sidebar a:hover {
color:#ffffff;
}
</style>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="#">Home.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Logout</a>
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<h1>Centered Text</h1>
</div>
</section>
</header>
</body>
</html>
I wanted to toggle the sidebar, that means triggering a hide function when someone clicks on the hamburger menu indicated by the spann tag, as you can probably tell by the following:
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
So far it's not working yet as excepted, given that I'm an absolute beginner to CSS & Javascript. I would be super appreciative if someone could point out the things I might have done wrong.
In CodePen
I could fix the toggle functionality, hope this helps:
function toggleSidebar() {
var x = document.getElementsByClassName("sidebar")[0];
if(x.classList.contains('active')) {
x.classList.remove('active')
return;
}
x.classList.add('active')
}
if you check the sidebar div you'll see that class is being added and removed on toogle
You can use jQuery's toggle method. You need to have an onclick event on your .toggle-button with the name of your method (toggleSidebar), so it knows to call it when it's clicked.
You can also add an EventListener to your button instead of onclick.
.toggle-btn {
position: absolute;
left: 180px;
top: 70px;
}
.toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000000;
margin: 5px 0px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 70px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
function toggleSidebar() {
$(".sidebar").toggle();
}
</script>
</head>
<body>
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
My jQuery .resizable is not working.
It gives error :
TypeError: $(...).resizable is not a function ;
My code is:
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="httpS://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#main").resizable("enable");
});
</script>
</head>
<body>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content"></div>
</div>
</div>
</body>
</html>
This snippet is working.
Look for the CDNs used here... And look for the order to load them too.
$("#main").resizable();
#main{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="main" id="main">
<div class="header"></div>
<div class="innerMain">
<div class="content">
You can resize me!
</div>
</div>
</div>
You might be missing jquery ui css and js :
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Add jquery-ui.js library and remove enable from resizable function
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#main" ).resizable();
} );
</script>
<html>
<head>
<meta charset="utf-8">
<title>resizable</title>
<!--div is used to style block element,span are used to group inline elements-->
<style>
.bluebox{
background-color:#415E9B;
font-size: 20px;
color: white;
height: auto;
}
.blackbox{
background-color: #0C0C0C;
font-size: 20px;
color: white;
height: 100px;
}
.greybox{
background-color:rgb(161, 54, 165);
font-size: 20px;
color: white;
height: 100px;
}
.great{
background-color: yellowgreen;
color: teal;
}
.news{
background-color:palevioletred ;
columns: auto 1px;;
height: auto;
}
.org{
background-color: peru;
color:red;
height: auto;
}
#fb{
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="bluebox" id="fb">
<p>facebook is <span class="great">great</span></p></div>
<div class="blackbox">
<p>BBC is a <span class="news">> newschannel</span></p></div>
<div class="greybox">
<p>UEFA is a football<span class="org">organization</span></p></div>
<script>
$(function(){
$("#fb").resizable({
maxheight : 200,
maxwidth : 300,
minheight: 50,
minwidth:50
});
});
</script>
</body>
</html>
we have to check the sequence of our cdns:
correct sequence:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<linkrel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
i was doing the opposite putting jquery-ui above jquery.min ...
issue is resolved now
I've two separate div's with angular-material tabs (md-tabs). Using angular drag and drop library, I'm trying to drag the content (button) from one Tabs to another. But while dragging, the button is moving along with the same div. i.e., the button is hiding after it reaches the border (overflow).
If I try to do the same with normal div, it is working fine.
I try to change the position and z-index of the button, but it didn't work properly.
The code details is below. Demo
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDragDrop'])
.controller('AppCtrl', function($scope) {
$scope.list1 = {
title: 'md-tab - Dragd-me'
};
$scope.list2 = {};
$scope.list3 = {
title: 'Drag Me'
};
$scope.list4 = {};
});
.tabsdemoDynamicHeight md-content {
background-color: transparent !important; }
.tabsdemoDynamicHeight md-content md-tabs {
background: #f6f6f6;
border: 1px solid #e1e1e1; }
.tabsdemoDynamicHeight md-content md-tabs md-tabs-wrapper {
background: white; }
.tabsdemoDynamicHeight md-content h1:first-child {
margin-top: 0; }
#md-tab1{
width: 400px;
padding: 25px;
border: 1px dotted blue;
}
#md-tab2{
width: 400px;
padding: 25px;
border: 1px dotted red;
}
.thumbnail { height: 280px !important; }
.btn-droppable { width: 180px; height: 30px; padding-left: 4px; }
.btn-draggable { width: 160px; }
.emage { height: 215px; }
._md {
overflow: hidden;
}
/* #btn1 {
display: fixed !important;
z-index: 9999;
} */
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css" rel="stylesheet" />
<link href="https://material.angularjs.org/1.1.3/docs.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script src="https://cdn.rawgit.com/codef0rmer/angular-dragdrop/master/src/angular-dragdrop.js"></script>
<div ng-cloak="" class="tabsdemoDynamicHeight" ng-app="MyApp" ng-controller="AppCtrl">
<h1>With md-tab</h1>
<div style="display: inline-flex;">
<md-content id="md-tab1">
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Move the button to the next tab.</p>
<div id="btn1" class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{animate:true}" ng-hide="!list1.title">{{list1.title}}</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
<md-content id="md-tab2">
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list2" jqyoui-droppable style='height:50px;'>
<div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list2.title">{{list2.title}}</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
<h1>With-out md-tab</h1>
<div style="display: inline-flex;">
<div id="md-tab1">
<p>Move the button to the next tab.</p>
<div class="btn btn-primary" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="list3" jqyoui-draggable="{animate:true}" ng-hide="!list3.title">{{list3.title}}</div>
</div>
<div id="md-tab2">
<h1 class="md-display-2">Tab Two</h1>
<div class="thumbnail" data-drop="true" data-jqyoui-options ng-model="list4" jqyoui-droppable style='height:50px;'>
<div class="btn btn-success" data-drag="false" data-jqyoui-options ng-model="list2" jqyoui-draggable ng-hide="!list4.title">{{list4.title}}</div>
</div>
</div>
</div>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
Appreciate your support to fix this.
this is css issue, try to add
._md, md-tab-content #md-tab1 .md-no-scroll,#md-tab1 md-tabs,md-tab-content.md-no-scroll {
overflow: visible !important;
}
#md-tab2 md-tab-content,#md-tab2 md-tabs-content-wrapper,md-tabs.md-dynamic-height md-tabs-content-wrapper {
z-index: 1;
}
Here's the JSfiddle: http://jsfiddle.net/mostthingsweb/cRayJ/1/
I'll include my code and then explain what's wrong
Here's my HTML header to show that everything should be linked:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
Here's the CSS:
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
Here's the JS:
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
So the grid will launch and the paragraph will be there, however if I try to drag it, it won't work. When I inspect the page it gives me an error saying: "Uncaught TypeError: undefined is not a function" that points to line 2 of my JS code. What am I doing wrong?
Here's the whole HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<script src='test.js'></script>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
</body>
</html>
I pasted the code you've submitted into a local HTML file and it works fine for me (I did not add the test.js but pasted the code in script tags just before the closing body tag.
Here's the entire file (tested in Chrome only)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='test.css'/>
<style type="text/css">
.draggable {
width: 80px;
height: 80px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 140px;
}
body, html {
background: url('http://i.imgur.com/FBs3b.png') repeat;
}
</style>
</head>
<body>
<div class="demo">
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable5").draggable({
grid: [80, 80]
});
});
</script>
</body>
I think the problem might be that you're loading jquery and your js files in the head of your code. When it reads your js, it's looking for $(#draggable5), but draggable5 hasn't loaded yet, so it's an empty selector. Try moving your scripts to just before the close of your body element.
I'm trying to create a register/login overlay for users although when trying to use the JQuery .toggle() I have no luck. I can't see any obvious issues and any minor tweaks I've made have been unsuccessful.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle(slow);
});
});
</script>
</body>
CSS:
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
Check it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/>
<style>
.register {
background: #fff;
padding: 15px;
position: absolute;
width: 220px;
border: 2px solid #f1f1f1;
-moz-box-shadow: 0 0 5px #f1f1f1;
-webkit-box-shadow: 0 0 5px#f1f1f1;
box-shadow: 0 0 5px #f1f1f1;
top: 50px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-container">
<b>Photography</b><beta>BETA</beta>
<div class="nav-options">
<i class="icon-user"></i>Register
<ul class="register">
Username
<input type="text"/>
Password
<input type="text"/>
<button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button>
</ul>
User CP
Images
Home
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.register').hide();
$('#toggle-reg').click(function() {
$('.register').toggle('slow');
});
});
</script>
</body>
You are calling .toggle() with an undefined variable called slow:
$('.register').toggle(slow);
You need to pass the string "slow":
$('.register').toggle("slow");
And you may need to cancel the default click behaviour and/or change the link's href="" to href="#":
$('#toggle-reg').click(function(e) {
$('.register').toggle("slow");
e.preventDefault();
});
Demo: http://jsfiddle.net/PDaej/1