I have created a global Jquery to add and remove class toggle function for various elements through my page. JsFiddle
The toggle class displays a hidden div which overlays the original div. Within the overlay i have created a close button is an attempt to remove the hidden div.
I am having slight issue in removing a the toggle class with the close button. Below is my code
$('.details-btn').click(function(){
var $panel = $(this).closest('.square').find('.i-panel');
if ($panel.hasClass('inactive')) {
$('.square .i-panel').addClass('inactive');
$panel.removeClass('inactive');
} else {
$panel.addClass('inactive');
}
});
HTML
<div class="item-container small-6 relative">
<div class="square">
<span class="exclusive-tag-3 cap-txt absolute">
<p class="absolute">New</p>
</span>
<img src="http://myjpg">
<div class="item-details">
<ul>
<li class="small-5">
<p>ICON</p>
</li>
<!-- INFO BTN -->
<li class="small-5 details-btn">
<i class="fa fa-info-circle">OPEN</i>
</li>
<!-- INFO BTN ENDS -->
</ul>
</div>
<div class="d-hidden i-panel inactive absolute">
<article class="global-padding">
</article>
<footer class="absolute">
<ul class="global-padding">
<li class="small-5">
<a>
<p class="heading-5">Details</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-envelope-o">SEND</i>
</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
</a>
</li>
</ul>
</footer>
</div>
</div> <!-- SQUARE ENDS HERE -->
</div> <!-- ITEM-CONTAINER ELEMENTS ENDS -->
You don't have a click handler for the close button, so only the open button is triggering the class toggle, you need to add the class details-btn to the close button as well or create a new click handler.
Try replacing
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
with
<p class="heading-5 details-btn">
<i class="fa fa-times">close</i>
</p>
Your Jquery function is triggered when you click on an element that has the class details-btn on it, therefore you must add class details-btn to your close button like this:
<i class="fa fa-times details-btn">close</i>
Related
js computes the structure below, i need a dropdown when the button is hovered whereas onclick should trigger the form submit.
nothing happens when i hover the button area. Is it because of is-active missing?
In Bulma's official docs about the dropdown menu, the example's indent can be confusing.
The "dropdown-menu" 'div' is a childnode of the main dropdown 'div'.
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span>Hover me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
</div>
</div>
</div>
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!
If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html
Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
I try to put in place a system popup, why I decided to use the data attribute.
I wish that when an element has the id "popup" I recovered using the jQuery data-item value.
The data-item value has the id to display in my popup, my problem is that if I have several id popup, recovered came only 1 single id, the first in this page.
How can I do to retrieve all the popup and display ID is the corresponding value with the data-item?
<div id="boxpop">
<div class="centered">
<span></span>
<div class="close-btn"></div>
</div>
</div>
<div id="login" style="display:none;">
Test div
</div>
<header>
<div id="MainHeader">
<div class="logo"></div>
<nav id="Menu">
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
</nav>
</div>
</header>
<script type="text/javascript">
$("#popup").click(function() {
a = $("#popup").data("item");
alert(a);
});
function demo(div) {
$("#boxpop").fadeIn(500);
$("#boxpop .centered span").empty();
$(div).insertAfter("#boxpop .centered span").fadeIn(100);
}
</script>
ID must be unique.
You should use class for this, this is the correct way:
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
And then...
$(".popup").click(function() {
a = $(this).data("item");
alert(a);
});
Hope it helps.
The is is because cannot have multiple elements with the same id attribute in the same document - it's invalid HTML. You should use classes instead. From there you can use the this keyword in the click handler to reference the element which raised the event and read the data attribute. Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxpop">
<div class="centered">
<span></span>
<div class="close-btn"></div>
</div>
</div>
<div id="login" style="display:none;">
Test div
</div>
<header>
<div id="MainHeader">
<div class="logo"></div>
<nav id="Menu">
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
</nav>
</div>
</header>
<script type="text/javascript">
$(".popup").click(function() {
a = $(this).data("item");
alert(a);
});
function demo(div) {
$("#boxpop").fadeIn(500);
$("#boxpop .centered span").empty();
$(div).insertAfter("#boxpop .centered span").fadeIn(100);
}
</script>