Develop Reference

Firefox 10 - unclickable buttons?

Has anyone seen this behavior:
I have a couple of HTML buttons used to drive a content rotator:
<div id="rotatorControls" class="rotatorControls" runat="server">
<input name="previous" id="previous" type="button" value="«" />
<input name="next" id="next" type="button" value="»" />
</div>
The buttons are activated with a little jQuery:
$(document).ready(function() {
mcarousel = $("#carouseldiv").msCarousel({ boxClass: 'div.box', height: 100, width: 450 }).data("msCarousel");
//add click event
$("#next").click(function() {
//calling next method
mcarousel.next();
});
$("#previous").click(function() {
//calling previous method
mcarousel.previous();
});
})
In IE this works fine...in Chrome and FireFox 10, the buttons aren't clickable. When I roll my cursor over the buttons, the cursor doesn't change and the buttons don't highlight like other buttons do.
Anyone seen this before and/or have any ideas how to fix this? I've already tried setting the z-index on the buttons, and moving them out of the container div (thinking an invisible element is blocking the click), but neither of those worked.
Any help would be appreciated.
EDIT
I'm using the mCarousel plugin provided by Marghoob Suleman (http://www.marghoobsuleman.com/jquery-ms-carousel)

At a guess without the full code, I would suggest checking the relevant js files have loaded correctly for this plugin in Firefox and Chrome. Also it would be worth noting in the question that it is via a plugin not standard jQuery that this functionality is from.

Maybe you're missing something from the original implementation:
http://www.marghoobsuleman.com/mywork/jcomponents/carousel/index.html
For example the boxClass: 'div.box' pointing to the wrong place.

I had this same problem yesterday with a late version of Firefox and I found help on this site from Mikey G.
This may help if you want to go this route, it worked for me on a similiar issue, also with a slideshow.
Place your functions inside the buttons:
<input name="next" id="next" type="button" onclick="$mcarousel.next();" value="»" />
Forgive me if I left out a character or two, still pretty new.
It doesn't seem to be z-index, I've found info that suggests sometimes Firefox has problems with '.click()'

jquery before() is out of order?

I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a
<ul></ul>
after my input in order to do a .load inside the list.
The relevant code I have is:
var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
$(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
$('.add_keyword').focus();
addKeywordId++;
});
The problem is, that my HTML structure ends up looking like this:
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />
INSTEAD OF
<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
Anybody know why my HTML is added out of the order I specified??
Thanks
EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(

This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I've seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.
You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.
$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');
Happy haxin.
_wryteowl

Chrome Javascript Error

Have a look at this link.
The menu to the left is not clickable in chrome (When you open in new tab, it works fine), but works fine in Mozilla.
Please let me know if you have any thoughts on how to correct this.

Your menu not using Javascript to detect click events it is anchor tag. You will notice that in a webkit browser hovering over the link does not provide a pointer cursor.
Eg:
<a style="background-color:red;" href="/stores/unwrapindia/products/1/Artisan/2/Happily-Unmarried/65/New-Year/78/Promotions-">
<div class="fillDIV">
<input type="checkbox" name="attribute_value_44" value="44" class="CheckBoxClass" id="CheckBox1">
<label class="LabelSelected" for="CheckBox1" id="Label1">Chandigarh</label>
</div>
</a>
The problem could that the input is conflicting with the anchor tag in regards to the click event, because webkit is a bit confused about the div inside the anchor or you need to clean up your ID's. I do not see the reason for your using of the input and label, so at least test it with just the anchor.

The label elements within your links have a for attribute (which refer to hidden checkboxes). Something like:
<input type="checkbox" id="cb1" />
<label for="cb1">mooooo</label>
The link does not work once you set that attribute.
To fix your problem, simply remove the attribute - it does not benefit you anyway (having the checkbox checked is not helpful as you are navigating away from the page).
Here is an example.

My solution is add inline javascript code to tag A
onclick="document.location.href=this.getAttribute('href');"
Note
In html specification, an A element is not allowed to contain a DIV element, you can refer to
http://www.w3.org/TR/html4/sgml/dtd.html
for more information

jQuery image picker

I'm looking for a jQuery image picker plugin that allows me to do the following:
Display a group of images and let the user select one (and only one) by clicking it
If the user does not like any of the specified images, he should be able to upload his own
Just #1 would suffice, as I can add the code for #2 if necessary
It's not that difficult to do I know, but if there is a standard plugin that people use for this, I'd rather use that than reinvent the wheel.

I know this has already been answered but I actually developed a library that address the first problem. You can check it out here:
http://rvera.github.com/image-picker/

Something like this? i dont know if there is plugin but is seems really simple
// HTML
<div id="image_container">
<img src="blabla" />
<img src="blabla" />
...
</div>
<form ...>
<input id="image_from_list" name="image_from_list" type="hidden" value="" />
<input id="image_from_file" name="image_from_file" type="file" />
</form>
// JS
$('div#image_container img').click(function(){
// set the img-source as value of image_from_list
$('input#image_from_list').val( $(this).attr("src") );
});

Have you tried this:
https://code.google.com/p/select-to-image-picker-jquery/
It lets you to change select box into image picker based on JQueryUI modal box.
I was looking for something like this a long time and finally needed to develop it by myself. So maybe you will find useful too.

How do I make the jquery dialog work with the themeroller themes?

I am trying out the dialog from jquery UI. All the online demos use flora.css.
I can't get the dialog to display correctly with the css file generated by the themeroller application.
Am I missing something? Should these things work out of the box?
Update: Thanks Brock. When I cleaned up my code to make a sample, I realized that the HTML in demo.html (that comes with the themeroller.zip) is a little too verbose.
All I needed to do was give the dialog div the attribute class="ui-dialog" like this:
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
I'll accept your answer. Thanks for your time.

I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the ui-dialog class.