I'm working with simple modal, and I'm trying to prevent the close on escape. This says it should be simple, but this doesn't work for me, am I putting this in the wrong place?
$(document).ready(function(){
$("#login_modal").modal({
overlayCss: {
backgroundColor: '#000',
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94,
escClose: false,
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});
Yes, escClose is in the wrong place - it's a parameter on the modal itself, not the containerCss array. You also have extra commas at the end of your overlayCss and containerCss property arrays. This sometimes causes issues in browsers. Try this;
$(document).ready(function(){
$("#login_modal").modal({
escClose: false,
overlayCss: {
backgroundColor: '#000'
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});
Related
when I click on a button I use this
$(document).ready(function () {
$('.find').click(function () {
$.blockUI({
message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
css: {},
overlayCSS: {
backgroundColor: '#FFFFFF',
opacity: 0.4,
border: '0px solid #000000'
}
});
});
});
that shows a waiting image message.
Now I want to show another message after some time(for example after 30seconds).
I don't know if I have to use the setTimeOut expression or other?
Any suggestion?
Try this code:
After your first message popup is closed, it will wait for 30 seconds and then trigger another message popup.
$.blockUI({
message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
css: {},
overlayCSS: {
backgroundColor: '#FFFFFF',
opacity: 0.4,
border: '0px solid #000000'
},
onUnblock : function(){
setTimeout(function(){
$.blockUI({
message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
css: {},
overlayCSS: {
backgroundColor: '#FFFFFF',
opacity: 0.4,
border: '0px solid #000000'
}
});
}, 30000);
}
});
Use setTimeout
$(document).ready(function () {
$('.find').click(function () {
$.blockUI({
message: '<table><tr><td><img src="images/please_wait.gif"/></td></tr></table>',
css: {},
overlayCSS: {
backgroundColor: '#FFFFFF',
opacity: 0.4,
border: '0px solid #000000'
}
});
setTimeout(function(){
$.unblockUI();
alert("New Message after 30 seconds");
}, 30000);
});
});
After 30 seconds UI will unblock and a new alert message will display.
Hope this will help you.
I have view with countdown timer
here is code of countdown timer in View
<div class="timer-div-one"; id="countdown" style="height: 20px; width: 20px;">
</div>
Here is js code for timer
$("#countdown").countdown360({
radius: 40.5,
seconds: 30,
strokeWidth: 7,
fillStyle: '#ffffff',
strokeStyle: '#ffcf00',
fontSize: 30,
fontColor: '#000000',
autostart: false,
onComplete: function() { alert(); }
}).start();
I need to start it when i click "Запись" button
Here is button in view.
<button id="record" class="btn btn-default" style="background: #ffcf00; color: black; height: 40px;text-shadow: none">Запись</button>
I try to write code like this. But it not works
$("#record").click(function (){
$("#countdown").countdown360({
radius: 40.5,
seconds: 30,
strokeWidth: 7,
fillStyle: '#ffffff',
strokeStyle: '#ffcf00',
fontSize: 30,
fontColor: '#000000',
autostart: false,
onComplete: function() { alert(); }
}).start();});
Where is my fault?
UPDATE
$(function() {
$("#record").click(function (){
$("#countdown").countdown360({
radius: 40.5,
seconds: 30,
strokeWidth: 7,
fillStyle: '#ffffff',
strokeStyle: '#ffcf00',
fontSize: 30,
fontColor: '#000000',
autostart: false,
onComplete: function() { alert(); }
}).start();});
});
Not works and counter not visible.
If I write code like this I will see counter and it works and show alert.
Here is code.
$("#countdown").countdown360({
radius: 40.5,
seconds: 30,
strokeWidth: 7,
fillStyle: '#ffffff',
strokeStyle: '#ffcf00',
fontSize: 30,
fontColor: '#000000',
autostart: false,
onComplete: function() { alert(); }
}).start();
As Jeremy Thille write about click, Yes I have several clicks on "Запись" and "Остановить" buttons.
Here is code:
record.onclick = function () {
record.disabled = true;
navigator.getUserMedia({
audio: true,
video: true
}, function (stream) {
preview.src = window.URL.createObjectURL(stream);
preview.play();
// var legalBufferValues = [256, 512, 1024, 2048, 4096, 8192, 16384];
// sample-rates in at least the range 22050 to 96000.
recordAudio = RecordRTC(stream, {
//bufferSize: 16384,
//sampleRate: 45000,
onAudioProcessStarted: function () {
if (!isFirefox) {
recordVideo.startRecording();
}
}
});
if (isFirefox) {
recordAudio.startRecording();
}
if (!isFirefox) {
recordVideo = RecordRTC(stream, {
type: 'video'
});
recordAudio.startRecording();
}
stop.disabled = false;
}, function (error) {
alert(JSON.stringify(error, null, '\t'));
});
};
var fileName;
stop.onclick = function () {
record.disabled = false;
stop.disabled = true;
window.onbeforeunload = null; //Solve trouble with deleting video
preview.src = '';
fileName = Math.round(Math.random() * 99999999) + 99999999;
console.log(fileName);
if (!isFirefox) {
recordAudio.stopRecording(function () {
PostBlob(recordAudio.getBlob(), 'audio', fileName + '.wav');
});
} else {
recordAudio.stopRecording(function (url) {
preview.src = url;
PostBlob(recordAudio.getBlob(), 'video', fileName + '.webm');
});
}
if (!isFirefox) {
recordVideo.stopRecording(function () {
PostBlob(recordVideo.getBlob(), 'video', fileName + '.webm');
});
}
deleteFiles.disabled = false;
};
I try to paste counter inside Record click, but it not works
Where is my fault?
UPDATE2
Uncaught TypeError: Cannot set property 'onclick' of null
at Recording:250
Yes it reference to another button, i deleted it.
But I don't see timer anyway.
I solved my problem.
Here is how it need to be done
var countdown = $("#countdown").countdown360({
radius: 40.5,
seconds: 30,
strokeWidth: 7,
fillStyle: '#ffffff',
strokeStyle: '#ffcf00',
fontSize: 30,
fontColor: '#000000',
autostart: false,
onComplete: function () {
console.log('done');
}
});
$('#record').click(function () {
countdown.start();
});
$('#stop').click(function () {
countdown.stop();
});
Look at this piece of code:
<script src="progressbar.js"></script>
<script>
var bar = new ProgressBar.Line(containera, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 40));
}
});
bar.animate(1.0);
</script>
The above code selects element with class "containera" and does something with them. I want change my code so it will select bellow classes too:
containerb,containerc,containerd,containere,containerf
but I don't like to repeat my code for every class. I hope you help me :) Thank you.
Why don't you wrap your configuration in a function and call it for every container you have? Could work along those lines:
var yourContainers = ['containerA','containerB']
function createProgressbars = function(container){
return new ProgressBar.Line(container, {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#FFEA82'},
to: {color: '#ED6A5A'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 40));
}
});
}
yourContainers.forEach(function(container){
createProgressbars(container).animate(1.0);
});
So what I'm trying to achieve is a popup that shows itself to the user once they click on the textbox. I'm using the jquery bubblepopup plug-in but I can't seem to assign it to click function. There are 2 functions, one roll over and one click I've seperated them if anything.
$(document).ready(function () {
$('#info-header').CreateBubblePopup({
innerHtml: $('#info-pop').html(),
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'right',
align: 'middle',
tail: 'right',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left'
}
});
$('#Password').click(function(){
var popup_button = $(this);
popup_button.CreatebubblePopup({
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'top',
align: 'top',
tail: 'bottom',
width: '250px',
innerHtml: '<p>Password Requirements</p><ul><li>Must be at least 6 characters</li> <li>Must include at least 3 of the 4 following items:<ul><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left',
'margin-top': '0'
}
});
popup_button.FreezeBubblePopup();
$('#Password').click(function(){
$(popup_button).HideBubblePopup();
});
});
});
So i found out the solution, I had a small letter for the id. and I switched from button onclick to focus, and used blur to cancel or take out the effect.
$(document).ready(function () {
$('#Password').focus(function () {
var popup_button = $(this);
popup_button.CreateBubblePopup({
themeName: 'all-grey',
themePath: '../content/themes/jquerybubblepopup-theme',
position: 'top',
align: 'top',
tail: 'bottom',
width: '250px',
mosueOver: 'hide',
innerHtml: '<p style="font-weight:bold;font-size:13px;">Password Requirements</p><ul style="margin-left:-25px;"><li>Must be at least 6 characters</li> <li>Must have 3 of the following:<ul style="margin-left:-25px;"><li>uppercase letters</li><li>lowercase letters</li><li>numbers</li><li>special characters</li></ul></li></ul>',
innerHtmlStyle: {
color: '#FFFFFF',
'text-align': 'left',
'margin-top': '-10px',
'font-size' : '12px',
'padding' : '0 10px'
}
});
popup_button.ShowBubblePopup();
popup_button.FreezeBubblePopup();
$('#Password').blur(function () {
popup_button.UnfreezeBubblePopup();
popup_button.RemoveBubblePopup();
});
});
});
I'm trying to animate background-color,color and border color to change with jquery but for some reason border color is not changing any idea why? here is the portion of jquery code :
$('#tabbed a').hover(function() {
$(this).animate({
backgroundColor: "#FBFBFB",
color:"#FD7A24",
borderColor:"#000"
}, "fast")
}, function() {
$(this).animate({
backgroundColor: "#FFF",
color:"#65B1D3",
borderColor:"#eee"
}, "fast")
});
Thank you
The jQuery Color Plugin doesn't support just borderColor. You need to supply all four sides:
$('#tabbed a').hover(function() {
$(this).animate({
backgroundColor: "#FBFBFB",
color:"#FD7A24",
borderLeftColor: "#000",
borderTopColor: "#000",
borderRightColor: "#000",
borderBottomColor:"#000"
}, "fast")
}, function() {
$(this).animate({
backgroundColor: "#FFF",
color:"#65B1D3",
borderLeftColor: "#eee",
borderTopColor: "#eee",
borderRightColor: "#eee",
borderBottomColor:"#eee"
}, "fast")
});
You can see from line 10 of the source which properties it can animate:
...['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor']...