JavaScript Toggle Not Working Properly - javascript

Can anyone explain why the snippet of code below does not actually cause the "#wrapper" to shift? It's driving me insane...Nothing happens when I click on the info icon.
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
<i class="fa fa-info-circle fa-2x info myButton"></i>
<img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
<script>
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#wrapper').toggle(effect, options, duration);
});
</script>


You forgot to add a class in button
<button class="myButton">
$(".myButton").click(function() {
console.log("123")
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = {
direction: "right"
};
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#wrapper').toggle(effect, options, duration);
$('#wrapper').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
hide
<i class="fa fa-info-circle fa-2x info myButton"></i>
<img class="img-responsive" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button class="myButton" type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
test<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
You can see the front end of knowledge:https://github.com/AutumnsWind


Have a look at the snippet below.
I included jQuery and jQueryUI, resized the i-tag and included the text "Image", so you can click on it. Seems to be working!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">{{item.entree}}</div>
<div id="wrapper">
<i class="fa fa-info-circle fa-2x info myButton" style="width:20px; height:20px">Image</i>
<img class="img-responsive myButton" src="/media/{{item.primary_image}}" alt="{{item.entree}}">
<p class="menu_desc price-widget">{{item.description}}</p>
</div>
<div class="panel-body">{{item.side}}</div>
<div class="center" style="width: 85%; margin-bottom: 7px;">
<div class="input-group col-md-6 col-md-offset-4 col-xs-6 col-xs-offset-4">
<span class="input-group-btn">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-minus fa-2x"></i>
</button>
</span>
</span>
<input class="form-control cart-qty" id="{{item.meal_type}}" type="text" name="{{item.meal_type}}" min="0" max="21" value="{{sub.pork}}">
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-name="quantity" data-value="2" data-id="50" field='{{item.meal_type}}'>
<i class="fa fa-plus fa-2x"></i>
</button>
</span>
</div>
</div>
</div>
<script>
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: "right" };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('.center').toggle(effect, options, duration);
});
</script>

Related

move data view to javascript without click button

I have a view and there is a button in this page. When I click that button I can get a parameter (#say_note.ID). But I want to get this parameter in javascript without click button.
My View :
#foreach (Note say_note in Model)
{
<div class="col-lg-12" data-note-id="#say_note.ID">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">
<a href="/Home/ByNote/#say_note.ID">
#say_note.Tittle
</a>
</h4>
<h6 class="text-right">
<h7>#say_note.Owner.Username</h7><i class="fas fa-user"></i><br />
<h7> #say_note.ModifiedOn.ToString("dd.MM.yyyy")</h7><i class="far fa-clock"></i>
</h6>
<p class="card-text">
#say_note.Text
</p>
</div>
<div class="card-footer">
<p>
<button data-toggle="collapse" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
<button class="btn btn-sm btn-outline-secondary float-sm-left" type="button" data-liked-button="false" data-note-id="#say_note.ID">
<span class="far fa-star like-star"></span> <span class="like-count"> #say_note.LikeCount</span>
</button>
<div class="text-right dateAndName float-sm-rigth">
<a class="bottomNav" onclick="history.go(-1); return false;" href="#"> Geri </a><br />
</div>
</p>
</div>
</div>
</div>
}
</div>
My Javascript:
$("#collapse_CommentPopup").collapse("toggle")
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + #say_note.ID);
});
collapse_CommentPopup my collapse modal and I fill data this collapse with javascript

I solved my own question , maybe someone can use it other time
MyButton :
<button data-toggle="collapse" id="CommentButton" data-target="#collapse_CommentPopup" data-note-id="#say_note.ID" class="btn btn-sm btn-outline-secondary float-md-right">
<i class="fas fa-comment-alt"></i> Yorumlar
</button>
My Javascript:
$(function () {
$("#collapse_CommentPopup").collapse("toggle") //ModelCommentPopup isimli nesne show olduğunda (popup event'i yakaladık)
var NoteId = $("#CommentButton").data("note-id");
$("#collapse_CommentPopup_bodyPopup").load("/Comment/ShowNoteComments/" + NoteId); //ShowNoteComments metodunu çalıştır ve dönen partialı popup'ın bodysine yükle
});

