get value of custom attribute from dropdown to button or link - javascript

I need get "perma" value to button when is selected option in dropdown menu.
I have this HTML:
<div class="dropdown-list">
<div></div>
<div></div>
<div></div>
<div>
When is selected some div, perma attribute should somehow write into this :
button
Dropdown list Jquery:
//.input-dropdown
jQuery('.input-dropdown input, .input-dropdown > i').on('click',function(){
var elThis = jQuery(this);
var elParent = elThis.parents('.input-dropdown');
var elDropdownList = elParent.find('.dropdown-list');
if( elDropdownList.is(':visible') ){
elDropdownList.stop(true, true).slideUp(300);
}else{
elDropdownList.stop(true, true).slideDown(300);
}
});
jQuery('.input-dropdown .dropdown-list a').on('click',function(e){
e.preventDefault();
var elThis = jQuery(this);
var elParent = elThis.parents('.input-dropdown');
var elDropdownList = elParent.find('.dropdown-list');
var elInput = elParent.find('input');
elInput.val(elThis.data('value'));
elDropdownList.stop(true, true).slideUp(300);
});
jQuery(document).click(function(event) {
if(!jQuery(event.target).closest('.input-dropdown').length) {
if(jQuery('.input-dropdown .dropdown-list').is(":visible")) {
jQuery('.input-dropdown .dropdown-list').stop(true,true).slideUp(300);
}
}
});
What i tried:
<script>function gotosite() {
window.location = document.getAttribute("perma").perma;
}</script> <button id="go" onclick="gotosite()">Go</button>
button

With your dropdown list and button
<div class="dropdown-list">
<div>Link 1</div>
<div>Link 2</div>
<div>Link 3</div>
</div>
<a id="myButton" href="http://test.com/default/">button</a>
You can use Jquery to set href value of your button
$('.dropdown-list div a').click(function () {
//console.log($(this).attr('perma'));
//console.log($(this).attr('href'));
$("#myButton").attr("href", $(this).attr('perma'))
});

Related

li click listener not triggering because of underlaying div with e.stopPropagation

