We Keep Coding

Remembering color-choice through Jquery (localStorage)

I have created a very simple and basic Jquery script that changes the class for textboxes on my site in order for them to have a different colored background when a button is clicked. I then attempted (with the help of a Jquery-for-dummies-book) to set it up so that the color choice is remembered locally.
I must however be a greater "dummy" than expected because I have not been able to make this work.When I upload the script to the server and test it on the site, I can change the color, but if I close then window and then go to my website again, the color is back to default. It is NOT remembered/stored.
Is it possible the problem stems from the fact that my textboxes use the class "row" to set the background color, and you can not change a class to a different class, but must use a proper element or ID? Or should the order of the script-parts perhaps be different?
Any and all insight is appreciated on my learning-journey.
External script
$(document).ready(function(){
if (localStorage.getItem("farvevalg")=="farve") { $(".row").addClass("farve");
}
if ($(".row").hasClass("farve")) {
localStorage.setItem("farvevalg", "farve");
} else {localStorage.removeItem("farvevalg")}
$('#farvevalg').click(function(){
$(".row").toggleClass('farve');
}); }
My HTML
/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}
/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}
/*The button that must be clicked to change color*/
#farvevalg {
margin-top: 6%;
padding: 5px;
}

Your attempt is correct but add/remove localStorage you are doing at the wrong place. You should do it inside that button click.
WORKING FIDDLE
Snippet won't work because of the CORS issue. It's for code view only.
$(document).ready(function () {
if (localStorage.getItem("farvevalg") == "farve") {
$(".row").addClass("farve");
}
$('#farvevalg').click(function () {
$(".row").toggleClass('farve');
if ($(".row").hasClass("farve")) {
localStorage.setItem("farvevalg", "farve");
} else {
localStorage.removeItem("farvevalg")
}
});
});
/*The default color of all textboxes on a page*/
.row {background-color: #e7e7e7;}
/*The color that it changes into when button is clicked*/
.farve {background-color: pink;}
/*The button that must be clicked to change color*/
#farvevalg {
margin-top: 6%;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="row">
Test
</div>
<button id="farvevalg">
Change
</button>

some changes in login, not tested but should work
$(document).ready(function(){
if (localStorage.getItem("farvevalg")=="farve") {
$(".row").addClass("farve");
}
$('#farvevalg').click(function(){
//only here we add/remove setting
var wasFarveColor = $(".row").hasClass("farve")
$(".row").toggleClass('farve');
if(wasFarveColor)
localStorage.removeItem("farvevalg")
else
localStorage.setItem("farvevalg", "farve")
});
})

what you are doing is, at the start of your application, check it there is a saved item 'farvevalg' with value 'farve'. If that is the case, then you add the class 'farve' to all elements with class 'row'.
After this you check if there is a row element with class 'farve' and, if that is the case' you set the item in storage, otherwise you delete it. As you can see it doesn't make sense for this bit of code to be here as it won't have any effect. You should instead move this if/else block inside of the click callback ( after $(".row").toggleClass('farve'); )

Change div background image, js works in chrome but not ie or firefox?

Basically I want the user to be able to click and change the background, and for there to be multiple backgrounds, for a specific div.
This works perfectly in Google Chrome but not in IE or Firefox.
HTML:
<div id="palette">
<div class="lightblue"></div>
<div class="gold"></div>
<div class="aqua"></div>
</div>
<div id="primary">
</div>
CSS:
#palette {
border: 2px solid white;
width: 25px;
}
#palette div {
height: 25px;
width: 25px;
}
.lightblue {
background: lightblue url(http://www.textureking.com/content/img/stock/big/DSC_4279.JPG);
}
.gold {
background: gold url(http://www.textureking.com/content/img/stock/big/DSC_4287.JPG);
}
.aqua {
background: aqua url(http://www.textureking.com/content/img/stock/big/DSC_4274.JPG);
}
JS:
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var bg = $(this).css('background');
// change the background of the body
$('#primary').css({ 'background': bg });
});
});
http://jsfiddle.net/KNutQ/1/
It's not showing any errors and other javascripts run, so I'm not really sure what the problem is.
If it's easy to fix please leave an answer, if not I will try it this way: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundimage

According to the CSS specification getting the computed style of a shorthand should not return anything. You need to list out the individual properties as I've done below.
Perhaps the CSS spec or Chrome will change in the future but at the moment Firefox and IE's behaviour is correct.
$(document).ready(function() {
// attach onclick event to your palette colors
$('#palette div').on('click', function() {
// get background of selected palette color
var backgrounds = $(this).css(['background-color','background-image', 'background-repeat', 'background-attachment', 'background-position']);
// change the background of the body
$('body').css(backgrounds);
});
});

Bootstrap twitter like follow button

I need to a a following button like this example
What i should write in java script?
$('.following').hover(function(){
$(this).text("Unfollow");
},function(){
$(this).text("Following");
});
//for toggle the class following/follow When click
$('.following').click(function(){
$(this).toggleClass('following follow').unbind("hover");
if($(this).is('.follow')){
$(this).text("Follow");
}
else{
//binding mouse hover functionality
$(this).bind({
mouseleave:function(){$(this).text("Following");},
mouseenter:function(){$(this).text("Unfollow");}
});
}
});
what changes need to have bootstap button?

