Ace editor прикрепляем к textarea

Ace — Замечательный онлайн редактор кода который используется на GitHub

К сожалению у него очень скудная документация, и работает он при указании id у div тега. Но так как редактор мне этот нужен что бы править html код из админки, то само собой мне нужно что бы все это отправлялось в базу через форму.

Читать далее «Ace editor прикрепляем к textarea»

Не работает tooltip bootstrap 3

В одном проекте нужно было использовать тултипы, но они не работали когда я подключал пример с офф сайта. Как оказалось помимо примера, нужно их еще включить

В итоге все заработает, вот пример страницы которую вы можете создать у себя и проверить

 

Проигрывание звука уведомления с помощью jQuery

Нашел отличный пример для тех кто будет делать чат.

JavaScript

[js]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#chatData").focus();
//Appending HTML5 Audio Tag in HTML Body
$(‘<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>’).appendTo(‘body’);
$("#trig").on("click", function() {
var a = $("#chatData").val().trim();
if (a.length > 0) {
$("#chatData").val(»);
$("#chatData").focus();
$("<li></li>").html(‘<img src="small.jpg"/><span>’ + a + ‘</span>’).appendTo("#chatMessages");
// Scrolling Adjustment
$("#chat").animate({
"scrollTop": $(‘#chat’)[0].scrollHeight
}, "slow");
$(‘#chatAudio’)[0].play();
}
});
});
</script>
[/js]

HTML

[html]
<div id=’chatBox’>
<div id=’chat’>
<ul id=’chatMessages’>
//Old Messages
<li>
<img src="small.jpg"/><span>Hello Friends</span>
</li>
<li>
<img src="small.jpg"/><span>How are you?</span>
</li>
</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" Send " id="trig" />
</div>
[/html]

CSS

[css]
* {
padding: 0px;
margin: 0px;
}
body {
font-family: arial;
font-size: 13px
}
#chatBox {
width: 400px;
border: 1px solid #000;
margin: 5px;
}
#chat {
max-height: 220px;
overflow-y: auto;
max-width: 400px;
}
#chat &gt;
ul &gt;
li {
padding: 3px;
clear: both;
padding: 4px;
margin: 10px 0px 5px 0px;
overflow: auto
}
#chatMessages {
list-style: none
}
#chatMessages &gt;
li &gt;
img {
width: 35px;
float: left
}
#chatMessages &gt;
li &gt;
span {
width: 300px;
float: left;
margin-left: 5px
}
#chatData {
padding: 5px;
margin: 5px;
border-radius: 5px;
border: 1px solid #999;
width: 300px
}
#trig {
padding: 4px;
border: solid 1px #333;
background-color: #133783;
color: #fff;
font-weight: bold
}
[/css]

Скачать исходник

Обновление страницы и аудио сигнал если есть изменения

Скрипт обновляет страницу, а так же подает сигнал если изменилось число.
Решил для себя тут запостить что бы на будущее было.

[js]<script type="text/javascript">
var columnCount = $(‘#fpr_num’).text();

setInterval(function(){
getTable();
}, 1000*60); //1сек*60=60сек.

function checkFprNum(){
if (columnCount != $(‘#fpr_num’).text()) {
columnCount = $(‘#fpr_num’).text();
playSound();
}
}

function getTable(){
$.ajax({
type: ‘POST’,
url: $(this).attr(‘href’),
success: function(data, textStatus, jqXHR) {

if (data == ‘error’) {
alert("Data has error(s)");
} else {
var dataT = $(‘#partner’,$(data));
$(‘#partner’).html(dataT.html());
checkFprNum();
}
},
error: function(textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
}
});
}

function playSound() {
$(‘<audio id="chatAudio"><source src="../../../sound/notify.ogg" type="audio/ogg"><source src="../../../sound/notify.mp3" type="audio/mpeg"><source src="../../../sound/notify.wav" type="audio/wav"></audio>’).appendTo(‘body’);
$(‘#chatAudio’)[0].play();
}
</script>[/js]