i want to trigger the click event of my dynamic generated list-items.
The div where the list is in has a click-event to stopPropagation, so that the dropdown list don't toggle's by clicking list-items.
Without stopPropagation, the click is working but my dropdown list broke.
Is there any chance to get this working?
//Dropdown Script
$('.nav-drop-down').click(function(){
let toggleEle = $( this ).find('.drop-down-list');
$('.drop-down-list').not( toggleEle ).hide();
toggleEle.slideToggle();
});
$('.drop-down-list').click(function(e){
e.stopPropagation();
});
//Add Live Search
var currencies = ['EUR', 'USD', 'UK', 'UKA', 'PND', 'USA'];
addLiveSearchToElement($('#currency-filter'), currencies, 'change-currency');
function addLiveSearchToElement(ele, arr, liClass){
ele.keyup(function(){
//Get ul-list
let list = $( this ).next();
//Store User input
let input = $( this ).val();
list.empty();
$.each(arr, function(i, value) {
if(input != ''){
if(value.toLowerCase().indexOf(input.toLowerCase()) != -1){
list.append(`<li class="${liClass}"> ${arr[i]} </li>`);
}
} else {
list.append(`<li class="${liClass}"> ${ value } </li>`);
}
});
});
if(liClass != ''){
console.log("Doin it");
$('ul').on('click', `li.${liClass}`, function() {
console.log("Hello...");
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="position-relative d-flex nav-drop-down no-select">
<span>USD Currency</span>
<div class="position-absolute drop-down-list">
<input id="currency-filter" placeholder="Filter..." />
<ul class="list-dropdown">
<li>
Item 1
</li>
<li>
Item 2
</li>
</ul>
</div>
Referring this I added the event listener to the parent ul for it to descend it to matching selector li.${liClass}
$("ul").on('click', `li.${liClass}`, function() {
console.log("Hello...");
});
The problem is you're appending those classes on keyup but you're putting those onclick outside of the fuction keyup and hence, they never get executed. Try this:
//Add Live Search
var currencies = ['EUR', 'USD', 'UK', 'UKA', 'PND', 'USA'];
addLiveSearchToElement($('#currency-filter'), currencies, 'change-currency');
function addLiveSearchToElement(ele, arr, liClass){
ele.keyup(function(){
//Get ul-list
let list = $( this ).next();
//Store User input
let input = $( this ).val();
list.empty();
$.each(arr, function(i, value) {
if(input != ''){
if(value.toLowerCase().indexOf(input.toLowerCase()) != -1){
list.append(`<li class="${liClass}"> ${arr[i]} </li>`);
}
} else {
list.append(`<li class="${liClass}"> ${ value } </li>`);
}
});
if(liClass != ''){
console.log("Doin it");
$(document).on('click', `li.${liClass}`, function() {
console.log("Hello...");
});
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="position-relative bg-white border-left d-flex align-items-center p-2 border-right nav-drop-down no-select">
<span class="u">USD</span> <span class="mr-2">Currency</span>
<div class="position-absolute drop-down-list bg-white border">
<input id="currency-filter" class="form-control live-search input" placeholder="Filter..." />
<ul class="list-unstyled list-dropdown">
<li>
Item 1
</li>
<li>
Item 2
</li>
</ul>
</div>

how to open a div click on two button clicks one after other in jquery

i have a problem regarding button click i have four buttons on click of two buttons back to back i want open div so based on different combination of clicks i want to open different divs
here is my html
<button id="B">B</button>
<button id="Q">Q</button>
<button id="Ag">Ag</button>
<button id="Cli">Cli</button>
<div id="BAg"></div>
<div id="BCli"></div>
<div id="QAg"></div>
<div id="QCli"></div>
so on click of B and Ag i want to open div with id = "BAg" and
on click of B and Cli i want to open div with id = "BCli" and
on click of Q and Ag i want to open div with id = "QAg" and
on click Q and Cli i want to open div with id = "QCli"
Here is jquery what i have tried
$(document).ready(function () {
$("#B").click(function(){
$("#Ag").click(function(){
alert("B Ag")
});
});
$("#B").click(function(){
$("#Cli").click(function(){
alert("B Cli")
});
});
$("#Q").click(function(){
$("#Ag").click(function(){
alert("Q Ag")
});
});
$("#Q").click(function(){
$("#Cli").click(function(){
alert("Q Cli")
});
});
});
so can we help me with this
You can use a variable to append the ids from clicked elements like below:
$(function() {
let creatingString = false, str;
$("#B a, #Q a").click(function() {
creatingString = true; str = "";
str += $(this).parent().prop("id")
})
$("#Ag a, #Cli a").click(function() {
if (!creatingString) return
else {
str += $(this).parent().prop("id")
console.log("Selected ID:", str)
$(".selected").removeClass("selected")
$("#" + str).addClass("selected")
creatingString = false
}
})
})
div.selected {
background: yellow;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myTabs" class="nav nav-pills nav-justified" role="tablist" data-tabs="tabs">
<li id="B">B</li>
<li id="Q">Q</li>
<li id="Ag">Ag</li>
<li id="Cli">Cli</li>
</ul>
<div id="BAg">BAg</div>
<div id="BCli">BCli</div>
<div id="QAg">QAg</div>
<div id="QCli">QCli</div>

Remove class if id's the correct ID

Looking to remove a class if a certain button is clicked.
<div class="slide-container">
<section class="about" id="slide-0">
<div class="menu-total">
<nav class="nav">
<button class="nav_link home" onclick="slideTo('slide-2')">HOME</button>
<button class="nav_link about" onclick="slideTo('slide-0')">ABOUT</button>
<button class="nav_link fun-stuff" onclick="slideTo('slide-1')">FUN STUFF</button>
<button class="nav_link professional" onclick="slideTo('slide-3')">PROFESSIONAL</button>
<button class="nav_link contact" onclick="slideTo('slide-4')">CONTACT</button>
</nav>
<div class="hamburger">
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
</div>
</div>
The one I want to remove the class on is the HOME button. So "slideTo('slide-2)". If it's clicked on the others then the class is kept. I believe someone is either wrong with my loop or not getting the ID correctly of the items/
function slideTo(slideId) {
const slide = document.getElementById(slideId);
slide.scrollIntoView({
behavior: 'smooth'
})
// above this line works fine
let nonHome = document.querySelectorAll('.slide-container section');
let nonHomeID = document.getElementById('slide-2');
var i;
setTimeout(function(){
for (i=0; i < nonHome.length; i++ ){
// i believe it's somewhere here it is wrong
if (nonHome[i].id != nonHomeID){
nonHome[i].classList.add("nav-visibility");
} else{
nonHomeID.classList.remove("nav-visibility");
}
}
}, 1000)
}
If you can use jquery library, you can write in the HTML:
<button class="nav_link" data-value="home">HOME</button>
...
and then in the JS code:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // Get the data-value clicked
$(".nav_link").each(function() { // Loop through all elements of the class 'nav-link'
var v = $(this).data("value");
if (v == valueClicked) {
$(this).removeClass("nav-visibility");
} else {
$(this).addClass("nav-visibility");
}
)
}
Not much simpler, but the HTML is cleaner.
Simpler version if it is not required to browse through all buttons at each button click:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // The value of the button clicked by the user
if (valueClicked == "home") {
$(this).removeClass("nav-visibility");
console.log('remove')
} else { $(this).addClass("nav-visibility");
console.log('add')
}
});

How can I change each div id which is the last part of a number

I want to change each div id with change function.
before:
<div id="a_1">a1</div>
<div id="b_1">b1</div>
<div id="c_1">c1</div>
<div id="d_1">d1</div>
<button onclick="change()">Değiştir</button>
after:
<div id="a_2">a2</div>
<div id="b_2">b2</div>
<div id="c_2">c2</div>
<div id="d_2">d2</div>
<button onclick="change()">Değiştir</button>
I've tried this function but it didnt work
function change()
{
var old_id=1;
var new_id=2;
alert( bas( $("#a_1").attr("id")) );
$("div[id$=_"+old_id+"]").attr("id", bas( $("div[id$=_"+old_id+"]").attr("id") ) +new_id);
}
How can I do?
Thanks.
After doing some small changes you can achieve these this easily.
Try this:
HTML Code:
<div id="a_1">a1</div>
<div id="b_1">b1</div>
<div id="c_1">c1</div>
<div id="d_1">d1</div>
<button onclick="change(1, 2)">Değiştir</button>
Javascript/Jquery Code:
function change(oldid, newid)
{
$('div[id $= "_' +oldid+ '"]').each(function(){
var clone =$(this).clone(true).attr('id' , 'id_' + newid);
$('body').append(clone);
});
var nextid = newid + 1;
$('body').append('<button onclick="change(' + newid + ',' + nextid +')">Değiştir</button>');
}
Working Example
I have added class attribute to the div elements. Here is the demo JSFIDDLE
HTML:
<div id="a_1" class="my_div">a1</div>
<div id="b_1" class="my_div">b1</div>
<div id="c_1" class="my_div">c1</div>
<div id="d_1" class="my_div">d1</div>
<button onclick="change_ids()">Değiştir</button>
JS:
change_ids=function()
{
var old_id=1;
var new_id=2;
$('div.my_div').each(function() {
var div_id = $(this).attr('id');
var arr = div_id.split("_");
//alert(arr[0]+" "+arr[1]);
var new_div_id = arr[0]+"_"+new_id;
$(this).attr('id', new_div_id);
$(this).html(new_div_id);
});
alert('Div ids changed')
}

Javascript accordion - collapse all

I have created a javascript accordion, which works when one accordion is always open, I was wondering how I might modify my code so that the accordion, can also be closed when clicked again - so that all are collapsed?
$('.accordion-bottom').hide();
$('.accordion-link').on('click', global.toggleAccordian);
};
global.toggleAccordian = function(e){
var $Arrow = $(this).find('.arrow');
var $parentDiv = $(this).parent();
var $bottomAccordion = $parentDiv.siblings('.accordion-bottom');
var $accordionLi = $parentDiv.parents().eq('1');
var $siblingLis = $accordionLi.siblings('li');
var $siblingBotAccordions = $siblingLis.find('.accordion-bottom');
var $siblingArrows = $siblingLis.find('.arrow');
$siblingArrows.addClass('arrow-down');
if (!$accordionLi.hasClass('active')){
$bottomAccordion.slideDown('slow');
$Arrow.removeClass('arrow-down');
$siblingBotAccordions.stop().slideUp('slow');
}
e.preventDefault();
return false;
}
html:
<ul class="accordion">
<li>
<div class="item-inner-padding accordion-item">
<div class="accordion-top">
Title<span class="arrow arrow-down">Down</span>
</div>
<div class="accordion-bottom">
</div>
</div>
</li>
</ul>

Categories