Develop Reference

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

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>

jquery slider not working

I am appending images dynamically and then loading the jQuery file for slider, but problem is iamges are appearing but slider not working.
HTML code :-
<div id="banner-fade">
<ul class="bjqs" id="gallerySlider">
</ul>
</div>
<script src="assets/js/slider.js"></script>
<script class="secret-source">
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
animtype : 'slide',
height : 320,
width : 620,
responsive : true,
animspeed:2000
});
});
</script>
<script src="assets/js/upcomingEventLoader.js"></script>
error are coming in slider.js
Uncaught TypeError: Cannot read property 'css' of null
e(window).resize(function() {
m.width=i.outerWidth(), m.ratio=m.width/r.width, m.height=r.height*m.ratio;
o.css( {
height: m.height, width: m.width
}
);
o.children("img").css( {
height: m.height, width: m.width
}
);
s.css( {
height: m.height, width: m.width*r.slidecount
}
);
i.css( {
height: m.height
}
);
h.css( {
height: m.height, width: m.width
}
);
w(function() {
O(!1, v.currentslide)
}
, 200, "some unique string")
}
Error at h.css line

Remove vertical scroll bar from iframe tag that is nested in Javascript

So I have a iframe tags nested in a Javascript, due to what I'm achieving I need to have it this way. Anyway, how do I remove the vertical scrollbars so that they don't show?
My JS code:
$(document).ready(function () {
$('a#addHolidayLink').live('click', function (e) {
e.preventDefault();
var page = $(this).attr("href")
var pagetitle = $(this).attr("title")
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; overflow: hidden; noresize:noresize; scrolling: no; seamless: seamless;" src="' + page + '" width="100%;" height="100%"></iframe>')
.dialog({
title: 'Edit Employee',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:850,
height:595
});
$dialog.dialog('open');
});
});
Any help is appreciated

Try removing the scrolling:no and the seamless: seamless from the style="" and add it to the actual iframe.
For example
<iframe scrolling="no" seamless="seamless" style="border: 0px; overflow: hidden; noresize:noresize;" src="' + page + '" width="100%;" height="100%"></iframe>
Goodluck

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