I am using colorbox.js to display some forms in a lightbox. There are multiple forms on a page and each form has a link that will open the form in the lightbox. Right now, the lightbox will open but the form will not be showing. Here is my jquery script:
jQuery(document).ready(function() {
$('.myForm').hide();
$('.link_to_form').click( function() { $(this).next('.myForm').show() } );
$(".link_to_form").colorbox({
width: "50%",
inline: true,
opacity: ".5",
href: ".myForm",
onClosed: function() {
$(".myForm").hide();
}
});
});
My HTML for two forms and two links is:
Form 1
<div class="myForm">
<form></form>
</div>
Form 2
<div class="myForm">
<form></form>
</div>
Working demo http://jsfiddle.net/2anwK/3/
script
<script type='text/javascript' src="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/colorbox.css">
code
$('.myForm').hide();
$('.link_to_form').click(function() {
$(this).next('.myForm').show()
});
$(".link_to_form").colorbox({
width: "50%",
inline: true,
opacity: ".5",
href: ".myForm",
onClosed: function() {
$(".myForm").hide();
}
});
Working Image
Here is what you have to do:
You can take a look the reference to see how to implement.
HTML
Form 1
<div id="myForm1" class="myForm">
<form>
<p>text1</p>
</form>
</div>
Form 2
<div id="myForm2" class="myForm">
<form>
<p>text2</p>
</form>
</div>
JS
jQuery(".link_to_form").on('click', function() {
var $self = $(this),
$popup = $self.next('.myForm');
$self.colorbox({
width: "50%",
inline: true,
opacity: "0.5",
onOpen: function() {
$popup.show();
},
onClosed: function() {
$popup.hide();
}
});
});
css
.myForm{
display: none;
}
DEMO
Related
I have very simple slider created with Vegas Slideshow. Now I'm trying to add simple Prev/Next buttons. This is the slider
<div class="slide-caption"></div>
<script src="/assets/js/jquery-3.4.0.min.js"></script>
<script src="/assets/js/vegas.min.js"></script>
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
</script>
This works perfectly. It is showing the image and the caption bellow.
Now I've tried to add this for the buttons but nothing is appeared on page. There is no errors in console. I'm not sure also if I need to add the HTML for the buttons or it is pull them from the JS and CSS of the Vegas
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
// buttons
$('a#previous').on('click', function () {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$('a#next').on('click', function () {
$elmt.vegas('options', 'transition', 'slideLeft2').vegas('next');
});
</script>
Anyone know how exactly I can add the buttons?
I haven't tested this, but it may get you heading in the right direction...
HTML...
<div id="previous" class="button"></div>
<div id="next" class="button"></div>
JQUERY...
<script>
$("#previous").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$("#next").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('next');
});
</script>
CSS...
.button {
display: block;
height: 100px;
width: 100px;
background-color: purple;
}
i have jQuery modal dialog boxes, witch is opening automatically and have setTimeout:
function showChat() { $(function(){
$('#chat').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 400,
height: 250,
open: function(event, ui){
setTimeout("$('#chatnsp').dialog('close')",30000);
}
}); }); } showChatp();
<a onclick="showChatnsp(); return false;"><div style="display:none; "> </div></a> <div id="chatnsp" title=" " style="display:none; "> TEXT </div>
How to make the modal window show once a day?
Found this code, but could not connect:
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function() {
if (!$.cookie('hideModal')) {
var delay_popup = 5000;
setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
}
$.cookie('hideModal', true, {
expires: 1,
path: '/'
});
});
</script>
I'm using the tooltipster plugin to show fields's hints and also another tooltip at bottom to show errors from jquery validate plugin, but for some reason all the messages updates are happening on the first error tooltip.
What am I missing?
$(document).ready(function () {
// initialize tooltipster on text input elements
$('input').tooltipster();
var tooltipsterErrorMsg = [];
// initialize validate plugin on the form
$('#myform').validate({
showErrors: function(errorMap, errorList) {
// Clean up any tooltips for valid elements
$.each(this.validElements(), function (index, element) {
if (index < tooltipsterErrorMsg.length) {
tooltipsterErrorMsg[index].hide();
}
});
// Create new tooltips for invalid elements
$.each(errorList, function (index, error) {
if (index === tooltipsterErrorMsg.length) {
var tooltipObject = $(error.element).tooltipster({
trigger: 'custom',
multiple: true,
position: 'bottom'
});
tooltipsterErrorMsg.push(tooltipObject[0]);
}
tooltipsterErrorMsg[index].content(errorList[index].message).show();
});
},
rules: {
field1: {
required: true,
email: true
},
field2: {
required: true,
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
});
#myform {
margin: 100px;
}
input {
margin: 20px;
}
a {
display: block;
position: absolute;
bottom: 0;
}
.error {
color: #900;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="myform">
<input type="text" name="field1" title="Tooltip teste 1" />
<input type="text" name="field2" title="Tooltip teste 2" />
<br/>
<input type="submit" />
</form>
Here's the fiddle: http://jsfiddle.net/macmessa/m368ntxw/
Two issues...
You're using the showErrors function improperly. It was only intended for constructing an error list, not for individual error placement. Employ the errorPlacement and success functions for showing & hiding the individual tooltip bubbles.
errorPlacement: function(error, element) {
var lastError = $(element).data('lastError'),
newError = $(error).text(); // current error message
$(element).data('lastError', newError); // keep track of the error
if (newError !== '' && newError !== lastError) { // new error?
$(element).tooltipster('content', newError); // replace message
$(element).tooltipster('show'); // show bubble
}
},
success: function(label, element) {
$(element).tooltipster('hide'); // hide bubble when error clears
},
You're trying to initialize and re-initialize ToolTipster on the same element for showing two different bubbles on the same element at the same time. Although I'm not clearly seeing the described issue in your demo, I can see how it would lead to problems and confusion.
Here's a workaround.
Surround the input elements with a container element.
<div title="Tooltip teste 1">
<input type="text" name="field1" />
</div>
BTW: you don't need the data-rule-required attribute when you've already declared required within .validate().
Then you can initialize ToolTipster on the input[type="text"] elements for validation error messages...
$('input[type="text"]').tooltipster({
trigger: 'custom', // default is 'hover' which is no good here
onlyOne: false, // allow multiple tips to be open on the page
position: 'right'
});
And then separately initialize another ToolTipster instance on the parent container for the hints...
$('input[type="text"]').parent().tooltipster();
(I'm being more specific with the target here. By targeting only input, you would also match the type="submit" element.)
Proof-of-concept DEMO: http://jsfiddle.net/2xgcyg6w/
Well, I achieved exactly what I needed using the errorPlacement and success as Sparky recommended, I kind of mixed what I did with his example:
$(document).ready(function () {
// initialize tooltipster on text input elements
$('input').tooltipster({position: 'top'});
var tooltipsterErrorMsg = [];
// initialize validate plugin on the form
$('#myform').validate({
errorPlacement: function (error, element) {
if ($(element).index() === tooltipsterErrorMsg.length) {
var tooltipObject = $(element).tooltipster({
trigger: 'custom',
multiple: true,
position: 'bottom'
});
tooltipsterErrorMsg.push(tooltipObject[0]);
}
tooltipsterErrorMsg[$(element).index()].content($(error).text()).show();
},
success: function (label, element) {
tooltipsterErrorMsg[$(element).index()].hide();
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
});
#myform {
margin: 100px;
}
input {
margin: 20px;
}
a {
display: block;
position: absolute;
bottom: 0;
}
.error {
color: #900;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
<form id="myform">
<input type="text" name="field1" title="Tooltip teste 1" data-rule-required="true" data-rule-email="true" />
<input type="text" name="field2" title="Tooltip teste 2" data-rule-required="true" data-rule-minlength="5" />
<br/>
<input type="submit" />
</form>
I have a dialog window. I want to pop-up a confirm dialog, when clicking Cancel. The way I am doing this is to create a div element. In the div element I have some text, I want to display in the confirm dialog. The problem is, that the text that should be displaying in the confirm window, is instead displaying in the modal window. Like in the image below: How can I avoid this issue??
Demo
HTML:
<div>
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
<div id="dialog-confirm" title="Close the dialog">
<p><span class="ui-icon ui-icon-alert"
style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered.
Are you sure?</p>
</div>
</form>
</div>
JQuery:
$(function () {
$('#modalDialog').dialog({
modal: true,
height: 450,
width: 350,
position: 'center',
buttons: {
Save: function() { //submit
$( this ).dialog( "close" );
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
OK: function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
}
});
return false;
By adding the following to your CSS:
#dialog-confirm
{
display:none;
}
jQuery will then automatically show it when clicking Cancel.
I have some divs that appear on click of a link, but i am trying to make it so that when you click on a 2nd link to popup, any open ones will be closed before the new one opens. there should only be one open at a time.
the js...
<script>
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
width: 'toggle'
}, "fast", easing, callback);
};
$(function () {
function select($link) {
$link.addClass('selected');
$($link.attr('href')).slideFadeToggle(function () {});
}
function deselect($link) {
$($link.attr('href')).slideFadeToggle(function () {
$link.removeClass('selected');
});
}
$('.contact').click(function () {
var $link = $(this);
if ($link.hasClass('selected')) {
deselect($link);
} else {
select($link);
}
return false;
});
$('.close').live('click', function () {
deselect();
return false;
});
});
</script>
the divs...
<div id='did_{$page_trackid}' class='arrow_box pop_{$page_trackid}' style=''> <img src='".$info4['Image']."' class='subtext_img'>
<h2 class='subtext'><a href='http://www.xxxxxxx.co.uk/dnb/".$info2['username']."'>".$info2['username']."</a></h2>
<p class='subtext'>".$info3['user_title']."</p>
<p class='subtext'><a href='".$info3['website_link']."' target='_blank'>".$info3['website_link']."</a>
</p>
</div>
<div id='did_2_{$page_trackid}' class='arrow_box2 pop_stats_{$page_trackid}' style=''>
<h2 class='subtext'>Stats</h2><br />
<p class='subtext'>Plays: 1m <br />
Downloads: 527, 046
</p>
</div>
the links...
<div style='position: absolute; z-index: 2; padding-top: 30px; padding-left: 699px;'>
<a href='#did_{$page_trackid}' class='contact' ><img style='height: 20px;' alt='Posted by' src='http://www.xxxxxxxxxx.co.uk/play1/skin/user-profile2.png' style=''></a>
</div>
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='#did_2_{$page_trackid}' class='contact'><img style='height: 20px;' alt='Track stats' src='http://www.xxxxxxxx.co.uk/play1/skin/stats.png' style=''></a>
</div>
I have tried replacing the first function with
function select($link) {
$link.addClass('selected');
$('.arrow_box:visible').slideFadeToggle(function () {});
$($link.attr('href')).slideFadeToggle(function () {});
}
but that bugs out, with one pop over lapping the other. I have 2 classes for the divs(1 for each) so i attempted to add
$('.arrow_box2:visible').slideFadeToggle(function () {});
but that too doesnt work.
Am i going about it the right way to close any open arrow_box or arrow_box2 when clicking a link to open a new pop up??
thanks
I copied your html and js into a jsfiddle and modified the select method. Try it out here:
http://jsfiddle.net/mchail/wHyfK/1/
I believe this now does what you asked for. The key is to toggle any shown panes (to hide them) before toggling the new "selected" pane (to show it).
Hope this helps.