Develop Reference

How to toggle tabs to show or hide on button click in code mirror

I'm making a python editor for a site and I'm using Code Mirror javascript library for this purpose. I'm having a button named toggle invisibles. If user presses the button, the spaces and the end of the line markers will be displayed. I wanted to display tabs also. Since code mirror shows only spaces and end of the line, I have added a manual way also to show tabs.
In code mirror, the tabs have html <span class="cm-tab" cm-text=" "></span>. I have set a background image to the .cm-tab class in css so that tabs will be visible with those image.
Since, I want to toggle the visibility of the span element, initially, I have set it to visibility: hidden. And in javascript, when user click of toggle invisibles button, i will set the visibility to visible.
Here is the code:
CSS:
.cm-tab{
background: url("url");
visibility: hidden;
}
Javascript:
var showi = true;
$(".textarea-editor").each(function(index){
var editor = CodeMirror.fromTextArea($(this)[0],{
mode: {name: "python", version: 3, singleLineStringErrors: true, globalVars: true},
lineNumbers: true,
lineWrapping: true,
indentUnit: 4,
showInvisibles: false,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
autoCloseBrackets: true,
maxInvisibles: 16,
matchBrackets: true,
indentWithTabs: true,
});
$("#toggleInvisible").click(function(){
editor.setOption('showInvisibles', showi);
var tab-visibility = showi?"visible:"hidden";
var style = $('<style>.cm-tab {visibility:'+tab-visibility+'}
</style>');
$(".cm-tab".append(style);
showi=showi?false:true;
});
editor.on('change', function(e){ var txt = editor.getValue();});
});
The problem is that, when i click the button, the tabs are showing with the background image. but when i click enter to go to next line, the tabs are getting invisible. I have append the style attribute to the newly created tabs also in the click function based on this post
Add CSS rule via jQuery for future created elements

I have created two style tags and provided the .cm-tab class. Here is my code:
<style>.cm-tab{background:url();}</style>
<style id="tab-style">.cm-tab{visibility: hidden;}</style>
and then change the html of #tab-style in javascript.
$("#tab-style").html(".cm-tab{visibility:visible}");

Multiple instances of jQuery plugin (Magnific popup)

I've hit a bit of a wall with this one. My jQuery knowledge outside of just implementation is pretty poor.
I'm building the Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/) jQuery plugin into my WordPress theme as a popup gallery. I've got it all wired up and working. It grabs images dynamically from the backend using custom fields. I can also get multiple instances working on the same page. HOWEVER, when scrolling through images in one popup gallery, it wont end at the end of the first gallery but rather, it will move on into the images in the second gallery. See example: http://www.oftenvisual.com/reset/galleries/.
Unfortunately I can't post the code here as it's too long, but hopefully the demo page helps. Because the galleries are generated dynamically and the client using the backend wont have the knowledge to add container with different classes, I need some way to also dynamically separate out the galleries. Any idea GREATLY appreciated!
Script calling the plugin
// Magnific
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
});

try to set different id_s on your .popup-gallery div's and then do
$('#popup-gallery1').magnificPopup....
$('#popup-gallery2').magnificPopup....

You may use jQuery contains selector to point "a" tag with specific class name - a[class*='popup-gallery-']. If you have different IDs for you pop-ups it just work as a charm. It just search for all "a" where class contains "popup-gallery-".
And if it matches, it fires up the Magnific Pop Up etc.
jQuery:
$(document).ready(function(){
$("a[class*='popup-gallery-']").magnificPopup({
//your settings goes here
});
});
HTML:
# first div
<a class="popup-gallery-1" href="#popup-1">First popup</a>
<div id="popup-1"> Your content here </div>
# second div
<a class="popup-gallery-2" href="#popup-2">Second popup</a>
<div id="popup-2"> Your content here </div>

You can simply use jquery's each with the same class, for example:
$('.popup-gallery').each(function() {
$(this).magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image', // override with class 'mfp-iframe' on delegate or any other supported type
gallery: {enabled:true },
});
});
And now if you have multiple .popup-gallery divs, they all work separately.

Fancybox close button not showing when using different template

