I want to add the class .my-class to body if tha class .views-exposed-form is present in #navbar-collapse-second
The code below does not work. How to correct ?
(function ($) {
$('#navbar-collapse-second').hasClass('views-exposed-form' {
$('body').addClass('my-class');
});
})(window.jQuery);
enter image description here
UPDATE
I applied the response of explv.
The class is removed in #navbar-collapse-second when .views-exposed-form is available.
But impossible to apply the same rule in #navbar-collapse-first when .views-manage-menu is available.
An idea ?
(function ($) {
if ($("#navbar-collapse-first .views-manage-menu").length) {
$(".icon-navbar-first-alert").removeClass("icon-navbar-first-alert-disable");
};
if ($("#navbar-collapse-second .views-exposed-form").length) {
$(".icon-navbar-second-alert").removeClass("icon-navbar-second-alert-disable");
};
})(window.jQuery);
First menu :
<a class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first" aria-expanded="false">
<div class="icon-navbar-first">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-bars" data-fa-transform="shrink-8"></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-first-alert icon-navbar-first-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<span class="navbar-icon-open">
<i class="fas fa-bars fa-stack-1x fa-inverse"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</a>
</div>
Second menu :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar-second">
<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-second-alert icon-navbar-second-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</a>
</div>
enter image description here
enter image description here
The code that you have posted won't even run, the syntax is invalid, and hasClass(className) only accepts one parameter, so not entirely sure what you are trying to do there.
hasClass(className) returns true if the element you call it on has that class, it will not return true if a child element has the class, which I believe is what you are trying to do here.
Assuming your HTML has this rough structure:
<body>
<div id = "navbar-collapse-second">
<div class = "views-exposed-form">
</div>
</div>
</body>
The following code should work:
if ($("#navbar-collapse-second .views-exposed-form").length) {
$("body").addClass("my-class");
}
Explanation:
$("#navbar-collapse-second .views-exposed-form") will select an element with class views-exposed-form that is a child of the element with id navbar-collapse-second
If an element was found (.length is > 0), then we add the class to the body element:
$("body").addClass("my-class");
There is no condition in your code. Try the following:
if($('#navbar-collapse-second').hasClass('views-exposed-form')){
$('body').addClass('my-class');
}
Related
I am trying this sidebar of a dashboard and it looks like this
The top child or the one with the brighter green color on it has a class active_link which basically tells you that you are in this part of the dashboard. So the idea is that I want the class active link to be added to the certain element that I have clicked upon while the rest who are not clicked don't have (Meaning that if the element already have the active_link but it is not the one that I have clicked upon then the class will be removed however if it does not have the active_link class and it is the one I clicked it will be added to that certain element). However, I have a problem.I tried running this code:
$(function(){
$(".sidebar_link").click(function(){
$(".sidebar_link").each(function(index){
if($(this).data('clicked', true)){
if($(this).hasClass('active_link') == false){
$(this).addClass('active_link');
}
}else{
if($(this).hasClass('active_link')){
$(this).removeClass('active_link');
}
}
});
});
})
And this is what happened:
Which what I could tell is just a disaster, any tips? Thank you in advance! Here is the HTML
<div class="sidebar_menu">
<div class="sidebar_link active_link">
<i class="fa fa-home"></i>
Dashboard
</div>
<h2>MANAGE</h2>
<div class="sidebar_link">
<i class="fa fa-building-o"></i>
See Admin Notif
</div>
<div class="sidebar_link">
<i class="fa fa-wrench"></i>
Update Profile
</div>
<div class="sidebar_link">
<i class="fa fa-archive"></i>
Donate
</div>
<div class="sidebar_link">
<i class="fa fa-handshake-o"></i>
Connect
</div>
<div class="sidebar_logout">
<i class="fa fa-power-off"></i>
Log out
</div>
</div>
You can simply use $(".sidebar_link").not($(this)).removeClass("active_link") to remove class from other sidebar which is not been clicked by user.
Demo Code :
$(".sidebar_link").click(function() {
$(".sidebar_link").not($(this)).removeClass("active_link")
$(this).toggleClass('active_link');
});
.active_link {
background-color: green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar_menu">
<div class="sidebar_link active_link">
<i class="fa fa-home"></i>
Dashboard
</div>
<h2>MANAGE</h2>
<div class="sidebar_link">
<i class="fa fa-building-o"></i>
See Admin Notif
</div>
<div class="sidebar_link">
<i class="fa fa-wrench"></i>
Update Profile
</div>
<div class="sidebar_link">
<i class="fa fa-archive"></i>
Donate
</div>
<div class="sidebar_link">
<i class="fa fa-handshake-o"></i>
Connect
</div>
<div class="sidebar_logout">
<i class="fa fa-power-off"></i>
Log out
</div>
</div>
I'm trying to make a loop to show blog posts. Inside the loop, I use another loop to fetch blog likes. If the auth user liked a blog, then I want to show an unlike button, otherwise a like button. But the main loop keeps showing 2 buttons instead of one when multiple users like that blog.
<div class="post" v-show="blogs.length" v-for="blog in blogs" :key="blog.id">
<span v-for="like in blog.likes" :key="like.id">
<span v-if="blog.id === like.blog_id && like.user_id === authUserId">
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-down mr-1"></i> UnLike ({{blog.likes.length}})
</a>
</span>
<span v-else>
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-up mr-1"></i> Like ({{blog.likes.length}} )
</a>
</span>
</span>
</div>
What am I doing wrong?
condition are not working
Instead of using an inner loop, test once per blog if the user liked it:
<div class="post" v-show="blogs.length" v-for="blog in blogs" :key="blog.id">
<span v-if="blog.likes.find(like => like.blog_id === blog.id && like.user_id === authUserId)">
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-down mr-1"></i> UnLike ({{blog.likes.length}})
</a>
</span>
<span v-else>
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-up mr-1"></i> Like ({{blog.likes.length}})
</a>
</span>
</div>
Here is a demo
I want to change the colour of an Awesome Icon, and I created this piece of code, but instead of giving me the colour, I got an 'undefined'
<script type="text/javascript">
function changeAIColor(idName) {
alert ($('idAwesomeIcon').css("color"));
}
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i d="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You have missed the id selector # in your JQuery. Also use idName of the changeAIColor function in your selector. So, the query becomes ($('#'+idName).css("color"). Please note that you have used same id as idAwesomeIcon multiple times. id values should be used uniquely in HTML page.
function changeAIColor(idName) {
alert ($('#'+idName).css("color"));
}
changeAIColor('idAwesomeIcon');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You need $('#idAwesomeIcon').css("color")
Also <i d="idAwesomeIcon" isn't right. The ID should be different and should actually be id="".
<script type="text/javascript">
$('.AwesomeIcon').each(function(){
alert ($(this).css("color"));
});
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-on fa-lg AwesomeIcon" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-off fa-lg AwesomeIcon" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
Change your ID to class and change your JS accordingly.
I am working on a web app, where i faced a problem. The problem is, I have a span element, and inside that span element there are two more span elements. Simply, two children of the parent span element. One of the children is shown in the parent element, When someone click on the shown children element then, it will get the index value of that children and will hide it, and will show the next sibling. I have written some code, but it just work on one click, and when i click the next sibling when it has been shown, then the first sibling never get shown. Below is my code :
HTML
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
$(".ajlsst-wrap").click(function(){
var _index = $(this).find(".ajls-save-sec").index();
console.log(_index);
if(_index == 0){
$(this).find(".ajls-save").hide();
$(this).find(".ajls-saved").show();
}
else{
$(this).find(".ajls-saved").hide();
$(this).find(".ajls-save").show();
}
})
I also have a problem , that is, the index of first child is always detect not of the second one which is shown on click, i don`t know why.
Do it this way
$(".ajls-save-sec").click(function(){
$(this).hide().siblings().show()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved" style="display:none">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
Hope you get the concept.
You can directly use $(".ajls-save-sec").click instead of $(".ajlsst-wrap").click
You can use the simple next code
$(".ajls-save-sec").click(function(){ // no need for $(".ajlsst-wrap")
$(this).parent().find(".ajls-save-sec").show(); // show all spans
$(this).hide(); // hide the clicked one
})
.ajls-saved{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
I have hover list box and my list box has some links if I visit links my main image of list box is changing with relevant image but I'm using lazy load plugin that is why I want to change with data-src not src but it didn't work how can I handle as dynamic ?
and one more thing I guess it's possible bot how I don't know..if I leave area my images must change with default images but I couldn't
My main structure
HTML
<div class="tur-list-box">
<div class="tur-list-content">
<figure>
<img data-src="img/assets/tourlist-2.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfası">
<a href="#" class="figure-overlay">
<p class="tour-price">
<span class="price-big">73,</span>
<span class="price-little">40</span>
<span class="price-unit">TL*</span>
<span class="price-block">‘den itibaren</span>
</p>
</a>
</figure><!-- tur resim-->
<div class="tur-details">
<h3>Hafta Sonu Turları</h3>
<p>15 farklı program</p>
<i class=" open-tur-toggle fa fa-chevron-down" aria-hidden="true"></i>
</div><!-- tur detay-->
</div><!-- tur list content-->
<div class="tur-list-toggle">
<ul class="list-unstyled">
<li>Kakava ( Hıdırellez ) Şenlikleri Alaçatı <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Adana Portakal Çiçeği Karnavalı Isparta <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Gül Hasadı Ve Göller Yöresi Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Manisa Mesir Macunu Şenliği Turu <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
<li>Uçaklı Festival Turları <i class="fa fa-chevron-right" aria-hidden="true"></i></li>
</ul>
</div><!-- acilir kapanir alan-->
</div><!-- tur list box-->
and JS
$(".tur-list-box").hover(function(){
$(this).find(".tur-list-toggle").stop().slideDown();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-down").addClass("fa-chevron-up");
},function(){
$(this).find(".tur-list-toggle").stop().slideUp();
$(this).find(".open-tur-toggle").stop().removeClass("fa-chevron-up").addClass("fa-chevron-down");
var defaultImg = $(this).find("figure img").attr("data-src");
console.log(defaultImg);
});
$('.tur-list-toggle ul li a').hover(
function(e) {
e.preventDefault();
var getAttr = $(this).attr("data-img");
$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
$(this).fadeIn(500);
},
function(e) {
}
);
if you hover image you gonna see link and if you visit the links images has been change
and you can see the demo
change
$(this).parents(".tur-list-box").find("figure img").attr("src",getAttr);
to
$(this).parents(".tur-list-box").find("figure img").data("src",getAttr);
more on data