How can I act on a hashchange event in AngularJs - javascript

I'm a newbie to AngularJs.
What I'm trying to do is update the page on hashchange events.
What I currently do (and know is not the "right" way to go) is:
<!DOCTYPE html>
<html>
<head>
<style>
#hashdrop {
display:block;
border: 1px solid gray;
width: 500px;
overflow: auto;
background-color: rgb(241,241,241);
border-radius: 4px;
text-align: center;
vertical-align: middle;
line-height: 100px;
font-size: large;
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var example = function($scope) {
$scope.lastHash = location.hash.slice(1);
$(window).on('hashchange', function (event) {
$scope.lashHash = location.hash.slice(1);
$scope.$apply();
});
};
</script>
<meta charset=utf-8 />
</head>
<body ng-app ng-controller="example">
<div id="hashdrop" >
{{lastHash}}
</div>
</body>
</html>
(This can be copy-pasted into a blank html file and run. jsbin didn't detect the haschange correctly, for me.)
This doesn't really work. for some reason the value is not updated and I would assume there is a 'right' way to this in angularjs.
I would to understand how to do this right and more specifically how to correct the code in this example to work the "angular way".
Thanks!
UPDATE 1
Okay, After reading the comment about $location, I found some information and change my app to this:
<!DOCTYPE html>
<html>
<head>
<style>
#hashdrop {
display:block;
border: 1px solid gray;
width: 500px;
overflow: auto;
background-color: rgb(241,241,241);
border-radius: 4px;
text-align: center;
vertical-align: middle;
line-height: 100px;
font-size: large;
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
angular.module('example',[]).config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
});
var example = function($scope, $location) {
};
</script>
<meta charset=utf-8 />
</head>
<body ng-app="example" ng-controller="example">
<div id="hashdrop" >
Hash = {{$location.hash()}}
</div>
</body>
</html>
Still doesn't work. Nothing shows in output..

AngularJs uses hashes in urls for all normal routing, it's the default way of navigating the page. You use the routeProvider to define url-schemas much like you would in back end MVC frameworks like Django, and the routeProvider will listen for changes in the hash and load new content accordingly.
I suggest doing the tutorial. It is fairly good (even if it misses a lot of stuff). Routes are demonstrated in step 7.
Just warning. Angular assumes that you use hashes as your main way to handle urls and routing, so routeParams will not let you change only part of a page when changing the hash part of the url. To do that you would either switch to using get parameters or use something like ui-router which is more flexible.

