Bootstrap on and off toggle switch - javascript

stream = $('#dash-stream');
streamCheck();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
if ($(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true","true");
} else if (!$(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
}
I have a button which will load a div containing an events stream, I want it to load div-content (the stream) on page load but be able to turn it on and off which will hide or show the content respectively. This currently loads content but does not have the hide and show functionality that I need. (Hide function isn't working.) What am I missing?
dash-stream is the button.
stream = $('#dash-stream');
streamCheck();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
$(".stream-section-hold").show();
$('#dash-stream').click(function() {
if (!$(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true", "true");
} else if ($(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
});
}
This works but only on every second click.

Fixed it.
loadStreamJson("true","true");
streamCheck();
$(stream).hasClass('active-dash');
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
if (!$(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true","true");
} else if ($(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
}

Related

Clear local storage for div on radio selection

I'm trying to get local storage to clear for all fields in one specific div when the user selects the No radio button:
Slightly incomplete jsfiddle but should do the trick
I'm obviously not doing something right here (.hide-show-yes is where I want all fields inside that div to clear):
$(document).ready(function(){
$('input[name="for_person"]').on('click', function () {
if ($('#personNo').prop('checked')) {
// ??
$('.hide-show-yes').localStorage.removeItem('fname');
} else {
// do nothing
}
});
});
localStorage is not a jQuery method . Also
$(document).ready([function() {
if (localStorage["dontclear"]) {
$('#dontclear').val(localStorage["dontclear"]);
}
if (localStorage["fname"]) {
$('#fname').val(localStorage["fname"]);
}
if (localStorage["lname"]) {
$('#lname').val(localStorage["lname"]);
}
console.log(localStorage)
}, function() {
$('.stored').change(function() {
localStorage[$(this).attr('name')] = $(this).val();
console.log(localStorage)
});
$('input[name="for_person"]').on('click', function() {
if ($('#personNo').prop('checked')) {
// ??
localStorage.removeItem('fname');
} else {
// do nothing
}
});
}]);
plnkr http://plnkr.co/edit/LPw3zbpgrhJkSh1hdKXG?p=info

Qooxdoo sound button on/off doesnt work

I catch button in the code: this.buttons.Sound.addListener("pressed", this.__sound, this);
And write function, but then I push button sound off/on they didn't work.
__sound: function(){
if (this.buttons.Sound.isEnabled()){
createjs.Sound.volume = 1;
} else {
createjs.Sound.volume = 0;
}
},
After this all work
__sound: function(){
if (this.buttons.Sound.isEnabled()){
createjs.Sound.setVolume(1);
} else {
createjs.Sound.setVolume(0);
}
},

not .isAfter jQuery Ajax

I am trying to show separate messages if a div exists after a certain div or does not exist based the end of an ajax function
Here is the code I came up with:
.ajaxComplete(function() {
// Pilots page code.
if ($('body').hasClass('page-pilots')) {
$.fn.isAfter = function(sel) {
return this.prevAll(sel).length !== 0;
}
$('#quicktabs-tabpage-107_display-0 .view-content').each(function() {
if ($(this).isAfter("#quicktabs-tabpage-107_display-0 .view-filters")) {
console.log(".view-content is after, hide message");
$('.pilots-result-message').hide();
}
if (!$(this).isAfter("#quicktabs-tabpage-107_display-0 .view-filters")) {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
});
}
});
The isafter is working, but I can't figure out how to implement a function which is the opposite (would be nice if there was a isNotAfter jQuery function).
I have also tried instead of the second if statement:
else {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
There is no method called isAfter(), you can check whether the next element of #quicktabs-tabpage-107_display-0 .view-filters is the current(this) element like
if ($('body').hasClass('page-pilots')) {
$.fn.isAfter = function (sel) {
return this.prevAll(sel).length !== 0;
}
$('#quicktabs-tabpage-107_display-0 .view-content').each(function () {
if ($("#quicktabs-tabpage-107_display-0 .view-filters").next().is(this)) {
console.log(".view-content is after, hide message");
$('.pilots-result-message').hide();
} else {
console.log(".view-content is not after, show message");
$('.pilots-result-message').show();
}
});
}

Controlling Play/Pause of HTML5 audio player when an Iframe's body(Content editable) is selected

I've a Iframe that have Content editable Body, I want to Control the Audio Player While Typing the Text in the Content editable Body my Code is
$(document).ready(function() {
$('#tinymice_textarea_ifr').contents().find('#tinymce').keyup(function(event) {
var audioplayer=document.getElementById('player')
if(event.keyCode==17)
{
$(this).removeClass('hoosp');
}
});
$('#tinymice_textarea_ifr').contents().find('#tinymce').keydown(function(event){
var audioplayer=document.getElementById('player')
if(event.keyCode==77)
{
if ($(this).hasClass("hoosp"))
{
if (audioplayer.paused) {
audioplayer.play();
}
else {
audioplayer.pause();
}
$(this).removeclass('hoosp');
}
}
if(event.keyCode==17)
{
$(this).addClass('hoosp');
}
});
});
What's wrong with the above code, I tried it in a simple textarea and it worked well, But in the case of Iframe it doesn't. Please help ..

javascript - ignore timeout on click

I have a slideshow which works fine, leaving a 3 second gap between images.
I also have a set of dynamically generated links which when clicked on, the next image is corresponds to that link.
What I want to do is skip the 3 second time out when one of these links is clicked - then restart the timeout after the image is changed.
Code below:
$(document).ready(function() {
var images=new Array();
var totalimages=6;
var totallinks=totalimages;
var nextimage=2;
while (totallinks>0) {
$(".quicklinks").prepend("<a href='#' class='"+(parseInt(totallinks))+"' onclick='return false'>"+(parseInt(totallinks))+"</a> ");
totallinks--;
}
function runSlides() {
if(runSlides.opt) {
setTimeout(doSlideshow,3000);
}
}
function doSlideshow()
{
if($('.myImage').length!=0)
$('.myImage').fadeOut(500,function(){slideshowFadeIn();$(this).remove();});
else
slideshowFadeIn();
}
function slideshowFadeIn()
{
if(nextimage>=images.length)
nextimage=1;
$('.container').prepend($('<img class="myImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() {
runSlides();
nextimage++;
}));
}
if(runSlides.opt) {} else {
images=[];
totalimages=6;
while (totalimages>0) {
images[totalimages]='/images/properties/images/BK-0'+parseInt(totalimages)+'.jpg';
totalimages--;
}
runSlides.opt = true;
runSlides();
}
$(".quicklinks a").live('click', function() {
nextimage=$(this).attr("class");
});
});
You can stop a timeout using this code:
var t = setTimeout(myFunction,3000);
clearTimeout(t);
Using this, you can abort your timeout when the user clicks the button and call the function directly. Then you can restart the timeout.
Hope this helps.

Categories