Develop Reference

Froala editor not working with fancybox plugin

all the things working correctly but when I add froala in fancybox popup then space, arrowkeys not working also when I click f key then act as full screen
please give me solution:
<textarea class="form-control froala-editor" id="comment"></textarea>
js:
$(function(){
$('.froala-editor').froalaEditor();//{'placeholder': 'Enter some text...'})
setTimeout(function(){
$('.froala-editor').froalaEditor('events.focus', true);
console.clear()
console.log('fired focus trigger!')
}, 2000)
$('.froala-editor').on('froalaEditor.focus', function (e, editor) {
console.log('received focus trigger')
});
});

you can try to use in IFRAME like below
or try use another one lik tinyMCE or CKEditor...
Modal recreates textbox so you need to rebind editor may be your current issue.
i wish tihs answer helps
<script type="text/javascript">
jQuery(function($) {
$('.open-fancy-box').on('click', function(e) {
e.preventDefault();
$.fancybox.open({
type: 'iframe',
src: 'youreditor.html'
});
});
});
</script>

The question is completely wrong - fancybox works fine with anything. In your case, you simply have to tell fancybox not to listen to keyboard events, and most likely you will want to disable touch events, too:
keyboard: false,
touch : false

how to change an anchor tag using jquery by selecting its class

I know this may seem really simple but am having trouble this end figuring out a way of selecting the class and changing ONLY that href.. here is the html ...
LEARN MORE
so far with javascript ...
$('.theclassname').click(function(){
(change the href to www.awesome.com)
});
So far really appreciate alll answers on this ... I need the href to change but not go to the url that it has changed to until the user clicks once more... so far the actual code is this ...
$('.hrefclass').click(function () {
e.preventDefault();
$(this).attr("href", "http://www.google.org/");
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
});
however this does not appear to work .
LATEST
Ok so adding return false indeed works but also stops the kiwcks function from running ... how can i get around this ?
$('.hrefclassname').one("click", function() {
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
$(this).attr("href", "http://www.gooogle.org/");
return false;
});
LATEST LATEST
$('.HREFCLASSNAME').one("click", function() {
e.preventDefault();
$(this).attr("href", "http://www.GOOGLE.org/");
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
});

Use
$(this).attr('href','www.awesome.com')

