I want to be able to utilise #mention capability when inputting text into a form field. I have found the exact code to do it from this site jFiddle and it's awseom when you do it in there.
However, when I try to create an HTML page that incorporates the HTML and JavaScript together, it doesn't work, see below. Firstly, I had to go and find the complete link for jquery-3.2.1 because it couldn't be found and errored in console. Now it doesn't error but also doesn't work.
Where it says "any my favourite city is" you can type an # and then options London, Stuttgart and Köln should display which is triggered by the script.
<html>
<head>
<div id="inputcity" contenteditable="true">and my favourite city is </div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
// Initialize city field within content editable
$('#inputcity').atwho({
at: "#",
data:['London', 'Stuttgart', 'Köln']
});
</script>
</head>
</body>
</html>
You need to add this scripts to your code:
<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />
<!-- jquery.js -->
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>
Here's working example.
<div id="inputcity" contenteditable="true">and my favourite city is </div>
<link rel="stylesheet" href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.min.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.min.js"></script>
<script>
// Initialize city field within content editable
$('#inputcity').atwho({
at: "#",
data: ['London', 'Stuttgart', 'Köln']
});
</script>
Because of the package you're using (At.js) is not maintained anymore you could use tribute package.
Your code contained a couple of syntax errors (unclosed tags, mostly). I cleaned it up and cobbled this together:
<html>
<body>
<div id="inputcity" contenteditable="true">and my favourite city is </div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.4.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ichord/At.js#master/dist/css/jquery.atwho.min.css">
<script src="https://cdn.jsdelivr.net/gh/ichord/At.js#master/dist/js/jquery.atwho.min.js"></script>
<script>
// Initialize city field within content editable
$('#inputcity').atwho({
at: "#",
data: ['London', 'Stuttgart', 'Köln']
});
</script>
</body>
</html>
Two caveats, though: At.js is unmaintained, and relying on the version on the master branch is something I did for convenience. In production, you'd use something that is supported (the author recommends ZURB Tribute), and use a proper package manager.
Related
I am at my wits end with linking a javaScript file to my main.html, they are both in the same folder.
I have viewed multiple Stack overflow topics regarding this question, and for some reason none of the solutions solve my answer.
My current code is what I have below:
[main.html]
<!DOCTYPE html>
<head>
<link rel="javascript" href="jsfile.js">
<title>JavaScript</title>
</head>
<body>
<div class="Header">
<h1>JS Basics</h1>
</div>
</body>
[jsfile.js]
document.write("Hello World");
This code does not display the "Hello World" message, however if i insert the code directly into the HTML file it does.
I appreciate any and all help on this matter.
Add like following not with link.
<script type="text/javascript" src="jsfile.js"></script>
Just type:
<script src="yourJavascriptFilename.js"></script>
Most importantly add this line to the bottom of your body tag to avoid your browsing requesting JavaScript to be loaded before displaying your HTML.
You're using the incorrect link for JavaScript.
Try using this instead
<script src="jsfile.js"></script>
I am fairly new to CSS and javascript. I have been trying to implement the Tagging system as provided in Taggle.js (http://sean.is/poppin/tags).
Using this script :
<html>
<body>
Hello!! <br>
<form id="form1" action="http://127.0.0.1:5000/post">
<fieldset>
Tags:
<div id ="freeTags" ></div>
<p id='tag'></p><br><br>
</fieldset>
</form>
<script src="./node_modules/taggle/assets/js/taggle.js"></script>
<script>
var text = document.getElementById('tag');
new Taggle('freeTags', {
onTagAdd: function(event, tag) {
text.innerHTML = "You just added " + tag;
},
onTagRemove: function(event, tag) {
text.innerHTML = "You just removed "+ tag;
},
duplicateTagClass : "bounce"
});
</script>
</body>
</html>
I am unable to get the same effect as on the website (fancy text box) instead what I have been getting is this:
And it is also not implementing the 'bounce' function although I installed bounce.js using bower.
I think it must be the issue of CSS linkage to HTML. Can any one help in untangling this issue?
The documentation for taggle says the bounce effect is handled by the taggle.css file ... which your code example above doesn't include. Suggest this file also deals with styling of the elements youve said are missing. So just link this file in your document and re - test.
Find the CSS file in the repo you link to above the folder assets/css/ (find here), and save either taggle.css or taggle.min.css (for production) to your server and add the following to your page immediately after the <html> opening tag...
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/taggle.min.css">
</head>
<body>
<!-- your content... -->
</body>
</html>
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
When we use web based email, in the To: text box when we add a new email address , it will be added with a small 'x' icon at right or top and we can remove that by clicking the cross icon, is there any (jQuery) plugins or plain JavaScript snippets available to accomplish such a kind of stuff.
You could take a look at :
http://aehlke.github.com/tag-it/
and
http://webspirited.com/tagit/
See this demo the code is here
Sample usage:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="yourfiles/jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css" href="yourfiles/token-input.css" />
<script type="text/javascript">
$(document).ready(function () {
$("#my-text-input").tokenInput("/url/to/your/script/");
});
</script>
Here's the scene:
The webpage doesn't have a google+ button.
User clicks a button.
AJAX request is sent which loads some text and the google+ button (<g:plusone href="http://www.website.com"></g:plusone>)
into a div.
I can see when I look at the code that it is there, but it is not rendering.
I've heard that this might be useful:
gapi.plusone.go();
But I'm not sure.
Any ideas?
Thanks
You're on the right track. gapi.plusone.go() is one way to explicitly render the +1 button. Here's a code snippet from the official docs that illustrates another method using gapi.plusone.render().
<html>
<head>
<title>+1 Demo: Explicit render</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>
</head>
<body>
Render the +1 button
<div id="plusone-div"></div>
</body>
</html>
The JavaScript API is further documented elsewhere on the previously linked page.