In the webapp I inherited, there is some jquery code that captures a barcode scan (simple 1-D barcode like fitness clubs and grocery stores use -- no QR codes, nothing exotic, etc). But the way this is implemented requires a modal box to come up with a spinner on it, then you scan, and it works. Our customers don't like this. They want to be able to scan the barcode from any web page in the app, and not have to go to a certain page and have a modal window come up, blocking everything else, before scanning.
I have looked at this with interest: https://github.com/julien-maurel/jQuery-Scanner-Detection (I just can't get it to work.) I have tried this in a web page:
<script type="text/javascript" src="Scripts/barcode/jquery.scannerdetection.js"></script>
<script>
$(window).bind('scannerDetectionComplete', function (e, data) {
alert(e);
alert(data);
})
</script>
I have also tried $(document).bind(...) in place of
The actual source docs merely say to do $(selector).scannerDetection(); They give no examples of actual usage.
I really don't care whether I use this jquery plugin, some other jquery plugin, custom jquery, or some raw javascript code snippet -- I just need something that will detect a barcode scan from any web page without resorting to a modal listener. If someone knows how to get "jQuery-Scanner-Detection" plugin (mentioned above) to work, I'd love to try that as well. Thank you.
Document ready ;)
jQuery(document).ready(function($) {
$(window).scannerDetection();
$(window).bind('scannerDetectionComplete',function(e,data){
alert('complete '+data.string);
})
.bind('scannerDetectionError',function(e,data){
console.log('detection error '+data.string);
})
.bind('scannerDetectionReceive',function(e,data){
console.log(data);
})
$(window).scannerDetection('success');
});
This is how I use it and it works fine :
$(selector).scannerDetection(function(data) {
onComplete:
//whatever you want
});
I don't think it's necessary to bind it to your window or document you can straight work it with your selector.
Related
Google Trends allows to embed widgets of search trends data on any HTML page. The widget "Related queries" presents data of Top and Rising search queries. By default when the embedded widget loads it shows the Top queries.
I would like to show by default the Rising queries view instead of Top queries view. It can be switched manually from the widget menu. I am looking for a way to automate the process by showing only rising queries view in 1 or more widgets on a HTML page.
Example Related queries widget for "Stack Overflow" keyword: https://jsfiddle.net/Lox8heyt/
Image: https://i.stack.imgur.com/Wnqxa.png
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("RELATED_QUERIES", {"comparisonItem":[{"keyword":"Stack Overflow","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=Stack%20Overflow&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
Google Trends API: I did not find the option to change the view in the widget code.
Is it possible to click automatically on the widget button via JS to change the view from Top to Rising? For example using the XPath or JS path?
Ng-Click:
ng-click="ctrl.setViewField('risingBullets')
ng-click="ctrl.setViewField('bullets')"
XPath:
//*[#id="menu_container_0"]/md-menu-content/md-menu-item[1]/button
JS Path:
document.querySelector("#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button")
Selector:
#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button
This isn't an answer per se but I hope it helps a little
looking at the google trends widget its clearly written in angular,
ordinarily, you could call an angular method from jquery like so:
angular.element($(".md-menu-item-text")).triggerHandler('click');
//angular.element('#someElemnt').scope().AngularFunction();
there are lots of examples on SO of how to do this:
Call Angular Function with Jquery
How to call angular scope function from javascript?
To name but a few....HOWEVER, from my tests this only seems to work after you click on the google trends widget, I think that's because the widget creates an iframe that seems to require user interaction before the parent page can see angular and because it is a dynamically rendered iframe you can't seam to force its activation or hook into it in any meaningful way. You could try using the npm version that has the call-back function
googleTrends.interestOverTime({keyword: ['Women\'s march', 'Trump Inauguration']})
.then(function(results){
console.log('These results are awesome', results);
//call some function here
})
.catch(function(err){
console.error('Oh no there was an error', err);
});
In the "then" method, you should have access to angular to find the element to call its event because at this point you know angular is loaded and accessible, but that's just a theory I haven't tested,
I notticed when using the jquery document on load function, angular was undefined (again because it's in an iframe it seems) but as soon as you interact with the widget in any way, then it seems you are able to access the elements within and can call angular and can call the click event of the button in question using the example code above
You could look at actually using angular to implement the google trends, that seems to be what google use in their example page: https://trends.google.com/trends/explore
which it seems has set the rising as the default option on some of their examples, meaning it must be possible
I hope this helps
I'm creating a Wordpress plugin, which adds a metabox right under the post editor containing a button. The plugin also loads a Javascript file right below the closing </body> tag.
PURPOSE
At the moment, what I am trying to achieve with the plugin is simple. When a user enters content to the editor and then clicks the button inside the metabox, I want to modify the editor's content.
JS CODE
In its simplest form:
jQuery(document).ready(function($) {
$('#button').on('click', function(e) {
e.preventDefault();
var editor = tinyMCE.get("content");
editor.setContent(some_content);
});
});
PROBLEM
The problem is that editor variable returns undefined.
FIREBUG (when trying to set var editor)
wpActiveEditor : "content"
editors : [ ]
activeEditor : null
WHAT HAVE I TRIED
I have tried many, many things (also many small tweaks) found on Tinymce's documentation and here on Stackoverflow but the problem still remains the same.
Any help would be very appreciated.
PS. The content textarea is visible when running my tests.
When the Editor first loads with the "Text" mode active, tinymce does not get initialized, therefore you cannot use tinyMCE.get(), as opposed to the "Visual" mode.
(I hadn't noticed that it actually works on the "Visual" mode, as I was keep testing it on the "Text" mode)
So, a conditional statement is necessary to determine first which tab is active. I solved my problem with this method:
function setEditorContent(val) {
var $_editorTextArea = $('#content');
$_editorTextArea.is(':visible') ? $_editorTextArea.val(val) : tinyMCE.get('content').setContent(val);
}
Hope this answer will prevent some headaches :)
Well, a live example would help a lot.
This way i can only guess: It looks a bit as if you cannot get the editor you want.
There are two possible reasons that come into my mind:
The editor id you are using is not the id of your editor
To verify this you check the id of your editors soure html element (in most cases a textarea).If there is no id set tinymce will use "content" as default.
There iy no editor initialized at all
To verify this you can use console.log(tinymce.editors) in your javascript console. If no editor is initialized then you will get an empty array.
Many years later but maybe this will help someone...
In addition to everything said above some consideration needs to be paid to the JS event model. Consider:
TinyMCE may not initialize (and the tinymce global may not be available) until the document is done loading. The OP correctly wrapped calls in jQuery(fn), which will solve this. This is relevant if you're using an added framework that initializes and tries to manipulate the editors (like AngularJS directives).
Parts of initialization seem to be asynchronous so even if you wrap everything in jQuery(fn) the editors may not be available until later. WP loads Underscore as part of Backbone so wrapping initial attempts to locate editors in _.defer(fn) seems to get me lots of mileage. This could be done with the native JS setTimeout as well.
Beyond the fantastic answer by #m.spyratos, it may be helpful to note that you can hook mode change events (Visual/Text) by adding a jQuery click event handler to button.switch-tmce[data-wp-editor="my_editor_id"] and button.switch-html[data-wp-editor="my_editor_id"] for when the user selects Visual or Text, respectively. Your version may vary but I found that the textarea goes away when switching to Visual mode and the tinymce.editor instance goes away when switching to Text mode. Hooking to these events gives a persistent means to re-hook when the user decides to change modes.
As a quick reference, you can attach to the editor object (activeEditor or something in editors[], which is keyed by editor ID) to receive any and all changes in visual editor content with by hooking to the editor with editor.on('NodeChange keyup', fn) and a single event callback. I included blur in my solution as well, for posterity. The text editor content can be hooked with jQuery('textarea#my_editor_id').on('keyup', fn).
I have successfully managed multiple editors on a page that are entirely two-way bound entirely through JS; the editors are created with wp_editor and no initial content then loaded asynchronously (via AJAX in my case) and managed through multiple edit cycles without a server round-trip. This is possible, if not slightly convoluted.
I have a HTML page which is divided into two frames. Separate web sites are being opened by users in those frames as I provided an open web site option.
These web sites can be in any language. So. i need to translate the languages of these websites to English.
I am using JQuery translate function for this which is not working. As I am new to JQuery, I may be using incorrect syntax / way.
I have tried this code in Firefox, which is not working.
I have tried in Chrome, but I am not able to know that it is working or not because of the default language translate option of the Google Chrome.
I have also searched StackOverFlow Questions, but I didn't find anything.
$(function(){ //on document ready
$('body').translate('en');
})
Here is a link to the plugin: http://code.google.com/p/jquery-translate/wiki/TranslateMethod
First of all, the jQuery library and the script should be called from one of the frames, not the container page, otherwise it won't work.
The jQuery function jQuery() (or $()) looks by default in the current document. In order to apply that function to a frame you should specify the context as a second argument of the function. In this case it would be like:
$(function() {
$('body', window.parent.frames[0].document).translate('en');
});
You can obviously change the index of the array frames (frames[0], frames[1], ecc..) to match the frame that you want to translate.
edit: you can also set a name to the frame (putting the attribute name in the tag <frame> and then call it using window.frame_name.document.
I have been searching for this solution for some time have not found any good solid solutions. Everything I have seen is either 2 years old and does not work.
What I would like to do is use a MC in my flash file to act like a button and when clicked open the sharethis pop up to share this particular video's url. The site API docs really don't touch on Flash working with sharethis.
Any help would do.
Thanks,
Matt
Share This works in HTML,frames and uses javascript.
You would need an external interface to use it. I am not sure we are on the same page when you say live in the swf. You may have to bind it to some object or the sorts to achieve it.
Did you check Barklund.org for their working on ShareThis and ExternalInterface ?
They have broken down the procedure as follows
First, simply go to sharethis.com
publisher section and customize your
widget. Instead of placing the widget
code snippet where you want the
button, put it in the head section
of your website.
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=636e055b-a4a2-4f9c-872c-b7aa9a701bb0&type=website&send_services=email&post_services=facebook%2Clinkedin%2Cmyspace%2Cdigg%2Cdelicious%2Ctwitter%2Creddit%2Ctechnorati%2Cwordpress%2Cblogger%2Cgoogle_bmarks%2Cwindows_live"></script>
Then create a little javascript
function like:
function share(url, title) {
var s = SHARETHIS.addEntry({
url: url,
title: title
}, {button:false,popup:true});
s.popup()
return false;
}
Finally, simple call this function
from Flash using
ExternalInterface:
var url:String = "http://www.barklund.org/blog/2009/05/06/using-sharethis-with-flash/";
var title:String = "Barklund.org - Using ShareThis with Flash";
import flash.external.ExternalInterface;
ExternalInterface.call("share", url, title);
There are also some comments from the author saying there were problems due to the change in the API but the example worked well for me. If it does not you can check out there Using AddThis with Flash implementation
Okay i know that it's important for your website to work fine with javascript disabled.
In my opinion one way to start thinking about how to design such websites is to detect javascript at the homepage and if it's not enabled redirect to another version of website that does not javascript code and works with pure html (like gmail)
Another method that i have in mind is that for example think of a X (close button) on a dialog box on a webpage. What if pressing the X without any javascript interference lead to sending a request to the server and in the server side we hide that dialog next time we are rendering the page, And also we bind a javascript function to onclick of the link and in case of the javascript enabled it will hide the dialog instantly.
What do you think of this? How would you design a website to support both?
One way to deal with this is to :
First, create the site, without any javascript
Then, when every works, add javascript enhancements where suitable
This way, if JS is disabled, the "first" version of the site still works.
You can do exactly the same with CSS, naturally -- there is even one "CSS Naked Day" each day, showing what websites look like without CSS ^^
One example ?
You have a standard HTML form, that POSTs data to your server when submitted, and the re-creation of the page by the server displays a message like "thanks for subscriving"
You then add some JS + Ajax stuff : instead of reloading the whole page while submitting the form, you do an Ajax request, that only send the data ; and, in return, it displays "thanks for subscribing" without reloading the page
In this case, if javascript is disabled, the first "standard" way of doing things still works.
This is (part of) what is called Progressive enhancement
The usual method is what's called progressive enhancement.
Basically you take a simple HTML website, with regular forms.
The next enhancement is CSS - you make it look good.
Then you can enhance it further with Javascript - you can add or remove elements, add effects and so on.
The basic HTML is always there for old browsers (or those with script blockers, for example).
For example a form to post a comment might look like this:
<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>
Then you can enhance it with javascript to make it AJAXy
$('#myForm').submit(...);
Ideally the AJAX callback should use the same code as post-comment.php - either by calling the same file or via include, then you don't have to duplicate code.
In terms, it is not important to make your site work with JavaScript disabled. People who disable JavaScript are people who want to hack bugs into your site, they don't deserve to navigate it correctly. Don't waste your efforts with them. Everybody know the Web is unsurfable without JavaScript.
The only thing you have to be careful is about your forms: Don't ever trust filters in JavaScript, Always filter it again on server-side, ALWAYS!
Use Progressive Enhancement, study jquery to understand it. It takes some time till you get your head around it. For example your idea:
to detect javascript at the homepage
and if it's not enabled redirect to
another version of website that does
not javascript code and works with
pure html
how would you detect if javascript is disabled? not with javascript, obivously...
you're thinking the wrong way round: the most basic version has to be the default version, and then, if you detect more advanced capabilities, you can use them.
Try to avoid separate versions for different bowsers/capabilities for as long as you can. It's so much work to keep all versions in sync and up-do-date.
Some good ressources to get you started:
Understanding Progressive Enhancement
Progressive Enhancement with JavaScript
Test-Driven Progressive Enhancement
The best way is to design a page that works adequately without JS. Then add a <script> block at the bottom of the <body> section with code like this:
window.onload = function() {
// Do DOM manipulations to add JS functionality here. For instance...
document.getElementById('someInputField').onchange = function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
}
}
Study the jQuery examples. They show lots of things like this. This is called "unobtrusive JavaScript". Google for that to find more examples.
EDIT: The jQuery version of the above is:
$(document).ready(function() {
// Do DOM manipulations to add JS functionality here. For instance...
$('#someInputField').change(function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
});
});
I added this just to show the lower verbosity of jQuery vs. standard DOM manipulation. There is a minor difference between window.onload and document.ready, discussed in the jQuery docs and tutorials.
What you're aiming for is progressive enhancement. I'd go about this by first designing the site without the JavaScript and, once it works, start adding your JavaScript events via a library such as jQuery so that the behaviour of the site is completely separate from the presentation. This way you can provide a higher level of functionality and polish for those who have JavaScript enabled in their browsers and those who don't.