How do i use localStorage for an active link

How do i use localStorage for an active link - javascript

I am trying to keep the focus CSS(basically, an active link CSS) on any link even after a page refresh. before I added the local storage snippet it worked, and it worked because the links I was switching to were '#' and didn't refresh upon click, I am using jquery. right now, nothing works.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript ">
$(document).ready(function() {
$('ul li a').click(function() {
localStorage.setItem("clicked", $(this).attr("id"));
});
var foocus = localStorage.getItem("clicked") || "home"; //<default
$('li a').removeClass("foocus");
$("#" + foocus).addClass("foocus");
});
});
</script>
HTML code
<div class="main-nav ">
<span><img src="images/logo.svg " alt=" "></span><span class="logo-text ">N</span>
<ul class="main-menu ">
<li id="home">
<img class="nav-items " src="images/home.svg " alt=" "><span>Home</span>
</li>
<li>
<img class="nav-items " src="images/male.svg " alt=" "><span>Pas</span>
</li>
<li>
<img class="nav-items " src="images/doctor.svg " alt=" "><span>Dors</span>
</li>
<li>
<img class="nav-items " src="images/lab.svg " alt=" "><span>Lab Tests</span>
</li>
</ul>
</div>
CSS
.main-nav ul li a {
font-family: Segoe UI;
font-weight: 350;
padding-bottom: 1px;
padding-left: 15px;
}
.main-nav ul li a span:hover {
font-weight: 700;
}
.foocus {
background: #8BC2A1;
border-radius: 7.5px;
width: 168px;
height: 38px;
padding-left: 30px !important;
display: block;
font-weight: 700 !important;
}

