Really noob question, but I don't understand what am I doing wrong here ?
<head>
<link rel="stylesheet" type="text/css" href="gridstack.js/dist/gridstack.css">
</head>
<body>
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"> azazfaz</div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>
<script type="text/javascript">
$(function () {
var options = {
cell_height: 80,
vertical_margin: 10
};
$('.grid-stack').gridstack(options);
});
</script>
I get this error:
gridstack.js:391 Uncaught TypeError: undefined is not a function
pointing to this line in gridstack:
var is_nested = this.container.closest('.' + opts.item_class).size() > 0;
EDIT:
I found the problem, if I replace this lines
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
by
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
then it works , any idea why ?
As a workaround, you can do the following to make gridstack work when the size() function doesn't exist:
$.fn.size = function(){
return this.length;
};
jQuery 3.0 removes the jQuery.fn.size method. It's probably safer to just stick with 1.11.x when using this library.
https://github.com/jquery/jquery/issues/1749
(BTW I actually get this.container.closest(...).size is not a function as the reported error).
You can use jQuery 3.0 and above if you make an edit to gridstack.js as suggested by https://api.jquery.com/size/
Change Line 511 in gridstack.js (version 0.2.5) from:
var isNested = this.container.closest('.' + opts.itemClass).size() > 0;
to
var isNested = this.container.closest('.' + opts.itemClass).length > 0;
and gridstack works fine.
Related
I am trying to build an HTML page with Adaptive Card Designer.
I am following the instructions, using the CDN approach per this documentation:
https://www.npmjs.com/package/adaptivecards-designer
Any input is appreciated. Thanks a lot! :)
It is throwing the following error:
Uncaught ReferenceError: ACDesigner is not defined
My HTML file is the following:
<html>
<head>
</head>
<script src="https://unpkg.com/adaptivecards#latest/dist/adaptivecards.min.js"></script>
<script src="https://unpkg.com/adaptive-expressions#4/lib/browser.js"></script>
<script src="https://unpkg.com/adaptivecards-templating#latest/dist/adaptivecards-templating.min.js"></script>
<script src="https://unpkg.com/markdown-it#8.4.0/dist/markdown-it.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script type="text/javascript">
window.onload = function () {
let hostContainers = [];
let designer = new ACDesigner.CardDesigner(hostContainers);
designer.assetPath = "https://unpkg.com/adaptivecards-designer#latest/dist";
require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor#0.17.1/min/vs' } });
require(['vs/editor/editor.main'], function () {
designer.monacoModuleLoaded();
});
designer.attachTo(document.getElementById("designerRootHost"));
};
</script>
<body>
<div id="designerRootHost"></div>
</body>
</html>
monaco-editor has impacts on the process of loading modules, please change the order and load adaptivecards-designer first
<!-- <script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer.min.js"></script> -->
<script src="https://unpkg.com/adaptivecards-designer#latest/dist/adaptivecards-designer-standalone.min.js"></script>
<script src="https://unpkg.com/monaco-editor#0.17.1/min/vs/loader.js"></script>
I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>
Trying to add content into individual div-containers I stumbled on the command .innerHTML, which I tried to implement accordingly. Strangely I get the following error:
*Uncaught TypeError: Cannot read property 'innerHTML' of null *
I'm running the code over my local Apache server if that makes any difference.
index.html
<html>
<head>
<title>Welcome</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
</body>
</html>
javascript.js
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
Put it in window.onload
window.onload = function()
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
}
The element has to be present in the DOM, before you can access it in JS
You have to ensure that your DOM elements have loaded before accessing them with javascript.
Since you are using jquery, your javascript can simply be
$(function() {
var $navidiv = $('#left');
$navidiv.html($navidiv.html() + 'FirstElement');
});
try this
html
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
javascript.js
$( document ).ready(function() {
var navdiv=$("#left").html();
$("#left").html(navdiv+"FirstElement");
});
see DEMO
I have following code where I am trying to load values into a dropdown from an array(from file page students.js):
student.js
var STU_NAME = 0;
var STU_ID = 1;
var STU_AGE = 2;
var STUDENTS = [
["Apple", 1, 15],
["Billy", 2, 16]
["Cathy", 3, 14]
];
Functions.js
var jQ = $.noConflict();
function populateStudents() {
jQ('#students').empty();
jQ('#students').append(jQ("<option></option>").attr("value", "").text("-- Please Select --"));
for (var _i = 0; _i < students.length; _i++) {
jQ('#students').append(jQ("<option></option>").attr("value", _i).text(STUDENTS[_i][STU_NAME]));
}
}
jQ(document).ready(function () {
populateStudents();
});
mypage.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="model">
<form>
<div>
<div id="StudentLabel">
Student:
</div>
<select id="students" name="students">
</select>
</div>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</form>
</div>
</body>
</html>
I get an error "Microsoft JScript runtime error: '$' is undefined" at line 1 of Functions.js
Can anyone help me on what I would be missing to make it working here.
You have forgotten to add the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
It is highly recommended to use CDN version of jquery to improve pagespeed,check this link
You need to include jquery library, you can download from here Add the script tag in head of page or before you use jquery.
<head runat="server">
<title></title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript" src="JS/jquery-1.7.2.js"></script>
<script src="../Scripts/Functions.js" type="text/javascript"></script>
<script src="../Scripts/student.js" type="text/javascript"></script>
</head>