<div id="left-option-navigation">
<div id="left-option-expand">
<i onclick="openColl()" class="fas fa-angle-double-left"></i>
</div>
<div class="left-navigation-option" href=""><i class="fas fa-tachometer-alt"></i><span class="left-navigation-option-text">Dashboard</span></div>
<div class="left-navigation-option" href=""><i class="far fa-file-alt"></i><span class="left-navigation-option-text">Documents</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-tags"></i><span class="left-navigation-option-text">Products</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-archive"></i><span class="left-navigation-option-text">Stock</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-print"></i><span class="left-navigation-option-text">Reporting</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-user-friends"></i><span class="left-navigation-option-text">Customers & Suppliers</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-heart"></i><span class="left-navigation-option-text">Promotions & Actions</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-key"></i><span class="left-navigation-option-text">Users & Security</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-wallet"></i><span class="left-navigation-option-text">Payement Types</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-globe"></i><span class="left-navigation-option-text">Countries</span></div>
<div class="left-navigation-option" href=""><i class="fas fa-percent"></i><span class="left-navigation-option-text">Tax Rates</span></div>
<div class="left-navigation-option" href=""><i class="far fa-building"></i><span class="left-navigation-option-text">My Company</span></div>
</div>
<script>
function openColl()
{
document.getElementById("left-option-navigation").style.width = "100px";
}
</script>
Hey this is my code so i want to know that how can I hide left-navigation-option-text span class when i call openColl() function onclick.By setting the style of the particular class to display none is the solution but how can I trigger this function onclick and apply to this whole class.
So, if I understand you correctly, you want to apply the class to all left-navigation-option-text classes at the same time, correct?
You can do it like this:
function openColl() {
let optionText = document.querySelectorAll('.left-navigation-option-text');
optionText.forEach( el => el.classList.toggle('hidden') );
}
First, you get all elements with the class name left-navigation-option-text and store it in a variable named optionText. Then you loop over all Elements and toggle the class .hidden to all off them.
In your css file you create a class .hidden and set it to display:none.
Related
I am attempting to create 2 grid resize buttons for a gallery list. One is for a smaller grid (.museum-grid) and another for a large grid (.large-grid).
When I click #museum-grid-btn I want to do the following:
addclass .museum-grid to #gallery-list
removeclass .large-grid from #gallery-list
addclass .grid-active to #museum-grid-btn
removeclass .grid-active from #museum-grid-btn
When I click #large-grid-btn I want to do the opposite:
addclass .large-grid to #gallery-list
removeclass .museum-grid from #gallery-list
addclass .grid-active to #large-grid-btn
removeclass .grid-active from #museum-grid-btn
I'm doing it this way instead of using toggle bc for interface purposes I felt it would be weird to allow toggling on the grid size button selections. I want to click on a grid size and then if I click on it again the same state stays in place. Only when I click on the other option do I want the grid size to change. This is reflected in the jquery. I am having a hard time figuring out how to translate this to react bc it is not as simple as toggling; although maybe I am overlooking an easier method.
Here is the jquery I have for this
$(document).ready(function(){
$('#museum-grid-btn').on('click', function(e) {
$('#gallery-list').addclassName("museum-grid");
$('#gallery-list').removeclassName("large-grid");
$('#museum-grid-btn').addclassName("grid-active");
$('#large-grid-btn').removeclassName("grid-active");
e.preventDefault();
});
$('#large-grid-btn').on('click', function(e) {
$('#gallery-list').addclassName("large-grid");
$('#gallery-list').removeclassName("museum-grid");
$('#large-grid-btn').addclassName("grid-active");
$('#museum-grid-btn').removeclassName("grid-active");
e.preventDefault();
});
});
And the html
<body>
<section id="main">
<div id="the-gallery">
<div id="search">
<input type="search" id="gallery-search" name="q" placeholder="#">
<div id="filter-btn" class="control-btn">
<button id="filter-icon"><img src="img/gallery-filter.svg"/></button>
</div>
<div id="large-grid-btn" class="control-btn">
<button id="large-grid-icon"><i class="fas fa-th-large"></i></i></button>
</div>
<div id="museum-grid-btn" class="control-btn grid-active">
<button id="museum-grid-icon"><i class="fas fa-th"></i></button>
</div>
</div>
<ul id="gallery-list" class="museum-grid">
<li class="gallery-item">
<img src="img/00001.jpg">
<div class="listing-title-row">
<h2>#00001</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00002.jpg">
<div class="listing-title-row">
<h2>#00002</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00003.jpg">
<div class="listing-title-row">
<h2>#00003</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00004.jpg">
<div class="listing-title-row">
<h2>#00004</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00005.jpg">
<div class="listing-title-row">
<h2>#00005</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00006.jpg">
<div class="listing-title-row">
<h2>#00006</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00007.jpg">
<div class="listing-title-row">
<h2>#00007</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00008.jpg">
<div class="listing-title-row">
<h2>#00008</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00009.jpg">
<div class="listing-title-row">
<h2>#00009</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
<li class="gallery-item">
<img src="img/00010.jpg">
<div class="listing-title-row">
<h2>#00010</h2>
<div class="listing-views"><i class="fas fa-eye"></i> 1.5k</div><div class="listing-likes"><a><i class="fas fa-heart"></i></a> 100</div>
</div>
</li>
</ul>
</div>
</section>
</body>
.grid-active changes the style of the selected button to indicate it is selected.
.museum-grid and .large-grid changes the size of the grid list items
What would be the appropriate way to acive this functionality in a react template? I am familiar with using usestate and making a toggle function onClick but what If I want to do the above? I appreciate and guidance.
Added information:
I am so new to react that I'm not 100% sure if this is a functional or class component. I just want to get it working. I have done some work to get the filter menu to expand and close using a toggle. Here is the code I have for that from my tsx file. Maybe you can tell me which I am using - functional or class components?
import React, { useState } from "react";
function VisionExplorer() {
// Creating a state for the filter pane.
const [filterToggled, setFilterToggled] = useState(false);
const ToggleFilter = ()=>{
filterToggled ? setFilterToggled(false) : setFilterToggled(true);
}
<main id="main" className={filterToggled ? "filter-open" : ""}>
<div id="filter-btn" className="control-btn" onClick={ToggleFilter}>
<button id="filter-icon">
<img src="/assets/images/gallery-filter.svg" />
</button>
</div>
This bit of code toggles the filter-open class to the main div which I use css to open and close the filter pane. I use the toggle on the filter button. Is this a function or class component?
You can use state to assist with this in React.
I don't know if you are using function components or class components.
Here is an example using a function component:
const ComponentA = () => {
// Set up a state variable to control the mode (Normal / Large) of the component.
// mode will be the value stored for the current render.
// setMode is a function that lets you update mode.
// https://reactjs.org/docs/hooks-state.html
const [mode, setMode] = useState('Normal');
// On large button click handler.
const onLargeClick = () => {
// When setMode is called the component will rerender with the new value.
setMode('Large');
};
// On normal button click handler
const onNormalClick = () => {
// When setMode is called the component will rerender with the new value.
setMode('Normal');
};
return (
<>
{ /* Swap size related class name based on mode value */ }
<div
className={mode === 'Large' ? 'classLarge' : 'classNormal'}
>
Text
</div>
{ /* Swap active class name for normal button based on mode value */ }
<div
onClick={onNormalClick}
className={mode === 'Normal' ? 'classActive' : undefined}
>
Normal
</div>
{ /* Swap active class name for large button based on mode value */ }
<div
onClick={onLargeClick}
className={mode === 'Large' ? 'classActive' : undefined}
>
Large
</div>
</>
)
};
NOTE: Instead of using ternary statements for class names you could look at a package like clsx.
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 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