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
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>
Im trying to highlight the navbar based on the page im in, for example:
Page I am currently in
to
The next page I am in
As you can see the page I move to is highlighted. How can I do this in code?
<div class="navbar" id="navbar_welcome">
<i class="fas fa-home"></i> Home
<i class="fas fa-chart-line"></i> History
<i class="fas fa-user"></i> Profile
</div>
Use your $_GET variables to echo an inline background-style attribute on page generation.
<div class="navbar" id="navbar_welcome">
<a href="index.php?action=home" class="active">
<i class="fas fa-home" <?php if ($_GET['action']=='home') { echo 'style="background-color: grey;"'; }?>></i> Home
</a>
<a href="index.php?action=hsitory">
<i class="fas fa-chart-line" <?php if ($_GET['action']=='history') { echo 'style="background-color: grey;"'; }?>></i> History
</a>
<a href="index.php?action=setting">
<i class="fas fa-user" <?php if ($_GET['action']=='setting') { echo 'style="background-color: grey;"'; }?>></i> Profile
</a>
</div>
You could also do something similar in <style> tags in the header, either works.
It is very Simple HTML class handling. If you don't have certain php or ajax criteria.
For each page add class active to the Nav tags.
For example:
In Page1 add class='active' to the current Nav tag (home.php)
<div class="navbar" id="navbar_welcome">
<i class="fas fa-home"></i> Home
<i class="fas fa-chart-line"></i> History
<i class="fas fa-user"></i> Profile
</div>
In Page2 add class='active' to the current Nav tag (History.php)
<div class="navbar" id="navbar_welcome">
<i class="fas fa-home"></i> Home
<i class="fas fa-chart-line"></i> History
<i class="fas fa-user"></i> Profile
</div>
Add class active in CSS like so
.active{
background-color: red;
}
Continue to do that for all the pages that have the same Nav bar. It should do it.
Reference: https://learn-the-web.algonquindesign.ca/topics/navigation/
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');
}
I have an icon bar with a simple script to hide/show the content. If a tab is active the and the user clicks it again it will disappear and display nothing below the icon bar. Is there a way to have content displayed when no icons are active?
HTML and JS:
<div class="container text-center">
<div class="icon-bar">
<i class="fa fa-line-chart"></i>
<i class="fa fa-heartbeat"></i>
<i class="fa fa-diamond"></i>
<i class="fa fa-exchange"></i>
<i class="fa fa-newspaper-o"></i>
<script>
$("a").click(function(){
var myelement = $(this).attr("href")
$(myelement).slideToggle(1);
$(".toggle:visible").not(myelement).hide();
});
</script>
</div>
</div>
example of what one of the <div>'s looks like.
<div id="box2" class="toggle" style="display: none;">
<p>content here</p>
</div>
I have realised that there is a problem when using Zurb Foundation classes in .vue single file components. At first I could not get a Reveal Modal to work inside the .vue component but it was working when I use the same code in a blade or html file. Then I noticed a pattern because when I tried to use the Foundation's Orbit inside the component it failed, at first I thought it was an error but then I used the same code in a blade file and it worked. Other foundation classes such as row, grid and buttons are working just fine.
Has anyone experienced the same issue? And how can I work around it?
Here is the code for the modal:
<a data-open="video" class="button warning" href="">WATCH VIDEO</a>
<div id="video" class="reveal" data-reveal>
<div class="lead">
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="flex-video">
<iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
</div>
</div>
And for the orbit I used the basic example in the foundation docs for testing.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
<figcaption class="orbit-caption">Encapsulating</figcaption>
</li>
<li class="orbit-slide">
<img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
<figcaption class="orbit-caption">Outta This World</figcaption>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
There is an issue when using vue components with foundation js components and that's why they are not showing as explained here
So I added this directive in my script tag:
Vue.directive('f-orbit', {
bind: function (el) {
new Foundation.Orbit($(el))
},
unbind: function (el) {
$(el).foundation.destroy()
}
})
And in my template I added v-f-orbit instead of the default data-orbit:
<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>
I hope this will assist someone who is stuck.
Phillis's answer above is absolutely correct. Just thought I would throw in another example, of a Foundation 6.4 dropdown-menu and Vue.js 2.
Create the custom directive called dropdown and add v-dropdown to the parent element and it should be working.
<ul class="dropdown menu" v-dropdown>
<li>
Navigate Site <i class="fas fa-chevron-down"></i>
<ul class="menu vertical">
<li><i class="far fa-car"></i> Auto</li>
<li><i class="far fa-home"></i> Residential</li>
<li><i class="far fa-building"></i> Commercial</li>
<li><i class="far fa-building"></i> Safety & Security</li>
<li><i class="far fa-gem"></i> Specialty Solutions</li>
<li><i class="fal fa-id-badge"></i></i> Dealers</li>
<li><i class="far fa-building"></i> Madico U</li>
<li><i class="far fa-building"></i> Company</li>
</ul>
</li>
</ul>
Vue.directive('dropdown', {
bind: function (el) {
new Foundation.DropdownMenu($(el));
}
});