You are not targeting the correct id attr when clicking on an li item in your menu. Also, you need to removeClass foocus on all li's and addClass to the clicked li only in your click function.
I have fixed up your code (HTML, jQuery) and is working as expected now. Replace your code this below and it should work fine as expected.
$(document).ready(function() {
$('.main-menu > li').click(function() {
//set localStorage
localStorage.setItem("clicked", $(this).attr("id"))
//remove from all li
$('li').removeClass("foocus")
//Add class to the clicked li
$(this).addClass("foocus")
});
//get class on load
var foocus = localStorage.getItem("clicked")
foocus ? $("#" + foocus).addClass("foocus") : $('#home').addClass("foocus")
})
Working Demo: (Test this code in your browser since stack-overflow snippet does not support localStorage)
$(document).ready(function() {
$('.main-menu > li').click(function() {
//set localStorage
//localStorage.setItem("clicked", $(this).attr("id"))
//remove from all li
$('li').removeClass("foocus")
//Add class to the clicked li
$(this).addClass("foocus")
})
//get class on load
//var foocus = window.localStorage.getItem("clicked")
//foocus ? $("#" + foocus).addClass("foocus") : $('#home').addClass("foocus")
})
.main-nav ul li a {
font-family: Segoe UI;
font-weight: 350;
padding-bottom: 1px;
padding-left: 15px;
}
.main-nav ul li a span:hover {
font-weight: 700;
}
.foocus {
background: #8BC2A1;
border-radius: 7.5px;
width: 168px;
height: 38px;
padding-left: 30px !important;
display: block;
font-weight: 700 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-nav">
<span><img src="images/logo.svg " alt=" "></span><span class="logo-text">N</span>
<ul class="main-menu">
<li id="home">
<img class="nav-items " src="images/home.svg" alt=" "><span>Home</span>
</li>
<li id="pas">
<img class="nav-items " src="images/male.svg " alt=" "><span>Pas</span>
</li>
<li id="dors">
<img class="nav-items " src="images/doctor.svg " alt=" "><span>Dors</span>
</li>
<li id="labtests">
<img class="nav-items " src="images/lab.svg " alt=" "><span>Lab Tests</span>
</li>
</ul>
</div>

Related

How can I fix the tabbing order of my accordion tile menu?

I am creating a tiles/accordion utility.
On click of a tile, I am going to display the content relevant to that tile by appending the div content below the nearest third li element and will manually set focus to that div content section.
I am able to achieve this functionality now with help of JS and CSS:
However, the accessibility/tab order functionality is screwed up. If I click on Tile 1 and the content is displayed for it (the div will be appended below the third li element), on tabbing using keyboard, after the link the focus should go to Tile 2, but it goes to Tile 4 (since the ordering of elements in the DOM is in that order and I have relatively positioned the elements in different order for display).
If I remove relative positioning for the elements, the look gets screwed up.
Possible solution through which I feel that can be fixed:
Removing relative positioning of elements and on every click of tile, calculate top, left position values and relatively re-align the positions of the tiles.
Using keyboard events, force the focus in the order that is needed.
Does anyone have any suggestions for easy solution for this?
Correct tabbing order:
If Tile 1 was clicked,
First tab - Focus on Link inside div.
Second tab - Focus should move to Tile 2.
Third tab - Focus should move to Tile 3.
Fourth tab - Focus should move to Tile 4.
If Tile 2 was clicked,
First tab - Focus on Link inside div.
Second tab - Focus should move to Tile.
Third tab - Focus should move to Tile.
Fourth tab - Focus should move to Tile
$(document).ready(function() {
$("#tiles > li").click(function() {
var idVal = $(this).find("a").attr("rel");
dynamicContainerClass = "";
var indexVal = parseInt($(this).attr("rel"));
$(".dynamicContainer").remove();
var id = parseInt($(this).attr("rel"));
var $positionObj = $("#contentDiv").html();
//$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
if (indexVal % 3 == 1) {
var next = $(this).next();
var nextCtr = 1;
while (next.hasClass("active") == false) {
next = next.next();
nextCtr++;
if (nextCtr > 12) {
break
}
}
var afterNext = next.next();
var afterNextCtr = 1;
while (afterNext.hasClass("active") == false) {
afterNext = afterNext.next();
afterNextCtr++;
if (afterNextCtr > 12) {
break
}
}
if (afterNext.size() > 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter(afterNext)
} else {
if (next.size() > 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter(next)
} else {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
}
}
} else {
if (indexVal % 3 == 2) {
var nextCtr = 1;
var next = $(this).next();
while (next.hasClass("active") == false) {
next = next.next();
nextCtr++;
if (nextCtr > 12) {
break
}
}
if (next.size() > 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter(next)
} else {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
}
} else {
if (indexVal % 3 == 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
}
}
}
$(".dynamicContainer #" + id).addClass("container-text").attr("tabindex", "-1").focus();
});
});
.tiles-module {
font-size: 12px;
font-family: Arial;
display: block;
width: 292px;
background-color: #e5e2da;
margin: 0 10px;
min-height: 1px;
}
.tiles-module .tiles-header {
font-family: Arial;
font-size: 18px;
margin: 0 0 1px 16px;
color: #6b5e51;
padding-top: 3px;
}
.tiles-module #tiles>li {
float: left;
width: 95px;
height: 89px;
padding: 0;
margin: 0 1px 1px 0;
}
.tiles-module img {
cursor: pointer;
}
.tiles-module .tab-container li a {
background-color: #fff;
border: medium none;
color: #605952;
cursor: pointer;
display: inline-block;
height: 85px;
outline: medium none;
text-decoration: none !important;
width: 91px;
border-right: 2px solid #b6b5b2;
border-bottom: 2px solid #b6b5b2;
}
.tiles-module .tab-container {
margin-left: 4px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tiles-module .dynamicContainer {
position: relative;
top: -3px;
}
.tiles-module .tab-container .container-text {
width: 284px;
float: left;
margin-bottom: 1px;
margin-top: 3px;
}
.tiles-module .container-text {
display: inline-block;
position: relative;
background-color: #FFF;
width: 268px;
}
.container-text {
height: 100px;
text-align: center;
}
.tiles-module .tab-container li a:focus, .tiles-module .tab-container li a:active {
background-color: #B0E9FD;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<body>
<div class="tiles-module">
<div class="tiles-tab">
<div class="tab-container">
<div class="tiles-header">
<h3>Tiles Section</h3>
</div>
<ul id="tiles">
<li class="active" rel="1">
<a href="javascript:void(0);" >
<p>Tile 1</p>
</a>
</li>
<li class="active" rel="2">
<a href="javascript:void(0);" >
<p>Tile 2</p>
</a>
</li>
<li class="active" rel="3">
<a href="javascript:void(0);">
<p>Tile 3</p></a>
</li>
<li class="active" rel="4">
<a href="javascript:void(0);">
<p>Tile 4</p>
</a>
</li>
<li class="active" rel="5">
<a href="javascript:void(0);">
<p>Tile 5</p>
</a>
</li>
<li class="active" rel="6">
<a href="javascript:void(0);">
<p>Tile 6 </p>
</a>
</li>
<li class="active" rel="7">
<a href="javascript:void(0);">
<p>Tile 7 </p>
</a>
</li>
<li class="active" rel="8">
<a href="javascript:void(0);">
<p>Tile 8</p>
</a>
</li>
</ul>
</div>
<div class="ClearAll" style="clear:both;"></div>
</div>
<div id="contentDiv" style="display:none;">This is the tile content This is link focusable element inside tile content</div>
</div>
</body>
Code - https://jsbin.com/rezehepuju/edit?html,css,js,output

If at all possible, try to avoid using tabindex. If the tiles were the only thing on your page, then messing with tabindex might be ok. But once you set the tabindex of one object, you have to set it for all objects. That is, you have to completely control the tab order of everything on the page. It gets messy very fast.
The DOM order of tabbing is usually the best order, so if you have to change the tab order, it's usually best to change your DOM.
However, keep in mind that low vision users, especially ones that use magnifiers such as ZoomText, might get confused on your tab order because it won't be consistent. Magnifiers will scroll the page to keep the focus within view.
If tile 1 is open, then the order is:
tile 1
link
tile 2
tile 3
If tile 2 is open, then the order is:
tile 1
tile 2
link
tile 3
If tile 3 is open, then the order is:
tile 1
tile 2
tile 3
link
A screen magnifier will be constantly moving back and forth in a "seemingly" random way. The user won't know if the focus is going to move across the tiles before jumping down to an open section.
That doesn't answer your original question (although tabindex is sort of an answer), but hopefully gives some food for thought from an accessibility perspective.

Was able to achieve the intended tabbing order by using this solution. Re positioning the tiles using absolute, top, left properties. It worked.
$(document).ready(function() {
$("#tiles > li").click(function() {
var idVal = $(this).find("a").attr("rel");
dynamicContainerClass = "";
var indexVal = parseInt($(this).attr("rel"));
$(".dynamicContainer").remove();
var id = parseInt($(this).attr("rel"));
var $positionObj = $("#contentDiv").html();
var listItems = $("#tiles li");
listItems.each(function(idx, li) {
$(li).css({'position':'','top':'','left':''});
});
//$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
if (indexVal % 3 == 1) {
var next = $(this).next();
var positionOne = next.position();
var nextCtr = 1;
while (next.hasClass("active") == false) {
next = next.next();
nextCtr++;
if (nextCtr > 12) {
break
}
}
var afterNext = next.next();
var positionTwo = afterNext.position();
var afterNextCtr = 1;
while (afterNext.hasClass("active") == false) {
afterNext = afterNext.next();
afterNextCtr++;
if (afterNextCtr > 12) {
break
}
}
if (afterNext.size() > 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this));
afterNext.css('position','absolute');
afterNext.css('left',positionTwo.left);
afterNext.css('top',positionTwo.top);
next.css('position','absolute');
next.css('left',positionOne.left);
next.css('top',positionOne.top);
} else {
if (next.size() > 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this));
next.css('position','absolute');
next.css('left',positionOne.left);
next.css('top',positionOne.top);
} else {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
}
}
} else {
if (indexVal % 3 == 2) {
var nextCtr = 1;
var next = $(this).next();
var positionOne = next.position();
while (next.hasClass("active") == false) {
next = next.next();
nextCtr++;
if (nextCtr > 12) {
break
}
}
if (next.size() > 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this));
next.css('position','absolute');
next.css('left',positionOne.left);
next.css('top',positionOne.top);
} else {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
}
} else {
if (indexVal % 3 == 0) {
$('<div class=dynamicContainer aria-live="assertive" tabindex="-1"><div id=' + id + " class=" + dynamicContainerClass + ">" + $positionObj + "</div></div>").insertAfter($(this))
}
}
}
$(".dynamicContainer #" + id).addClass("container-text").attr("tabindex", "-1").focus();
});
});
.tiles-module {
font-size: 12px;
font-family: Arial;
display: block;
width: 292px;
background-color: #e5e2da;
margin: 0 10px;
min-height: 1px;
}
.tiles-module .tiles-header {
font-family: Arial;
font-size: 18px;
margin: 0 0 1px 16px;
color: #6b5e51;
padding-top: 3px;
}
.tiles-module #tiles>li {
float: left;
width: 95px;
height: 89px;
padding: 0;
margin: 0 1px 1px 0;
}
.tiles-module img {
cursor: pointer;
}
.tiles-module .tab-container li a {
background-color: #fff;
border: medium none;
color: #605952;
cursor: pointer;
display: inline-block;
height: 85px;
outline: medium none;
text-decoration: none !important;
width: 91px;
border-right: 2px solid #b6b5b2;
border-bottom: 2px solid #b6b5b2;
}
.tiles-module .tab-container {
margin-left: 4px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tiles-module .dynamicContainer {
position: relative;
top: -3px;
}
.tiles-module .tab-container .container-text {
width: 284px;
float: left;
margin-bottom: 1px;
margin-top: 3px;
}
.tiles-module .container-text {
display: inline-block;
position: relative;
background-color: #FFF;
width: 268px;
}
.container-text {
height: 100px;
text-align: center;
}
.tiles-module .tab-container li a:focus, .tiles-module .tab-container li a:active {
background-color: #B0E9FD;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<body>
<div class="tiles-module">
<div class="tiles-tab">
<div class="tab-container">
<div class="tiles-header">
<h3>Tiles Section</h3>
</div>
<ul id="tiles">
<li class="active" rel="1">
<a href="javascript:void(0);" >
<p>Tile 1</p>
</a>
</li>
<li class="active" rel="2">
<a href="javascript:void(0);" >
<p>Tile 2</p>
</a>
</li>
<li class="active" rel="3">
<a href="javascript:void(0);">
<p>Tile 3</p></a>
</li>
<li class="active" rel="4">
<a href="javascript:void(0);">
<p>Tile 4</p>
</a>
</li>
<li class="active" rel="5">
<a href="javascript:void(0);">
<p>Tile 5</p>
</a>
</li>
<li class="active" rel="6">
<a href="javascript:void(0);">
<p>Tile 6 </p>
</a>
</li>
<li class="active" rel="7">
<a href="javascript:void(0);">
<p>Tile 7 </p>
</a>
</li>
<li class="active" rel="8">
<a href="javascript:void(0);">
<p>Tile 8</p>
</a>
</li>
</ul>
</div>
<div class="ClearAll" style="clear:both;"></div>
</div>
<div id="contentDiv" style="display:none;">This is the tile content This is link focusable element inside tile content</div>
</div>
</body>

Livesearch with jquery like autocomplete

I have jquery live search and when I type something I see result but when I clicked result I want to see value in my input..and after I clicked out of the input result must be display:none; but like autocomplete I tried something but I couldn't apply it.
I don't use autocomplete plugin because I must show image in my result.
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Try these, I made 2 options for you to try based on your code. I hope they help you achieve what you want.
Single select:
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
$('.commentlist li a').click(function(){
$('.commentlist').fadeOut();
$("#srehberText").val($(this).text())
})
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Multi select:
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
var clicked = false;
$('.commentlist li a').click(function() {
var val = $("#srehberText").val();
if (!clicked) {
val = "";
clicked = true;
$("#srehberText").val($(this).text())
} else {
$("#srehberText").val(val + " " + $(this).text())
}
})
$(document).click(function(event) {
if (!$(event.target).closest('.commentlist, #srehberText').length) {
if ($('.commentlist').is(":visible")) {
$('.commentlist').hide();
}
}
})
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
The code below checks where you click and if it's not .commentlist, #srehberText then it will hide the ol
$(document).click(function(event) {
if (!$(event.target).closest('.commentlist, #srehberText').length) {
if ($('.commentlist').is(":visible")) {
$('.commentlist').hide();
}
}
})

Hope this would do.
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
$(".commentlist li a").click(function() {
var val = $(this).text();
$("#srehberText").val(val);
$('.commentlist li').fadeOut();
});
});
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(document).ready(function() {
$(".commentlist li").click(function(){
$("#srehberText").val($(this).text());
// you have input box. that is why only text is inputed in side.
// you will need to place small image control beside input to show image
});
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}
<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD
</li>
<li>
<img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

you can also use select check it here

to make list invisible on clicking somewhere else:
<input type="text" onblur="listHide()">
<script>
var molist = false; //mouse-over list
// make events mouseover and mouse leve to change molist value
function listHide() {
if (molist = false) { //hide list}
}
</script>

Incomplete jQuery Carousel (Magento Shop)

Someone has built a carousel for our webshop, but it is not functioning correctly. When you click one of the arrow buttons, the images will move to the left or right. But as you might have noticed already, the images just disappear into the void.
Obviously it should move to the first image when the last one has been reached and someone clicks on "next", and to the last image when the first one has been reached.
Note: the reason he used "jQuery" instead of "$" is because "$" is in conflict with Magento.
This is the code that is used:
HTML
<div class="gallery">
<div id="moveleft"><</div>
<ul class="gallery-content">
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" alt="">
</a>
</li>
</ul>
<div id="moveright">></div>
</div>
CSS
ul, li { list-style: none; }
.gallery {
min-height: 340px;
overflow:hidden;
margin-top: 40px;
}
.gallery ul.gallery-content {
margin-left: 55px;
margin-right: 55px;
max-height: 300px;
overflow:hidden;
margin-top: -300px;
}
.gallery img {
float:left;
padding: 3px;
margin: 0 10px;
}
.gallery #moveleft {
height: 300px;
width: 50px;
line-height: 300px;
border: #CCC solid 1px;
margin-left: 0px;
font-size:45px;
padding-left: 2px;
}
.gallery #moveright {
height: 300px;
width: 50px;
line-height: 300px;
font-size:45px;
float: right;
margin-top: -300px;
padding-left: 2px;
border: #CCC solid 1px;
}
JS
jQuery(document).ready(function() {
jQuery('.gallery #moveleft').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "-=300px" //moves left
});
});
jQuery('.gallery #moveright').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "+=300px" //moves right
});
});
});

