It renders after the page loads but I have no idea how I can target that. It's wrapped in an anchor tag and I tried to set the z-index of that anchor tag to like 9999 so it's goes above the icon and I can target that but it's not working either.
<nav class="menu">
<div class="icon-list">
<a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell"></i><span>Szolgáltatásaim</span></a>
<a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
<a class="highlight" href="#munkáim"
><i class="far fa-folder-open"></i><span>Munkáim</span></a>
<a class="highlight" href="#oktatás">
<i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
<a class="highlight" href="#árak"
><i class="far fa-bookmark"></i><span>Árak</span></a >
<a class="highlight" href="#marketing"
><i class="far fa-lightbulb"></i><span>Marketing</span></a>
<a class="highlight" href="#üzenet"
><i class="far fa-envelope"></i><span>Üzenet</span></a>
</div>
</nav>
I think your question needs more details so we can help you better. That being said, if you're trying to target multiple elements use class. If you're trying to target one specific element use ID. For this to work you'll need to add such properties to your <i> icons in your html code. Here's an example snippet. Is this what you need?
function changeAll() {
var elements = document.querySelectorAll('.far,.fas'); // To target multiple elements use class
for(var i = 0; i < elements.length; i++){
elements[i].style.color = "red";
}
}
function changeBell() {
document.getElementById("bell").style.color = "green"; // To target one specific element use ID
}
<script async src="https://kit.fontawesome.com/0f49cf42f1.js" crossorigin="anonymous"></script>
<nav class="menu">
<div class="icon-list">
<a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell" id="bell"></i><span>Szolgáltatásaim</span></a>
<a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
<a class="highlight" href="#munkáim"><i class="far fa-folder-open"></i><span>Munkáim</span></a>
<a class="highlight" href="#oktatás">
<i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
<a class="highlight" href="#árak"><i class="far fa-bookmark"></i><span>Árak</span></a >
<a class="highlight" href="#marketing"
><i class="far fa-lightbulb"></i><span>Marketing</span></a>
<a class="highlight" href="#üzenet"><i class="far fa-envelope"></i><span>Üzenet</span></a>
</div>
</nav>
<br>
<button type="button" onclick="changeAll()">Change color of all icons</button>
<br>
<button type="button" onclick="changeBell()">Change color of bell only</button>
Related
I want to set sidebar menu active when clicked. Now only the first menu is selected as active. If other menus are selected, the first menu still remains as active menu. How to implement this ?
My code:
<div id="mobile_sidebar_display">
<div
class="logo_section d-flex justify-content-center align-items-center"
>
<a v-on:click="closeSideDrawer" :href="base + '/'">
<img src="../../assets/images/logo_2.svg" class="w-100" />
</a>
</div>
<div style="height: 10px"></div>
<a
v-on:click="closeSideDrawer"
class="sidebar_link active"
:href="base + '/'"
><i class="fas fa-home"></i> <span class="ml-2">Home</span></a
>
<a v-on:click="closeSideDrawer" class="sidebar_link" href="#"
><i class="far fa-user"></i> <span class="ml-2">Courses</span></a
>
<router-link class="sidebar_link" to="/QuizGrid"
><i class="fas fa-puzzle-piece"></i>
<span v-on:click="closeSideDrawer" class="ml-2"
>Puzzles</span
></router-link
>
</div>
when I click on title ( Title Goes Here) text. I am getting null for nextElementSibling instead of a element...
Edit
you can nest any elements inside an <a> except the following :
<a>
<button>
follow link
<a> and<button> both are invalid..
but I am getting null for a tag.. not for button tag.... I am looking for more clarity and valid source...
if I console log console.log(document.links) .. it's give three HTMLCollection collection...
End Edit
Below Example Code
console.log(document.links)
document.querySelectorAll(".viewAbstractToggleTitle").forEach(function(item) {
item.addEventListener("click", function(e) {
if (e.target.parentElement.classList.contains('viewAbstractToggleTitle')) {
console.log(e.target.parentElement.nextElementSibling.nextElementSibling)
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling);
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling);
}
})
})
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<button>
button tag
</button>
<a class="inlineBlock" href="" download>
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</a>
</li>
Your HTML is invalid. You have disallowed things like nested hyperlinks. This means the HTML parser, which is designed to be forgiving in spite of errors, has to come up with a new interpretation of your element tree. Here's what Firefox at least translates it to:
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<span>
span tag
</span>
</a>
<a class="inlineBlock" href="" download="">
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</li>
You can get this information for yourself by copying the HTML from your browser's DOM inspector.
As you can see, the other <a/> elements are not siblings of .viewAbstractToggleTitle. This is because the DOM parser had to insert a closing of your first <a/> element since you cannot nest them.
I have a problem with Javascript. I have a database. I query my database to a form. I reference id to JS function(like this show_modal();). When I click button function works but sometimes doesn't work? Why? Sometimes alert shows the value of functions sometimes nothing does.
HTML
<div class="product-card--body">
<div class="card-image">
<img photourl"]?="" src="<?=$value["/>
" alt="">
<div class="hover-contents">
<a class="hover-image" href="product-details.html">
<img photourl"]?="" src="<?=$value["/>
" alt="">
</a>
<div class="hover-btns">
<a class="single-btn" href="cart.html">
<i class="fas fa-shopping-basket">
</i>
</a>
<a class="single-btn" href="wishlist.html">
<i class="fas fa-heart">
</i>
</a>
<a class="single-btn" href="compare.html">
<i class="fas fa-random">
</i>
</a>
<a class="single-btn" data-target="#quickModal" data-toggle="modal" href="#">
<i class="fas fa-eye" id="get_arr_id" onclick="show_modal(<?=$value[" productid"]?="">
); ">
</i>
</a>
</div>
</div>
</div>
</div>
JS
function show_modal(id){
var sendData = new FormData();
sendData.append("id", id);
alert(id);
}
Click on an a tag can be conflict with onclick event on an i tag.
I was making my first pure Js project of todolist. I want when user adds an item in the list it gets it placed at the list. I was using this code I saw in a tutorial but it gives an error.
It gives an error: jeep.insertAdjacentHTML is not a function
Here is the markup:
<section class="listContent">
<div class="container">
<ul class="list" id="deep">
<li style="text-align: center" id="itemList">
<!-- < i class="fa fa-circle-o pull-left" id = "circle" aria - hidden="true" > </i>
<p class="text" > DRINK COFFEE < /p>
<i class="fa fa-trash pull-right" id = "delete" aria - hidden="true" > </i> -->
</li>
</ul>
</div>
</section>
Here is the JS
const date = document.getElementById("date");
const jeep = document.getElementById("deep");
const items = document.getElementById("itemList");
function addToDo(todo) {
const item =
`<i class="fa fa-circle-o pull-left" job="complete" id="circle" aria-hidden="true"></i>
<p class="text"> ${todo}</p>
<i class="fa fa-trash pull-right" id="delete" job="delete" aria-hidden="true"></i>
` ;
const position = "beforeend";
console.log(item);
console.log(position);
jeep.insertAdjacentHTMl(position, item);
}
addToDo("drink coffe");
first try .insertAdjacentHTML - the L should be capitalized. Also it looks like in the HTML markup that element lives inside of the <li> no adjacent to it. It looks like you might want to use .appendChild() on the <ul id="deep"></ul>
I am using jquery not to remove html of elements.
I don't get jQuery not() work in proper way. It removes all elements from children except the last one that I mentioned.
My Html-
<body>
<div id="edit-save-section">
<button id="edit-button" class="btn btn-info btn-large">
<span><i class="fa fa-cog"></i> EDIT</span>
</button>
<button class="division-twenty btn btn-success btn-large" data-loading-text="Saving..." class="btn btn-primary" id="btn_save"><span><i class="fa fa-save"></i> SAVE</span>
</button>
</div>
<nav id="menu">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
</ul>
</nav>
<div class="removable-section">
<b><i class="fa fa-arrows fa-2x"></i></b>
<a class="span1 pull-right remove-section-action" rel="tooltip" title="Remove section" data-placement="left" href="javascript:;"><b><i class="fa fa-times fa-2x"></i></b></a>
</div>
<div id="allhtml"></div>
</body>
Clearing html with jQuery-
$('#btn_save').click(function () {
var notAll = $('body').children().not("#menu", ".removable-section", "#edit-save-section").html();
$('#allhtml').append(notAll);
console.log($('#allhtml').html());
});
Somehow I managed removing #menu and .removable-section , But I can't remove #edit-save-section
And If i try to change order of these sections like-
var notAll = $('body').children().not("#menu","#edit-save-section",".removable-section").html();
Then it acts weird. It doesn't remove from body the last children found in above html structure. Here in this case it is .removable-section.
Let me know what is that I am doing wrong?
You can also use JQuery Clone to achieve this
$('#btn_save').click(function () {
var notAll = $('body').clone(true);
notAll.find("#menu").remove();
notAll.find(".removable-section").remove();
notAll.find("#edit-save-section").remove();
$('#allhtml').append(notAll);
});