We Keep Coding

Want to set show/hide script visible by default

i want to set a show/hide js script that is using localstorage on by default.
$(document).ready(function () {
var sidebarVisible = localStorage.getItem('sidebar') == 'true';
$('#sidebar').toggle(sidebarVisible);
$('.bgcontainer_center').toggleClass('clicked', sidebarVisible);
$("#toggle").click(function () {
$("#sidebar").toggle("slow", function () {
localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
});
$(".bgcontainer_center").toggleClass('clicked');
});
});
This is the link to it https://jsfiddle.net/eo12xw79/67/
I can't seem to find how to set it on by default.

The reason it isn't toggled is because the sidebar key isn't present in the browser's localstorage the first time we visit the page.
There is a very simple solution, just have to check if the sidebar key exists in the localstorage and if not, create it.
$(document).ready(function () {
// BEGIN
if(!localStorage.getItem('sidebar')) {
localStorage.setItem('sidebar', 'true');
}
// END
var sidebarVisible = localStorage.getItem('sidebar') == 'true';
$('#sidebar').toggle(sidebarVisible);
$('.bgcontainer_center').toggleClass('clicked', sidebarVisible);
$("#toggle").click(function () {
$("#sidebar").toggle("slow", function () {
localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
});
$(".bgcontainer_center").toggleClass('clicked');
});
});
EDIT : I think it's useless, why ?
Because you will use the localstorage for a single variable that has no real importance.
After, this is only a personal opinion, it depends on your needs.
DUPLICATE : How to check whether a Storage item is set?

JQuery not updating CSS elements after PHP include

I am loading PHP files with JQuery/Ajax.
This is the index.php file where the webpages are called
<div class = "view-screen">
<?php include('home.php'); ?>
</div>
Depending on which nav link is clicked, that page will display without refreshing.
$(document).ready(function() {
// ...
$navLinks.click( function() {
var $this = $(this)
target = $this.data('target')
toggleMenu()
$viewScreen.load(target + ".php")
$this.data('clicked', true)
if ($this.data('clicked') && target === "about") {
activateAbout()
}
return false
})
function activateAbout() {
console.log('activated')
}
}
The console log works, and displays 'activated'. The pages do load.
All of my scripts compile and link correctly to each other.
However, when I include code that updates the target page CSS in the activateAbout() function, it doesn't work. For example:
$('body').css("background-color", "white")
in activateAbout() works, but calling/updating CSS elements in the chosen .php file doesn't, such as
$('.about p').css("color", "white")
// OR
$('.about').toggleClass('activate')
I have a feeling this has something to do with the order in which these files are loaded, but I'm not sure! Thanks for the help in advance

This is common phenomenon. The reason you are not able to apply the css is because, your content is loading after, you call activateAbout(). I would recommend to call activateAbout() once the $viewScreen.load(target + ".php") loads the data successfully. jQuery.load() supports callback too. Refer to the example usage at https://www.w3schools.com/jquery/jquery_ajax_load.asp. So, it should look like
$(document).ready(function() {
$navLinks.click( function(){
var $this = $(this);
target = $this.data('target');
toggleMenu();
$viewScreen.load(target + ".php", function() {
$this.data('clicked', true);
if ($this.data('clicked') && target === "about") {
activateAbout();
}
});
return false;
});
});
function activateAbout() {
console.log('activated')
}
Also there is a trick using setTimeout which you can execute after certain time, when the view is expected to be loaded like below
if ($this.data('clicked') && target === "about") {
//The timeout period you can change accordingly
setTimeout(activateAbout, 300);
}
The recommended way is first type solution. Hope this helps you!!

Correct way to use window.location.href in Polymer 1.1

In the index's head I have:
// hashbang is set to true in routing.html
<script type="text/javascript">
if (window.location.href === "/users") {
console.log('Hey you!');
}
</script>
I need to implement some class bindings based on window.location but I'm testing to make sure it works in polymer. Does it? I does not work for me. When I go to localhost:3000/#!/users, noting in console.

Update:
If you're using page.js with the Polymer starter kit, then all the pages of your app are loaded on the first load.
In this starter kit, changing route with Page.js will display the need page and add display: none to hide the other pages.
For example, in your app/index.html, you should have something like this:
<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
<section data-route="home">
...
</section>
<section data-route="users">
...
</section>
<section data-route="user-info">
...
</section>
...
</iron-pages>
The route parameters on the iron-pages element is set by Page.js in app/elements/routing.html:
page('/', function () {
app.route = 'home';
});
page('/users', function () {
app.route = 'users';
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
});
page('/contact', function () {
app.route = 'contact';
});
So if the route matches /users for example, then Page.js will set app.route = 'users';, and the iron-pages Polymer element will display the section with data-route="users" and hide the other ones without reloading anything, and thus not reloading your script.
But actually, since you're using Page.js, it'd be easier to integrate your code in the routing.html file like so:
page('/users', function () {
app.route = 'users';
console.log('Hey you!');
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
console.log('Hey ' + data.params.name);
});
page('/contact', function () {
app.route = 'contact';
console.log('Contact page');
});
You could start by trying to debug, for example, try logging the window href:
console.log(window.location.href);
Which should return:
http://localhost:3000/#!/users
Then you can have more insight on what your problem is! ;)
Indeed, window.location.href gives you the full URL, and it's supposed to do so (with Polymer or not).
On the other hand, window.location.hash returns everything in the url starting from the # character, giving you #!/users, so you could try:
<script type="text/javascript">
// Slice(2) to get rid of '#!'
if (window.location.hash.slice(2) === "/users") {
console.log('Hey you!');
}
</script>
Side note:
If you have query parameters after the #, like so:
localhost:3000/#!/users?number=42&name=value
window.location.href will then be #!/users?number=42&name=value
If you also want to get rid of the query parameters ?number=42&name=value in such a case, you could write:
<script type="text/javascript">
if (window.location.hash.slice(2).split("?")[0] === "/users") {
console.log('Hey you!');
}
</script>

