We are working on a website like www.justdial.com .
We want to provide AutoComplete feature.
This autocomplete feature should be inline with the performance of justdial's.
We are using Indexes, please suggest more ways to provide superfast autocompletion.
I do not have much experience in the subject, but I have just implemented JQuery autocomplete with a medium sized list ~(1,000) entries, partial matches is enabled and it is still astoundingly fast. The only trick I've used is creating seperate js files for the lists and calling them first from the html. I also refrain from using the jquery on ready, so the complete list is bieng uploaded immediately. The actual calls to autocomplete are done on page ready. JQuery AutoComplete
Unfortunately I can't add the actual code because the data is sensitive, but its on the lines of..
<html>
<body>
Some HTML
<script type = "text/javascript" src = "collection.js"></script>
<script type = "text/javascript" src = "jquery.min.js"></script>
<script type = "text/javascript" src = "autocomplete.js"></script>
</body>
</html>
Collection .js would look something like
var collection = ["1","2","3", ... "1000"];
and AutoComplete.js would look like
$(document).ready(function(){
$("#form").autocomplete(collection, { matchContains:true });
});
I don't know what built in optimization Jquery has,but it seems pretty fast to me.
I believe even the Google "Suggest" feature used javascript, so it would just be a matter of keeping the lists sorted and dividing them efficiently? Maybe Huffman Coding could help?
Related
I am new to caman js. I want to edit image residing at my local machine using caman js. I searched for it but could not find appropriate code. I also went through tutorial of caman js.
link: http://camanjs.com/guides/
Can anyone please help me?
Thank you.
The link you provided gives the information you are looking for. If I understand your question correctly, these are the basic steps you need to take.
Make sure the Camanjs plugin is included in your project.
Have an img or canvas element on your working DOM
After the DOM is ready Initialize Camanjs by passing to it either a selector or DOM element. Here is the relevant code to the link you provided:
Caman("#image-id", function () {
// Setup whatever options or image processing you want here
// Make sure to render after
this.brightness(5).render();
});
Your question asks about a file on your local machine. From my understanding, your image has to be present in the DOM to work on it with Camanjs. Therefore, your image should be located somewhere your html/javascript can find. (i.e. 'img/myLocalPicture.jpg' relative to your .html file)
For me, looking at the source code of Camanjs was very helpful as well as looking at the API docs: http://camanjs.com/api/
If you want a more specific answer please rephrase your question to be more specific.
You can load a file using the HTML5 File API.
If you are using JQuery, the following will allow you to browse for a local file, and then apply an effect to it. (You don't need jquery, this is just a feature of HTML5)
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/caman.full.min.js"></script>
</head>
<body>
<img id="myimage" alt="Image go here" />
<form>
<input type="file" id="fileinput" />
</form>
</body>
<script>
$("#fileinput").change(function(evt) {
var image = evt.target.files[0];
$("#myimage").attr("src", URL.createObjectURL(image));
processImage();
});
function processImage() {
Caman("#myimage", function() {
// Perform your effects here
});
}
</script>
</html>
I have a responsive site that uses the google translate widget. The weird thing is that for some time the widget now appears twice, and this seem to be related to the responsive design because if I place the same widget code on a simple html page it only appears once. I have no idea on how to solve this. Has anyone come across this?
Update.
I have discovered that this is caused by jquery.themepunch.showbizpro.min.js, if I remove that one the widget only appears once. I have not found a way to fix this yet but there might be a way. I found this piece of code.
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'sv' },
'google_translate_element'
);
/*
To remove the "powered by google",
uncomment one of the following code blocks.
NB: This breaks Google's Attribution Requirements:
https://developers.google.com/translate/v2/attribution#attribution-and-logos
*/
// Native (but only works in browsers that support query selector)
if(typeof(document.querySelector) == 'function') {
document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
}
//If you have jQuery - works cross-browser - uncomment this
jQuery('.goog-logo-link').css('display', 'none');
jQuery('.goog-te-gadget').css('font-size', '0');
}
</script>
This code remove the logo, so I'm thinking that if I use javascript I could check and remove duplicate occurrences of <select class="goog-te-combo"> then I would only have one left, is that possible?
This happened to me using Bootstrap. I had two instances of the Google Translate code - one instance for larger screen sizes and another that was only visible for smaller screens. Both showed up regardless of screen size. Bootstrap classes like visible-xs and hidden-xs do not seem to affect the display of the Google Translate button.
You can set a global counter and make sure it's only called once.
<div id="google_translate_element"></div>
<script type="text/javascript">
var duplicate_google_translate_counter = 0;//this stops google adding button multiple times
function googleTranslateElementInit() {
if (duplicate_google_translate_counter == 0) {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
duplicate_google_translate_counter++;
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Had the same problem on RoR. Problem caused by cashing pages with turbolinks. I solved it with deprecating cashing all links in (when script loading it adds attr "data-turbolinks="false" to the body-tag)
Hello to all! I had the same issue and I KNOW is not the best practice but I fixed it with CSS just adding overflow: hidden and a right border on it.
It visually fix the problem until we get a solution and really saved time diving into JS files. Hope it works for you too. Cheers!
What is the recommended way to quickly inspect the values on my html section of my jsfiddle examples?
Is there a more efficient practice than using the {{}} or filtering to json?
<div ng-app="myApp" ng-controller="MainCtrl">
<div
ng-init="index=0; classes=['red', 'yellow', 'green']"
ng-click="index = index + 1"
ng-class="classes[index % classes.length]">Click to change traffic color</div>
Index = {{index}};
Length = {{classes.length}}
Style= {{classes[index % classes.length]}}
</div>
I just want something simple to look at tiny examples like this one:
Another example
EDIT: This is a more advanced technique on how to build an implementation of AngularJS from the ground up. I cant think of a better way to really learn and understand Angular if you have the patience,time and know how.
There's an official Chrome extension for inspecting AngularJS apps. It lets you view $scope variables, dependency graphs, performance, and more.
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en
In your opinion, is it best to go overboard with BackboneJS and use templates as much as possible or adding elements like an Alphabet Filter should simply be done with JavaScript.
Clarification: Alphabet Filter to filter results [a], [b], [c] etc to get results starting with a, b, c etc
Plain JavaScript would be my answer on 1999.
On 2013, is there a functionality that do you like to implement on JavaScript without MVC(in this case Backbone.js)?
Alphabet filters with plain JavaSript equals to reinvent the wheel, with Backbone is just to filter a collection.
I do not have doubts man, use Backbone.js
This question was posted quite a long time ago, but there is now an open source vanilla JavaScript plugin available that will alphabetically filter any HTML list with alphabetical navigation
It's called AlphaListNav.js
Just output your HTML list:
<ul id="myList">
<li>Eggplant</li>
<li>Apples</li>
<li>Carrots</li>
<li>Blueberries</li>
</ul>
Add the CSS in the <head> of your page:
<link rel="stylesheet" href="alphaListNav.css">
Add the JavaScript file just before the closing </body> tag:
<script src="alphaListNav.js"></script>
And then Initialize the AlphaListNav library on your list by passing it the id of your list. Like so:
<script>
new AlphaListNav('myList');
</script>
It has all kinds of different options for customizing the behavior you may want:
For example:
<script>
new AlphaListNav('myList', {
initLetter: 'A',
includeAll: false,
includeNums: false,
removeDisabled: true,
//and many other options available..
});
</script>
The GitHub project is here
And a CodePen example is here
The AlphaListNav.js website & documentation is here
As the title says; I want the content of an external file (text,html,php etc.) onto a div.
There is basically text in an external file, called: text_1.txt or *text_1.html* , and I want that text displayed within a div that is located on a homepage.
The perfect solution would be a pretty basic code to display text from a text or html file
by inserting it onto a div classed: content
Here I have illustrated the issue with basic code, use this as an example to write a solution.
Code in text_1.html:
<p>Hello world.</p>
Code in index.html:
<!doctype html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
This is as simple as I can put it.
I highly appreciate all the answers I receive, thank you.
PS here are some things you should avoid answering:
Use iframes, or any other frame type solution.
Make use of the onclick function within jquery etc.
Use ineffective textfields to replace certain text.
Make usage of an insertion code for virtual server or similar methods.
There's no way to do this unless and until you use Server Side Includes using PHP, ASP, or JSP
http://en.wikipedia.org/wiki/Server_Side_Includes
If you want to do it using php you can use this:
require_once('filename.php'); /* For including files */
Or use native functions to open .txt files in your pages
Why dont you just do it with jquery
$(document).ready(function() {
$('.content').load('text_1.html');
});