i'm using slick slider for a large formular. Each section is one slide.
<form>
<div class="form-slider">
<div>
<h2>Section 1</h2>
<input type="text" name="eins"><br>
<input type="text" name="zwei">
</div>
<div>
<h2>Section 2</h2>
<input type="radio" name="drei">Drei A <input type="radio" name="drei">Drei B<br>
<input type="text" name="vier">
</div>
</div>
JS:
$('.form-slider').slick({
dots: true,
draggable: false,
swipe: false,
nextArrow: $('.btn_next'),
prevArrow: $('.btn_prev'),
adaptiveHeight:true,
accessibility: false
});
My Problem is now, that if the user use tab to switch from one to another input field, the slider doesn't slide well, it only slides half of the next div. I tried to turn off the tab-function (by adding tabindex="-1" on each input) but this doesn't work on safari high sierra! and it's not really userfriendly.
Example: https://www.accuro-funds.li/test/
Thanks for help.
Related
I Am trying to open datepicker from textbox. Datepicker open but not showing properly. ( Check Ref Image ).
Can anyone help me ....
Script:-
<script>
$('#milksaledate').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
</script>
Modal Text Box
<div class="col-md-3">
<div class="form-group">
<label>Date of Sale <span class="validate">*</span> :</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" name="milksaledate" id="milksaledate">
</div>
</div>
</div>
Script
<script src="plugins/datatables/jquery-3.5.1.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
[![enter image description here][1]][1]<script src="plugins/jquery-ui/jquery-ui.js"></script>
There could be multiple reasons for this:
Is it maybe possible you have multiple inputs where the id is milksaledate? I think in general it's better to use something like $('.datepicker').datepicker(..) and add class='datepicker' to each input which uses the datepicker.
When are you calling $('#milksaledate').datepicker(..)? Is it on page load, or after the modal has opened? Because if you call this code before a modal has initialized, the datepicker will not affect the modal.
Another reason could be due to z-index or other style issues concerned specifically to jquery-ui
In my listview template I want to use some databound elements. For example I have next template:
<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
<span style="width:100px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneNumber"><input type="text" data-bind="value: number" /></span>
<span style="width:45px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneExt"><input type="text" data-bind="value: ext" /></span>
<span data-role="tooltip" data-position="top" data-bind="val: tooltips.removePhone"><a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a></span>
</div>
</script>
for listview
<div data-role="listview" id="phones"
data-template="phoneView"
data-bind="source: phones"></div>
when I bound data to form this listview shows rows with empty textboxes without data for each row in phones source and no tooltips.
But if I start editing some row by (for example) next code:
var listView = $("#phones").data("kendoListView");
listView.edit(listView.element.children().first());
Then edited row works perfectly.
So my question is - Is this possible to use MVVM data binding inside "view" list view templates in this case?
There is no binding called "val" hence the problem. There should even be an exception thrown. The following should work though:
<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
<span data-role="tooltip" data-filter="input"><input type="text" data-bind="value: number, attr: {title:tooltips.phone}" /></span>
<span data-role="tooltip" data-filter="input">
<input type="text" data-bind="value: ext,attr:{title:tooltips.ext}" />
</span>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a>
</div>
</script>
Here is a live demo: http://trykendoui.telerik.com/#korchev/IGIJ
and how can I trasmit data between popup and page that have called popup?
I would like to do a ajax form for user registration inside popup "reveal" in zurb foundation.
Do you think is possible?
This answer might be a little late, but you can absolutely put a form into the reveal popup. For instance, if you wanted a login dialog to show up when they click a login button:
At the bottom of your HTML (after all the rows), create the content for the popup:
<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
<h2>Login</h2>
<form id="login-form" class="six">
<div class="row">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="row">
<div class="right" style="margin-top: 20px;">
<button type="reset" class="button radius alert">Reset</button>
<button type="submit" class="button radius">Login</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Then you can display it using one of their methods. The new foundation 3.0 let you display it super easy like:
<a href="#"
data-reveal-id="login-modal"
data-animation="fadeAndPop"
data-animationspeed="300"
data-closeonbackgroundclick="true"
data-dismissmodalclass="close-reveal-modal">Login</a>
Hope that helps!
try this in app.js.
Then use reveal class on any anchor
$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">×</a>').reveal();
$.get($this.attr('href'), function(data) {
return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal();
});
});
I am using MVC3 and displaying my data in a webgrid. I would like to display loading indicator (loading image) displayed when I filter/search. What is the best approach?
My search filter (code):
#using (Html.BeginForm())
{
<fieldset id="fieldset1" class="coolfieldset">
<legend>Search for Towers Watson Subscribers/Contacts</legend>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Reg Date:</div>
<div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="#regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="#regDateEnd" name="regDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Profile Mod Date:</div>
<div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="#profileModDateFrom" name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="#profileModDateEnd" name="profileModDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Last Name:</div>
<div class="div-table-col"><input type="text" id="lastName" name="lastName" value="#lastName" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
<div class="div-table-col"></div>
</div>
</div>
</fieldset>
}
{#Html.Partial("List_Ajax", Model)}
http://www.ajaxload.info/ lets you create a nice loading gif. Create an image, and place it in a div as below. Then bind the search button with jQuery to display the hidden div when clicked.
Place the following div where you would like the loading icon to appear.
<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>
Then this in your Javascript file
$(document).ready(){
$('#search').click(function(){
$('#loadingDiv').show();
});
});
Then when you're done loading, simply:
function SomeCallBackEvent(){
$('#loadingDiv').hide();
};
I have two sets of radios:
<div class="form-row">
<div class="field-label">
<label for="part"><span class="style37">Participated</span></label><p class="aste">*</p>
<input type="radio" name="particip" id="particip-yes" value="on" checked> Yes
<input type="radio" name="particip" id="particip-no" value="off">No
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="trav"><span class="style37">Traveled?:</span></label>
<input type="radio" name="traveled" id="traveled-yes" value="on" checked>Yes
<input type="radio" name="traveled" id="traveled-no" value="off">No
</div>
</div>
When I click on particip-no, I need to select traveled-no and disable both travel-yes and travel no. I tried:
Event.observe('particip-no', 'click', function() {
$$('travel-no').checked=true
$$('travel-no').disabled=true
$$('travel-si').disabled=true
alert('no travel');});
The alert shows up, but there are no changes in the radios. Any hints ? Thanks.
If you're selecting by id you just want $ not $$
$('travel-no').checked=true;
$('travel-no').disabled=true;
$('travel-si').disabled=true;
...assuming the id's are correct. You're missing the semicolons too btw