You can do this in CSS like so: http://jsfiddle.net/Th4th/
.follow {
width: 100px;
height: 40px;
background-color: gray;
}
.follow:hover span {display:none;}
.follow:hover:before {
content: "Unfollow"
}
I don't think you'll need java script for the button changing, only for taking the action of the click.

How to change the color of another link on hover?

This is the simple HTML code:
<li class="main">
ImageLink <!--1st anchor tag-->
ImageName <!--2nd anchor tag-->
</li>
Is it possible to change the color of 2nd anchor tag on hover state of 1st anchor tag? (And vice versa.)

Not with css. This kind of actions can only be done by script.
If you use jQuery you could add the following script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function(){
var a1 = $('a:first');
var a2 = $('a:second');
a1.hover(function(){ a2.toggleClass('hover') }, function(){ a2.toggleClass('hover') });
a2.hover(function(){ a1.toggleClass('hover') }, function(){ a1.toggleClass('hover') });
});
</script>
Now you can use the hover class to specify the color:
.hover { color: red; }
Edit
It would be easier to give both a's an id, so you could reference them by using var a1 = $('#a1');.

With CSS, it's possible to change the color of the 2nd anchor tag on hover of the 1st anchor tag with a sibling selector, but I don't think you can do it vice-versa:
a:hover + a {
color: red;
}
JSFiddle preview: http://jsfiddle.net/9Ezt5/
See http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
However, note that adjacent sibling selectors are not supported on all browsers: http://www.quirksmode.org/css/contents.html

Yes you can do it with pure css.
for example:
a:hover + a{
background:red;
}
Check this for more
http://jsfiddle.net/Bw5by/

In Jquery you can do it like this,
$("#first").hover(function(){
$('#second').css('color','red')
},function(){
$('#second').css('color','blue')
});
See it in action here,
http://jsfiddle.net/gagan/NYAHY/1/

If those are the only two links in the list item tag, then you could do something like this:
li.main:hover a
{
color: red;
}
li.main a:hover
{
color: blue;
}
Then your hovered link will be blue, and all the other ones (in this case just that other one) will be red.

Change CSS Link Property onClick with Javascript/JQuery?

So for example i have two links:
<a onClick="doColorChange()">Link 1</a>
<a onClick="doColorChange()">Link 2</a>
I want it so that when I click Link 1, Link 1 changes to color blue to represent selected, Link 2 stays black. When the user clicks Link 2, then Link 2 changes color to blue and Link 1 changes color back to white.
I currently have a default CSS property for links:
a:link {
color: #green;
}
I am unsure of the best way to handle the "doColorChange()" function. Is it best to create two CSS classes for the two colors, then have doColorChange switch them? Or is it better to give the two links an id and somehow set color properties there? How do I accomplish this?

JQUERY:
$(function() {
var links = $('a.link').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
HTML MARKUP:
Link 1
Link 2
I suggest adding a class to the links, that way it's easier.
CSS:
a.link.active { color:blue; }
Added a Live Version (fiddle): http://jsfiddle.net/gHb9F/

HTML
Link 1
Link 2
Script (using jQuery)
$(document).ready(function(){
$('a').click(function(){
$('a').css('color', 'black');
$(this).css('color', 'blue');
});
});
CSS
a:link { color: black; }
a:visited { color: black; }
Fiddle here
Note: The color change will be applied to all anchors current on your page. If you want to limit it to a select few, then put them in a class and add that class to the selector.
Edit:
If you plan on doing anything other than simple color swap, then classes are definitely the way to go (just substitute the .css calls for .addClass and .removeClass with your custom class names.

Try this code. I found it simple to use.
<script type="text/javascript">
var currentLink = null;
function changeLinkColor(link){
if(currentLink!=null){
currentLink.style.color = link.style.color; //You may put any color you want
}
link.style.color = 'blue';
currentLink = link;
}
</script>
<a onClick="changeLinkColor(this)">Link 1</a>
<a onClick="changeLinkColor(this)">Link 2</a>

var doColorChange=function(){ this.style.color="blue";}

Your default CSS colour for links should be:
a:link {
color: #0f0; /* or
color: green;
color: rgb(0,255,0);
}
Otherwise, using jQuery, you can achieve this with:
$('a').click(
function(){
$('.selectedLink').removeClass('selectedLink');
$(this).addClass('selectedLink');
return false
});
Coupled with the CSS:
.selectedLink {
color: #00f;
}
JS Fiddle demo.

Make 2 different classes in css and then swap classes on the links when you click on your link.
CSS
a.link{
color : green;
}
a.selected{
color : black;
}
Javascript
jQuery(a).click(function()
{
jQuery('a.selected').addClass('link');
jQuery('a.selected').removeClass('selected');
jQuery(this).removeClass('link');
jQuery(this).addClass('selected');
});

giving the elements css classes would be a better option. You could do it by using the className property on the object. in doCOlorChange you could write this.className ="newclassName";