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');
});
});
Related
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>
Here is the complete HTML
<div id="1" class="example">
<div class="player">
<div class="pl"></div>
<div class="title"></div>
<div class="artist"></div>
<div class="cover"></div>
<div class="controls">
<div class="play"></div>
<div class="pause"></div>
<div class="rew"></div>
<div class="fwd"></div>
</div>
<div class="volume"></div>
<div class="tracker"></div>
</div>
<ul class="playlist hidden">
<li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1">01.mp3</li>
<li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2">02.mp3</li>
<li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3">03.mp3</li>
<li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4">04.mp3</li>
<li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5">05.mp3</li>
<li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6">06.mp3</li>
<li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7">07.mp3</li>
</ul>
</div>
<div id="2" class="example">
<div class="player">
<div class="pl"></div>
<div class="title"></div>
<div class="artist"></div>
<div class="cover"></div>
<div class="controls">
<div class="play"></div>
<div class="pause"></div>
<div class="rew"></div>
<div class="fwd"></div>
</div>
<div class="volume"></div>
<div class="tracker"></div>
</div>
<ul class="playlist hidden">
<li audiourl="01.mp3" cover="cover1.jpg" artist="Artist 1">01.mp3</li>
<li audiourl="02.mp3" cover="cover2.jpg" artist="Artist 2">02.mp3</li>
<li audiourl="03.mp3" cover="cover3.jpg" artist="Artist 3">03.mp3</li>
<li audiourl="04.mp3" cover="cover4.jpg" artist="Artist 4">04.mp3</li>
<li audiourl="05.mp3" cover="cover5.jpg" artist="Artist 5">05.mp3</li>
<li audiourl="06.mp3" cover="cover6.jpg" artist="Artist 6">06.mp3</li>
<li audiourl="07.mp3" cover="cover7.jpg" artist="Artist 7">07.mp3</li>
</ul>
</div>
Here is the complete js
jQuery(document).ready(function() {
// inner variables
var song;
var tracker = $('.tracker');
var volume = $('.volume');
function initAudio(elem) {
var url = elem.attr('audiourl');
var title = elem.text();
var cover = elem.attr('cover');
var artist = elem.attr('artist');
$('.player .title').text(title);
$('.player .artist').text(artist);
$('.player .cover').css('background-image','url(data/' + cover+')');;
song = new Audio('data/' + url);
// timeupdate event listener
song.addEventListener('timeupdate',function (){
var curtime = parseInt(song.currentTime, 10);
tracker.slider('value', curtime);
});
$('.playlist li').removeClass('active');
elem.addClass('active');
}
function playAudio() {
song.play();
tracker.slider("option", "max", song.duration);
$('.play').addClass('hidden');
$('.pause').addClass('visible');
}
function stopAudio() {
song.pause();
$('.play').removeClass('hidden');
$('.pause').removeClass('visible');
}
// play click
$('.play').click(function (e) {
e.preventDefault();
playAudio();
});
// pause click
$('.pause').click(function (e) {
e.preventDefault();
stopAudio();
});
// forward click
$('.fwd').click(function (e) {
e.preventDefault();
stopAudio();
var next = $('.playlist li.active').next();
if (next.length == 0) {
next = $('.playlist li:first-child');
}
initAudio(next);
});
// rewind click
$('.rew').click(function (e) {
e.preventDefault();
stopAudio();
var prev = $('.playlist li.active').prev();
if (prev.length == 0) {
prev = $('.playlist li:last-child');
}
initAudio(prev);
});
// show playlist
$('.pl').click(function (e) {
e.preventDefault();
$('.playlist').fadeIn(300);
});
// playlist elements - click
$('.playlist li').click(function () {
stopAudio();
initAudio($(this));
});
// initialization - first element in playlist
initAudio($('.playlist li:first-child'));
// set volume
song.volume = 0.8;
// initialize the volume slider
volume.slider({
range: 'min',
min: 1,
max: 100,
value: 80,
start: function(event,ui) {},
slide: function(event, ui) {
song.volume = ui.value / 100;
},
stop: function(event,ui) {},
});
// empty tracker slider
tracker.slider({
range: 'min',
min: 0, max: 10,
start: function(event,ui) {},
slide: function(event, ui) {
song.currentTime = ui.value;
},
stop: function(event,ui) {}
});
});
I just want the player that you clicked on to play and not all of them at once, same with the dropdown playlist if you click on that all the players on the page open their playlist. Hope i made sense and provided enough info.. if anyone can help please
I hope you can try something like this to traverse through the div tree.
console.log($(elem).parent().closest('div.example').attr('id'));
elem is $('.playlist li:first-child') in your case
initAudio($('.playlist li:first-child'));
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>
I want to set the selected value as selected just like in select box, but i cannot do it, following is my HTML, i have also attached the Fiddle with it so that i can show my CSS too,
<section class="main">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2" tabindex="1">
select Color
<ul class="dropd">
<li style="border-right-color:#F6EB61" value="F6EB61">
<a>100 C</a>
</li>
<li style="border-right-color:#F7EA48" value="F7EA48">
<a>101 C</a>
</li>
<li style="border-right-color:#FCE300" value="FCE300">
<a>102 C</a>
</li>
</div>
</div>
</section>
This is my Java script code
$(document).ready(function (e)
{
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-2').removeClass('active');
});
});
Demo FIDDLE
http://jsfiddle.net/h65gbpu0/4/
something like this? http://jsfiddle.net/h65gbpu0/6/
$(document).ready(function() {
$('.dropd li').on('click', function() {
console.log('clicked');
var val = $(this).find('a').html();
var col = '#' + $(this).attr('value');
console.log(col);
$('.selected').css('border-right', '20px solid' + col);
$('.selected').html(val);
});
});
<div class="selected" style="margin-right:30px;"> select Color</div>
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3"href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
What would the code be so when I hover over an <a> it will display the <h2>? So .3 would display .1?
This is what I've tried so far:
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$(this).children('.h2').show();
},
function() {
$(this).children('h2').hide();
}
);
});
</script>
This is an example for your test case, you should improve it for your live app.
JSFiddle link: click here
$(document).ready(function(){
$("#side h2").hide();
$("#side ul li a").mouseover(function() {
if($(this).hasClass("3")) {
$("#side h2.1").show();
} else if($(this).hasClass("4")) {
$("#side h2.2").show();
}
}).mouseout(function() {
if($(this).hasClass("3")) {
$("#side h2.1").hide();
} else if($(this).hasClass("4")) {
$("#side h2.2").hide();
}
});
})
JSFiddle link: click here
<style>
.1{
display: none;
}
</style>
<script>
document.querySelector('.3').onmouseover = function(){
document.querySelector('.1').style.display = 'block';
};
document.querySelector('.3').onmouseout = function(){
document.querySelector('.1').style.display = 'none';
};
</script>
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
Instead of document.querySelector('.3') you can use document.getElementsByClassName('3')[0]
You are gonna use eq()
If I understood it right, you need your first item from your ul, open the first header. the second item, open the second header, etc.
eq() Get the supplied index that identifies the position of this element in the set.
Here is the Fiddle
HTML
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="#">3</a></li>
<li><a class="4" href="#">4</a></li>
</ul>
</div>
jQuery
$(document).ready(function(){
$('#side a').on('click', function(){
var index = $('#side a').index(this);
// alert(index);
alert($('#side h2').eq(index).html());
});
});
NOTE: Difference between eq and :nth-child
EIDT: as you ask for hover, you can do this.
$(document).ready(function(){
$('#side a').on('hover', function(){
var index = $('#side a').index(this);
// alert(index);
// alert($('#side h2').eq(index).html());
$('#side h2').eq(index).toggle();
});
});
<div id="side">
<h2 class="one">What Have You Tried?</h2>
<h2 class="two">2</h2>
<ul>
<li><a class="three"href="">3</a></li>
<li><a class="four" href="">4</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$("#side").find('.one').show();
},
function() {
$("#side").find('.one').hide();
}
);
});
</script>
http://jsfiddle.net/VdFxf/1/