Bootstrap jquery sortable only sorts rows?

I've been trying to get sortable to work with a bootstrap grid of buttons. It's a responsive design, with multiple rows containing 3 buttons each. I can turn on sortable on the overall container, which lets me drag and drop the buttons, but it does it for the whole row. I want to be able to select individual buttons and drag and drop them to other rows. I would think
$("buffer0,#buffer1,#buffer2").sortable({
connectWith: "#buffer0,#buffer1,#buffer2"
})
would work, but that doesn't allow for any dragging and dropping. I've created a fiddle that shows how this works. (resize the output screen so you can see the rows)
Really appreciate any insight, been staring at this for hours and don't know where do go.
https://jsfiddle.net/7yhkp9eo/2/

You can use:
items: specifies which items inside the element should be sortable.
and
tolerance: specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values.
$("#list_content").sortable({
tolerance: "pointer",
items: ".col-sm-4"
});
$("#list_content").disableSelection();
#import url('//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="list_content">
<div id="buffer0" class="row top-buffer">
<div id="row0" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,1" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T11</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,2" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T12</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,3" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T13</a>
</div>
</div>
</div>
<div id="buffer1" class="row top-buffer">
<div id="row1" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,4" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T21</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,5" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T22</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,6" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T23</a>
</div>
</div>
</div>
<div id="buffer2" class="row top-buffer">
<div id="row2" class="col-sm-12 col-sm-offset-0 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<div class="col-sm-4">
<a link-type="c" href="#0,7" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T31</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,8" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T32</a>
</div>
<div class="col-sm-4">
<a link-type="c" href="#0,9" class="btn btn-default btn-lg btn-block btn-list navbutton-padding"
role="button" data-original-title="" title=""><i class="fa fa-tasks icon-larger fa-2x fa-fw"></i>T33</a>
</div>
</div>
</div>
</div>

Bootstrap Tabs with Google Map API not completely loading

