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));
}
});
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.
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.
Ok so I have game list, which is currently styled in a thumbnail kind of view. I have made 3 other classes which when added change the child elements of the list elements to make a list view. I have one which changes the li's themselves, 2 which change the child nodes of that li.
I have two buttons which should control the users preferred view type. They have an active class which stays on to show it is the active view.
So here's the question, how do i select the li's, and there child elements, to replace the view. So when clicked, the list button will add those classes. I will also need the thumbnail view button to remove those classes but i can figure that afterwards.
The markup:
<div id="View">
<button id="boxes" class="btn active" title="Thumnbnail View" onclick="thumbview()">
<i class="fas fa-th"></i>
</button>
<button id="lines" class="btn" title="List View" onclick="listview()">
<i class="fas fa-list-ul"></i>
</button>
</div>
<div id="sortcontainer">
<li class="game" id="75">
<a href="Radiant_Defence.html">
<img src="Games_images/radiantdefence/banner_image.png">
<h2 class="title">Radiant Defence</h2>
<h2 class="date" id="2012">(2012)</h2>
<h3>75/100</h3>
</a>
</li>
<li class="game" id="80">
<a href="plantsvszombies2.html">
<img src="Games_images/Plantsvszombies2/bannerimage.jpg">
<h2 class="title">Plants vs Zombies 2</h2>
<h2 class="date" id="2013">(2013)</h2>
<h3>80/100</h3>
</a>
</li>
<li class="game" id="45">
<a href="link">
<img src="games_category_placeholder.jpg">
<h2 class="title">Some game</h2>
<h2 class="date" id="2017">(2017)</h2>
<h3>45/100</h3>
</a>
</li>
<li class="game" id="80">
<a href="link">
<img src="games_category_placeholder.jpg">
<h2 class="title">Fieldrunners 2</h2>
<h2 class="date" id="2016">(2016)</h2>
<h3>80/100</h3>
</a>
</li>
</div>
And the JavaScript I have so far (still new)
function listview() {
var container = document.getElementById("sortcontainer");
var li = container.getElementsByTagName("li");
for (var i = 0; i < li.length; i++);
li.classList.add("lilistview");
};
Thankyou in advance if anyone has any suggestions
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
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.