You can bind to the hashchange event using angular.element instead of jQuery, potentially reducing dependencies.
Include this in your controller.
angular.element(window).bind('hashchange', function() {
console.log('hash has changed');
});
This code will log "hash has changed" when the hash changes.
Not sure it will solve your problem (there's some more funky stuff in your code, as Kevin Beal pointed out), but it's kind of unclear what you're saying "doesn't work".
Worth noting that angular.element uses jQuery if it's available, so if you want to use jQuery anyways, angular.element(window) won't do anything differently than $(window).

Related

jQuery not working out of VScode, but does out of the Internet.. How can I fix this?

I am learning to build websites and at the moment I am coding in visual-studio code insiders, with most jQuery plugins installed.
When I open this url :
" http://www.completewebdevelopercourse.com/content/4-jquery/4.3.html "
which has identical source code as the code below,
I get two different results.
one, In which the java-script is working (this is the page from the link), and in the other(stored in a local folder and opened inside VScode), it is not.
I have consulted the VS-code website and forums. No luck and my problem is not mentioned at all. Only that there does not seem to be a good plugin for jQuery but snippet-packages, which I have installed.
And normal google-ling gives me all the same results in which people are asking for jQuery plugins as mentioned above
How can this be? And how do I fix it?
[code]
<!DOCTYPE html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 10px;
}
.square {
width: 150px;
height: 150px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
$("div").click(function() {
alert("a div was clicked!");
});
</script>
</body>
Make sure that you downloaded the jquery.min.js file (you should place it in the same folder of the html page), otherwise it would go 404.

Content with CKEDITOR is incorrectly displayed

i get source code, in CKEDITOR demo, and put in index.html in empty body.
Included:
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
But, content dispayed very bad, appears ugly in style and displayed.
<html>
<head>
<script src="//cdn.ckeditor.com/4.4.7/full/ckeditor.js"></script>
</head>
<body>
---Content source in CKEDITOR demo HERE
</body>
</html>
displayed:
http://i.stack.imgur.com/ATTWO.png
why it is displayed not as in a demo as it is correct to me to display content created through CKEDITOR
I took a look at their homepage and downloaded the basic package. I
found a file called content.css in the package folder,
img.right
{
border: 1px solid #ccc;
float: right;
margin-left: 15px;
padding: 5px;
}
img.left
{
border: 1px solid #ccc;
float: left;
margin-right: 15px;
padding: 5px;
}
And if you look at the source code of the content snippet on their demo,
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="http://c.cksource.com/a/1/img/sample.jpg" /> Apollo 11</h1>
The image has a class called right, which is defined in content.css, and therefore it is floating to the right.
I think your problem is that the css file in not present/found in your project.
Maybe you can try to download the package and see if it works locally, so you can make sure that the problem is caused by the CDN and the missing file.
Just in case, I download the package here (no advertisements intended)
http://ckeditor.com/download
It is rendered by the browser in this way. If you want to add additional styles and modify the look you need to learn some CSS. There is no CSS whatsoever in the source from the editor.

How to implement the nanoScroller so that it works correctly?

I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/

UI suggestions on how to display suggested tags for a given text to a user?

I am writing a web-app that uses a tagging system to organize the user's submitted reports. Part of it uses ajax to get suggestions for tags to present to the user based on the content of their report. I am looking for suggestions on how to present this information for the user.
I'm not quite certain what a friendly way to do this would be.
Edit:
Well, most of the responses here seem to be focused on the user typing in keywords. The idea I'm trying to define here is more towards presenting the user a set of suggested keywords that they may accept or decline without having to type a tag in manually. (That option is of course still available to them)
--------------------------- # say they can checkoff or select tags they like.
| o[tag2] x[foo] o[moo] |
| x[tag1] o[bar] |
---------------------------
If I understand what you're asking, jQueryUI includes an autocomplete widget that does this.
See the working demo here: http://jsbin.com/ezifi
You can modify how the suggestions are presented by monkey-patching the render functions on the autocomplete widget.
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script class="jsbin" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style type="text/css" media="screen">
h1 { font-size: 20pt; color:Navy; }
h2 { font-size: 18pt; font-weight:bold; color: #DDD; }
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
body { margin:0; padding:0; height:100%;}
.ui-widget { font-size: 0.8em; line-height:0.6em; }
.ui-widget .ui-widget { font-size: 0.7em; }
div.inputDiv {
float: left;
width: 42%;
height: 400px;
min-height: 100%;
border: Navy 1px dotted;
margin: 14px;
padding: 10px;
}
</style>
</head>
<body>
<div class='inputDiv'>
<h1>jQueryUI Autocomplete demo</h1>
<p>Type a few characters of a word</p>
<form action="jquery" id="form1">
<input type="text" id="input1"/>
</form>
</div>
<div id='msgs' class="inputDiv" style='font-size:10pt;font-weight:normal;'>
</div>
</body>
</html>
The Google method is one option: an input textbox with suggestions listed drop-box style underneath.
del.icio.us does it well. They present a list of related tags below a text input into which the user can enter their own tags. Clicking a suggested tag from the list adds it to the input. Nice and simple.
With tags, people are likely going to want to add more than one at a time, so having them exposed right off the bat is helpful.
Some other considerations that might factor into your decision:
How many tags will you suggest at any given time? 2? 5? 10? 50?
Should the user be forced to use your suggested tags only? Is entering their own a valid option?

jquery kwicks issue

I've been working on my problem for the past few hours and am at the end of my rope. I need help.
I have a staging page where I tested the code and verfied that it works, but on the live page, the code refuses to budge. I can't figure out why kwicks jq seems to be ignoring the html on the jujumamablog.com header. <-- this is my question.
I'm using the kwicks for jQuery. I created a working sample page so I could be sure that the code was working before trying to integrate into the live area of the site. The sample page can be found here: http://jujumamablog.com/jujumama/dev.html
The code for the workingsample page is as follows
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Kwicks Examples: Example 1</title>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<style type="text/css">
/* defaults for all examples */
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}
/* example 1 */
#example1 .kwicks li{
float: left;
width: 98px;
height: 200px;
margin-right: 2px;
}
#example1 #kwick1 {
background-color: #53b388;
}
#example1 #kwick2 {
background-color: #5a69a9;
}
#example1 #kwick3 {
background-color: #c26468;
}
#example1 #kwick4 {
background-color: #bf7cc7;
}
#example1 #kwick5 {
background-color: #bf7cc7;
margin-right: none;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>
</head>
<body>
<div id="example1">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
I was hoping that this would be a fairly simple 'plug-and-play' instance. Boy, was I wrong.
My task was to get this slick piece running smoothly. I know there are other issues with the main site (jujumamablog.com), load time specifically, which I was told to ignore for the time being.
Edit-----------
I need to be a bit more clear here. The above code works, I'm wondering why, when I try to put the code into the live page (jujumamablog.com, where there are other scripts and -ish) that this stops working.
Thanks in advance.
It looks like you are including jQuery a second time, and since all those plugins are just methods of jQuery, you blow them all away.
The first one is on line 65, and the second is on line 91. All the plugins added between those two, are destroyed.
As a side note, you should consider consolidating all those scripts into one, then compress them with YUI compressor or whatever you prefer, and finally, if possible, put it at the bottom instead of at the top.
The $().ready(function() { looks wrong to me. I thought that the two ways of doing it were
$(function()
{
//etc
});
and
$(document).ready(function()
{
//etc
});
I get an error on this line:
jQuery('ul.sf-menu').superfish();
[Exception] TypeError: Object # has no method 'superfish'
It's possible this is stopping the rest of your ready events from firing.
I found out that the problem is that your live server uses a newer version of Jquery. I have the same problems but I don't know what's different between 1.2.6 and 1.4.2. Hopefully some answers will turn up!
Now I'm asking here: Plugin: Kwicks for Jquery works perfectly with Jquery 1.2.6 but not 1.4.2

Categories