We Keep Coding

Keep scroll position in an element on page refresh

I set a ul of product variants with horizontal scroll.
When i scroll and click on a variant the page refresh and the scroll return to start.
I need to maintain the posistion where it was first of refresh.
How can i do?
ul#group_17 {
width: 150px;
display: flex;
overflow: auto;
list-style: none;
}
li {margin: 0 10px 0 0}
.input-color {
position: absolute;
opacity: 0;
cursor: pointer;
height: 60px;
width: 60px;
}
span {
height: 60px;
width: 60px;
display: block;
}
<ul id="group_17">
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="87">
<span class="color texture" style="background:black"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="88" checked="checked">
<span class="color texture" style="background:brown;"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="89">
<span class="color texture" style="background:red"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="90">
<span class="color texture" style="background:yellow"></span>
</label>
</li>
</ul>

More information is needed
But you can give an ID to the part of your code that you want and when you click, it will be linked to the same part

you can use this code in js
document.location.reload(true)
or use this in js
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
</script>

How to make simple star rating?

I make my own star rating with html css, but it is not working true. If i use direction: rtl or float: right it works but i can't use rtl or float:right because of php.
How can i make it with pure css and html?
$('.stars a').on('click', function(){
$('.stars a').removeClass('active');
$(this).addClass('active');
});
.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
font-size: 0;
text-decoration: none;
}
.stars a:before {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
.stars a:hover:before,
.stars a:hover ~ a:before,
.stars a.active:before,
.stars a.active ~ a:before {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>

Starting to your HTML, I tried to reverse the color's change 'cause in pure CSS + & ~ works only on next elements. Then why you don't make the next a gray and not blue?
I tried to play only with your CSS, but I had to add also a class to span to work with active situation. Sorry :P
This is the result:
$('.stars a').on('click', function(){
$('.stars span, .stars a').removeClass('active');
$(this).addClass('active');
$('.stars span').addClass('active');
});
.stars input {
position: absolute;
left: -999999px;
}
.stars a {
display: inline-block;
padding-right:4px;
text-decoration: none;
margin:0;
}
.stars a:after {
position: relative;
font-size: 18px;
font-family: 'FontAwesome', serif;
display: block;
content: "\f005";
color: #9e9e9e;
}
span {
font-size: 0; /* trick to remove inline-element's margin */
}
.stars a:hover ~ a:after{
color: #9e9e9e !important;
}
span.active a.active ~ a:after{
color: #9e9e9e;
}
span:hover a:after{
color:blue !important;
}
span.active a:after,
.stars a.active:after{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p class="stars">
<span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span>
</p>
Hope it helps! :)

This uses radio buttons to achieve the effect
<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
https://codepen.io/jamesbarnett/pen/vlpkh

Simple star rating with pure javascript.
HTML
<div id="rating_bar"> </div>
CSS
#rating_bar {
width:100px;
height:100px;
display:inline-block;
display:inline;
}
Javascript
var content ='';
for(var i=1;i<=5;i++)
content += ' <span id="rate_'+i+'">✰</span> ';
document.getElementById('rating_bar').innerHTML=content;
var spans = document.getElementById("rating_bar")
.getElementsByTagName('span');
for(i=0;i<spans.length;i++)
spans[i].onmouseover=hoverStar;
function hoverStar()
{
for(i=0;i<this.id.charAt(5);i++)
spans[i].innerText='⭐';
for(i=this.id.charAt(5);i<5;i++)
spans[i].innerText='✰';
}
Sample Output:

HTML
<div class="rating" tabindex="1" onblur="calculateRating(this)">
<i class="fa fa-star-o" aria-hidden="true" value="1" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="2" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="3" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="4" onclick="clickStar(this)"></i>
<i class="fa fa-star-o" aria-hidden="true" value="5" onclick="clickStar(this)"></i>
</div>
<div class="rating-display"></div>
CSS
.clicked{
color:yellow;}
JAVASCRIPT
var rating = document.querySelector(".rating");
var ratingDisplayEle = document.querySelector(".rating-display");
//add event listener
function clickStar(ele){
var clickedStar = ele;
//value of the star
var ratingValue = parseInt(clickedStar.getAttribute("value"));
//change the color of the star
for(var i=0; i<ratingValue; i++){
rating.children[i].classList.add("clicked");
for(var j=ratingValue; j<=4; j++){
if(rating.children[j].classList.contains("clicked")){
rating.children[j].classList.remove("clicked");
}
}
}
}
//function to calculate rating
function calculateRating(ele){
//check how many elements are having clicked class
var ratingCount = 0;
for(var i=0; i<ele.children.length; i++){
if(ele.children[i].classList.contains("clicked")){
ratingCount++;
}
}
ratingDisplayEle.textContent = `You have selected ${ratingCount} rating out of 5`;
}

Simple star rating
function myFunction() {
var five = document.getElementById('1-star').checked;
document.getElementById("one").innerHTML = five;
}
/* component */
.star-rating {
display:flex;
flex-direction: row-reverse;
font-size:3em;
justify-content:space-around;
padding:0 .2em;
text-align:center;
width:5em;
}
.star-rating input {
display:none;
}
.star-rating label {
color:#ccc;
cursor:pointer;
}
.star-rating :checked ~ label {
color:#f90;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
color:#fc0;
}
<div class="star-rating">
<input type="radio" id="5-stars" name="rating" value="5" />
<label for="5-stars" class="star">★</label>
<input type="radio" id="4-stars" name="rating" value="4" />
<label for="4-stars" class="star">★</label>
<input type="radio" id="3-stars" name="rating" value="3" />
<label for="3-stars" class="star">★</label>
<input type="radio" id="2-stars" name="rating" value="2" />
<label for="2-stars" class="star">★</label>
<input type="radio" id="1-star" name="rating" value="1" />
<label for="1-star" class="star">★</label>
</div>
<p id="one" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

Strange alphabetical sorting of checkbox lists [duplicate]

This question already has answers here:
Sorting an array of objects by property values
(35 answers)
Closed 6 years ago.
I have 4 checkboxes, each representing a region. Clicking any one of them shows 3 countries relevant to that region. Clicking combinations of the regional checkboxes shows all the relevant countries in-line, but I want
the list of country checkboxes to always be displayed in alphabetical order.
Strangely my jquery seemed to work for 3 regional checkboxes, but doesn't seem to work for 4. I just can't see what dumb mistake I'm making and am starting to suspect something more sinister. Here's my fiddle: https://jsfiddle.net/m5v7v6kv/
Thanks for any help.
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text());
}
var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})
.CountryWrapper {
border: 1px solid blue;
height: 150px;
width: 480px;
border: 1px solid blue;
}
.myEuropeCountries {
display: none;
}
.myNAMCountries {
display: none;
}
.mySAMCountries {
display: none;
}
.myAfricaMECountries {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="EuropeCountries" />Europe</label>
<label><input type="checkbox" id="NAMCountries" />North America</label>
<label><input type="checkbox" id="SAMCountries" />South America</label>
<label><input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>
<div class="CountryWrapper">
<br>
<label class="myEuropeCountries"><input type="checkbox" value="Spain" />Spain</label>
<label class="myEuropeCountries"><input type="checkbox" value="Germany" />Germany</label>
<label class="myEuropeCountries"><input type="checkbox" value="Austria" />Austria</label>
<label class="myNAMCountries"><input type="checkbox" value="USA" />USA</label>
<label class="myNAMCountries"><input type="checkbox" value="Mexico" />Mexico</label>
<label class="myNAMCountries"><input type="checkbox" value="Canada" />Canada</label>
<label class="mySAMCountries"><input type="checkbox" value="Brazil" />Brazil</label>
<label class="mySAMCountries"><input type="checkbox" value="Argentina" />Argentina</label>
<label class="mySAMCountries"><input type="checkbox" value="Chile" />Chile</label>
<label class="myAfricaMECountries"><input type="checkbox" value="SouthAfrica" />South Africa</label>
<label class="myAfricaMECountries"><input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfricaMECountries"><input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>

Looks like your compare function should return 1 or -1. There is really no reason to return 0 in your case unless somehow two countries will have the same name.
return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
function sortByText(a, b) {
return $.trim($(a).text()) > $.trim($(b).text()) ? 1 : -1;
}
var li = $(".CountryWrapper").children("label").detach().sort(sortByText)
$(".CountryWrapper").append(li)
$('input[type="checkbox"]').click(function() {
$('.my' + $(this).attr("id")).slideToggle(200)
})
.CountryWrapper {
border: 1px solid blue;
height: 150px;
width: 480px;
border: 1px solid blue;
}
.myEuropeCountries {
display: none;
}
.myNAMCountries {
display: none;
}
.mySAMCountries {
display: none;
}
.myAfricaMECountries {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="EuropeCountries" />Europe</label>
<label>
<input type="checkbox" id="NAMCountries" />North America</label>
<label>
<input type="checkbox" id="SAMCountries" />South America</label>
<label>
<input type="checkbox" id="AfricaMECountries" />Africa and Middle East</label>
<!-------------------------------------------------------------------->
<div class="CountryWrapper">
<br>
<label class="myEuropeCountries">
<input type="checkbox" value="Spain" />Spain</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Germany" />Germany</label>
<label class="myEuropeCountries">
<input type="checkbox" value="Austria" />Austria</label>
<label class="myNAMCountries">
<input type="checkbox" value="USA" />USA</label>
<label class="myNAMCountries">
<input type="checkbox" value="Mexico" />Mexico</label>
<label class="myNAMCountries">
<input type="checkbox" value="Canada" />Canada</label>
<label class="mySAMCountries">
<input type="checkbox" value="Brazil" />Brazil</label>
<label class="mySAMCountries">
<input type="checkbox" value="Argentina" />Argentina</label>
<label class="mySAMCountries">
<input type="checkbox" value="Chile" />Chile</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SouthAfrica" />South Africa</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="Egypt" />Egypt</label>
<label class="myAfricaMECountries">
<input type="checkbox" value="SaudiArabia" />Saudi Arabia</label>
</div>

Javascript search box not appearing in Domtab

Here's my website: http://library.bennington.edu. We use domtabs to organize our search boxes. We're switching cataloging software, so I'm trying to replace the catalog search box with a new search box from Ebsco Discovery Services (EDS). EDS provides their own code, so I didn't have to write anything, should just be cut and paste. But when I drop the new code in, nothing appears at all, just a total blank space. If I place the code BELOW the domtabs box, it works fine. It just blanks when placed within the domtabs box, as if there's some conflict. Here's the relevant DomTab code section:
<div class="domtab">
<ul class="domtabs">
<li><a style="border-top-left-radius:9px" href="#catalog">Catalog</a></li>
<li>Journals</li>
<li>Databases</li>
<li>Reserves</li>
<li>Reference</li>
<li><a style="border-top-right-radius:9px" href="#archive">Archive</a></li>
</ul>
<div>
<h2><a name="#catalog" id="catalog"></a></h2>
<table width="425px">
<tr>
<td valign="top" width="70%">
<!--Insert new code here-->
<!--Code Ends here-->
<span>Search the library's holdings for books, ebooks, movies, music recordings, and more.</span>
<form action="http://library.bennington.edu/search/Y" method="get" style="display:block; padding: 2px 0px; margin: 0;">
<input style="border-radius:3px" type="text" name="SEARCH" size="35" value="" />
<input type="hidden" name="SORT" value="A" />
<script language="javascript">
function iiiDoSubmit_1() {
var name = "iiiFormHandle_1";
if (document.getElementById)
obj = document.getElementById(name);
else if (document.all)
obj = document.all[name];
else if (document.layers)
obj = document.layers[name];
obj.form.submit();
}
</script>
<input type="hidden" id="iiiFormHandle_1"/>
<a href=# onclick="iiiDoSubmit_1();">
<input style="border-radius:3px; width:50px; margin-top:3px; padding:2px; font-size:11px" value="Search" type="Submit" />
</a>
</form>
</td>
<td valign="top" align="right">
<span class="roundedContentInfo">
<span style="font-size:130%; border-bottom:1px solid #000; text-align:left;"><b>Other Searches</b></span>
<span>Advanced </span>
<span>Title </span>
<span>Author </span>
<span>Author & Title </span>
</span>
</td>
</tr>
</table>
</div>
And here's the code that should be dropped in:
<script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<style type="text/css">
.choose-db-list{ list-style-type:none;padding:0;margin:10px 0 0 0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt;width:340px; }
.choose-db-check{ width:20px;float:left;padding-left:5px;padding-top:5px; }
.choose-db-detail{ margin-left:30px;border-left:solid 1px #E7E7E7;padding:5px 11px 7px 11px;line-height:1.4em; }
.summary { background-color:#1D5DA7;color:#FFFFFF;border:solid 1px #1D5DA7; }
.one { background-color: #FFFFFF;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.two { background-color: #F5F5F5;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
.selected { background-color: #E0EFF7;border:solid 1px #E7E7E7;border-top:solid 1px #FFFFFF; }
#ebscohostCustomSearchBox #disciplineBlock { width:auto; }
#ebscohostCustomSearchBox .limiter { float:left;margin:0;padding:0;width:50%; }
#ebscohostsearchtext { width: 144px; }
#ebscohostsearchtext.edspub { width: 245px; }
.ebscohost-search-button.edspub {
border: 1px solid #156619;
padding: 5px 10px !important;
border-radius: 3px;
color: #fff;
font-weight: bold;
background-color: #156619;
}
.ebscohost-title.edspub {
color: #1c7020;
font-weight: bold;
}
</style>
<form id="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="width:340px; overflow:auto;">
<input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://0-search.ebscohost.com.library.bennington.edu/login.aspx?direct=true&site=eds-live&scope=site&type=0&mode=bool&lang=en&authtype=cookie,ip" />
<input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
<input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
<input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
<div style="background-image:url('http://support.ebscohost.com/images/logos/eds100.gif'); background-repeat:no-repeat; height:50px; width:340px; font-family:Verdana,Arial,Helvetica,sans-serif;font-size:9pt; color:#353535;">
<div style="padding-top:5px;padding-left:115px;">
<span class="ebscohost-title " style="font-weight:bold;">Research databases</span>
<div>
<input id="ebscohostsearchtext" class="" name="ebscohostsearchtext" type="text" size="23" style="font-size:9pt;padding-left:5px;margin-left:0px;" />
<input type="submit" value="Search" class="ebscohost-search-button " style="font-size:9pt;padding-left:5px;" />
<div id="guidedFieldSelectors">
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
<label class="label" for="guidedField_0"> Keyword</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
<label class="label" for="guidedField_1"> Title</label>
<input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
<label class="label" for="guidedField_2"> Author</label>
</div>
</div>
</div>
</div>
<div id="limiterblock" style="margin-left:-px; overflow: auto; ">
<div id="limitertitle" style="font-weight:bold;padding-top:25px;padding-bottom:5px;">Limit Your Results</div>
<div class="limiter" >
<input type="checkbox" id="chkFullText" name="chkFullText" checked="checked" />
<label for="chkFullText">Full Text</label>
</div>
<div class="limiter" >
<input type="checkbox" id="chkLibraryCollection" name="chkLibraryCollection" />
<label for="chkLibraryCollection">Available in Library Collection</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkPeerReviewed" name="chkPeerReviewed" />
<label for="chkPeerReviewed">Peer Reviewed</label>
</div>
<div class="limiter" style="display:none;">
<input type="checkbox" id="chkCatalogOnly" name="chkCatalogOnly" />
<label for="chkCatalogOnly">Catalog Only</label>
</div>
</div>
</form>
I've moved the javascript call to the top of the page, and moved the CSS to my CSS page to thin out the code, but still just getting the domtab box with normal background color as if nothing is there. :-/

Set Class from radio:checked to div corresponding with session id

I'm learning jquery and I'm hard to build this script.
I need to set the radio class: checked in some divs with class corresponding section of the options .. Good to understand better just give a look at this code.
Who can help since I am already grateful!
Html:
<form action="">
<div class="object" id="obj01">
<h3>Colors-01</h3>
<label class="cor01 cor">01<input type="radio" name="color01" class="rd"></label>
<label class="cor02 cor">02<input type="radio" name="color01" class="rd"></label>
<label class="cor03 cor">03<input type="radio" name="color01" class="rd"></label>
<label class="cor04 cor">04<input type="radio" name="color01" class="rd"></label>
<label class="cor05 cor">05<input type="radio" name="color01" class="rd"></label>
</div>
<div class="object" id="obj02">
<h3>Colors-02</h3>
<label class="cor01 cor">01<input type="radio" name="color02" class="rd"></label>
<label class="cor02 cor">02<input type="radio" name="color02" class="rd"></label>
<label class="cor03 cor">03<input type="radio" name="color02" class="rd"></label>
<label class="cor04 cor">04<input type="radio" name="color02" class="rd"></label>
<label class="cor05 cor">05<input type="radio" name="color02" class="rd"></label>
</div>
<div class="object" id="obj03">
<h3>Colors-03</h3>
<label class="cor01 cor">01<input type="radio" name="color03" class="rd"></label>
<label class="cor02 cor">02<input type="radio" name="color03" class="rd"></label>
<label class="cor03 cor">03<input type="radio" name="color03" class="rd"></label>
<label class="cor04 cor">04<input type="radio" name="color03" class="rd"></label>
<label class="cor05 cor">05<input type="radio" name="color03" class="rd"></label>
</div>
</form>
<div class="obj obj01">Color me</div>
<div class="obj obj02">Hey! More color</div>
<div class="obj obj03">Colorize!</div>
Js/jquery:
$('.cor').click(function() {
var cor = $(this).find('.rd:checked').parents().css('background-color');
var id = $(this).closest('.object').attr('id');
/** Need a script for set the first class from <label> with radio checked **/
$('.' + id).css('background-color', cor);
});
CSS:
.cor01{
background-color: yellow;
}
.cor02{
background-color: lightblue;
}
.cor03{
background-color: lightgreen;
}
.cor04{
background-color: coral;
}
.cor05{
background-color: pink;
}
.obj{
padding: 2em;
border: 1px dashed #333;
text-align: center;
}

I update my fiddle, setting selected class to same element that get the background, check if this satisfy your needs:
https://jsfiddle.net/oo1s4jm0/3/
Relevant code:
var classs = $(this).attr('class');
var first = classs.split(' ')[0];
var newClass = $('.' + id).attr('class');
var splited = newClass.split(' ');
if(splited.length > 2){
splited[2] = first;
$('.' + id).attr('class', splited.join(' '));
}else{
$('.' + id).addClass(first);
}