Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
SOLVED: Stupid Mistake - Had to replace the undefined element with "#sidebar"
I am having trouble using the is visible jquery function. This is my jQuery code.
$("#sidebar_toggle").click(function(){
if ($(element).is(":visible")){
$("#sidebar").hide();
} else {
$("#sidebar").show();
}
});
This is my html for the sidebar:
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse sidebar">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><a href="/user/<%=current_user.id%>"><img src=<%=Gravatar.new(current_user.email).image_url%> class="img-circle" width="60"></p>
<h5 class="centered"><%=current_user.username%></h5></a>
<hr>
<!-- <li>
<a class="active" href="/inbox">
<i class="fa fa-inbox"></i>
<span>Inbox</span>
</a>
</li>
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
-->
<%if Company.where(:user_id => current_user.id).count<3 || current_user.premium%>
<li>
<a href="/companies/new">
<i class="fa fa-star"></i>
<span>Start a Startup</span>
</a>
</li>
<%end%>
<%if Company.where(:user_id => current_user.id).count>=1%>
<li>
<a href="/companies">
<i class="fa fa-building"></i>
<span>Companies</span>
</a>
</li>
<%end%>
<li>
<a href="/market">
<i class="fa fa-exchange"></i>
<span>Global Market</span>
</a>
</li>
<li>
<a href="/investments">
<i class="fa fa-line-chart"></i>
<span>Invest</span>
</a>
</li>
<li>
<a href="/users-companies">
<i class="fa fa-search"></i>
<span>Users & Companies</span>
</a>
</li>
<li>
<a href="/request-help">
<i class="fa fa-question"></i>
<span>Request & Help</span>
</a>
</li>
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
It is when I add if ($(element).is(":visible")){... that it stops working to click on the sidebar_toggle. Even if I add $("#sidebar").hide(); prior to this code it doesn't work.
Strangely though it works on jsfiddle but not on chrome when I am trying to test it with all my website code.
I have also tryed this:
$("#sidebar_toggle").click(function(){
if ($(element).hasClass( "hidden" )){
$("#sidebar").show();
$("#sidebar").removeClass("hidden");
} else {
$("#sidebar").hide();
$("#sidebar").addClass("hidden");
}
});
But it doesn't work either...
It's known that .is(":visible") does not work correctly with some elements in Chrome. Maybe have a look at this thread jQuery `.is(":visible")` not working in Chrome
Instead of doing the checking with .is(":visisble"), you could just use .toggle().
This should work, assuming you have element defined somewhere.
$("#sidebar_toggle").click(function(){
$(element).toggle();
});
You can add/remove a class and check for that as well.
$("#sidebar_toggle").click(function(){
if ($(element).hasClass("visible")){
$("#sidebar").hide();
$(element).removeClass('visible');
} else {
$("#sidebar").show();
$(element).addClass('visible');
}
});
It'd also be better to just use the class to do the hiding/showing with display none/block.
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>
Well, I am making a simple left panel menu. What I want to do is to make sub-menu visible even after refresh when the category is active.
Example:
-Users
-Dashboard
-Blog
-----articles
-----new article
I am on articles si I can see entire submenu even after refreshing of the website.
I make it works this way.
Handlebars menu
<div class="blog-tab {{#if active.blog}}admin-panel-active-tab{{/if}}" id="blog-tab">
<a>
<i class="fas fa-pen"></i>Blog
<i class="fas fa-caret-down admin-panel-item-dropdown"></i>
</a>
</div>
<div id="blog-sub-tab" class="toggleable-tab">
<div class="sub-toggleable-tab">
<div class="{{#if active.posts}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Articles</div>
<div class="{{#if active.newPost}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Create new article</div>
</div>
</div>
<div class="eshop-tab {{#if active.eshop}}admin-panel-active-tab{{/if}}" id="eshop-tab">
<a><i class="fas fa-store"></i>Eshop
<i class="fas fa-caret-down admin-panel-item-dropdown"></i>
</a>
</div>
<div id="eshop-sub-tab" class="toggleable-tab">
<div class="sub-toggleable-tab">
<div class="{{#if active.eshopCatalog}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Catalog</div>
<div class="{{#if active.createNewProduct}}admin-panel-active-tab{{/if}}"><i
class="fas fa-circle"></i>Create new product</div>
<div class="{{#if active.eshopOrders}}admin-panel-active-tab{{/if}}"><i class="fas fa-circle"></i>Orders</div>
</div>
</div>
Handlebars make it scrolled.
{{#if active.blog}}
<script>$("#blog-sub-tab").slideToggle(0);</script>
{{/if}}
{{#if active.eshop}}
<script> $("#eshop-sub-tab").slideToggle(0);</script>
{{/if}}
I am passing to every subcategory active.blog or active.tab so it's easy.
But now I am using webpack and cant use jquery when its frontend rendered.
Yes, it can be fixed... But I am looking for any better way how to do it.
That can be done only in js(with jquery) without handlebars. Thank for any help.
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
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));
}
});
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