Materialize swipe tabs not working in modal - javascript

I am encountering a strange problem.
I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore
$(document).ready(function() {
$('.modal').modal();
$('.tabs').tabs({
swipeable: true
});
})
div.tabs-content.carousel.carousel-slider {
height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>
<div id="profession-registration-modal" class="modal">
<div class="modal-content">
<h4>Register your profession</h4>
<div class="row">
<div class="col s12">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3">Test 3</li>
</ul>
<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>
</div>
</div>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
Here is the fiddle: jsfiddle


Because the modal is hidden by default, normal initialization of tabs within modals won't work. You can use callbacks like onOpenEnd to reinitialize your tabs so that they render correctly once the modal is fully opened.
$('.modal').modal({
onOpenEnd: function(el) {
$(el).find('.tabs').tabs({ swipeable: true });
}
});
Here is an updated fiddle that uses that callback: https://jsfiddle.net/y7rmbd6w/14/


Since jQuery is no longer a dependency in Materialize CSS, so in order to do it with vanillaJS, one can use this -
document.addEventListener('DOMContentLoaded', function() {
const options = {
onOpenEnd: (el) => {
M.Tabs.init(el.querySelector('.tabs'), {
swipeable: true
});
}
}
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems, options);
});

Related

Code only working in edit mode, not on live view

I am currently trying to implement a tab element on my site. I am using Elementor via Wordpress. In the edit mode everything works fine, but one the live page the selection of the different tabs doesnt work.
const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('active')
})
tabs.forEach(tab => {
tab.classList.remove('active')
})
tab.classList.add('active')
target.classList.add('active')
})
})
<ul class="tabs">
<li data-tab-target="#einsteiger" class="tab"><h3>Einsteiger</h3><p id="preis">bis 2.999 €</p></li>
<li data-tab-target="#mittelklasse" class="active tab"><h3>Mittelklasse </h3><p id="preis">von 3.000 bis 4.499 €</p></li>
<li data-tab-target="#high-end" class="tab"><h3>High-End</h3><p id="preis">ab 4.500 €</p></li>
</ul>
<div class="tab-content">
<div id="einsteiger" data-tab-content >
<h1>test1</h1>
<p>test</p>
</div>
<div id="mittelklasse" data-tab-content class="active">
<h1>test2</h1>
<p></p>
</div>
<div id="high-end" data-tab-content >
<h1>test3</h1>
<p></p>
</div>
</div>

How To Get The Order Of A Nested List Using SortableJS & jQuery

I am trying to use SortableJS & jQuery SortableJS Binding to create a nested list, log the new order of the list, and it's children (like a hierarchal structure) via console.log().
I have already tried this solution which returned null.
This is my code and an example of its functionality:
Javascript (uses a small mix of Laravel):
#foreach($categories as $category)
$(document).ready(function() {
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable-{{$category->id}}'));
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
$([nestedSortables[i]]).sortable({
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65,
store: {
set: function (sortable) {
var order = sortable.toArray();
//var catID = document.getElementById("sortable-cards-{{$category->id}}").getAttribute("data-catid");
const nestedQuery = '.nested-sortable-{{$category->id}}';
const identifier = 'boardId';
const parentId = 'parentId';
const boardName = 'boardName';
const root = document.getElementById('boardsList-{{$category->id}}');
function serialize(sortables) {
var serialized = [];
var children = [].slice.call(sortables.children);
for (var i in children) {
var nested = children[i].querySelector(nestedQuery);
serialized.push({
board_name: children[i].dataset[boardName],
board_id: children[i].dataset[identifier],
parent_id: children[i].dataset[parentId],
children: nested ? serialize(nested) : []
});
}
return serialized;
}
var child_order = serialize(root);
console.log(child_order);
console.log(order);
}
}
});
}
});
#endforeach
HTML (uses a mix of PHP):
<div id="boardsList" class="list-group nested-sortable">
<div class="list-group nested-sortable">
<div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
<div class="list-group nested-sortable">
<div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
<div class="list-group nested-sortable">
</div>
</div>
</div>
</div>
<div class="list-group nested-sortable">
<div class="list-group-item" data-cat-id="{{$board->category_id}}" data-board-id="{{$board->id}}" data-parent-id="{{$board->parent_id}}">{{$board->name}}
<div class="list-group nested-sortable">
</div>
</div>
</div>
</div>
</div>
console.log() Output Of The Order:
Instead of returning all of the order results. It only returns "Clone Wars" & "Staff Applications" order results. How would I be able to retrieve all results (parents and children)?
Thank you for your help, if you need more information please let me know.

