A similar question has been asked here. And I know how to do it in a non angular context.
But to learn the framework I made my own chat using Angular.
Since I am just starting out I would like to know what would be the best course of action for this? Using jQuery would work in a controller but that doesn't seem like the right way. Since you would have to remove the listener once the controller has been destroyed.
To be clear here's what I would like to happen:
If the user switches tabs or windows the title of the page get's updated to reflect the 'missed' entries.
Once he comes back the title resets back to another value.
The most 'angular' way would be to create a directive on some element which listens for the events and changes a scope variable.
I would create an API like this:
<html ng-app="myApp" window-active-model="appIsActive">
<title>{{appIsActive ? 'My Super App' : 'Come back to me!'}}</title>
</html>
Here is the jquery version if anyone needs in future
$(function() {
// Get page title
var pageTitle = $("title").text();
// Change page title on blur
$(window).blur(function() {
$("title").text("Don't forget to read this...");
});
// Change page title back on focus
$(window).focus(function() {
$("title").text(pageTitle);
});
});
Related
I have a GitHub pages site with an image on it. I am trying to have the webpage show an alert whenever I push a change to the website.
My approach so far has been to implement an auto-refresh function:
setTimeout(function(){ location.reload(); }, 60000);
This will auto-update every minute, catching all of the changes that I make. However, I need to show an alert whenever the content of the page changes. It is important to keep in mind that the content will not change upon every refresh -- maybe only every 10 minutes (when I push changes).
I think the way to do this would be to store the name of the image and then look to see if the image name changes at every refresh -- and if the name did change, then show the alert. I have been reading about something called LocalStorage, but I'm not sure how to approach storing the name of a file -- I'm sort of new to JS/HTML.
Is using LocalStorage the best approach to this problem? What are other alternatives/simple ways to implement this on a GitHub page?
Thanks in advance.
If I clearly understand what you need to implement, I'd suggest you to read about MutationObserver in JavaScript. This class tracks all the changes, that are made to binded element. Here's the code and working demo:
<html>
<body>
<p>
Some content
</p>
</body>
<script>
// select the target node
var element = document.getElementsByTagName('p')[0];
// create an observer instance
var observer = new MutationObserver(function(mutations) {
alert("Some changes were made");
});
// configuration of the observer:
var config = { childList: true}; // ,subtree: true, characterData: true
// pass in the target node, as well as the observer options
observer.observe(element, config);
setInterval(function () { // here you can make your changes programatically
element.innerHTML += "New content";
}, 2000)
</script>
</html>
You can also use cookies, i.e. store in a cookie the last "version" of whatever - where "version" can be a string, a number etc.
This has the advantage that it also gets sent to the server, so you may generate the alert layout/code directly on the server.
Check https://github.com/js-cookie/js-cookie for a script simplifying this.
Another alternative is to implement on the server a script that responds whether the content changed. Something like http://foo.bar/changed?lastVer=XXXX which can return a JSON like {changed:true,message:'We have changed the change'}. You would retrieve this via ie. jQuery.getJSON() or vanilla XMLHttpRequest, and if it's the case show the message to the user and then reload the page. But this would require making a runnable server script somewhere.
A third option would be to load the page into, say, a hidden IFRAME, check if the image or content changed and if so transplant only the image - or a certain piece of content - to the main page without refreshing it. Or maybe refresh it. The idea is to load the page in an IFRAME and detect there if something has changed.
I have taken a text-box to input the content and after the input , I have created refresh() btn to refresh. My code is working fine. But the part is On the click of refresh() button , only the page should get refreshed , but my code is refreshing the complete window. I tried using $route.reload(), but it din't work properly. I browsed through some sites, but I din't got the appropriate result. I tried my best to do it. But hopefully, I couldn't continue further.
My plunker : https://plnkr.co/edit/0r7DXPWWtXmFYsHwY6Q3?p=preview
Here you can check it out.
Why you want reload the whole page? You can do just clear the fields instead of reload the whole page.
$scope.reloadPage = function(){
$scope.name = '';
}
or trigger your page load function or code
$scope.reloadPage = function(){
//You should call the function as what you did when the page load.
}
EDIT:
I know that functionality. But I have n number of text-fields. So its not an good practice to carry it
Then you should use with an object like $scope.objectname={textboxes1,2.....};
So you can easily clear the object like $scope.objectname={};
I have update your plunkr. please take a look that.
https://plnkr.co/edit/UxTNY1zgD4CrUEvERcHT?p=preview
I am developing a new website and while I want to get it done as easy to navigate as possible, I also wanted to use some kind of navegation with overlapping pages.
My idea was to have articles on the current page that will open on a floating div over the rest when clicked. That´s not really the problem because using jquery .load() it gets quite easy to do, but my problem is that it doesn't modify the current url, so it remains as www.myweb.com for example and I would like to have it like www.myweb.com/current-article when the article is opened. Once you have that specific url to the article, if it is shared, whoever open that link will get to the website with the article opened over the it.
I hope it all makes sense, but a good example can be found in USA Today or Play.Spotify
I am using umbraco 7 and javascript for the site. Any idea of how it could be done?
its called hash base navigation
location.hash = "#myHash"; //sets the url plus hash
Below is fired if user manually changes the URL or by using the back button
window.onhashchange = function()
{
if (location.hash === "#myHash")
{
doSomething();
}
}
This is actually a big and complex task to implement correctly.
I would advise you to use Backbone.Router http://backbonejs.org/#Router. It use history api in "new" browsers, with a fallback to hashtags in older browsers.
Some pseudo code:
First define your route. It will catch all pages under www.myweb.com/articles/*
var MyRouter = Backbone.Router.extend({
routes: {
"articles/:page": "loadPage"
},
loadPage: function() {
var div = $("#overlay");
div.html($.load("your page"))
div.show()
}
});
You would need to implement some logic to test if the loaded page is not under articles/.*
Init MyRouter when the page is loaded:
var router = new MyRouter();
router.start()
The overlay page will now open when you hit www.myweb.com/articles/cool-article
If you want to open the page from a parent page, simply call
$("button").click(function(){
router.navigate("articles/cool-article", {trigger: true});
});
I wanted to implement the overlay effect like Atmospherejs.com by iron-router when overlay has the specific route (https://atmospherejs.com/?q=). Does anyone have any idea?
It doesn't have route, by the way. As you can see nothing between domain name and query parameter.
and It just triggering of UI element on some click.
Something like following from CodeDrops might help for your usecase -
Demo here:
http://tympanus.net/Development/FullscreenOverlayStyles/index5.html
Code for same and article here:
http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/
I searched for a long time on how to accomplish this, but what I ended up doing was defining an empty action on the route.
Router.route('/login', {
action: function () {
},
onAfterAction: function () {
Session.set('loginOpen', true);
}
});
This caused the route to be triggered, but didn't change the current template. I then set a session variable to open up the modal. This has been working great for me so far.
Recently I have come into a problem where I need to update the page using angular, update the url, but not reload the page. Confused? Let me further explain. I have a table of data (uses ng-grid) and I want it so when I click row 1 angular prints out a one and changes the url to 'currentUrl/1' without reloading the page. Then I click row 4, a 4 prints out and changes the url to 'currentUrl/4'. Is this possible with angular to do this. To make my page not reload every time I clicked a row, I put the following
var lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function(event) {
$route.current = lastRoute;
});
Which it does everything I want, changes url, page doesn't reload, but now angular is not updating that number. What am I doing wrong?
It would help to see the part of the code that prints out the number, but your code for changing the URL without refreshing the route looks fine.
Without more information, a shot in the dark is that your controller is updating a $scope variable but this update isn't getting applied by Angular.
Try wrapping the variable update like so:
$scope.$apply(function() {
$scope.numberToPrint = newNumber;
});
The basic idea behind calling $scope.$apply is that you have to manually coax Angular into updating any bindings listening to the variable. Although this should normally be taken care of, what is possibly happening is that by preventing a route change from occurring you are not actually having Angular digest the new variable.
Here is an article which can explain $apply better.