I have treeview menu where I would like to remember its state after page reloads. To reload page I'm using angularJS function $state.reload();
I don't know should I use Jquery to collect cookies about current state of menu and save it, or maybe there is a way to collect data about current state using angular.
Any ideas and suggestions would be highly appreciated.
Here is my HTML
<nav class="side-nav" id="menu">
<ul>
<li class="side-nav-item">
<a href="/index">
<i class="nav-item-icon icon ion-ios7-navigate-outline"></i>
Main page
</a>
</li>
<li class="side-nav-item collapsable">
<a href="javascript:void(0);">
<i class="nav-item-icon icon icon ion-chevron-right"></i>
1. subitem
</a>
<ul style="display:none;">
<li class="side-nav-item">
<a ui-sref=".countiesandtowns">
<i class="nav-item-icon icon ion-clipboard"></i>
2. subitem
</a>
</li>
</ul>
</li>
</ul>
And here is JQuery I'm using
$(function () {
$(document).ready(function () {
$("#menu").treeview({
toggle: function() {
var element = $(this).find(">a>i");
if (element) {
var rightElement = element.hasClass("ion-chevron-right");
var downElement = element.hasClass("ion-chevron-down");
element.removeClass("ion-chevron-right");
element.removeClass("ion-chevron-down");
if (rightElement)
element.addClass("ion-chevron-down");
if (downElement)
element.addClass("ion-chevron-right");
}
}
});
});});
It sounds like cookies are what you want here. Check out this W3C spec on cookies, no jQuery required!
Once you save the cookie, after a page reload just check the state of the cookie and display the menu based on that
I think your best option will be to consider using window.localStorage with a cookie fallback. In fact, if you are using angular you may even consider using angular-local-storage which can be seen here.
angular-local-storage provides the cookie fallback for you but this isn't too hard to implement yourself and just requires a check for whether window.localStorage is defined.
Hope that helps you out!
Related
I have a list of links on a services page that when clicked, reveal content relevant to the individual service. This is to save space on the page. I have done this using slide in JS.
On the homepage I also have a list of services that I would like to have linked the services page and then open up the relevant content dependant on service clicked on the homepage.
I'm a new user of Javascript so unfortunately this isn't something I could work out myself or find a solution for elsewhere. I would really appreciate somebody helping me to find a way of doing this.
Find below a short example of my code:
Homepage
<ul id='homepage-services-list'>
<li><a href='services.php'>Service 1</a></li>
<li><a href='services.php'>Service 2</a></li>
</ul>
Services
<ul class='services-tabs'>
<li class='services-tab'>
<a class='service-1-trigger'>
<div>
<h3>Service 1</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-1-content'>
<p>Content about service etc.</p>
</article>
<li class='services-tab'>
<a class='service-2-trigger'>
<div>
<h3>Service 2</h3>
<img src='images/down-arrow-icon.png'>
</div>
</a>
</li>
<article class='service-2-content'>
<p>Content about service etc.</p>
</article>
</ul>
Javascript - JQuery
$(document).ready(function(){
$(".service-1-trigger").click(function(){
$(".service-1-content").slideToggle(600, function(){
$(this).toggleClass("service-1-toggle").css('display',' ');
});
});
$(".service-2-trigger").click(function(){
$(".service-2-content").slideToggle(600, function(){
$(this).toggleClass("service-2-toggle").css('display',' ');
});
});
});
Thank you!
You can add anchors to your links.
<ul id='homepage-services-list'>
<li><a href='services.php#1'>Service 1</a></li>
<li><a href='services.php#2'>Service 2</a></li>
</ul>
With these anchors, you can extract from the URL the service wanted (1 or 2) and simulate a click with jQuery.
In your document.ready :
var url = document.location.toString();
if (url.indexOf('#') != -1) {
var num_service = url.split('#')[1];
$(".service-" + num_service + "-trigger").click();
}
Here's one way to approach it:
On the home page, add fragment identifiers to those links:
<ul id='homepage-services-list'>
<li><a href='services.php#service-1'>Service 1</a></li>
<li><a href='services.php#service-2'>Service 2</a></li>
</ul>
On page load (inside your ready handler will do) look at location.hash. That is the current fragment identifier for the page. If it's one of your service identifiers, trigger the code showing that service.
You might also have your click handlers add the hash to the URL by setting location.hash, for consistency.
Look also at the history API for more control over hashes and URLs for in-page transitions.
Short of switching to a SPA-type framework, there's no way for javascript on one page to directly affect a subsequently-linked page.
Two simple approaches to work around this are
Cookie / localStorage: Have your outgoing link set a cookie with a specific value for each link. The receiving page can check the value of this cookie and adjust as needed.
URL hash: Include a hash value or parameter in the outgoing links, i.e. <a href='services.php#service1'>. The receiving page can then check location.hash to read this value.
I have a toggle open/close DIV with UL list in it that look like this:
<div id="dropdown-1">
<div class="option-heading">
<i class="fa fa-angle-double-up"></i>
<i class="fa fa-angle-double-down"></i>
<h5>Title</h5>
</div>
<div class="option-content">
<ul class="check_list check_list_show">
<li><a href="#>Item 1</a><li/>
<li><a href="#>Item 2</a><li/>
<li><a href="#>Item 3</a><li/>
</ul>
</div>
</div>
And a JS code is:
<script>
$(document).ready(function() {
$(".option-content").hide();
$(".fa-angle-double-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".fa-angle-double-up, .fa-angle-double-down").toggle();
});
});
</script>
Once user selects a link from that list, the same page refresh and a results are displayed on it.
But, that DIV gets automatically closed and i would need it to stay open.
I am not a JS developer and i dont have any ideas on how to pass the open state of this after a refresh.Any suggestion would be greatly appreciated!
Fiddle: http://jsfiddle.net/bumL495j/
pass a query string in url (i. anchor tag) lik
<li>Item 1<li/>
$(document).ready(function() {
$(".option-content").hide();
$(".fa-angle-double-up").hide();
var urlstring = window.location.href; // check for menu toggle you can pass itemid also based on that you can highlight menus
if(urlstring.indexOf("menutoggle=open")>0){
$(this).next(".option-content").slideToggle(500);
$(this).find(".fa-angle-double-up, .fa-angle-double-down").toggle();
}
});
you need to paste this script in every page of that menu items links. i didn't know about localstorage but you can also google for it.
I want to re-render all the views present on my page.I have Header, Footer and Body view. In Header view i have a dropDown in which user can select the Language Preference. On clicking on language prefrence all the view should be re-render. Is it Possible in Angular?
In BackboneJs i simply call the render function again on that particular event. Is there some same kind of functionality provided by AngularJs?
Thanks in Advance
Header Template (language Prefrence Dropdown Code)
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#">
Language Preferences<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-manual">
<li id="English" ng-click="englishConversion()">English</li>
<li id="French" ng-click="frenchConversion()" >French</li>
</ul>
</li>
is there any inbuilt function which i can call in englishConversion and frenchConversion to re-render the view/views?
Have you looked at the angular-getText libary ,
Or you can $compile the HTML using angular again. You can simply do like this,
var content=angular.element('#translatedContent');
var scope=content.scope();
$compile(content.contents())(scope));
I have an html menu with links to other pages which have this menu included too. Very basic:
<div id="sidebar-nav">
<ul id="dashboard-menu">
<li class="active">
<div class="pointer">
<div class="arrow"></div>
<div class="arrow_border"></div>
</div>
<a href="index.html">
<i class="icon-dashboard"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="1.html">
<i class="icon-signal"></i>
<span>1</span>
</a>
</li>
<li>
<a href="2.html">
<i class="icon-picture"></i>
<span>2</span>
</a>
</li>
<li>
<a href="3.html">
<i class="icon-calendar-empty"></i>
<span>3</span>
</a>
</li>
</ul>
</div>
So basically this menu helps navigate through content.
When I load the home of the menu I want a function to automatically load the other links too so it speeds up the navigation and of course I want the content of those links to show up only when the corresponding link in the menu is clicked.
What library / function should I look into to achieve that?
Which Library or Function to use
You can see, in my code everything is jQuery. So in my advice, jQuery will be the best for you! You can have it here:
api.jquery.com or even at their site www.jquery.com You can have a quick link at their footer tag.
Pages will be cached
Your page and some of its code is saved as a cache in the local storage, you can check them out using F12. Which will open Developer Tools, then in Network workspace, check out which are loaded from Server and which are loaded from local storage. Almost every browser will save some of your code, from .css files or your scripts so that it doesn't have to load it everytime. You can see the code 304 (correct me, if mistaken) in browser which would mean that the file was loaded from local machine. So don't worry about this. You can get other helpfull articles about speeding up and caching the sessions too.
Dynamically Creating the menu
To dynamically create the link navigation menu you can use:
Example
$('#dashboard-menu').html();
In the HTML of the code, you can write the list items. Which will be set so that you get them. You can call this function on page start as:
Code Example
$(document).ready(function () {
$('#dashboard-menu').html();
}
Techniques
If you don't know what would be the menu, for example you want to load the data from Database, you can use ajax requests too, this way you will write the result in the dashboard-menu. However, your site won't get fast just by removing the navigation menu and laoding it after the page load.
For example:
$.ajax({
url: "page_to_load.html"
success: function (data) {
$('#dashboard-menu').html(data);
}
});
Alternate way of using Ajax
Alternate way for this is load().
http://api.jquery.com/load/
To show only relative menu
To show the content you can use show(). Like this, lets take the example from your code
Snippet from your code
<li>
<a href="1.html">
<i class="icon-signal"></i>
<span>1</span>
</a>
</li>
Showing child
To show the a from this; since a is a child of li, you can use this:
$('li').click(function () {
$(this).find('a').show(); // or even use toggle()
}
I want to add a language switcher to a specific html page. I don't need any language text only the link to another site will need to be changed depending on the click.
It wouldn't make much sense here to create three html pages just to deal with some link change but my jquery skills are not that great.
The destination structure looks like this:
<ul>
<li><a class="clickButton" href="folder1/firstLink/Languages/English/folder/index.html">Index Link</a></li>
<li><a class="clickButton" href="../folder2/secondLink/Languages/English/folder/index.html">A different Link </a></li>
<li><a class="clickButton" href="../../folder3/Languages/English/folder/index.html">Another different link</a></li>
<ul>
<ul>
<li><a class="clickButton" href="folder1/firstLink/Languages/Spanish/folder/index.html">Index Link</a></li>
...
<ul>
As you can see I would only need to replace the language name ("English") with Spanish in order to make the link work.
So I was thinking that the user clicks on the according flag and the url string changes accordingly.
I would be happy about some example how to switch the language name
HTML:
<a data-lang="Spanish">To Spanish</a>
<a data-lang="Russian">To Russian</a>
JavaScript:
var current = "English"
$("[data-lang]").on("click", function() {
var lang = $(this).data("lang");
$(".clickButton").prop("href", function(i, href) {
return href.replace(current, lang);
});
current = lang;
});
DEMO: http://jsfiddle.net/a2xqL/
make it easy for yourself: add custom data attribute to links;
<a data-lang="English" href="">
Than access it with jQuery by $link.data('lang'); and add it to the href.