matching element with html content using jquery html() - javascript

I don't understand... if i replace remove font awesome and use text() instead of html() this will work... But if i try the same code using font awesome icons, nothing happens and the text isn't changing on the button. What am i doing wrong ?
<a class="read-more" id="read-more">
<span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span>
</a>
<script>
$( document ).ready(function() {
$('.read-more').click(function(){
$(this).parent().toggleClass('expanded');
});
$('.read-more').on('click', function() {
if ($('.view-more-images').html() == '<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>') {
$('.view-more-images').html('- VIEW LESS IMAGES -');
} else {
$('.view-more-images').html('<i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i>');
}
});
$('.read-more').on('click', function() {
$('.view-more-toggle').css({ 'display': 'block' });
});
});
</script>

I would instead use a relative children selector and toggle combined with having one hidden by default. I added some CSS to make your cursor a pointer and prevent the user from accidenly selecting text when spam clicking.
$( document ).ready(function() {
$('.read-more').on('click', function() {
$(this).children().toggle();
});
});
.read-more {
cursor:pointer;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="read-more" id="read-more">
<span class="view-more-images" id="view-more-images"><i class="fa fa-plus" aria-hidden="true"></i> VIEW MORE IMAGES <i class="fa fa-plus" aria-hidden="true"></i></span>
<span class="view-more-images" style="display:none" id="view-less-images"><i class="fa fa-minus" aria-hidden="true"></i> VIEW LESS IMAGES <i class="fa fa-minus" aria-hidden="true"></i></span>
</a>

Related

How to make an icon slideshow with jQuery

Hi I am building a small slideshow of icons and also want to have data inside the icons like its speed and color. I've loaded jQuery from the top of my page.
<body>
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car" id="active"></i>
<i class="fa fa-bicycle" id="not-active"></i>
<i class="fa fa-plane" id="not-active"></i>
<i class="fa fa-ship" id="not-active"></i>
<i class="fa fa-fighter-jet" id="not-active"></i>
<i class="fa fa-space-shuttle" id="not-active"></i>
</div>
<div class="arrow-buttons">
</div>
</div>
</div>
</body>
Here is the jquery to press the right arrow button to change slide across the icons but it doesnt seem to be working?
$(document).ready(function(){
$('.right-arrow').on('click', function(){
let currentImg = $('#active');
let nextImg = currentImg.next();
if(currentImg.length){
currentImg.removeAttr('#active').css('z-inex', -10)
nextImg.attr('#active').css('z-index', 10);
}
});
});
First of all, I recommend using class instead of id. Even if you are going to use id, it is not recommended to use this way. The id value must be uniq. In your case, your ID's are not uniq. And also this is better to use like this ID selector.
id="notActive"
You can just try with each function to get current div. I tried with your code but did not work, with each yes.
$('.fa').each(function(){
if( $(this).hasClass('active') ){
currentImg = $(this);
}
})
And bonus : You can also use current div index value, then you dont have to use prev, next. You can increase or decrease index the value one by one. Just a suggestion.
You are using the id attribute incorrectly, as every id must be unique.
Also, setting the z-index on elements has no effect.
Finally, jQuery is not helping and can be eliminated.
Here's a more standard way to make something active/inactive, using a class named `active':
// control buttons
const right = document.querySelector('.right-arrow');
// handle right click
right.onclick = function() {
const activeImg = document.querySelector('i.active');
const nextImg = activeImg.nextElementSibling;
if (activeImg && nextImg) {
activeImg.classList.remove('active');
nextImg.classList.add('active');
}
};
i {
font-size: 32px;
z-index: -10; /* this has no effect */
}
.active {
z-index: 10;
background-color: yellow;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div class="main-container">
<div class="object-container">
<div class="icon-container">
<i class="fa fa-car active"></i>
<i class="fa fa-bicycle"></i>
<i class="fa fa-plane"></i>
<i class="fa fa-ship"></i>
<i class="fa fa-fighter-jet"></i>
<i class="fa fa-space-shuttle"></i>
</div>
<div class="arrow-buttons">
right-arrow
</div>
</div>
</div>

How can ı do accordion menu toggle icon?

Im trying to implement accordion menu. I did that and it's not working. I just want to do toggle icon
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
transform:rotate(450deg);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow"></i>
</a>
In order for the transform property to work, try to set display: block or display:inline-block within the .my-arrow.down class:
.my-arrow.down {
display: block;
transform:rotate(450deg);
...
You also need to include content within your <i> element. For example, you could use the > character:
<i class="fa fa-angle-right my-arrow">
>
</i>
Here is a working example with your code and my modifications:
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
display: inline-block;
transform:rotate(450deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow">></i>
</a>

How to find the count of a particular class with a particular style is repeated in a HTML Page

I have a html page, where I have two div classes :
<i class="fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="fas fa-info-circle float-left resultsInfo" ></i>
On Page load, I need to get the count of how many times these each Div has been repeated. The only differentiating factor between these two div is the style. So I wanted to know how many times the first div oocured and how many times the second one. Please help me to find this out. I am new to HTML and js
I think the easiest way is this:
<html>
<body>
<p id="demo"></p>
<ul>
<i class="count fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="count fas fa-info-circle float-left resultsInfo" ></i>
</ul>
</body>
</html>
and js is lookin like
document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.count').length;
here is the example: https://jsfiddle.net/f7tsLcrd/
This snippet returns the number of elements that have a "count" class and red color
$(".count").filter(function() {
return ($(this).prop('style').color == 'red');
}).length

Change all font awesome 5 icons with a specific class to another FA icon - JS/SVG

Lets say i have 3 FA icons:
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
I want to change all of those to:
<i class="far fa-circle"></i>
<i class="far fa-circle"></i>
<i class="far fa-circle"></i>
This means i am modifying all of the prefix of those icons so that they change from solid to regular.
Before in FA 4.X i could just get all icons by their class name and switch their classes like so:
var icons = $(".icon");
icons.removeClass("fa-circle");
icons.addClass("fa-circle-o");
But now that they are SVG's i don't know how i can get them all and change their prefix.
I know i can change the prefix like so:
if (prefix === 'fas') {
icon.attr('data-prefix', 'far');
icon.css({ color: "#d6d6d6" });
} else {
icon.attr('data-prefix', 'fas');
icon.css({ color: "#3fcf8e" });
}
I just need to know how to get all of the icons so i can just loop through them and change their prefix.
As far as I understand…
You can always do it using your code, you just need to replace fas to far:
var icons = $(".icon");
icons.removeClass("fas");
icons.addClass("far");
// Note that this could be simplified to:
// icons.toggleClass('far fas');
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
fas: <i class="fas fa-circle"></i>  
far: <i class="far fa-circle"></i>
<br><br>
<i class="icon fas fa-circle"></i>
<i class="icon fas fa-circle"></i>
<i class="icon fas fa-circle"></i>
Hope it helps.
I just realized that i can change the data-prefix attribute on everything with a specific class.
$(".icon").attr('data-prefix', 'far');

How to delete a class with JS if an element is not present?

On my site I have a menu to the right of the navigation bar. It displays the search when it is available on the current page.
I want to display an icon when the search is available.
All search blocks have the class .views-exposed-form and appear in #navbar-collapse-second
I added to my icon, the class .icon-navbar-alert-disable which is used to hide the icon.
How to remove the .icon-navbar-alert-disable class when the .views-exposed-form class is present in #navbar-collapse-second ?
Here is the css code to hide the icon :
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
Here is the code of the button of my manu with the icon :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
Here is the page concerned, this is the menu on the right :
https://www.s1biose.com/boutique/ma-boutique-pro
I started a JS code but it is not complete :
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
UPDATE
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
enter image description here
Are you looking for the hasClass selector in jQuery?
If so wrap it in a if statement and inside you can show the result you'd like from it;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};

Categories