I would recommend using OwlCarousel for simple jQuery Carousel on Magento. This jQuery plugin also support touch slide (work very well on mobile), which is a plus if your Magento website is responsive.
Hope this help

Add hover and thumbnail support with jQuery

Here is my code I'm using: http://plnkr.co/edit/qfL6mg3bUGYxX70dx1WV?p=preview
I'm trying to figure out how I can pause the slideshow when a user hovers over the large slider image and also, if the user clicks on a thumbnail how can I add the "selected" class like the first image with the blue border has?
Here is the html:
<div id="slider-container">
<ul class="slider">
<li>
<img src="http://placehold.it/350x150&text=1">
<div class="img-caption">
<h2>Test1</h2>
<p>Test 1 text</p>
</div>
</li>
<li>
<img src="http://placehold.it/350x150&text=2">
<div class="img-caption">
<h2>Test2</h2>
<p>Test 2 text</p>
</div>
</li>
<li>
<img src="http://placehold.it/350x150&text=3">
<div class="img-caption">
<h2>Test3</h2>
<p>Test 3 text</p>
</div>
</li>
<li>
<img src="http://placehold.it/350x150&text=4">
<div class="img-caption">
<h2>Test4</h2>
<p>Test 4 text</p>
</div>
</li>
</ul>
<!--/main slider slider-->
<!-- thumb navigation slider -->
<div id="slider-thumbs">
<!-- thumb navigation slider items -->
<ul class="list-inline">
<li> <a class="selected">
<img src="http://placehold.it/50x50&text=1">
</a></li>
<li> <a>
<img src="http://placehold.it/50x50&text=2">
</a></li>
<li> <a>
<img src="http://placehold.it/50x50&text=3">
</a></li>
<li> <a>
<img src="http://placehold.it/50x50&text=4">
</a></li>
</ul>
</div>
</div>
CSS:
#slider-container {
float: left;
}
.slider {
position: relative;
overflow: hidden;
margin: 0px;
padding: 0;
}
.slider li {
display: none;
top: 0;
left: 0;
list-style: none;
}
.img-caption {
background-color: #e3e4e4;
opacity: 0.8;
margin-top: -100px;
padding: 0px 0 0px 15px;
}
.img-caption h2 {
font-size: 28px;
text-transform: uppercase;
padding-top: 10px;
}
.img-caption p {
font-size: 14px;
margin-top: -20px;
padding-bottom: 10px;
}
.list-inline {
padding-left: 0;
list-style: none;
}
.list-inline>li {
display: inline-block;
padding-left: 1px;
padding-right: 1px;
}
.selected img {
border: 3px #0084d9 solid;
}
#slider-thumbs {
margin-top: -20px;
}
And JS:
jQuery(function($) {
var $slider = $('.slider');
var $slide = 'li';
var $transition_time = 0;
var $time_between_slides = 4000;
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1;
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
});
If you have any question let me know before down voting. I'll do my best for clarification. Thx

