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
Related
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
I need help understanding what I'm doing wrong. I'm loading a page and grabbing two divs using .load works great no issues. but then I want to find one of those divs and remove the bootstrap class and possibly add another class .addClass() howeve rI can't even get the removeClass to work. Am I doing this correctly?
$(document).ready(function() {
$("#siteloader").load( "/men/Maria-Brown #qvImage, #qvContent" );
$("#qvImage").removeClass(" .col-xs-12");
});
Awww yes I figured it out. because the main.js loads the popup and has it set to hidden until the popup is triggered. the
$("#qvImage").removeClass("col-xs-12");
needed to be added to the function inside the main.js now it works great.
thanks guys
I am not a really good understanding guy in all aspects of jquery, but I think I have one suggestion that you should check:
$(document).ready(function(){
$("#siteloader").load( "/men/Maria-Brown #qvImage, #qvContent", function(){
$("#qvImage").removeClass(" .col-xs-12");
} );
});
so this means that you run the "removeClass()" function AFTER the load is done. Try it.. I think this should help.
I can't write the comments yet, so I'm writing it as an Answer...
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/
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".
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!