Fill twitter button with dynamic content

is it possible to create a twitter-button , while clicking a link? :
http://fiddle.jshell.net/gmq39/22/
I tried with:
$.getScript('http://platform.twitter.com/widgets.js');
The "button", which appear´s has no functionlaity and style´s
Anybody know´s a workaround or what do i need to inlcude? need your help.. greetings!!

Use twttr.widgets.load(); to bind the twitter functionality to a dynamically added button.
Also, to make sure you don't load the script over and over again, you could first check if the script is already loaded with something like this
function twitter() {
if ($(".twitter-follow-button").length > 0) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js');
}
}
}
$(function () {
$('body').html('Follow #MagnusEngdal')
twitter();
});
http://jsfiddle.net/23D8C/1/

How to retain Javascript state on page change

I have an accordion style navigation list set up so that when categories are clicked it opens up to show sub-categories that link to pages.
What I would like to do is have the accordion navigation list keep it's open or closed state when the new page opens.
I've gathered that cookies work to retain the state on refresh, but how do I retain the state when a different page is visited? All the pages have the same accordion navigation list.

Try Web Storage. Store the state of the tabs on page unload, restore the state on the page load event.

I found a solution, it uses the accordian plug-in found here, http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi and the jquery cookie.js plug-in
I added id's to the header anchor tages in the HTNL mark-up like so,
<li>
<a id="m1" class="label" href="#">Sound/Audio Systems</a>
<ul class="acitem">
<li>PA Systems</li>
<li>Loudspeakers</li>
<li>Microphones </li>
<li>DJ Equipment</li>
<li>Sound Processing Equipment</li>
</ul>
</li>
And modified the accordian.js code, I added the lines beginning with $.cookie, and the If statement in the document.ready funciton.
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active'),
currentID = "";
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
}
else {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
$.cookie('menustate', null, {expires: 2, path: '/'});
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
currentID = $(this).prev().attr('id');
$.cookie('menustate', currentID, {expires: 2, path: '/'});
});
return false;
}
}
}
);
});
};
$(document).ready(function() {
$('.menu').initMenu();$('#side-navigation_frame').show();
if ($.cookie('menustate')) {
var anchor = "",
elementID = $.cookie('menustate');
anchor = document.getElementById(elementID);
$(anchor).addClass('active');
$(anchor).next().show();
}
});
It works nicely, not bad for a beginner, thanks for all the advise.
Rob Fenwick

Cookies "retain state" across the full path and domain for which they are specified. So if you can get them to work for just one page, you should have them work automatically on all pages of your site.

You can still use cookies, you just have to make sure they're not specific to the one page. For example:
document.cookie = 'openitem=5; expires=somedate; path=/';
will be accessible to all pages on the site. More about cookies.

Ok so I took a look at the library you are using, it's a decent library and all but you might find it easier to find solutions to your problems if you use a more standard library like jQuery UI, it has an accordion control http://jqueryui.com/demos/accordion/ and like I mentioned there are so many people using it that the answer to most problems can be found.
But like I mentioned I did take a look at your library. As others have mentioned you would use a cookie to store the value. This library supports 'pre expanding' a particular section of the accordian, to do that you would add the expand class to the element. You can either do that server side or you can do it using JavaScript before initMenu() is called.
The other less elegant option is to trigger the click event on the anchor tag after the call to initMenu. Finally you can use jQuery's show() to show expand the section without animation.
The first thing you have to do is find out which section was clicked on, then you would store that sections name in a cookie. On page load you would get that value and expand the appropriate according section. This is what the code should kinda look like - note this is psuedo code and you have fill in the appropriate parts.
$(function() {
$(".menu.collapsible .label").click(function() {
var accordianSection = $(this).text();
rememberSection(accordianSection);
});
var section = recallSection();
if(section !== undefined) {
expandSection(section);
}
});
The expandSection function can look something like this:
var sectionLink = $(".menu.collapsible .label").filter(function() {
return $(this).text() == section;
});
sectionLink.trigger('click');