I have a page where I need to use 2 different FancyBox styles for different elements on the page. To achieve that, I added tpl option and modified stylesheet accordingly. Here is what I have:
$(document).ready(function() {
$(".login").fancybox({
closeClick : false,
closeBtn : true,
tpl: {
wrap : '<div class="fancybox-wrap1" tabIndex="-1"><div class="fancybox-skin1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
}
});
});
In my CSS, I added new styles for .fancybox-wrap1 and .fancybox-skin1. Styles work great BUT on the FancyBox with modified template "close" button completly disappears! I tried both adding and deleting closeBtn from tpl but it doesn't seem to make any difference.
I also have a demo here (eventually I will need different background-images for FancyBox, not just background-color, that's why I'm doing it).
What am I doing wrong? Any help will be greatly appreciated!

Your .fancybox-skin1 div still needs to have the fancybox-skin class applied to it. If you look at the Fancybox code version 2.1.2 (sometimes that's the only way to figure things out when they aren't well documented) you'll see that it finds the skin by searching for that class (line 884):
$.extend(coming, {
skin : $('.fancybox-skin', coming.wrap),
outer : $('.fancybox-outer', coming.wrap),
inner : $('.fancybox-inner', coming.wrap)
});
then it uses that reference to append the closeBtn (line 1440):
// Create a close button
if (current.closeBtn) {
$(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', F.close);
}

Creating optional multiple buttons for jQuery UI Dialog

So I know to create multiple buttons with jQuery UI you simply do:
buttons : [{
text : settings.buttonText,
click : function () { settings.buttonFunction(); }
},
{
text : button2Text,
click : function () { settings.button2Function(); }
}
}]
I have a plugin I've created to handle & make dialogboxes similar site-wide, and recently need to add the option of passing in multiple buttons, not just 1.
Now typically this whole section doesn't even get run unless a button is even wanted. I have a quick if (settings.buttonText) { } wrapped around it. But the problem is even though I don't pass in button2Text etc, the button is still appearing. Besides doing some newbish thing like .hide()...
My question is: How can i have that second { text ... click ... } area be dynamic and only appear in the object if settings.button2Text is passed into the plugin? Is this even possible?
I feel like the solution is so simple I'm just braindead right now :) Thanks for any input

You could just do the logic before you actually set that up. Something like this:
var myButtons = [{
text : settings.buttonText,
click : function () { settings.buttonFunction(); }
}];
if (addSecondButton) {
myButtons.push({
text : button2Text,
click : function () { settings.button2Function(); }
});
}
Then you can launch the dialog like this:
$(foo).dialog({buttons: myButtons})

Show and hide dynamic jQuery UI Dialogs

I know this should be simple, but it doesn't appear to be working the way I hoped it would.
I'm trying to dynamically generate jQuery UI dialogs for element "help."
I want to toggle the visibility of the dialog on close (x button in dialog), and clicking of the help icon. This way, a user should be able to bring up the dialog and get rid of it, as needed, multiple times during a page view.
// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
$(Element).dialog({
autoOpen: false,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
$("a.help").live("click", function (event) {
var helpDiv = "div#" + $(this).closest("span.help").attr("id");
var dialogState = $(helpDiv).dialog("isOpen");
// If open, close. If closed, open.
dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});
Edit: Updated code to current version. Still having an issue with value of dialogState and dialog('open')/dialog('close').
I can get a true/false value from $(Element).dialog("isOpen") within the each. When I try to find the element later (using a slightly different selector), I appear to be unable to successfully call $(helpDiv).dialog("isOpen"). This returns [] instead of true/false. Any thoughts as to what I'm doing wrong? I've been at this for about a day and a half at this point...

Maybe replace the line declaring dialogState with var dialogState = ! $(helpDiv).dialog( "isOpen" );.
Explanation: $(helpDiv).dialog( "option", "hide" ) does not test if the dialog is open. It gets the type of effect that will be used when the dialog is closed. To test if the dialog is open, you should use $(helpDiv).dialog( "isOpen" ). For more details, see http://jqueryui.com/demos/dialog/#options and http://jqueryui.com/demos/dialog/#methods.

I was able to get it working using the following code:
$("div.tooltip").each(function (index, Element) {
var helpDivId = '#d' + $(Element).attr('id').substr(1);
var helpDiv = $(helpDivId).first();
$(Element).dialog({
autoOpen: true,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
var helpDiv = $(helpDivId).first();
var dialogState = helpDiv.dialog('isOpen');
dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});
I changed the selectors so that they're identical, instead of just selecting the same element. I also broke out the Id, div and state into separate variables.