Develop Reference

document.getElementById() alternative in jQuery

UPDATE: I'm sorry that my thread was misinterpreted by many users. I'll try to be more clear.
I'm using Drupal and I have created three floating banners. On the frontpage there is a block (block1) that displays one floating banner and after refresh the second one is appearing and for the third too.
Like a wrote before these banners has a little X button to stop overflow.
I've putted this script in a one of the banners and it's working great.
<script language="javascript">
function doexpand() {
document.getElementById("block1").style.overflow = "visible";
}
function dolittle() {
document.getElementById("block1").style.overflow = "hidden";
}
</script>
The real problem is that in categories pages I have #block2 and in articles #block3.
These block are displaying the same banners. The code over is working only for a one ID. In this case #block1. document.getElementById is not working for more ID's as I read from other topics.
I've tried with jQuery with two blocks idents like this:
(function ($) {
function doexpand() {
$("#block1,#block2").css("overflow","visible");
}
function dolittle() {
$("#block1,#block2").css("overflow","hidden");
}
})(jQuery);
It's not working.
The firebug/console displays: ReferenceError: doexpand is not defined.
I've tried with a single block too with jQuery like this:
(function ($) {
function doexpand() {
$("#block1").css("overflow","visible");
}
function dolittle() {
$("#block1").css("overflow","hidden");
}
})(jQuery);
and it's displaying the same error.
Note: Drupal has a different wrapping and it's like this:
(function ($) {
//your existing code
})(jQuery);

Please have a look on jQuery Selectors.
I think in your case, it is better to apply style with help of css for multiple elements. e.g. :
<script language="javascript">
function doexpand() {
$('.block').style.overflow="visible";
}
function dolittle() {
$('.block').style.overflow="hidden" ;
}
</script>
Please add class="block" to all of blocks for which you want to apply this style/function, it will apply on all of the blocks having css class "block".

jQuery?
HTML:
<div class="block2"></div>
JS:
function doExpand(selector) {
if ( $(selector).length ) {
$(selector).css({'overflow':'visible'});
}
}
Calling with non ID selector would look like this: (jQuery syntax):
doExpand('.block2');

The above code is perfectly valid in jQuery (which is a JavaScript library).
If you want to use a more typical jQuery code, you can do
$('#block1').css('overflow', 'visible');
You can expend it to multiple id like this :
$('#block1, #block2').css('overflow', 'visible');
You always can get the DOM object from a jQuery object, which means you could also have adapted your code to use jQuery selectors using
$('#block1').get(0).style.overflow="visible";
(this specific example isn't smart : no need to use jQuery if you don't use a complex selector or jQuery functions)

Pretty simple really, jQuery selection is based on css selectors for the most part. These selectors are then translated into an array of dom objects held in a jQuery object.
function doexpand() {
$("#block1").css("overflow","visible");
}
function dolittle() {
$("#block1").css("overflow","hidden");
}

You should never have more than one HTML element with the same ID (Which is why document.getElementById only returns one element)
You can just refeerence block2, block3 directly document.getElementById("block2").style.overflow="hidden" ;
Or use getElementByClassName
var elements = document.getElementsByClassName("yourClass")
Which will pick up all elements with a specific class.
If you want to use jQuery like the other answers are suggesting you can match on the element name. For example:
$('div[id^="block"]').css("overflow", "visible");
This will match all div element where their ID starts with block. You can also use other wildcards such as * for contains and $ for ends with.

Here is your Javascript Code in jQuery. I dont understand what you want do do, but you could pass the params in the function. Example under this code.
<script language="javascript">
function doexpand() {
$("#block1").css({'overflow': 'visible'});
}
function dolittle() {
$("#block1").css({'overflow': 'hidden'});
}
</script>
Here is it
<script language="javascript">
function doexpand(element) {
$("#" + element).css({'overflow': 'visible'});
}
function dolittle(element) {
$("#" + element).css({'overflow': 'hidden'});
}
</script>
Than you could call it like: doexpand("theIDofTheElement");