I am trying to use the Google Maps API inside of a Bootstrap tab. When the map is in the first tab it loads properly, but I have to move it to the second tab because of UI considerations. When I do that, the map doesn't complete it's loading. I am using a class called "appt-lo" to trigger the first tab to show active. If I move that class to the second tab, my map shows, otherwise, it does not. If you guys could maybe give me some ideas or point me in the right direction, I would deeply appreciate it.
Codepen: https://codepen.io/madjaybird/pen/YxJErx?editors=1000
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.madjaybird.com/Codepen/main.js"></script>
<link href="https://www.madjaybird.com/Codepen/main.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inline Online - The Online Appointment Scheduler for NM MVD</title>
<link rel="stylesheet" href="dist/styles/main.css">
<link href='https://fonts.googleapis.com/css?family=Palanquin:400,300,100,200,500,600,700' rel='stylesheet' type='text/css'>
</head>
<body class="intro wizard">
<div id="header" role="banner">
<nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top justify-content-between">
<a class="navbar-brand" href="http://mvd.newmexico.gov"><span>MVD</span> NEW MEXICO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav flex-row ml-auto d-none d-flex">
<li class="nav-item pr-2 pt-2" id="time">15:00<span> minutes</span></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-calendar-month-0817.html"><i class="fas fa-home"></i> Admin Home</a></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-help.html"><i class="fas fa-question-circle"></i> Help</a></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-signin.html"><i class="fas fa-sign-out-alt"></i> Log Out</a></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row justify-content-center mt-6">
<div class=" card wizard-card">
<div class="wizard-header">
<h3>
<b>MAKE</b> YOUR APPOINTMENT<br>
</h3>
</div>
<ul class="justify-content-around nav nav-tabs nav-fill setup-panel">
<li class="nav-item"><a class="btn-default nav-link link appt-lo" href="#step-1">Appointment Type</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-2">Appointment Location</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-3">Date & Time</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-4">Add Appointment</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-5">Customer Information</a></li>
</ul>
<form role="form" action="" method="post">
<!-- Step 1: Appointment Type -->
<div class="row setup-content" id="step-1">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col-6">
<h4 class="info-text"> Select Your Appointment Type </h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<hr class="my-2">
<div class="row">
<div class="col">
</div>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="cards p-2">
<div class="card1 has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-id-card"></i>
</div>
<h6 class="mt-2">First Time <br>Driver's License</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-file-alt"></i>
</div>
<h6 class="mt-2">First TIme Title</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-search"></i>
</div>
<h6 class="mt-2">VIN Inspection</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-road"></i>
</div>
<h6 class="mt-2">Road Test</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fa fa-motorcycle"></i>
</div>
<h6 class="mt-2">Motorcycle <br>Road Test</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-shield-alt"></i>
</div>
<h6 class="mt-2">Fingerprinting</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-1 mb-4">
<div class="col-6">
<h4 class="info-text"></h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2: Location -->
<div class="row justify-content-center setup-content" id="step-2">
<div class="col text-center mt-4">
<div class="row mx-1 mb-4">
<div class="col-6">
<img src="dist/images/MVDlogo.png" alt="MVD NM logo" class="step2" width="80">
<h4 class="info-text"> Find an MVD Field Office near you.</h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="row my-4 mx-4">
<div class="col-sm-8">
<div class="thumbnail map-wrapper">
<div id="map-canvas">
<div id="map">
</div>
</div>
</div>
</div>
<div class="col-sm">
<div>
<div id="maps">
<p>To find an MVD Service Provider near you, enter your City or ZIP Code.</p>
<div class="form-group">
<label class="sr-only">City/ZIP Code</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</div>
<div class="location text-left">
<h5><strong>Select Location:</strong></h5>
<div class="address">Santa Fe</div>
<div>2546 Camino Entrada</div>
<div>Santa Fe, NM 87507</div>
<div>505-476-1599</div>
<div> Monday - Friday 8am - 4pm</div>
</div>
</div>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 3: Date & Time -->
<div class="row setup-content" id="step-3">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-primary prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Select Date & Time </h4>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="location text-center">
<div class="address">Santa Fe</div>
<div>2546 Camino Entrada Santa Fe, NM 87507 </div>
<div>505-476-1599 Monday - Friday 8am - 4pm</div>
</div>
</div>
</div>
<hr class="mb-0">
<div class="row justify-content-center">
<div class="col-sm">
<p class="text-center">Please select the date and the time for your appointment.</p>
</div>
</div>
<div class="row mx-4">
<div class="col-sm mt-2">
<div class="form-group">
<label class="control-label">Date of Appointment: </label>
<input class="form-control date-picker" type="date" />
</div>
</div>
<div class="col-sm block_list_words mt-2">
<label class="control-label">Time of Appointment: </label>
<ul id="handle-1" class="list-unstyled">
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 9:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 9:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 10:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 10:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 11:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 11:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 12:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 12:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 1:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 1:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 2:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 3:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 3:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 4:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 4:30 pm<span class="float-right sortable-links"></span>
</li>
</ul>
</div>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 4: Add Appointment -->
<div class="row setup-content" id="step-4">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Make Another Appointment </h4>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="row justify-content-center ml-0 mt-4">
<div class="col text-center">
<p class="lead">Would you like to make another appointment?</p>
<p class=" mb-4"> If so, click the <b>MAKE ANOTHER APPOINTMENT</b> button below. If not, click <b>NEXT</b>.</p>
<button type="button" class="btn btn-secondary btn-sm" onclick="window.location.href='ui-wizard.html'">Make Another Appointment</button>
</div>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 5: Customer Information -->
<div class="row setup-content" id="step-5">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Enter Your Information </h4>
</div>
<div class="col">
<button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="mx-4">
<form class="container" id="needs-validation" novalidate>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label for="firstName"> First Name</label>
<input name="firstname" type="text" class="form-control" id="firstName" placeholder="First Name" required>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label for="lastName"> Last Name</label>
<input name="lastname" type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label> Email</label>
<input name="email" type="email" class="form-control" id="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label> Phone </label>
<input name="phone" type="tel" class="form-control" id="phone" placeholder="Phone" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label> Driver's License Number</label>
<input name="dln" type="text" class="form-control" id="dln" placeholder="Driver's License Number">
</div>
</div>
</div>
</form>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="footer mt-5">
<img src="dist/images/inlineonline-logo.png" alt="In Line Online logo" width="250">
<p> Copyright © 2017 State of New Mexico</p>
</div>
<!-- SCRIPTS -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDaUcFwmFZosg6lIjUQFolSsqp_Zd9GCw&callback=initMap"></script>
<!-- / SCRIPTS -->
</body>
</html>