You can use the attr() method of jQuery to alter the links. href is the attribute here and the link is its value.
$('.theclassname').on('click', function() {
$(this).attr('href', 'http://google.com');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
LEARN MORE

In your function, the variable "this" contains the DOM element that you clicked on. Wrap it using jQuery using "$(this)", then call jQuery's attr function to set the href attribute to whatever url you'd like.
Here is a working jsFiddle: https://jsfiddle.net/57foqwaq/2/
Here's the example code:
$('.theclassname').one("click", function(e) {
e.preventDefault();
$(this).attr("href", "https://www.example.com/");
});

The following code (as others have mentioned) should work:
// notice "e" being passed to the function:
$('.HREFCLASSNAME').one("click", function(e) {
e.preventDefault();
// assuming "this" is an "<a>" tag:
$(this).attr("href", "http://www.GOOGLE.org/");
$('.kwicks').kwicks({
maxSize: '100%',
behavior: 'menu'
});
});
This should stop the "event propagation," or in other words the link should not fire.
If this the link is still firing, you may have an issue similar to this example where the event is "bubbling up" and causing the link to fire anyway. If this is the case (which, would indicate you haven't provided a valid html example for your specific problem,) you can stop the event from propagating by replacing e.preventDefault() with this:
e.stopImmediatePropagation();

If you want an invocation to a link of theclassname when it is clicked, and then to show the text and URL of the link you can try this other option:
HTML
<a rel='1' class="theclassname" href="option1.html">Option 1</a>
<a rel='2' class="theclassname" href="option2.html">Option 2</a>
jQuery
$('.theclassname').one('click', function() {
var link = $(this);
alert (link.html());
alert (link.attr('href'));
alert (link.attr('rel'));
return false;
});
The return false prevents the link from being followed.

You just need to try:
$(this).attr("href", new_href);
And I think it might work for you.

multiple dialog box within same page

Requirement is to show dialog box on click of a button.I have created dialog box using jQuery UI. Please find the code here http://jsfiddle.net/M4QM6/32/.
ISsue is i have single function for creating dialog box, how can i show multiple dialog box within same page with each dialog box displaying different data,
When i click on dialog2 button, i need to show a dialog box which has textArea and a submit button.Please suggest.
Below is the sample code:
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
});

You could go a couple routes. Since your need for dialog content is pretty specific (textarea control - first dialog pops second dialog - etc), I would hard-code the needed divs on the page. So, make a "#textAreaDialog" div and put the needed controls in it ad set its style to display:none.
Next, modify your function to accept parameters (the name of the div that should be popped, the funciton to execute if "OK" is clicked - and the function to execute if "Cancel" is clicked), so you're not limited to using #dialog for all of your modals and you can finely control what happens when each button is clicked (not always just closing the dialog. Then, set event handlers for the click events of the buttons you need, and call your dialog accordingly.
html:
<input type="button" id="btnPopFirstModal" Value="Open First Modal"/>
<div id="divFirstModal" style="display:none;">
Here is the content for the first modal
</div>
<div id="divSecondModal" style="display:none;">
Here is the content for the second modal
</div>
Javascript functions:
function PopDialog(divToPop, OkFunction, CancelFunction)
{
$("#" + divToPop).dialog({
autoOpen: false,
resizable: true,
width:"750",
height:300,
modal: true,
buttons: {
"Ok": function() {
OkFunction();
$(this).dialog("close");
},
"Cancel": function(){
CancelFunction();
$(this).dialog("close");
}
}
});
});
}
function PopSecondModal(){
PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here});
}
Javascript event handlers:
$("#btnPopFirstModal").click(function(e){
e.preventDefault();
PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed
return false;
});
Remember, you can expand this as much as you want, adding more event handlers and custom divs to use for more tailored modals. Also, as you can see, you can write your OK and Cancel funcitons inline when calling the PopDialog function - or you can pass it a function name (this is preferable if you're going to reuse that function).

Here is how I did:
$(
//when JQuery is ready
funciton()
{
$('#SomeButton').on
(
'click',
function()
{
//Note that content could be anything (HTML, text...)
//This dynamicly create a div to be your dialog
$('<div>').append(content).dialog
(
{
//autoOpen: false, I removed it you can put it back in if you need it but I dont think its important for now
resizable: true,
//I remove the double quotes here because height didn't have any but maybe it was the other way around
width:750,
height:300,
//I put this on false because if two or more dialog would need to be displayed at the same time you can't have them modals.
modal: false,
buttons:
{
Close: function()
{
$(this).dialog("close");
}
},
//this is important it destroys and remove the dynamically create dialog when you close them so you don't get 20 dialog not displayed in your html markup.
close:
function()
{
$(this).dialog('destroy').remove();
}
}
);
}
);
}
);

Is there a way to close a Twitter Bootstrap popover on click outside the popover? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?
I would like the Twitter Bootstrap popover to close only when the user clicks outside of the popover. I don't want clicks inside the popover closing the popover. I've searched and the answers for this are for even clicking the inside of the popover closes the popover. Please no gem suggestions too if possible because I am looking for a code solution.
Thank you!
html:
<a id="test-button" href="#" class="btn">Popover</a>
javascript/jquery:
$('#test-button').popover({content:"stuff", trigger:'click'});

I found this question, which APPEARS to be a duplicate, however the top answers did not work for me. I ended up modifying the code by adding a new click bind to .popover whenever one is toggled, which resulted in the desired effect.
Working jsFiddle: http://jsfiddle.net/asanger/AFffL/266/
var isVisible = false;
var clickedAway = false;
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('show');
clickedAway = false
isVisible = true
e.preventDefault()
$('.popover').bind('click',function() {
clickedAway = false
//alert('popover has been clicked!');
});
});
$(document).click(function(e) {
if(isVisible && clickedAway)
{
$('.popup-marker').popover('hide')
isVisible = clickedAway = false
}
else
{
clickedAway = true
}
});
​

Use the manual trigger:
$('.popup-marker').popover({
html: true,
trigger: 'manual'
});

You could attach to a top level element's click event. I.e.
$("#main").click(function () {
$('#mything').popover('hide')
});

How to make jquery-ui-dialog not have a close button?

I didn't find this in the documentation.
Should I just make the close button display:none with css, or is there a clean way in the API to make a dialog without the X button (top-right)?

This may solve your Problem:
$("#dialogId").dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).hide(); }
});

There is no option to disable the 'X' button. You would need to add css to display none/hide() the element with the class 'ui-icon-closethick' when it is loaded and opened.

For some reason .hide() did not work for me. This did:
$('#divMsg').dialog({ title: 'Please wait...',
modal: true,
closeOnEscape: false,
open: function (event, ui) { $(".ui-dialog-titlebar-close", ui.dialog).css('display', 'none'); } }).text('Text To Display').css('background', 'white');
This code snippet also shows how to set the title and text of the dialog box -- I am using it as a modal notification window and closing it when my AJAX call completes.