Nested Sortables Example
NOTE: When using nested Sortables with animation, it is recommended that the fallbackOnBody option is set to true.
It is also always recommended that either the invertSwap option is set to true, or the swapThreshold option is lower than the default value of 1 (eg 0.65).
This answer is edited version of this one https://stackoverflow.com/a/56589385/12232340
It was returning null or not working because of id wasn't specified in jsbin
Here is the demo : https://jsbin.com/kabetolanu/edit?js,output
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65
});
}
const nestedQuery = '.nested-sortable';
const identifier = 'sortableId';
const root = document.getElementById('nestedDemo');
function serialize(sortable) {
var serialized = [];
var children = [].slice.call(sortable.children);
for (var i in children) {
var nested = children[i].querySelector(nestedQuery);
serialized.push({
id: children[i].dataset[identifier],
children: nested ? serialize(nested) : []
});
}
return serialized;
}
console.log(serialize(root));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div id="sortableId" class="row">
<div id="nestedDemo" class="list-group col nested-sortable">
<div data-sortable-id="1.1" class="list-group-item nested-1">Item 1.1
<div class="list-group nested-sortable">
<div data-sortable-id="2.1" class="list-group-item nested-2">Item 2.1</div>
<div data-sortable-id="2.2" class="list-group-item nested-2">Item 2.2
<div class="list-group nested-sortable">
<div data-sortable-id="3.1" class="list-group-item nested-3">Item 3.1</div>
<div data-sortable-id="3.2" class="list-group-item nested-3">Item 3.2</div>
<div data-sortable-id="3.3" class="list-group-item nested-3">Item 3.3</div>
<div data-sortable-id="3.4" class="list-group-item nested-3">Item 3.4</div>
</div>
</div>
<div data-sortable-id="2.3" class="list-group-item nested-2">Item 2.3</div>
<div data-sortable-id="2.4" class="list-group-item nested-2">Item 2.4</div>
</div>
</div>
<div data-sortable-id="1.2" class="list-group-item nested-1">Item 1.2</div>
<div data-sortable-id="1.3" class="list-group-item nested-1">Item 1.3</div>
<div data-sortable-id="1.4" class="list-group-item nested-1">Item 1.4
<div class="list-group nested-sortable">
<div data-sortable-id="2.1" class="list-group-item nested-2">Item 2.1</div>
<div data-sortable-id="2.2" class="list-group-item nested-2">Item 2.2</div>
<div data-sortable-id="2.3" class="list-group-item nested-2">Item 2.3</div>
<div data-sortable-id="2.4" class="list-group-item nested-2">Item 2.4</div>
</div>
</div>
<div data-sortable-id="1.5" class="list-group-item nested-1">Item 1.5</div>
</div>
<div style="padding: 0" class="col-12">
</div>
</div>
<script src="https://sortablejs.github.io/Sortable/Sortable.js"></script>
</body>
</html>
And this is another simple nested solution https://github.com/SortableJS/Sortable/blob/master/tests/nested.html

It does not work to modify css value using jquery

