So I'm learning jQuery Mobile and I'm trying to run the following code below in my Android emulator. What I was trying to do is to use $.mobile.changePage() method to navigate to my Contacts page (contact.html). Obviously I'm doing something wrong, because I'm not even seeing the alert() call I placed into my JS.
I'm using jquery.mobile-1.0.min.css, jquery-1.6.4.min.js, and jquery.mobile-1.0.min.js in my html file.
I have an html5 button tag with an id of "html5Btn" in my code. I have wrapped that button in a "div" with a data-role='content' attribute.
Can someone explain...
What I'm doing wrong in my code?
How do I debug JS in Eclipse? I'm not seeing any errors in my LogCat? Is this where I even look for jQuery errors?
//CHANGE PAGE USING changePage()...placed this code
$("#html5Btn").bind('click', function(event) {
alert("in JS");
$.mobile.changePage('contact.html');
}, false);
try
//CHANGE PAGE USING changePage()...placed this code
$("#html5Btn").live('click', function(event) {
alert("in JS");
$.mobile.changePage('contact.html');
}, false);
For debugging, firebug is your friend! Also, I'm using intellij 11 ultimate... I must say the javascript debugger is nice!
Related
In one of my react components, I have this
<a href={'/application/' + username +'/' +appid}>My Application</a>
When I click on that link, I get the javascript error Accounts.ui.config: Can't set 'passwordSignupFields' more than once.
However, when I go to the directly to the url http://192.168.0.110:3000/application/john/X93ajdsfj by pasting the url into the browser address bar, then the page loads without errors. I only get an error when I load the page by click on the anchor tag.
I suspect that when I click on the link, I'm probably not doing a full HTTP page reload, and only parts are reloaded, and this javascript found in my myproject.jsx gets fired again:
// This code is executed on the client only
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
I am completely new to meteor. What is the best way to avoid this problem?
I moved the code out of the React component and into the main .jsx file of the meteor project and wrapped it with a Meteor.isClient if statement like so:
if(Meteor.isClient)
{
// This code is executed on the client only
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
}
I am new to createJS toolkit (Flash CS6), My concept is I have a multiple buttons on the stage, each button click will have different animations in different frames.
my code is
'/* js
this.stop();
this.btnname.onPress = function()
{ this.parent.gotoAndPlay("cone"); }
*/'
it is perfectly working in all browsers and android mobile, but in iPhone it is not working,
I am trying to click on the button but canvas is highlighting in iphone,
when I change my code to the following code,
'/* js
this.stop();
this.onPress = function()
{ this.gotoAndPlay("cone"); }
*/'
It is working in iPhone, but I have multiple button clicks, here is my major problem.
Please help me find a solution to this issue.
Use addEventListener and listen for the "click" or "mousedown" event instead of assigning an onPress function. Like this:
/* js
this.stop();
this.btnname.addEventListener("click", function(){
this.parent.gotoAndPlay("cone");
});
*/
You need to create a shape, cache it and use it as the hitArea of your button. john has answered your question here: http://community.createjs.com/discussions/easeljs/5663-touch-on-ios-only-seems-to-work-with-bitmaps
I am creating a CKEditor plugin, using version 4.2.1. I am trying to follow the tutorial on a Simple Plugin. However, the text inputs in my dialog window are not editable / clickable in the dialog, even when I just copy in the entire abbr plugin from the tutorial with no changes.
I can still click the dialog tabs, OK / Cancel buttons, and drag the dialog around. I have added in other elements (like selects) to the dialog in my custom version, and I can interact with those.
When I check the text input elements in Chrome's Dev Tools, I can add text via the Console / jQuery and it appears. I get no failures in the Console.
$('#cke_229_textInput').val('help');
Will add text to the text input and display it on the screen. But I can't interact with the element via mouse / keyboard / browser. Is there something obvious in the CKEditor configuration that I am missing? Sorry if this is a really stupid question--first time working with CKEditor. I have also searched the CKEditor forums and Google, without finding any related issues.
This happens in both Chrome 30 and FF 24.
My call to create the editor:
var me = document.getElementById('resource_editor_raw');
editor = CKEDITOR.replace(me, {
fullPage: true,
removePlugins: 'newpage,forms,templates',
extraPlugins: 'abbr',
allowedContent: true
});
Thanks for any tips or hints!
Update #1
Thinking this might be related, I have also tried setting the z-index of the text element to very high, using Chrome's Dev Tools. No luck, it is still not editable / highlightable...
Update #2
This seems to be this conflict with jQuery UI. The suggested fix doesn't work for me yet, but will poke around...leaving this up for anyone who might stumble across it.
Final Update
So Brian's tip helped me. Both the Bootbox modal backdrop (what I am using to generate the original dialog) and the CKEditor dialog backdrop have tabindex=-1, so they conflict somehow. Manually turning off the Bootbox backdrop (i.e. setting tabindex='') works with Chrome dev tools, so I think I can hack something together with jQuery or whatnot. Amazing stuff...thanks for the help!! Not sure why I got this working in a jsFiddle...if I recall correctly, I might not have had a backdrop on those dialogs.
Also, for reference, a tabindex of -1 makes things untabbable, which makes sense for a backdrop.
The modal html attribute tabindex='-1' is what seems to be causing the issues for me.
The tabindex='-1' is actually in the bootstrap documentation and is needed for some reason that I am unaware of.
Use the 100% working script..
<script type="text/javascript">
// Include this file AFTER both jQuery and bootstrap are loaded.
$.fn.modal.Constructor.prototype.enforceFocus = function() {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_textarea')
&& !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
modal_this.$element.focus()
}
})
};
</script>
Note: Include this file after both jQuery and bootstrap are loaded.
OMG I have been googling this for hours and finally fond some code that works!!
Stick this in your dialog page that will have a ckeditor in it:
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
I found the fix here:
https://forum.jquery.com/topic/can-t-edit-fields-of-ckeditor-in-jquery-ui-modal-dialog
Not sure if anyone else is having this issue now. I was ripping my hair out trying to create a hack. It was a pretty simple solution after a while of digging and search the web. This fix helped me. Just place it on the same page where you want to place your editor - when loading from jQuery. The issue is conflicting tabindex, so I simply removed that attribute from the modal.
<script>
$(function(){
// APPLY THE EDITOR TO THE TEXTAREA
$(".wysiwyg").ckeditor();
// FIXING THE MODAL/CKEDITOR ISSUE
$(".modal").removeAttr("tabindex");
});
</script>
I am using Semantic UI and fix this problem by create an instance of CKEDITOR after create Modal.
$('#modal-send').modal('attach events', '.btn-close-modal').modal('show');
var ckeOptions = {
entities: false,
htmlEncodeOutput: false,
htmlDecodeOutput: true
}
CKEDITOR.replace('message', ckeOptions);
CKEDITOR.config.extraPlugins = 'justify';
I also faced this issue when I updated the CKEditor into 4.14
I found the fix in here - http://jsfiddle.net/kamelkev/HU8Qt/3/
In this case,
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function (event) {
return !!$(event.target).closest(".cke").length || this._super(event);
}
});
It will return false, so the textbox gets disabled/ unfocused (losing focus)
As a solution, we need to return true or need to modify the class .cke in the return statement into .cke_dialog
return !!$(event.target).closest(".cke").length || this._super(event);
I tried to upload images to server from CK Editor[without CKFinder] and on positive side i am able to do. whenever we are trying to create some dialog, they are creating one div on the fly which will hold your dialog box. Better you check the CSS property for your text box using chrome and change it. Hope this will help you.
I am using the following jquery toogle function to show / hide a detailed list
$('dt').toggle(
function() {
$(this).next('dd').slideUp();
$(this).addClass('selectedArrow');
},
function() {
$(this).next('dd').slideDown();
$(this).removeClass('selectedArrow');
}
);
This adds the selectedArrow class on all browsers except IE7 and IE8, the reason for this class is that has a background image that changes depending on what state the toogle is in,
Any ideas how I can get it to add the class on IE7 / 8 or know of an alternative method of getting the same result.
Thanks for your help, managed to get it working in the end, turned out to be a background alignment issue of the arrows in my css
Your code works here in IE6 and IE9 and in IE9's compatibility mode that simulates IE7 and IE8 in this jsFiddle so I'm thinking that the issue has to do with something you're not disclosing to us about your actual page, either your HTML or something else about your code.
Here's what I used in my demo to show that it works:
HTML:
Click on Coffee or Milk<br><br>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
And, I used your exact code:
$('dt').toggle(
function() {
$(this).next('dd').slideUp();
$(this).addClass('selectedArrow');
},
function() {
$(this).next('dd').slideDown();
$(this).removeClass('selectedArrow');
}
);
Did you try another solution? Something like:
$('#dt').click(function(){
$(this).next('dd').slideToggle().toggleClass('selectedArrow');
});
I am building a web page and I have included Facebook's Like button. Works great in all browsers but not in Firefox. When clicked in Firefox, it creates an endless loop of opening and closing a facebook login window. This is a known issue that Facebook isn't looking like it will correct anytime soon.
Can anyone tell me what code I might write to hide the like button (or a div containing the like button) from Firefox only? I've never written code to detect a browser and then have my site function a certain way. Not a javascript guru here. Thanks!
You can do this using the navigator javascript object, but it sounds like you have deeper problems if the facebook like button is causing an endless loop of window loads. You most probably have other errors in your code. The button should work fine in firefox.
Here's how to text for firefox using the navigator object,
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
// user using firefox
}
This code parses the userAgent string, the string that defines the user's browser, of the navigator object. It looks for a string of the format Firefox/x.x or Firefox x.x.
This should work for you
<div id="likeDiv">
my div
</div>
<script>
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
// Remove the element from the dom
var Node1 = document.getElementById('likeDiv');
Node1.removeChild(Node1.childNodes[0]);
}
</script>
Hope this helps