Call google.maps.event.trigger(map, 'resize'); inside allNextBtn.click's callback function within a setTimeout seems to render the map completely on tab change.
//Next Button script
allNextBtn.click(function () {
//trigger map resize on tab select
setTimeout(function(){
google.maps.event.trigger(map, 'resize');
},10)
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('ul.setup-panel li a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
Codepen url https://codepen.io/azs06/pen/RZeMWV?editors=0010

Preview tab not showing when press editor buttons

When I type in my textarea once has dected more than 4 characters it enables the preview tab.
If I click on my editor buttons example the button-bold it shows text like **strong text** but even though there is more than 4 characters preview tab does not enabled.
Currently It only enabled when keyup
Question: How can I make sure if I click on a editor button it will
dected how many characters and if greater than 4 will enable tab.
CodePen Example Demo
$('#tab-preview').hide();
$("#textarea_message").on('keyup', function(e){
if ($(this).val().length >= "4") {
$('#tab-preview').show();
}
if ($(this).val().length < "4") {
$('#tab-preview').hide();
}
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<form id="form-ask">
<div class="form-group">
<button type="button" id="button-bold" class="btn btn-default" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
<button type="button" id="button-italic" class="btn btn-default" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
<button type="button" id="button-quote" class="btn btn-default" title="Quote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-code" class="btn btn-default" title="Code"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
<button type="button" id="button-insert-image" data-toggle="modal" data-target="#insert-image" class="btn btn-default" title="Insert Image URL"><i class="fa fa-code" aria-hidden="true"></i>
</button>
<button type="button" id="button-upload" class="btn btn-default" title="Add Attachment: This can be image or file "><i class="fa fa-file" aria-hidden="true"></i>
Attach File</button>
</div>
<div class="panel ask panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a data-target="#ask" id="tab-ask" data-toggle="tab"><i class="fa fa-code" aria-hidden="true"></i> Ask Question</a></li>
<li><a data-target="#preview" id="tab-preview" data-toggle="tab"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="ask">
<div class="form-group">
<textarea id="textarea_message" class="form-control"></textarea>
</div>
</div>
<div class="tab-pane fade" id="preview">
<div class="preview-message"></div>
</div>
</div>
</div>
</div>
<p class="text-muted">Preview Button will be enabled once your question has reached
4 character or more.</p>
</form>
</div>
</div>
</div>

One solution would be to add a 'trigger' for the keyup event on your buttons
$('#button-bold').on('click', function(e) {
markdown_syntax(this.id, "**", "**", 'strong text');
$("#textarea_message").trigger('keyup');
});

ui-sortable auto scrolls to the bottom of the page

Okay i have the following list:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="Er du sikker du vil slette modulet?" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i> Skift modul
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;">Kursus
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="Er du sikker du vil slette kurset?" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i> Ret kursus
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>
This produces a list that looks something like this:
Now this works fine when there are few items however when the list is big enough and there scroll the drag and drop messes up. when i pick up an item on the middle of the page it always scrolls to the bottom and it is hard to get it to the top again!
Has anyone tried this before or know a way to fix it?

Categories

Resources