How to make the jQuery modal dialog boxes show once a day? - javascript

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>

Related

How i can close/hide a modal popup if i click outside the modal popup

I have the following jQuery code to show a modal popup:-
$(document).ready(function () {
$(function () {
$.ajaxSetup({ cache: false });
$(document).on('click', 'button[data-modal]', function (e) {
$('#myModalContent').css({ "margin": "5px", "max-height": screen.height * .82, "max-width": screen.height * .82, "overflow-y": "auto" }).load($(this).attr("data-url"), function () {
$('#myModal').modal({
height: 1000,
width: 2200,
resizable: true,
keyboard: true,
backdrop: 'static',
draggable: true
}, 'show');
});
return false;
});
});
});
and the following HTML:-
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
currently when i click outside the modal popup the modal popup will not be hide/close.. so can i force this behavior to my jQuery modal popup ?
You need to remove backdrop: 'static',

Fancybox 3 add caption

I am creating a website using twitter bootstrap 3.3.6. I was using fancybox 2.1.5 earlier and thought of switching to fancybox 3 as it has the mobile swipe and the thumbnail looks are much better than the previous 1. As JFK had mentioned in early of the post regarding the caption, is perfectly working in 2.1.5 but after changing it to 3, it doesn't even work.
<div>
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" data-title-id="option1-title">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" alt="15" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a>Option 1</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><span class="cat-name"></span></li>
</ul>
</div>
<div>
<div class="post-thumb">
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://fancyapps.com/fancybox/demo/2_b.jpg" data-title-id="option2-title">
<div class="hover-state">
<p class="cont"><i class="fa fa-search"></i></p>
</div>
<img src="http://fancyapps.com/fancybox/demo/2_b.jpg" alt="15" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
</div>
<h4><a>Option 2</a></h4>
<ul>
<li><i class="fa fa-angle-right"></i><span class="cat-name"></span></li>
</ul>
</div>
<div id="#open1-title" class="hidden">
<p>
This is open 1 image
</p>
</div>
<div id="#open2-title" class="hidden">
<p>
This is open 2 image
</p>
</div>
JS
$(".fancybox-thumb").fancybox({
mouseWheel: true,
scrolling: 'no',
autoCenter: true,
maxWidth: "100%",
maxHeight: "100%",
fitToView: false,
width: '80%',
height: '80%',
autoSize: false,
closeClick: false,
openEffect: 'elastic',
closeEffect: 'elastic',
next: {
39: 'left'
},
prev: {
37: 'right'
},
close: [27],
helpers: {
overlay: {
locked: true,
},
thumbs: {
width: 50,
height: 50
},
title: {
type: 'inside'
}
},
beforeShow: function() {
var el, id = $(this.element).data('title-id');
if (id) {
el = $('#' + id);
if (el.length) {
this.title = el.html();
}
}
},
afterLoad: function() {
var caption = $('#fbCaption');
if (this.title) {
this.title += caption;
console.log(this.title);
}
},
});
What is the solution for it? Also, how to control the height for iframe for vimeo links to properly fit in mobile devices. Thank you in advance for the solution and apologies for my bad english.
Solved:
changed from:
beforeShow: function() {
var el, id = $(this.element).data('title-id');
if (id) {
el = $('#' + id);
if (el.length) {
this.title = el.html();
}
}
},
to
afterLoad: function() {
var el, id = $(this.element).data('title-id');
if (id) {
el = $('#' + id);
if (el.length) {
this.title = el.html();
}
}
},

How to style button using Jquery

