I have a <div> containing a <a> tags and further divs:
<div>
<div class="icons">
<div class="group popOutDisplay">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fas fa-bicycle"></i>
</div>
<div class="group">
<i class="fa fa-globe"></i>
</div>
<div class="group bottom">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="content">
<div id="128910";>
<p>some content</p>
</div>
<div id="239019";>
</div>
<div id="346653";>
</div>
</div>
</div>
Im trying to select the data attribute on the anchor tag with jquery so that i can display the the <div> tags in <div class="content"> which have the same ID (if that makes sense?).
So far i've been able to identify the data id with
$(".group.popOutDisplay a")[0].attributes[1].value;
but this only gives the ID of the first element, due to the [0] index.
tldr:
How can I get the data-ID of the <a> tag that has just been clicked?
Here we go:
$('.popOutDisplay a').click(function(e) {
e.preventDefault();
console.log($(this).data('id'));
});
Here the documentation of .data() attribute.
Demo: https://jsfiddle.net/ru4pjz3c/2/
You can use ".click()" for this. check snippet below..
$('.popOutDisplay a').click(function(e){
e.preventDefault();
var elID = $(this).data('id');
console.log(elID);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<div>
<div class="icons">
<div class="group popOutDisplay">
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fas fa-bicycle"></i>
</div>
<div class="group">
<i class="fa fa-globe"></i>
</div>
<div class="group bottom">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="content">
<div id="128910";>
<p>some content</p>
</div>
<div id="239019";>
</div>
<div id="346653";>
</div>
</div>
</div>
$(".group a").click(function(){
var data=$(this).attr("data-id");
alert(data)
});
To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.
$(document).on("click", "[data-id]", function (event){
event.preventDefault();
var id = $(this).attr("data-id");
// Apply your logic here
// $("#" + id)
});
bind click event listener on the a element container div <div class="group popOutDisplay". the reason is because click events on the a elements will bubble up to div container.
something like
$('.group.popOutDisplay').bind('click', function(e) {
var target = e.target;
if (target.tagName.toLowerCase() === 'a') {
e.preventDefault(); //prevent the default action of navigating to the url
var id = target.dataset.id;
//you now have the id;
$('#' + id).css('display', 'block'); //display the div
}
});
Related
I have the fa-icon for the selected radio going to the menu-btn, but how do I also take the text from the radio?
$("body").on("click", ".btn-opt", function(event) {
var $el = $(this);
var id = $el.attr("id");
$(this)
.parent()
.parent()
.find("span.selected")
.removeClass("active");
$el.find("span.selected").addClass("active");
$(".menu-btn > i:first")
.removeClass()
.addClass("fa fa-fw fa-" + id);
$(".menu-btn")
.removeClass()
.addClass("menu-btn btn btn-primary fg-" + id);
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
<div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>Menu</div>
<div class="menu">
<div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
<label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i> Bag</label>
</div>
<div class="btn-opt btn fg-rocket" id="rocket">
<label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i> Rocket</label>
</div>
</div>
</div>
If you can wrap the text that needs to be changed in its own element, you can just add one more line to the bottom of your code:
$("body").on("click", ".btn-opt", function(event) {
var $el = $(this);
var id = $el.attr("id");
$(this)
.parent()
.parent()
.find("span.selected")
.removeClass("active");
$el.find("span.selected").addClass("active");
$(".menu-btn > i:first")
.removeClass()
.addClass("fa fa-fw fa-" + id);
$(".menu-btn")
.removeClass()
.addClass("menu-btn btn btn-primary fg-" + id);
// Set the top text to the text of the clicked element
$("span#topText").text($(this).text());
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
<div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>
<!-- Wrap the text to be changed in its own element -->
<span id="topText">Menu</span>
</div>
<div class="menu">
<div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
<label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i> Bag</label>
</div>
<div class="btn-opt btn fg-rocket" id="rocket">
<label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i> Rocket</label>
</div>
</div>
</div>
If you don't like to change your html,
you can use nodeType===3 to filter out all text contents in $(.menu-btn).contents(), then replace it with the value you want.
$("body").on("click", ".btn-opt", function(event) {
var $el = $(this);
var id = $el.attr("id");
$(this)
.parent()
.parent()
.find("span.selected")
.removeClass("active");
$el.find("span.selected").addClass("active");
$(".menu-btn > i:first-child")
.removeClass()
.addClass("fa fa-fw fa-" + id);
// find out all text content (nodeType===3), then replace with yours
//.each is not required, you can change to [0].textContent = 'yourConent' if make sure at least exists one text content.
$(".menu-btn").contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = $el.find('label').text();
});
$(".menu-btn")
.removeClass()
.addClass("menu-btn btn btn-primary fg-" + id);
});
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
<div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>Menu</div>
<div class="menu">
<div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
<label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i> Bag</label>
</div>
<div class="btn-opt btn fg-rocket" id="rocket">
<label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i> Rocket</label>
</div>
</div>
</div>
so basically I'm trying to reproduce some kind of Trello, and what I'm trying to do, is to create (or clone) an existing div, and insert it before the button. Yes I know, there's a method called ".insertBefore()" but I actually tried, it works... But halfway.
This is how the div should look like
Blocks are disposed in this way, and as I said, what I am trying to do is when I click on the "Add Category button" It clones the div and inserts it before the button.
Nothing difficult I know I know. I actually managed to achieve this, but halfway : It works. But only once.
I looked what's happening in the inspector and I noticed, that everytime I click on "Add Category", the div I just cloned, is actually replaced by the div itself. So I can only add it once, not more.
There is my code :
window.onload = function() {
var board = document.querySelector('#board');
var model = document.querySelectorAll('#model');
//creating the block, didn't use .cloneNode()
var newTask = document.createElement('div');
newTask.className='newTask';
newTask.appendChild(document.createElement('p'));
newTask.querySelector('p').innerHTML = 'New Task';
newTask.appendChild(document.createElement('i'));
newTask.querySelector('i').className = 'fa fa-plus';
var newCategory = document.createElement('div');
newCategory.className = 'category';
newCategory.appendChild(newTask);
/* Look like this :
* <div class="category">
* <div class="newTask">
* <p>New Task</p>
* <i class="fa fa-plus">
* </div>
* </div>
*/
var addCategory = document.querySelector('#addCategory');
addCategory.onclick = function() {
board.insertBefore(newCategory, addCategory);
};
};
<div id="board">
<div class="category hidden" id="model">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
<div class="category">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="task">
<h3>Task title</h3>
<p>This is the description of what we have to do</p>
</div>
</div>
<div class="category" id="addCategory">
<h3>Add a category</h3>
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
So this is what's happening : https://i.neilrichter.com/c7kd3.gif (File too large sorry)
How would you solve this ? I forgot to mention it, but I'm not allowed to use jQuery...
You are only creating the div once (when the window loads) and then inserting that same div every time the onclick handler runs.
You need to create a new div each time the onclick handler runs:
window.onload = function() {
var board = document.querySelector('#board');
var model = document.querySelectorAll('#model');
var addCategory = document.querySelector('#addCategory');
addCategory.onclick = function() {
var newTask = document.createElement('div');
newTask.className='newTask';
newTask.appendChild(document.createElement('p'));
newTask.querySelector('p').innerHTML = 'New Task';
newTask.appendChild(document.createElement('i'));
newTask.querySelector('i').className = 'fa fa-plus';
var newCategory = document.createElement('div');
newCategory.className = 'category';
newCategory.appendChild(newTask);
board.insertBefore(newCategory, addCategory);
};
};
<div id="board">
<div class="category hidden" id="model">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
<div class="category">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="task">
<h3>Task title</h3>
<p>This is the description of what we have to do</p>
</div>
</div>
<div class="category" id="addCategory">
<h3>Add a category</h3>
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
I want to select element with sidebar id in downloader.html from an another html document (settings.html).
downloader.html
<body>
<div class="ui visible left vertical thin sidebar menu" id='sidebar'>
<div class='item'>
<img class='ui medium image' src='./../../resources/images/logo_256x256.png'>
</div>
<a class="item" id='dashboard_btn'>
<i class="desktop icon"></i>
Dashboard
</a>
<a class="item" id='statistics_btn'>
<i class="area chart icon"></i>
Statistics
</a>
<a class="item" id='settings_btn'>
<i class="settings icon"></i>
Settings
</a>
</div>
<div class='dimmed pusher'>
<button class="ui icon button" id='sidebar_btn'>
<i class="angle double left icon" id='sidebar_btn_icon'></i>
</button>
<div id='content'>
<!-- All content goes here. -->
</div>
</div>
<script>
$(document).ready(function () {
$('#sidebar_btn').on('click', function () {
$('#sidebar').sidebar('toggle');
$('#sidebar_btn_icon').toggleClass('right');
});
$("#dashboard_btn").on("click", function () {
$("#content").load("./items/dashboard/dashboard.html");
});
$("#statistics_btn").on("click", function () {
$("#content").load("./items/statistics/statistics.html");
});
$("#settings_btn").on("click", function () {
$("#content").load("./items/settings/settings.html");
});
});
</script>
settings.html
<body>
<div class='center'>
<h2 class="ui icon header">
<i class="settings icon"></i>
<div class="content">
Settings
<div class="sub header">Sample text.</div>
</div>
</h2>
<div class='center child'>
<div class="ui toggle checkbox">
<input name="public" type="checkbox">
<label>Dark theme.</label>
</div>
</div>
</div>
<script>
//Select 'sidebar' element from downloader.html using jquery
</script>
Please, do not pay attention to mixed ' with " in html code. It is my fault and it will be fixed before app release.
You can use .load() with hash set within "settings.html"
$("#element").load("downloader.html #sidebar")
I'm working on my site by editing a template but there is a drop down menu that does not work.
The drop-down menu CSS is missing.
How can I fix it with CSS and/or with JS?
Below is the HTML code:
Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i>
<div id="ddnmenu_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">
User Panel<i class="fa fa-user menuadj"></i>
</div>
<div class="popup_item_container">
Edit Profile<i class="fa fa-pencil menuadj"></i>
</div>
<div class="popup_item_container">
Edit Options<i class="fa fa-cogs menuadj"></i>
</div>
<div class="popup_item_container">
Edit Avatar<i class="fa fa-picture-o menuadj"></i>
</div>
<div class="popup_item_container">
Edit Signature<i class="fa fa-paint-brush menuadj"></i>
</div>
<div class="popup_item_container">
<a href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}" class="popup_item">{$lang->welcome_logout}!<i class="fa fa-power-off menuadj"></i>
</a>
</div>
</div>
edit:
I used the solution you suggested to me with jquery, but now there is another problem...
When the menu opens the side button moves beneath it, thus ruining the entire menu..
Before:
After:
How can I fix it?
Here is working code with jquery :
Add jquery library - https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
Then put this code in script section :
$(document).ready(function(){
$('#ddnmenu').click(function(){
$('#ddnmenu_popup').slideToggle();
})
})
Add this css:
#ddnmenu_popup{
position:absolute;
}
You can use $( ".popup_menu" ).toggle(); on clicking on the link #ddnmenu. But first you should remove style="display: none;"
$( "#ddnmenu" ).click(function() {
$( ".popup_menu" ).toggle();
});
You need to set the style property via JavaScript.
HTML:
<a onclick="openDropdown()" href="#" id="ddnmenu">Bentornato {$mybb->user['username']}! <i class="fa fa-caret-down"></i></a>
<div id="ddnmenu_popup" class="popup_menu" style="display: none;">
...
</div>
JS:
function openDropdown() {
document.getElementById('ddnmenu_popup').style.display = 'block';
}
I have this mark up:
<div class="list-group-item participant-main">
<i class="fa fa-chevron-down" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
<div class='list-group-item hidden-group-item hide'>
<div class="row">
<div class="col-sm-8">
<p class="list-group-item-text">
Some text
</p>
</div>
<div class="col-sm-4">
<p class="list-group-item-text">
More text
</p>
</div>
</div>
</div>
Previously, I was using Jquery to unhide/hide .hidden-group-item when .participant-main was clicked via this code:
$('body').on('click', '.member-main, .participant-main', function() {
if ($(this).next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).next('.hidden-group-item').toggleClass('hide');
}
$('.hidden-form-item').addClass('hide');
});
I'm adding some links to .participant-main so I can't bind a click event to the whole div anymore so the new links work in parallel. I've tried then to bind the click event to particular elements inside the div thus I moved the target class to particular elements like this.
<div class="list-group-item">
<i class="fa fa-chevron-down participant-main" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8 participant-main">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
I was hoping it would work but it does not.
I don't understand why is this happening and how to solve. As far as I understand .next() grabs the next element that matches the specified selector.
Since you've nested elements you should use stopPropagation() to stop the event from bubbling :
$('body').on('click', '.member-main, .participant-main', function(e) {
e.stopPropagation();
...
});
Hope this helps.