What jquery selectbox plugin is used in trulia.com? - javascript

Does any one know what jquery plugin was used in this page of trulia.com in the refine search section. I think this is a good selectbox plugin and i've googled it and with no luck. I would really like to use this. Thanks in advance.

I have peeked into the code on trulia.com, and it does not look like they are using a plugin. It is simply an ordinary selectbox, which is styled with wrapper elements.
There are some code in the polarbear-home.js javascript file, which sets/removes focus to the select.
$(".select-wrapper>select").bind("focusin", function (c) {
$(this).prev().addClass("focus")
});
$(".select-wrapper>select").blur(function (c) {
$(this).prev().removeClass("focus")
});
But, my guess is, that this is no public available plugin, but some wrapper styling, and some some js/jquery code to do the focus/unfocus styling.

Try out SelectBoxIt. I just released it last week. DailyJS also wrote about it here http://dailyjs.com/2012/04/24/jquery-roundup/

Related

Formal way to perform an "onchange" using jquery?

I'm using jquery for the first time and I cannot get any examples for "onchange" actions to work.
Can someone explain the most basic and formal way to perform an "onchange" action using jquery. Here's my stats:
JQUERY VERSION
$().jquery
"1.7.2"
Example Activity That I Can't Get To Work
https://jsfiddle.net/k27pgkmr/
My jquery
$(document).ready(function(){
$("#hostnameList").on("change", function() {
contents = $('#hostnameList').val();
$("#Names").html(contents);
}); });
GOAL:
Have things happen when I select something from my dropdown menu.
What's the most graceful way to do this?
Nothing wrong with your code, but in your fiddle. You forgot to reference the jQuery lib. Also, I have set your fiddle to wrap the javascript in the <head> since you're already binding it to the $(document).ready().
Updated Demo

How use jQuery UI from jQuery Update in Drupal 7

this is my first question here so I hope I'll do it properly :).
I recently begin to use Drupal and for the jQuery I'm using the module "jQuery Update". That work perfectly but now I also want to use jQuery UI but it seems to not be recognized, even on simply things like
<div id="slider"></div>
<script>
$(function() {
$("#slider").slider();
});
</script>
I wondered if maybe I have to do something first before I can use jQuery UI. Otherwise I really don't know how solve my problem.
So if you have a solution please answer me, thank you :D.
AfAIK, you must use jQuery instead of $ in drupal. you can find more details on https://drupal.org/node/171213
refering to this you also can add jQuery UI using system libraries and your theme's preprocess_page hook. like :
function NAME_OF_THEME_preprocess_page(&$variables) {
drupal_add_library('system', 'ui');
drupal_add_library('system', 'ui.accordion');
drupal_add_library('system', 'effects.highlight');
}
abyz's answer is correct, but you can also attach jQuery autocomplete in this way:
$content['#attached']['library'][] = array('system', 'ui');
$content['#attached']['library'][] = array('system', 'ui.autocomplete');
see: https://drupal.stackexchange.com/questions/102914/attaching-a-system-js-library-using-attached-property-d7

Minimal modifications to jQuery plugin sample to call plugin with no elements

I essentially have the same goal as in this question:
Calling a jQuery plugin without specifying any elements
However I am looking for the minimal edit to add a method to the "conclusion" built up in the jQuery plugin guide...which culminates in a jQuery "data" based tooltip plugin:
http://docs.jquery.com/Plugins/Authoring
I'm looking for the turnkey "right" way to add a method (the sort that finds its place in the list with reposition, show, hide, and update) for something that could be called with no elements. My case is I want to add a debug mode method you can call like:
$.tooltip('debug', true);
Like the author of the question I cite, I can get this working just fine with a parallel to:
$().tooltip('debug', true);
But the supplied answer wasn't cast in terms of the full-on .data-based tooltip plugin structure. So I can't quite figure out where to inject the offered advice of using .extend. Can anyone suggest the minimal edit to get the desired effect?
After looking at this a bit, I think the simplest modification to do is just to inject the extend call right after the $.fn.tooltip = function(method) { ... } and make it a synonym, like this:
$.extend({
tooltip: $.fn.tooltip
});
That seems to do the trick...and in the plugin's methods you just test to see if this is equal to jQuery (or $) to see if it's actually being called on "nothing".

Detect checkbox change in jstree

I am using the latest jstree commit from github with the checkbox plugin as a part of my form. I am using the tree with the "real_checkboxes" attribute.
Everything is fine except the checkbox plugin does not actually add any changed property attribute to the hidden field and nor does it seem to have a external function that will allow me to hook in to create custom functionality.
Is it possible for me to understand and listen for when a checkbox is either ticked or unticked?
Thanks,
UPDATE: after doing some experimenting I was able to over ride the default functionality of the check and uncheck methods using:
$.jstree._instance.prototype.check_node = function(node){ alert("here"); }
However it isn't very clean and it does override the whole method.
Is there:
a) a cleaner way to do it?
b) a way to just do a callback on the function rather than replacing the whole damn thing?
Thanks again,
#Noctyrn
Yes I did that originally but then I looked through the docs a lot more closely and found this:
$(".js_tree_'.$this->attribute.' div").bind("check_node.jstree", function(){});
But yes your function does the same :). But since mine is right to the jsTree docs Ima mark my answer as the right one. Also that function allows for different trees on the same page to have different binds so it is better overall :).
Thanks for the help :),
This is actually less clean but at least it gets the job done:
var check_node_func = $.jstree._instance.prototype.check_node;
$.jstree._instance.prototype.check_node = function(node) {
check_node_func.apply(this, arguments);
alert("here");
}

Minimizable side panel in html

I'm looking for a simple javascript to create side panel with hiding after some action(ex. after clicking on some area). Something like this example but appearing from left side not from up to down as the example works.
Will be appreciated for any help :)
You have 2 options. You can either use JQuery or scriptaculous to do this. There are plenty of examples and tutorials on the internet or you can simply use java script to this.
First download émile It's a very simple javascript animation framework.
Since you didn't provide any HTML markup, I'm assuming you have something like this.
<div id="side-panel">panel content..</div>
<div id="content">main content..</div>
and let's say your side-panel element has a CSS style of width:200px. Ok, now place a button somewhere and assign it a click event. Such as onclick="togglePanel()"
Here is the content of the togglePanel function:
function togglePanel(){
var panel = document.getElementById('side-panel');
if(!panel.__closed){
emile(panel, 'width:0px');
panel.__closed = true;
}else{
emile(panel, 'width:200px');
panel.__closed = false;
}
}
If you check the documentation of the emile framework you can do lot's of other cool things.
as you haven't provided us your code (which you have build) that's why I'm just giving a code to help you (And I don't know that this is a right answer or not). This code needs jQuery Ver.1.4 at least I think so, but I'm not clear. Anyways let's get started. Here is a link to live demo.
Hope this helps!

Categories