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
Related
I'm having trouble getting a simple panel hide script to work. It works for MLAWebsite's panel, but when I click the MLAJournal button nothing happens? I've tried everything I can think of and looked at it for quite a bit now and can't seem to figure it out.
Relevant JQuery and HTML:
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
$("btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>
You're missing a # there.
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
put # on $("btnMLAJournal").click(function(){
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>
You have given the id btnMLAJournal to your button and calling element from id in jquery requires # with id which in your case is missing.
just add # to your id in jquery and it will work fine
$(document).ready(function(){
//var currentStep = 0;
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").hide();
//# is added here
$("#btnMLAJournal").click(function(){
$("#MLAWebsitepanel").hide();
$("#MLAJournalpanel").show();
//currentStep = 1;
});
$("#btnMLAWebsite").click(function(){
$("#MLAJournalpanel").hide();
$("#MLAWebsitepanel").show();
//currentStep = 2;
});
});
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="Code.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.branding-below {
bottom: 56px;
top: 0;
}
.branding-text {
left: 7px;
position: relative;
top: 3px;
}
.col-contain {
overflow: hidden;
}
.col-one {
float: left;
width: 50%;
}
.logo {
vertical-align: middle;
}
.radio-spacer {
height: 20px;
}
.width-100 {
width: 100%;
}
</style>
</head>
<body>
<div class="sidebar branding-below">
<input id="btnMLAJournal" type="button" value="MLA Journal"></input>
<input id="btnMLAWebsite" type="button" value="MLA Website"></input>
<div id="MLAJournalpanel" class="panel">
<div class="panel-body">
<h2>MLA Journal</h2>
</div>
</div>
<div id="MLAWebsitepanel" class="panel">
<div class="panel-body">
<h1>dadadda</h1>
<p>surprise!"</p>
</div>
</div>
</div>
</body>
</html>
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>
<head>
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="index.js">
</script>
This is named as index.html with jquery ui and my js script
The following is the index.js code in which the effect explode is not working
$(document).ready(function(){
$('#breg').click(function(){
$('#breg').effect('explode');
});
});
And the following code with the fadeIn slow property is also not working
$(document).ready(function(){
$('#breg').click(function(){
$('#breg').fadeOut('slow');
});
});
I'm not exactly sure what you're going for here but here is something that works using the UI features you mention above:
DEMO
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style>
#breg {
width: 200px;
height: 200px;
background: red;
cursor: pointer;
}
#breg2 {
width: 200px;
height: 200px;
background: blue;
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('#breg').click(function(){
$(this).effect('explode');
});
$('#breg2').click(function(){
$(this).fadeOut('slow');
});
$('button').click(function () {
$('#breg').fadeIn('slow');
$('#breg2').fadeIn('slow');
});
});
</script>
</head>
<body>
<div id="breg"></div>
<div id="breg2"></div>
<button>Reset</button>
</body>
</html>
I want to change color of icon in header from some button click.
I was able to put some color on icon using below CSS: #myhead:after {
background-color: #ff4d4d;
}
But i am not able to change its color from some button click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
/* #id Products */
#myhead:after {
background-color: #ff4d4d;
}
</style>
<script>
function changecolor()
{
$('#myhead:after').css("background-color", "green");
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
<h3>Filter</h3>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
You can't manipulate css:after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. So you need to create custom circle icon.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.change-color {
background-color: #ff4d4d;
border-radius: 50%;
width: 20px;
height: 20px;
float: right;
margin: -30px 10px 0px 0px;
}
</style>
<script>
function changecolor() {
$('#myhead').css('background-color', 'green');
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class="">
<h3>Filter</h3>
<div class="change-color" id="myhead"></div>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
Change the CSS as below
#myhead h3 {
background-color: #ff4d4d;
}
And change the JS as below
$('#myhead h3').css('background-color', 'green');
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.