I want to achieve the effect that when I click the button of 'Design Custom Cables & Order Online', the accordion content of step 1 will collapse and step 2 content will expand immediately, however, after applying the jquery, the step2 content won't expand immediately and the step 1 content won't collapse as well, can anyone master help me out, appreciate it!
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left').click(function ()
{
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>
</body>
<foot>
<script src="js.js" ></script>
</foot>
</html>

it should work in normal but its inside a parent with a click handler .. so to avoid this use
e.stopPropagation() Prevents the event
from bubbling up the DOM tree, preventing any parent handlers from
being notified of the event.
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left button').click(function (e)
{
e.stopPropagation();
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>

Hiding charts in javascript

I need to hide or show charts depending on the selected value, but it is not working and not showing the error in console. I made the javascript code with an alert and it works, so I guess the problem is not about the "if" logic
Here is the HTML code
<div class="row">
<!-- Left col -->
<section class="col-lg-12 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"></li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
</section>
</div>
<select class="target" id="opcion">
<option value="mes1" selected="selected">Hace 1 mes</option>
<option value="mes2">Hace 2 meses</option>
<option value="mes3">Hace 3 meses</option>
</select>
and this is the Javascript Snippet
$( ".target" ).change(function() {
if(document.getElementById('opcion').value == "mes1") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area.redraw();
area2.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes2") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area2.redraw();
area.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes3") {
alert( "Mes 3" );
}
});
any help will be appreciated

I solved it by using the chart js function called "Redraw". Thanks anyways

angularJS Custom directive functionality works using ng-click but not using ng-mouseOver

Requirement goes like this :- I have left navigation panel which has to be in sync with the items added in the main active view by the user and has to display in tree structure. Basic idea is to provide context aware sub-view that change based on active view.
Custom directive used to display tree structure: https://github.com/nickperkinslondon/angular-bootstrap-nav-tree/blob/master/src/abn_tree_directive.js
my HTML code: (using ng-click)
<div class="add-data-request-panel" style="min-height:1071px;"
ng-click="expandPanel()">
<ul>
<li class="icon-drd icon-drd-diactive" ng-if="panelCollapse" ></li>
<li class="icon-pie-chart icon-pie-active" ng-if="panelCollapse"></li>
<li class="icon-publish-req" ng-if="panelCollapse"></li>
<li class="icon-view-changes" ng-if="panelCollapse"></li>
</ul>
</div>
<div class="data-slider-panel" style="min-height:1071px;display" ng-if="panelExpand">
<div class="data-slider-row mtop" ng-click="collapsePanel()">
<div class="slider-row-left">
<span class="first-char" >S</span>
<span class="second-char">ection</span>
</div>
<div class="slider-row-right">
<div class="icon-drd icon-drd-diactive">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section2
<div class="sub-slider-row-left">
<abn-tree tree-data="mainArrayObj"></abn-tree> // passing data to tree directive
</div>
</div>
<div class="slider-row-right">
<div class="icon-pie-chart icon-pie-active">
</div>
</div>
</div>
<div class="data-slider-row" ng-click="collapsePanel()">
<div class="slider-row-left">
Section3
</div>
<div class="slider-row-right">
<div class="icon-publish-req">
</div>
</div>
</div>
<div class="data-slider-row" ng-click="collapsePanel()">
<div class="slider-row-left">
Section4
</div>
<div class="slider-row-right">
<div class="icon-view-changes">
</div>
</div>
</div>
</div>
JS implementation in my controller
$scope.panelExpand = false; //setting default flag
$scope.panelCollapse = true; //setting default flag
$scope.expandPanel = function() {
$scope.panelExpand = true;
$scope.panelCollapse = false;
$scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
initialJsonSeparator($scope.model.Data); // method used for iteration
};
$scope.collapsePanel = function() {
$scope.panelExpand = false;
$scope.panelCollapse = true;
};
my HTML code: (using ng-mouseover which is not working and displaying the data passed to navigation bar)
<div class="add-data-request-panel" style="min-height:1071px;" ng-mouseover="hoverIn()"
ng-mouseleave="hoverOut()">
<ul>
<li class="icon-drd icon-drd-diactive"></li>
<li class="icon-pie-chart icon-pie-active"></li>
<li class="icon-publish-req"></li>
<li class="icon-view-changes"></li>
</ul>
</div>
<div class="data-slider-panel" style="min-height:1071px;display"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-show="hoverEdit">
<div class="data-slider-row mtop">
<div class="slider-row-left">
<span class="first-char">S</span>
<span class="second-char">ection1</span>
</div>
<div class="slider-row-right">
<div class="icon-drd icon-drd-diactive">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section2
<div class="sub-slider-row-left">
<abn-tree tree-data="mainArrayObj"></abn-tree> // array that holds the data passed in html to custom directive
</div>
</div>
<div class="slider-row-right">
<div class="icon-pie-chart icon-pie-active">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section3
</div>
<div class="slider-row-right">
<div class="icon-publish-req">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section4
</div>
<div class="slider-row-right">
<div class="icon-view-changes">
</div>
</div>
</div>
</div>
js Implementation for the ng-mouseOver: (while debugging all the iteration and methods executed as expected)
$scope.hoverIn = function() {
this.hoverEdit = true;
$scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
initialJsonSeparator($scope.model.Data); //method used to iterate the data
};
$scope.hoverOut = function() {
this.hoverEdit = false;
};
Any solution to this issue would be of gr8 help. If there is any other better approach other than the ng-mouseOver and ng-mouseLeave to implement hover, please do let me know.

Categories