I want to style my 'cancel' and 'save' button using Jquery, how can I do that? Here is my code sample (for cropping image):
$("#img-container").dialog({
modal: true,
autoOpen: false,
width: 1220,
height: 730,
title: "CROP IMAGE",
closeOnEscape: false,
dialogClass: "no-close success-dialog",
open: function (event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
},
buttons: {
Cancel: function () { /* style this 'cancel button'*/
$(this).dialog("close");
},
Save: function () { /* style this 'save' button*/
document.getElementById("item-img").src = currentImage;
cropImage(self.imageFiles[0].name, x, y, width, height);
$(this).dialog("close");
}
}
});
Any suggestion?
Here is my working example in FIDDLE
HTML
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This is an example to change button style</p>
</div>
JS
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons:{
"Save":{
text:'Save',
},
"Cancel":{
text:'Cancel',
}
}
});
$('.ui-dialog-buttonpane :button').each(function(){
if($(this).text() === 'Save') {
$(this).css('background', 'green');
}
else if($(this).text() === 'Cancel') {
$(this).css('background', 'red');
}
});
If you are okay with also adding jQuery-UI, it can be very simple:
$('#buttonID').button();
Example:
jsFiddle Demo:
HTML:
<div id="btn">
<div id="middle">
<img src="http://placekitten.com/100/180" />
</div>
<input id="btnOk" type="button" value="OK" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
<input id="mybutt" type="button" value="Open Dialog" />
javascript/jQuery:
$('#btnOk').button();
$('#btnCancel').button();
$('#btn').dialog({
autoOpen: false
});
$('#mybutt').click(function(){
$('#btn').dialog('open');
});
$('#btnOk').click(function(){
alert('you said OK');
$('#btn').dialog('close');
});
$('#btnCancel').click(function(){
alert('you said Cancel');
$('#btn').dialog('close');
});
If you can assign an ID, it would just be:
$('#cancelButton').css('background-color','red');
$('#saveButton').css('background-color','green');

SlidesJS hide works one time only

i made 5 slideshows and i made a hide show jquery for them, my problem is after i show the hidden slideshows they dont respond anymore its just a static image of the last pic of the slideshow.
<div class="container">
<div id="slides">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides0">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides1">
<img src="img/room.jpg" />
<img src="img/bathroom.jpg" />
<img src="img/diningroom.jpg" />
<img src="img/balcony.jpg" />
</div>
<div id="slides2">
<img src="img/room1.jpg" />
<img src="img/bathroom1.jpg" />
<img src="img/diningroom1.jpg" />
<img src="img/balcony1.jpg" />
</div>
<div id="slides3">
<img src="img/room.jpg" />
<img src="img/bathroom.jpg" />
<img src="img/diningroom.jpg" />
<img src="img/balcony.jpg" />
</div>
</div>
then my hide show jquery is
// JavaScript Document
$(function() {
$("#slides").show();
$("#slides0,#slides1,#slides2,#slides3").hide();
$("#intro").click(function(){
$("#slides0,#slides1,#slides2,#slides3").hide();
});
$("#intro").click(function(){
$("#slides").show();
});
$("#single").click(function(){
$("#slides,#slides1,#slides2,#slides3").hide();
});
$("#single").click(function(){
$("#slides0").show();
});
$("#double").click(function(){
$("#slides,#slides0,#slides2,#slides3").hide();
});
$("#double").click(function(){
$("#slides1").show();
});
$("#family").click(function(){
$("#slides,#slides0,#slides1,#slides3").hide();
});
$("#family").click(function(){
$("#slides2").show();
});
$("#deluxe").click(function(){
$("#slides,#slides0,#slides1,#slides2").hide();
});
$("#deluxe").click(function(){
$("#slides3").show();
});
});
and the sliders jquery that SlideJs made that i added for multiple slideshows
// JavaScript Document
$(function() {
$('#slides').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides0').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides1').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides2').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
$('#slides3').slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
This is the webpage:Slider
you are hiding/showing slideshows after Slide.Js has been call, of cause they don't work. try to wrap your last block of codes in a function, and call it every time you execute your second block of codes
first you shouldn't have repeated these functions, do something like this
function active_slidesjs(slidesID){//slidesID is your elements
slidesID.slidesjs({
width: 940,
height: 300,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
}
then when you click your elements, call the function like this
$("#single").click(function(){
$("#slides,#slides1,#slides2,#slides3").hide();
active_slidesjs($(this));
});
The syntax might be wrong, but the idea is there

Using jquery to show next div element

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

Categories

Resources