Alternative to document.getElementById("an_element);
in Jquery is: $("#an_element");
It will work fine in JQuery, it's just that JQuery makes things faster and less verbose.

Plupload messing up jquery

I am using the image uploader Plupload and it is causing errors with the other jquery I have on my page. I have figured out exactly what part is doing it:
function $(id) {
return document.getElementById(id);
}
If I take this out the image uploader no longer works but the jquery does. It is a lot of code to post here, does anyone have another way to call this function so that it works with jquery? Thanks in advance for any help.

use jQuery like this:
jQuery(function($){
//Your jQuery code here
// Use $ alias worry-free of conflicts
alert('You are using jQuery ' + $().jquery );
});
or
(function($){
//Your jQuery code here
})(jQuery);
or
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
or
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

jQuery UI 1.6 and adding slider in Drupal

I can't use new version of jQuery. I have 1.6.
I have in head ui.core, ui.slider, but when I call $('#min-price').slider(); I am getting:
$("#min-price").slider is not a function
I call it when DOM is ready.
Could somebody help?
code added
$(document).ready(function() {
var wrapper = $('<span id="snuper-sorter-wrapper">Sort by: </span>'),
dealsDivCopy = $('.view .views-row').clone(true),
dealsCategories = $('#deals-categories'),
currentDeals = Drupal.settings.snuper_filter.deals;
$('#min-price').slider(); //here it fails
//rest of code
How can I examine that jquery ui object exists and get function list?
EDIT
My fault, I need to load it in different way.
In Drupal you add jQuery element this way:
jquery_ui_add(array('ui.slider'));

Check if you have loaded both libraries (jQuery and the jQueryUI) and also make sure the paths to the files are correct.

Calling two types of jquery - issue in IE

Firefox works fine, Opera is great and Chrome works well also. IE is the issue. It seems to be ANY version of IE.
The site is http://s91532.gridserver.com and no matter where you click, it brings down our javascript menu from the top.
When you hover over the images it shows you the correct path and everything but when you click it just drops down the Ministry Index dropdown
I have removed the offending jquery which was an older version and am now just calling the site.js which is the code below:
jQuery.noConflict();
jQuery(document).ready(function(){
$('p#minguide-link a').click(function(){
if ($('#index-wrapper').is(':hidden')) {
$('#index-wrapper').slideDown('medium');
$('p#minguide-link a').addClass('down');
return false;
} else {
$('#index-wrapper').slideUp('medium');
$('p#minguide-link a').removeClass('down');
return false;
}
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
With that alone being called nothing happens. It seems that it is now fixed in IE from what I can tell.
Now how do I get site.js to be called correctly so the menu drops down correctly.

Matthew, replace the jquery 1.3 script tag for the jquery 1.4 script tag, make sure all other script tags are placed AFTER the jquery script tag ;)

I would echo the strong recommendation that you make everything work with the up-to-date version of the library, but you might try this: include the old jQuery, then right after that line add this:
<script>
jQuery.noConflict();
</script>
And then include a modified site.js file, changed as follows:
jQuery(function($) {
// existing code
});

Without any useful information (other than the link), all I can do is point you to this article:
http://codex.wordpress.org/Function_Reference/wp_enqueue_javascript/
You should be using 1.4.2. I've never ever had a single problem with it. You're calling conflicting versions of jQuery, so just use the better one.
Also, site.js isn't using jQuery in compatibility mode. You should change that first line to
jQuery(document).ready(function(){
not
$(document).ready(function(){
EDIT
Your site is running in no-conflict mode. You have to get rid of that $ at the beginning of site.js. It's throwing an error before anything happens. To fix that, all you need to do is change the very first $ to jQuery. All the other $s are fine, though.
Here's site.js in jQuery 1.4.2. Just replace the whole file's contents with this:
jQuery(document).ready(function() {
$('p#minguide-link a').click(function(){
$('#index-wrapper').slideToggle();
$('p#minguide-link a').toggleClass('down');
return false;
});
var group_width = $('li#nav_groups ul').width();
var group_adj = ((group_width*-1)/2)+79;
var care_width = $('li#nav_care--serve ul').width();
var care_adj = ((care_width*-1)/2)+79;
var sermon_width = $('li#nav_sermons ul').width() + 2;
var sermon_adj = ((sermon_width*-1)/2)+79;
$('li#nav_groups.current ul').css({"left":"auto", "margin-left":group_adj});
$('li#nav_care--serve.current ul').css({"left":"auto", "margin-left":care_adj});
$('li#nav_sermons.current ul').css({"left":"auto", "margin-left":sermon_adj});
});
Additionally, I really suggest you look up jQuery's API. It's super easy to learn and very intuitively organized/layed out. And searching is a breeze.

JavaScript: changing the value of onclick with or without jQuery

I'd like to change the value of the onclick attribute on an anchor. I want to set it to a new string that contains JavaScript. (That string is provided to the client-side JavaScript code by the server, and it can contains whatever you can put in the onclick attribute in HTML.) Here are a few things I tried:
Using jQuery attr("onclick", js) doesn't work with both Firefox and IE6/7.
Using setAttribute("onclick", js) works with Firefox and IE8, but not IE6/7.
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return is code passed to eval().
Anyone has a suggestion on to set the onclick attribute to to make this work for Firefox and IE 6/7/8? Also see below the code I used to test this.
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var js = "alert('B'); return false;";
// Set with JQuery: doesn't work
$("a").attr("onclick", js);
// Set with setAttribute(): at least works with Firefox
//document.getElementById("anchor").setAttribute("onclick", js);
});
</script>
</head>
<body>
Click
</body>
</html>

You shouldn't be using onClick any more if you are using jQuery. jQuery provides its own methods of attaching and binding events. See .click()
$(document).ready(function(){
var js = "alert('B:' + this.id); return false;";
// create a function from the "js" string
var newclick = new Function(js);
// clears onclick then sets click using jQuery
$("#anchor").attr('onclick', '').click(newclick);
});
That should cancel the onClick function - and keep your "javascript from a string" as well.
The best thing to do would be to remove the onclick="" from the <a> element in the HTML code and switch to using the Unobtrusive method of binding an event to click.
You also said:
Using onclick = function() { return eval(js); } doesn't work because you are not allowed to use return in code passed to eval().
No - it won't, but onclick = eval("(function(){"+js+"})"); will wrap the 'js' variable in a function enclosure. onclick = new Function(js); works as well and is a little cleaner to read. (note the capital F) -- see documentation on Function() constructors

BTW, without JQuery this could also be done, but obviously it's pretty ugly as it only considers IE/non-IE:
if(isie)
tmpobject.setAttribute('onclick',(new Function(tmp.nextSibling.getAttributeNode('onclick').value)));
else
$(tmpobject).attr('onclick',tmp.nextSibling.attributes[0].value); //this even supposes index
Anyway, just so that people have an overall idea of what can be done, as I'm sure many have stumbled upon this annoyance.

One gotcha with Jquery is that the click function do not acknowledge the hand coded onclick from the html.
So, you pretty much have to choose. Set up all your handlers in the init function or all of them in html.
The click event in JQuery is the click function $("myelt").click (function ....).

just use jQuery bind method !jquery-selector!.bind('event', !fn!);
See here for more about events in jQuery

If you don't want to actually navigate to a new page you can also have your anchor somewhere on the page like this.
<a id="the_anchor" href="">
And then to assign your string of JavaScript to the the onclick of the anchor, put this somewhere else (i.e. the header, later in the body, whatever):
<script>
var js = "alert('I am your string of JavaScript');"; // js is your string of script
document.getElementById('the_anchor').href = 'javascript:' + js;
</script>
If you have all of this info on the server before sending out the page, then you could also simply place the JavaScript directly in the href attribute of the anchor like so:
Click me

Note that following gnarf's idea you can also do:
var js = "alert('B:' + this.id); return false;";<br/>
var newclick = eval("(function(){"+js+"});");<br/>
$("a").get(0).onclick = newclick;
That will set the onclick without triggering the event (had the same problem here and it took me some time to find out).

Came up with a quick and dirty fix to this. Just used <select onchange='this.options[this.selectedIndex].onclick();> <option onclick='alert("hello world")' ></option> </select>
Hope this helps