This should do : http://plnkr.co/edit/X2I1AFo2O1KOnnnBMiUg?p=preview
Thumbs are selected as slides are activated.
On user click thumbs are selected and same slide is activated.
On hover no action. (Thom-x's answer)
$("#slider-thumbs li a").click(function() {
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
var $j = $thumbs.find('li a.selected').parent().index();
thumbslist().eq($j).removeClass('selected');
$j = $(this).parent().index();
slides().eq($j).fadeIn($transition_time);
slides().eq($j).addClass('active');
$(this).addClass("selected");
});

I used :
$(".slider").hover(callback,callback)
Now you can pause the slider.
http://plnkr.co/edit/Qe3qq6v5g2FU3dVerUMc?p=preview
Edit :
Everything is working now (with some basic Jquery functions).

Another jQuery Quicksand jumpy transition

When I hit filter the li get a left overlapping position before to get in transition to filter. I tested the previous questions and answers but isn't solved the problem. The ul doesn't use an absolute position, the li class have left float.
here is the html
<div class="filters">
<ul id="filters" class="clearfix">
<li><a title="all" href="#" class="active"> all </a></li>
<li><a title="web" href="#"> web </a></li>
<li><a title="app" href="#"> app </a></li>
<li><a title="logo" href="#"> logo </a></li>
<li><a title="card" href="#"> card </a></li>
<li><a title="icon" href="#"> icon </a></li>
</ul>
</div>
<div id="portfolio">
<ul id="portfolio_list">
<li class="portfolio" data-id="id-1" data-type="logo">
<div class="portfolio-wrapper">
<img src="images/portfolios/logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
<li class="portfolio" data-id="id-2" data-type="app">
<div class="portfolio-wrapper">
<img src="images/portfolios/app/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Visual Infography</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
</ul></div>
And this is the jQuery call
$(document).ready(function () {
var $filter = $('#filters a');
var $portfolio = $('#portfolio_list');
var $data = $portfolio.clone();
$filter.click(function(e) {
if ($($(this)).attr("title") == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']');
}
$portfolio.quicksand($filteredData, {
adjustHeight: 'dynamic',
duration: 800,
easing: 'easeInOutQuad'
});
$('#filters a').removeClass('active');
$(this).addClass('active');
});
});
forgot to post the css
#portfolio_list li { overflow:hidden; float: left; }
#portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; }
#portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; }
#portfolio_list .portfolio img { max-width:100%; position: relative; }
#portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; }
#portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; }
#portfolio_list .portfolio .label-text { color:#000; position: relative; z-index:500; padding:12px 8px 0; }
#portfolio_list .portfolio .text-category { display:block; }
Any help is appreciated. Thanks.

The problem was cause by same ID used to style the ul and li and in same time to call it with jQuery. Is needed to use an ID without css styles to not create glitches in quicksand.

Develop Reference

JavaScript is the programming language of the Web.

How do i use localStorage for an active link - javascript

Related

How can I fix the tabbing order of my accordion tile menu?

Livesearch with jquery like autocomplete

Incomplete jQuery Carousel (Magento Shop)

Add hover and thumbnail support with jQuery

Another jQuery Quicksand jumpy transition

Categories

Resources