Error with Javascript on Partial Page Update - javascript

I have some scripts which needs to be run when partial page changes. On 1st page Load it seems to be working fine but after partial page is updated javascript stopped working
1st Try:
I tried to put javascript in partial page itself but its not working
2nd Try:
I tried to put javascript on the parent page from which partial page is upadted
Code To Load Partial Page:
#Html.DropDownList("UserType", DirectCast(ViewBag.UserType, SelectList), New With {.onchange = "ChangeUserType(this.value)"})
<div id="renderTreeView">
#Html.Partial("_TreeView")
</div>
<script>
function ChangeUserType(UserType) {
$('#renderTreeView').load("/UserMaster/ChangePermission?iUserTypeID=" + UserType);
}
//And Somme of my other javascript function to create tree view
</script>
This script doesnot work on partial page update
<script>
$(document).ready(function () {
$('#check-all').click(function () {
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function () {
$("input:checkbox").attr('checked', false);
});
});
$(document).ready(function () {
$('.tree li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.tree li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function () {
$('.tree li').each(function () {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
$('#Add').change(function () {
AddPermission();
});
$('#Change').change(function () {
AddPermission();
});
$('#Delete').change(function () {
AddPermission();
});
$('#View').change(function () {
AddPermission();
});
$('#Print').change(function () {
AddPermission();
});
});
function SetPageNumber(pageID) {
var PageID = document.getElementById("pageID");
PageID.value = pageID
var PermissionsofPage = document.getElementById(pageID).value
var AddCheck = PermissionsofPage.charAt(0);
var ChangeCheck = PermissionsofPage.charAt(1);
var DeleteCheck = PermissionsofPage.charAt(2);
var ViewCheck = PermissionsofPage.charAt(3);
var PrintCheck = PermissionsofPage.charAt(4);
checkUncheckCheckBoxes(AddCheck, ChangeCheck, DeleteCheck, ViewCheck, PrintCheck)
}
function checkUncheckCheckBoxes(AddCheck,
ChangeCheck,
DeleteCheck,
ViewCheck,
PrintCheck) {
//$('#Permission input:checked').removeAttr('checked');
if (AddCheck == 1) {
$('#Add').attr('checked', true);
}
else {
$('#Add').removeAttr('checked');
//$('#Add').attr('checked', false);
}
if (ChangeCheck == 1) {
$("#Change").attr("checked", true);
}
else {
$("#Change").attr("checked", false);
}
if (DeleteCheck == 1) {
$("#Delete").attr("checked", true);
}
else {
$("#Delete").attr("checked", false);
}
if (ViewCheck == 1) {
$("#View").attr("checked", true);
}
else {
$("#View").attr("checked", false);
}
if (PrintCheck == 1) {
$("#Print").attr("checked", true);
}
else {
$("#Print").attr("checked", false);
}
}
function AddPermission() {
var PageIDPermission = document.getElementById("pageID").value;
var Permissions
if ($("#Add").is(":checked")) {
Permissions = "1"
}
else {
Permissions = "0"
}
if ($("#Change").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#Delete").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#View").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#Print").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
var toSet = document.getElementById(PageIDPermission)
toSet.value = Permissions
}
</script>
This is my Partial Page
<link href="~/assets/css/treeview.css" rel="stylesheet" />
<div class="span6">
<div class="portlet box grey">
<div class="portlet-title">
<div class="caption"><i class="icon-sitemap"></i>Page Permission (#ViewBag.PageNo)</div>
<div class="actions">
Toggle All
</div>
</div>
<div class="portlet-body fuelux">
<div class="tree">
<ul>
<li>
<a >First Level</a>
<ul>
<li>Second Level<input type="text" id="page_2" #*style="display:none"*# value="00000" /></li>
<li><a onclick ="SetPageNumber('page_1')">Second Level</a><input type="text" id="page_1" #*style="display:none"*# value="00000" /></li>
<li><a>Second Level</a></li>
</ul>
</li>
<li>
<a>First Level</a>
<ul>
<li>
<a>Second Level</a>
<ul>
<li><a>Third Level</a></li>
<li><a>Third Level</a></li>
<li>
<a>Third Level</a>
<ul>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a></li>
<li>
<a>Fourth Level</a>
<ul>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level</a></li>
</ul>
</li>
<li>
<a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="span2" id="Permission">
<div class="portlet box grey">
<div class="portlet-title">
<div class="caption"><i class="icon-key"></i> Rights</div>
</div>
<div class="portlet-body fuelux">
<div>
<input type="checkbox" id="Add" /> Add
</div>
<div>
<input type="checkbox" id="Change" /> Change
</div>
<div>
<input type="checkbox" id="Delete" /> Delete
</div>
<div>
<input type="checkbox" id="View" /> View
</div>
<div>
<input type="checkbox" id="Print"/> Print
</div>
<div>
<input type="text" id="pageID" #*style="display:none"*# value="0" />
#* <button onclick="ChangeCheckBox()">Toggle</button>*#
</div>
</div>
</div>
</div>

Related

How to make Tab loop using JQuery and JavaScript?

I have created a tab using JQuery and JavaScript. It's working fine but I need one modification on that.
I want a tab loop type like once we reached the last one it should go to the first tab when I click the next button. but now it's not looping. I tried so many types but I am not getting the output what I expected. I have added my code here. anyone helps me to fix this.
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault(), $("li.active").next("li").trigger("click");
}),
$(".previous").click(function (e) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

Check next & prev element is there
$("li.active").next("li").length)
$("li.active").prev("li").length)
$(document).ready(function () {
$(document).ready(function() {
$(".tab_content div:not(:first)").toggle(),
$(".tabs li").click(function() {
var e = $(this).index();
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function(e) {
if ($("li.active").next("li").length) {
e.preventDefault(), $("li.active").next("li").trigger("click");
} else {
e.preventDefault(), $("li:first-child").trigger("click");
}
}),
$(".previous").click(function(e) {
if ($("li.active").prev("li").length) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
} else {
e.preventDefault(), $("li:last-child").trigger("click");
}
});
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
.tabs_indicators li.active{background:red;}
.tabs li.active{color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

You just have to add 2 checks:
For the "next" case, if there is any next <li> element
For the "prev" case, if the is any previous <li> element
Just change your js like this:
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
debugger;
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>

IE 11 does not show Listbox Items

I would like display combobox on IE 11 by referring this article https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
but for some reason i can not display the listbox items on IE but for other browsers it works fine. Any idea?
If I try to remove this line
this.domNode = domNode;
it shows me the list but not clickable.
javascript class
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*/
var Option = function (domNode, listboxObj) {
this.domNode = domNode;
this.listbox = listboxObj;
this.textContent = domNode.textContent;
this.textComparison = domNode.textContent.toLowerCase();
};
Option.prototype.init = function () {
if (!this.domNode.getAttribute('role')) {
this.domNode.setAttribute('role', 'option');
}
this.domNode.addEventListener('click', this.handleClick.bind(this));
this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
};
/* EVENT HANDLERS */
Option.prototype.handleClick = function (event) {
this.listbox.setOption(this);
this.listbox.close(true);
};
Option.prototype.handleMouseover = function (event) {
this.listbox.hasHover = true;
this.listbox.open();
};
Option.prototype.handleMouseout = function (event) {
this.listbox.hasHover = false;
setTimeout(this.listbox.close.bind(this.listbox, false), 300);
};
HTML
<section>
<h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<div class="combobox-list">
<label for="cb1-input">Search</label>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text"
role="combobox"
aria-autocomplete="none"
aria-expanded="false"
aria-haspopup="true"
aria-owns="cb1-listbox"
readonly
/>
<button id="cb1-button" tabindex="-1" aria-label="Open">
▽
</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="Previous Searches">
<li id="lb1-01" role="option">weather</li>
<li id="lb1-02" role="option">salsa recipes</li>
<li id="lb1-03" role="option">cheap flights to NY</li>
<li id="lb1-04" role="option">dictionary</li>
<li id="lb1-05" role="option">baseball scores</li>
<li id="lb1-06" role="option">hotels in NY</li>
<li id="lb1-07" role="option">mortgage calculator</li>
<li id="lb1-08" role="option">restaurants near me</li>
<li id="lb1-09" role="option">free games</li>
<li id="lb1-10" role="option">gas prices</li>
<li id="lb1-11" role="option">classical music</li>
</ul>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

How to fix an onclick event not getting triggered?

The onclick event on button with role="menuitem" is not getting triggered but mouseover is getting triggered.
I have tried various things like instead of using an external function, I simplied made an alert but no benefit.
{{#each docs}}
<li class="note" id={{this.time}}>
<a href="#">
<div class="container">
<div class="more" id={{this.time}} onclick="openMenu(event)">
<button id={{this.time}} class="more-btn">
<span id={{this.time}} class="more-dot"></span>
<span id={{this.time}} class="more-dot"></span>
<span id={{this.time}} class="more-dot"></span>
</button>
<div class="more-menu">
<div class="more-menu-caret">
<div class="more-menu-caret-outer"></div>
<div class="more-menu-caret-inner"></div>
</div>
<ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn"
aria-hidden="true">
<li class="more-menu-item" role="presentation">
<button type="button" class="more-menu-btn" role="menuitem" onclick="updateNote(event)">Update me</button>
</li>
<li class="more-menu-item" role="presentation" >
<button type="button" id ="rome" class="more-menu-btn" role="menuitem" onclick="deleteNote(event)" >Delete</button>
</li>
<li class="more-menu-item" role="presentation">
<button type="button" class="more-menu-btn" role="menuitem" onclick="toggleReminder(event)">
{{#if this.remind}}
Unset Reminder
{{else}}
Set reminder
{{/if}}
</button>
</li>
</ul>
</div>
</div>
</div>
Here is the external js file:
function openMenu(event) {
var elList = document.getElementsByClassName('more');
var el;
for (var i = 0; i < elList.length; i++) {
el = elList[i];
if (el.id === event.target.id)
break;
}
var btn = el.querySelector('.more-btn');
var menu = el.querySelector('.more-menu');
var menuItems = el.querySelector('.more-menu-items');
var visible = false;
function showMenu(e) {
e.preventDefault();
if (!visible) {
visible = true;
el.classList.add('show-more-menu');
menu.setAttribute('aria-hidden', false);
menuItems.setAttribute('aria-hidden', false);
document.addEventListener('mousedown', hideMenu, false);
}
}
function hideMenu(e) {
if (btn.contains(e.target)) {
return;
}
if (visible) {
visible = false;
el.classList.remove('show-more-menu');
menu.setAttribute('aria-hidden', true);
menuItems.setAttribute('aria-hidden', true);
document.removeEventListener('mousedown', hideMenu);
}
}
btn.addEventListener('click', showMenu, false);
el.addEventListener('mouseleave', hideMenu, false)
$('#rome').click(alertHye);
}
function deleteNote(e) {
console.log(e.target)
}
What's happening is nothing, not even a console error. Expected is a console log.

To Compress my jQuery

How can I compress my jQuery useful? I want to add a function to show an element when I hover another one. The function below is exactly what I want, but I want it more dynamic. Maybe with an data attribute?
var item_first = $('.item_first');
var item_second = $('.item_second');
var item_third = $('.item_third');
var item_fourth = $('.item_fourth');
var image_first = $('.image_first');
var image_second = $('.image_second');
var image_third = $('.image_third');
var image_fourth = $('.image_fourth');
$(document).ready(function () {
item_first.hover(function () {
image_first.addClass('active');
}, function () {
image_first.removeClass('active');
});
item_second.hover(function () {
image_second.addClass('active');
}, function () {
image_second.removeClass('active');
});
item_third.hover(function () {
image_third.addClass('active');
}, function () {
image_third.removeClass('active');
});
item_fourth.hover(function () {
image_fourth.addClass('active');
}, function () {
image_fourth.removeClass('active');
});
});
https://jsfiddle.net/gt5kw00q/
Sorry for my bad English. I try to write so that you understand it.

I would write the code like below.
$('img') will select all your images and apply the code to them on hover.
$('img').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});

Based on your fiddle, try this approach
$( ".left__item" ).hover( function(){
$(".right__image").eq( $(this).index() ).addClass( "active" );
}, function(){
$(".right__image").eq( $(this).index() ).removeClass( "active" );
})
Demo
$(document).ready(function() {
$(".left__item").hover(function() {
$(".right__image").eq($(this).index()).addClass("active");
}, function() {
$(".right__image").eq($(this).index()).removeClass("active");
})
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>

Give your elements a class name and a data attribute with the target(id):
<div class="myHoverElement" id="ele1" data-targetid="image_1"></div>
<div class="myHoverElement" id="ele2" data-targetid="image_2"></div>
<img id="image_1">
<img id="image_2">
You can then bind a hover event to all those elements at once:
$('.myHoverElement').hover(
function() { $('#' + $(this).data('targetid')).addClass('active') },
function() { $('#' + $(this).data('targetid')).removeClass('active') }
);
$(this) is a reference to the currently hovered element.

Please find working solution below, enjoy :)
var items = {
item_first: 'image_first',
item_second: 'image_second',
item_third: 'image_third',
item_fourth: 'image_fourth'
}
$(document).ready(function() {
function addClass(key) {
$('.' + items[key]).addClass('active');
}
function removeClass(key) {
$('.' + items[key]).removeClass('active');
}
for (var key in items) {
$('.' + key).hover(addClass.bind(null, key), removeClass.bind(null, key))
}
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first active">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>

Only one dropdown choose at the time

I'm completely new on this field and what I have so far are two independent dropdown menus. I'm trying to make user to be able to select only from one of both at the time. For example if user select something from dropdown 1 and then select another thing from dropdown 2, dropdown 1 to become unselected.
Here is snippet of what I have in my html part
<div id="d1" class="wrapper-dropdown-5 active" tabindex="1">
<span>DropDown 1</span>
<ul class="dropdown">
<li>...</li>
<li><img src="" alt=""/>Car 1</li>
<li><img src="" alt=""/>Car 2</li>
</ul>
</div>
<div id="d2" class="wrapper-dropdown-5 bottom" tabindex="1">
<span>Dropdown 2</span>
<div>
<ul class="dropdown">
<li>...</li>
<li> <img src="" alt=""/>Truck 1</li>
<li> <img src="" alt=""/>Truck 2</li>
</ul>
</div>
</div>
Here is JS
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#d1') );
$(document).click(function() {
$('.wrapper-dropdown-5').removeClass('active');
});
});
$(function() {
var dd = new DropDown( $('#d2') );
$(document).click(function() {
$('.wrapper-dropdown-5').removeClass('active');
});
});
This is simple demo. You can notice that you can select same time one car and one truck. Should be only car or only truck at the time:
https://jsfiddle.net/j82ryu5k/2/

Perhaps something like this fiddle will work for you.
HTML:
<div class="container">
<div class="row">
<div class="col-md-5">
<div id="d1" class="wrapper-dropdown-5 active" tabindex="1">
<span data-text="Коли">Коли</span>
<ul class="dropdown">
<li>...</li>
<li>
<img src="" alt="" />Кола 1
</li>
<li>
<img src="" alt="" />Кола 2
</li>
</ul>
</div>
<div id="d2" class="wrapper-dropdown-5 bottom" tabindex="1">
<span data-text="Камиони">Камиони</span>
<div>
<ul class="dropdown">
<li>...</li>
<li>
<img src="" alt="" />Камион 1
</li>
<li>
<img src="" alt="" />Камион 2
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Script:
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
$('div > span').not(opt).each(function() {
$(this).text($(this).data('text'));
});
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#d1') );
$(document).click(function() {
$('.wrapper-dropdown-5').removeClass('active');
});
});
$(function() {
var dd = new DropDown( $('#d2') );
$(document).click(function() {
$('.wrapper-dropdown-5').removeClass('active');
});
});

Categories