I'm using Materialize and I'd like to string several feature discovery steps into the help menu.
I have a functional CodePen mockup, but the subsequent steps expand the viewport (height/width) and don't style the element correctly. Is there a better way to step through the elements?
JavaScript
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll(".tap-target");
M.TapTarget.init(elems);
});
function next(n) {
var inst;
// Get each of the elements
var elems = document.querySelectorAll(".tap-target");
var current = n;
var prev = --n;
// If a previous target is open, close it.
if(prev >= 0) {
inst = M.TapTarget.getInstance(elems[prev]);
inst.close();
inst.destroy();
}
// Then, open the new target
inst = M.TapTarget.getInstance(elems[current]);
inst.open();
}
HTML
<button id="help" onclick="next(0)">help</button>
<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a>
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
<div class="next" onclick="next(1)">Next</div>
</div>
</div>
<div class="tap-target red" data-target="menu2">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
<div class="next" onclick="closeAll()">Dismiss</div>
</div>
</div>
I have figured a way to do this.
In your html, at the end of each tap-target, add the following:
<div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><!--Your button code here--></div>
So it should look like this:
<button id="help" onclick="next(0)">help</button>
<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>
<a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a>
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
<div class="next" onclick="next(1)">Next</div>
</div>
<div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a></div>
</div>
<div class="tap-target red" data-target="menu2">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
<div class="next" onclick="closeAll()">Dismiss</div>
</div>
<div class="tap-target-wave tap-target-origin" style="top: 360px; left: 360px; width: 80px; height: 80px;"><a id="menu2" class="waves-effect waves-light btn btn-floating red" ><i class="material-icons">search</i></a></div>
</div>
You can change the position of the target in the inline style.
For what I understand, when the page loads, Materialize should load the code I gave you for the target, but somehow in v1.0, it won't work. So you will need to add it manually.
<div id="Recorrido_Sistema">
<div class="tap-target tema_proyecto white-text" id="paso2" data-target="vcxv">
<div class="tap-target-content">
<h5>Title000</h5>
<p>A bunch of text00</p>
</div>
</div>
</div>
function sdfsdf() {
let options = [0]
let elems = document.querySelectorAll('.tap-target');
let instances = M.TapTarget.init(elems, options);
}
function tutorial(paso) {
let eje1 = `<div class="tap-target tema_proyecto white-text" id="paso1" data-target="botonadmin">
<div class="tap-target-content">
<h5>Title5</h5>
<p>A bunch of text</p>
<a onclick="tutorial(1)" class="next triadiccolor2 waves-effect waves-light btn"><i
class="material-icons ">skip_next</i></a>
</div>
</div>`;
let eje2 = `<div class="tap-target tema_proyecto white-text" id="paso2" data-target="dsfdffsdgkllkl">
<div class="tap-target-content">
<h5>Title22222222222222</h5>
<p>A bunch of text22222222222222</p>
<a onclick="tutorial(2)" class="next triadiccolor2 waves-effect waves-light btn"><i
class="material-icons ">skip_next</i></a>
</div>
</div>`;
let pasosaver = [eje1, eje2];
document.getElementById("Recorrido_Sistema").innerHTML = pasosaver[paso];
sdfsdf();
if (paso == pasosaver.length) {
$('.tap-target').tapTarget('close')
} else {
$('.tap-target').tapTarget('open')
}
}
Related
I created an input field to search for words or their partial matches. In this example, I'm using the word cool.
The issue is that after 1st found match, I'm seeing matches from the HTML code and can't figure it out why. If I'm trying to find matches for the 3rd time, everything gets stuck.
Can someone help me understand why it's happening this?
Is there a way to write this part of code differently?
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
document.addEventListener("DOMContentLoaded", function() {
let btn = document.querySelector('#findWord');
btn.addEventListener('click', function(){
let occurrences = [];
$('.timeline-type__content ul > li > a > .reports-list-item__title--compendium').each(function (i) {
// create a regexp from our term
const word = document.getElementById("searchedWord").value; // Eg: "cool"
const allCharacters = word.split(""); // ["c", "o", "o", "l"]
// Optional: remove duplicate characters:
const characterSet = new Set(allCharacters);
const uniqueCharacters = [...characterSet]; // ["c", "o", "l"]
const pattern = `(${uniqueCharacters.join("|")})`; // c|o|l
const r = new RegExp(pattern, "ig"); // /(c|o|l)/ig
if ($(this).html().match(r)) {
// console.log('this html match r is:' + ' ' + r);
var matches = $(this).html().match(r);
// loop through them
$.each(matches, function () {
occurrences.push(i);
console.log(occurrences);
});
// wrap each found search term with our `found` span to highlight it
$(this).html($(this).html().replace(r, '<span class="found">$1</span>'));
}
});
let lengthOccurrences = occurrences.length;
console.log('Number of occurrences is:' + ' ' + lengthOccurrences);
let currViewMatch = Number(document.querySelector('#current').textContent);
console.log('Number of current viewed match is:' + ' ' + currViewMatch);
// if we are currently viewing a match, increment so we move to the next one
currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
// if the incremented number is higher than the number of matches, reset it to 0
currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
// if this is the first click and we found matches, set current to the first match
currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;
let insertNbrOcc = lengthOccurrences > 0 ? ' of ' + lengthOccurrences : ' matches found in document';
// set number of matches found
let count = document.querySelector('#count');
count.textContent = insertNbrOcc;
// console.log(count);
// set number of currently viewed match
let nbrViewMatch = document.querySelector('#current');
nbrViewMatch.textContent = currViewMatch;
// console.log(insertTxtViewMatch);
if(currViewMatch != 0){
// open the section holding the currently viewed match using the indexes we stored earlier
$('.timeline-compendium__content').eq(occurrences[currViewMatch - 1]).collapse('show');
$('.timeline-type .timeline-type__content').eq(occurrences[currViewMatch - 1]).collapse('show');
}
});
});
.found {
background-color: yellow;
}
#labels {
margin-left: 15px;
font-size: 16px;
}
.timeline-compendium {
margin-left: 2rem;
}
.timeline-type__header {
width: 400px;
height: 50px;
background-color: rgb(46, 177, 100);
display: flex;
align-items: center;
justify-content: center;
color: white;
border: 1px solid white;
}
.timeline-type__header:hover {
color: white;
background-color: rgb(35, 119, 70);
}
#tab-content {
border: 1px solid red;
}
input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* input[type=text]:focus {
outline: 3px solid rgb(87, 163, 214);
} */
input#findWord {
background-color: rgb(248, 211, 3);
/* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74c3c;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- HTML CODE -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- <form id="searchForm" name="searchForm"> -->
<label for="searchedWord">Search</label>
<div>
<input type="text" id="searchedWord" placeholder="search.." aria-labelledby="searchedWord"/>
<button type="submit" id="findWord" value="Find">Find</button>
</div>
<!-- </form> -->
</div>
<div class="col-sm-6">
<div id="labels">
<span id="current"></span>
<span id="count"></span>
<span id="message"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<section class="timeline-compendium">
<a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button"
aria-expanded="true" aria-controls="introduction">
<div class="row align-items-center">
<div class="col-auto">Foreword</div>
<div class="col"><span></span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="introduction">
<div class="timeline-type">
<a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Foreword</div>
<div class="col timeline-type__title">Foreword</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand this
item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="foreword">
<ul class="reports-list">
<li>
<a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>Foreword
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Foreword cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section class="timeline-compendium">
<a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button"
aria-expanded="false" aria-controls="titleA">
<div class="row align-items-center">
<div class="col-auto">Title A</div>
<div class="col"><span>SUMMARY</span></div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleA">
<div class="timeline-type"><a class="accordion" data-toggle="collapse" href="#summary" role="button"
aria-expanded="false" aria-controls="summary" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">A</div>
<div class="col timeline-type__title">Summary</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="summary">
<ul class="reports-list">
<li><a href="/en/secgen/courtsecretariat/Decisions/sommaire_en.pdf?d=wd815d51ad20c480292bc796688fd10d2&csf=1&e=XIu0Q9"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter reports-list-item__chapter--pdf">
<em class="icon-file-pdf" data-toggle="tooltip" title="Summary" data-delay="400"
aria-hidden="true"></em>A
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Summary not cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section 3 -->
<section class="timeline-compendium"><a class="btn timeline-compendium__header collapsed" data-toggle="collapse"
href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
<div class="row align-items-center">
<div class="col-auto">Title B</div>
<div class="col"><span>The Institution, the Court, operational procedures, the Members</span>
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand
this item</span></div>
</div>
</a>
<div class="timeline-compendium__content collapse" id="titleB">
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false"
aria-controls="chapterB0" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 0</div>
<div class="col timeline-type__title">Treaties on European Union</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB0">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter">B 0</div>
<div class="col-auto reports-list-item__title reports-list-item__title--nolink">
Treaties on European Union
</div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b01.pdf?d=wa9cc5281eeb347718865a52bf6c67efb&csf=1&e=zyPEtD"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Status of the Court / Revision of Article 4 of the EEC Treaty"
data-delay="400" aria-hidden="true"></em>B 0.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Status of the Court / Revision of Article 4 of the EEC Treaty cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b02.pdf?d=w93c3d23dbdc04bcda16c5be9151c183a&csf=1&e=yaoQwr"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Obligations deriving from the Treaty on European Union" data-delay="400"
aria-hidden="true"></em>B 0.2
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Obligations deriving from the Treaty on European Union
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
<li><a href="/en/secgen/courtsecretariat/Decisions/b03.pdf?d=w56410e2b1b9f4ee2af9278081fc1d2c6&csf=1&e=BXz2wy"
target="_blank" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip" title="The Court's name"
data-delay="400" aria-hidden="true"></em>B 0.3
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
The Court's name
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB1" role="button" aria-expanded="false"
aria-controls="chapterB1" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 1</div>
<div class="col timeline-type__title">The Court's operational procedures
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB1">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 1.0</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">The
Court's structure
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="timeline-type"><a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false"
aria-controls="chapterB2" class="collapsed">
<div class="row no-gutters align-items-center">
<div class="col">
<div class="timeline-type__header timeline-type__header--title">
<div class="row align-items-center">
<div class="col-auto timeline-type__chapter">Chapter B 2</div>
<div class="col timeline-type__title">Members of the Court
</div>
<div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
class="sr-only">Collapse/expand
this item</span>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="timeline-type__content collapse" id="chapterB2">
<ul class="reports-list">
<li><a class="reports-list-item reports-list-item--compendium">
<div class="col-auto reports-list-item__chapter">B 2.1</div>
<div class="col reports-list-item__title reports-list-item__title--nolink">Code
of conduct for the members and former members of the Court
</div>
</a>
</li>
<li><a href="#" class="reports-list-item reports-list-item--compendium">
<div class="col reports-list-item__chapter reports-list-item__chapter--pdf"><em
class="icon-file-pdf" data-toggle="tooltip"
title="Code of conduct for the Members and former Members of the Court"
data-delay="400" aria-hidden="true"></em>B 2.1.1
</div>
<div class="col-auto reports-list-item__title reports-list-item__title--compendium">
Code of conduct for the Members and former Members of the Court - Cool
</div>
<div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
data-delay="400" aria-hidden="true"></em></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
(This was too long for a comment, maybe already helps you solve the issue)
You call $(this).html().match(r); to find matching words. Of course this will match occurences in the HTML. If you search for example "class" or "section". The HTML itself is matched there.
You should loop through HTML elements which are text nodes and call your .match(r) on each of them. Otherwise it will find tags, attributes and values in the attributes as well.
Taken from this answer: How do I select text nodes with jQuery:
$(elem).contents().filter(function() { return this.nodeType == Node.TEXT_NODE; });
In the code which replaces matches, you write $(this).html($(this).html().replace( ... - you can change this to $(this).html($(this).text().replace( ... if you only go through the text nodes and be safe there is no HTML there.
I have a bootstrap modal that contains a bunch of strings. I also have a loop of cards that each has a different 'id'. When I open the modal I want id to be displayed inside the modal (I will use it to get more info later, like name, description and deadline).
This is my loop of JSON objects:
<div class="card-list-body">
{% for assignment in förseningar %}
<div class="card card-kanban" data-toggle="modal" data-target="#task-modal" id="{{assignment.id}}">
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="kanban-dropdown-button-16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item text-danger" href="#">Archive Card</a>
</div>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 400">
{{assignment.type_of_assignment}} i {{assignment.course}} </h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600">
{{assignment.name}}
</h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: #d21b1b">
Försenad
</h6>
</a>
</div>
<style>
.hor-list {
list-style-type: none;
overflow: hidden;
display: block;
text-decoration: none;
padding: 0px;
margin-right: 5px;
}
.circle {
border-radius: 50%;
height: 30px;
text-align: center;
width: 30px;
}
.list-item {
float: left;
margin-right: 1px
}
.initials {
font-size: 15px;
font-weight: 800;
line-height: 1;
position: relative;
top: 3px;
/* 25% of parent */
}
</style>
<ul class="hor-list2">
{% for teacher in assignment.teachers.all %}
<li class = "list-item2">
<span class="step" style="background: {{teacher.userColor}};">{{teacher.user.username|first|capfirst}}</span>
</li>
{% endfor %}
<li class = "list-item2">
<p style="margin-left: 10px; font-size: 15px">
{{assignment.teachers.count}} Lärare:
{% for teacher in assignment.teachers.all %}
{{teacher.user.username|capfirst}}
{% endfor %}
</p>
</li>
</ul>
<hr>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: rgb(82, 130, 202)">
Börja Plugga. Skapa en studieplan
</h6>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
This is a piece of the modal:
<div class="modal modal-task" id="task-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Create Brand Mood Boards</h5>
<button type="button" class="close btn btn-round" data-dismiss="modal" aria-label="Close">
<i class="material-icons">close</i>
</button>
</div>
<!--end of modal head-->
<div class="modal-body">
<div class="page-header">
<p class="lead">Assemble three distinct mood boards for client consideration</p>
<div class="d-flex align-items-center">
<button class="btn btn-round" data-toggle="modal" data-target="#user-manage-modal">
<i class="material-icons">add</i>
</button>
</div>
<div>
<div class="progress">
<div class="progress-bar bg-success" style="width:42%;"></div>
</div>
<div class="d-flex justify-content-between text-small">
<div class="d-flex align-items-center">
<i class="material-icons">playlist_add_check</i>
<span>3/7</span>
</div>
<span>Due 14 days</span>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#task" role="tab" aria-controls="task" aria-selected="true">Task</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">Files</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="task" role="tabpanel">
<div class="content-list" data-filter-list="checklist">
the javascript:
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
As I said. I want a detail page of a card. So when I press the card I get a popup. I want that popup to contain a more detailed page of the card. I can't figure out how to get the data into the popup modal tho (task-modal) I think this is close but if anyone could help it would be greatly appreciated!
Three issues:
Your javascript is inside the for loop ({% for assignment in förseningar %}), it should be outside. Otherwise it's repeated x times.
var Id = $(event.relatedTarget).data('id') means that the button triggering the modal has a data-id attribute. But yours doesn't, it has an id attribute. So either set data-id="{{ assignment.id }}" in the <div class="card card-kanban" ...> or change to var Id = $(event.relatedTarget).attr('id').
$(event.currentTarget).find('input[name="modal-title"]') means you're looking for an <input name="modal-title"> element in your modal, but I don't see that anywhere. Maybe it got cut-off in which case no issue. But if you're trying to change the modal-title div of your modal, then the selector should be: $(this).find('.modal-title').
Note: I use $(this) instead of $(event.currentTarget). Shouldn't make any difference as the currentTarget is the modal and so is this.
I am working on bootstrap modal. I had a set of gallery images. A modal popup is opened on clicking the image. The popup has two buttons one for print the modal content and second to close the modal.
The problem is when the user click print button every thing is ok and modal content will be printed, but when the user click in close button to close the modal after print the content nothing happen the modal doesn't closed. Please help me to fix this.
Here is my code
<div class="single-img">
<div class="container">
<h2 class="title"><span>title</span></h2>
<div class= "container popup">
<ul class="row list-inline">
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="0">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt3.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="1">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt4.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="2">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt5.png" alt="" />
</div>
</a>
</div>
</li>
</ul>
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" title="Close" >X</button>
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="myGallery" class="carousel slide clearafter" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="C.jpg" alt="item0">
</div>
<div class="item">
<img src="D.jpg" alt="item1">
</div>
<div class="item">
<img src="E.jpg" alt="item2">
</div>
</div>
</div>
<div class="slider-bottom clearafter">
<div class="modal-footer" style=" padding-left: 155px;">
<button class="btn-sm" type="button" data-dismiss="modal" style="float:left;" onclick="printDiv('myGallery')">Print</button>
</div>
<div class="slider-control">
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
//add this button to your main html
<button type="button" class="btn btn-default" onclick="javascript:test()" id="myBtn" data-dismis`enter code here`s="modal">Close</button>
//add this script to your main html
function test() {
$('#myModal').modal('toggle');
}
//add this style to your main html
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
In my case Using bootstrap 4, using setTimeout helped me out.
By using setTimeout function, we hide modal after clicking print button.
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
setTimeout(function(){ $('#myModal').modal('hide'); }, 1000);
}
try this
function printDiv(divName) {
var elem = document.getElementById(divName)
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.style = "width: 100%;";
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
I have 12 buttons, all of which contain unique test, and a unique image. I want to implement the functionality in two ways:
1) on hover, the image changes to one that I have saved
2) on click, the image changes and is locked in to the one that I have saved.
I can do this in a long way where I have a function for each button, and thus 12 functions that change the div background color, the div text, and the image, but surely there must be an efficient way to do this with one single function for all buttons of a class?
EDIT SOME CODE:
HTML
<div class="container" id="research-container">
<div class="row">
<div class="col s4"><a class="waves-effect waves-light btn research-categories" id="gas-mileage">Gas Mileage
</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories" id="safety">Safety</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories">Acceleration</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories">Handling</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories" id="comfort">Comfort</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories">High Tech
<img class="button-pics" id="high-tech-button" src="../img/research-buttons/industrial-robot.png">
</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories">Leather Seats</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories">Sound System</a></div>
<div class="col s4"><a class="waves-effect waves-light btn research-categories">Don't Care</a></div>
</div>
</div>
JS:
this just changes the class to make the background/text color change
$(".research-categories").click(function() {
$(this).toggleClass("clicked");
});
and finally the css
.research-categories:hover {
color: #fff;
background-color: #007EE5;
}
.research-categories.clicked {
background-color: #007EE5;
color: #ffffff;
}
I'm not sure this is the best way, however it works without writing a specific function for each and every image. You'd need to put two attributes on all of your images: origImage would be what your images "normal" state (this does not replace src), and hoverImage would be the hover image.
JSFiddle: https://jsfiddle.net/ee5w6mxz/2/
$(document).ready(function() {
$('.research-categories').hover(
function() { //Mouse Over
var hoverImage = $(this).find('img').attr("hoverImage");
$(this).find('img').attr("src", hoverImage);
},
function() { //Mouse Out
var origImage = $(this).find('img').attr("origImage");
$(this).find('img').attr("src", origImage);
});
$('.research-categories').click(function() { //Button click
var hoverImage= $(this).find('img').attr("hoverImage");
$(this).find('img').attr("src", hoverImage);
$(this).off();
});
});
<div class="container" id="research-container">
<div class="row">
<div class="col s4">
<a class="waves-effect waves-light btn research-categories">High Tech
<img class="button-pics" id="high-tech-button" src="../img/research-buttons/industrial-robot.png" origImage="../img/research-buttons/industrial-robot.png" hoverImage="../img/research-buttons/HOVER_IMAGE.jpg">
</a>
</div>
</div>
</div>
I'm looking to toggle the z-index of 3 divs using jquery but I don't know how I would go about doing that. The desired effect I'm looking for is just to click a button that corresponds to the respective div and have the z-index of that div become a larger number in order to show the content in that div. As of now I have each div layered on top of each other.
.toggle-content {
position: absolute;
float: left;
width: 50px;
height: 50px;
}
<div id="content">
<div id="toggle">
<a href="#">
<div class="button" data-content="#1">1</div>
</a>
<a href="#">
<div class="button" data-content="#2">2</div>
</a>
<a href="#">
<div class="button" data-content="#3">3</div>
</a>
</div>
<div id="togglecontent">
<div id="1" class="toggle-content" style="z-index:9;">1</div>
<div id="2" class="toggle-content" style="z-index:8;">2</div>
<div id="3" class="toggle-content" style="z-index:7;">3</div>
</div>
</div>
So then I'm looking for how I can just click a button to have the corresponding div change its z-index to the highest value.
Any help would be greatly appreciated!
You can do something like this:
$('#toggle').on('click', 'a', function(e) {
e.preventDefault();
$( $(this).children().data('content') ).css('zIndex', 5).siblings().css('zIndex', 4);
});
.toggle-content {
position: absolute;
float: left;
width: 50px;
height: 50px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="toggle">
<a href="#">
<div class="button" data-content="#1">1</div>
</a>
<a href="#">
<div class="button" data-content="#2">2</div>
</a>
<a href="#">
<div class="button" data-content="#3">3</div>
</a>
</div>
<div id="togglecontent">
<div id="1" class="toggle-content" style="z-index:9;">1</div>
<div id="2" class="toggle-content" style="z-index:8;">2</div>
<div id="3" class="toggle-content" style="z-index:7;">3</div>
</div>
</div>