Develop Reference

Textarea not clickable in firefox

A expanding textarea is not clickable in the firefox browser. Chrome, IE and mobile browsers work.
<div id="image-upload" class="panel">
<ul class="imagelist-uploader">
<li>
<textarea class="inputbox image-comment" name="comment_list[0]" placeholder="Description">Default Text</textarea>
</li>
</ul>
</div>
I added the simple code to jsfiddle. Click with chrome at the default text to watch the behavior.
http://jsfiddle.net/9hksezsu/
I think it has something do to with the jscode.
Thank you very much for help.

In your Javascript code, LINE 60 : remove "disableSelection()" and everything works fine ;)

It's because of your list. Remove the textarea from the list and it will work fine.

Remove your ul class and it will work fine.

Function works with divs but not paragraphs

I am wondering why one piece of code is working when a div is used, but is not working when a paragraph is used. I appreciate any and all responses.
Working code:
HTML
<div> </div>
<div id="myDiv"> </div>
<div> </div>
<div> </div>
jQuery
$('div').not('#myDiv').css('background-color', '#000000');
See the working JS fiddle here: http://jsfiddle.net/Kyle_Sevenoaks/w8fRk/
See the broken (oddly) JS fiddle here: http://jsfiddle.net/w8fRk/14/
Both involve the .not command in jQuery, and I'm actually a little embarrassed by my code's lack of functionality.

Your operations are backwards.
$('p').not('#game0').hide();
http://jsfiddle.net/w8fRk/16/

You have your function calls in the wrong order. Try this.
$(document).ready(function(){
$('p').not('#game0').hide();
});

scrollTo/localscroll.js not working at all

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/jquery.localscroll.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/script.js"></script>
script.js:
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
html:
<div id="container">
<div id="menu">
<nav>
<ul>
<li>HOME</li>
<li>GIGS</li>
<li>TOP10</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="content"><!-- content -->
<div id="home">home</div>
<div id="gigs">gigs</div>
<div id="top10">top10</div>
<div id="contact">contact</div>
</div><!-- end of content -->
i don't understand what is wrong....help me! thnx

The problem is partially in your HTML formatting, and there might be some CSS errors on your side as well (can't tell from here.)
First of all, it's a bad idea to use an html element like <nav>, (i have no idea what it is, this is the first time i've ever seen it and it might cause problems with jQuery)
Second, your content div must have a fixed size, and overflow:scroll as CSS markup.
To see a working example, check out This JsFiddle i made for you

I remember using this plugin at some point and I think you need to specify a target
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});

Keep your menu wrapper as is and change the js conde to:
$(document).ready(function()
{
$('#menu').localScroll({duration:800});
}
);
And I don't think you need the content ID in content wrapper. That might help.

I had exactly the same problem.
Chrome was driving me nuts in why it was not working, but the funny thing was is that I've used this plugin before and it worked in all browsers!!!
So I looked at every single bit of HTML, CSS, JS, to try and figure out what was different.
See below my anchor.
<a class="anchor" name="myanchor"></a>
My CSS on the class 'anchor' was blank. As soon as I added CSS 'position: relative' to the anchor element, Bingo! it worked in Chrome.
Hope this helps someone!

This worked for me: I was including the file twice.
In our header:
<script type="text/javascript" src="/js/lib/jquery.scrollTo-min.js"></script>
And in our footer:
<script type="text/javascript" src="/scripts/jquery.scrollTo-1.4.2-min.js"></script>
Removing the second include solved the problem.
This happened due to merging of a new website design onto our existing one.

I've just wrote a blog post about localscroll at chrome: http://lukaszkups.pl/blog/localscroll-chrome-problem/
You should use:
$("html,body").localScroll({duration:800});
Duration is optional of course, but at least set html/body as a target ;)

jQuery code not working in IE

I am a novice in jQuery, and am trying to create this page. In all browsers I tested, when I click the red button a coupon code appears, except for IE. Why does this happen? And how can I fix it?
I hate this browser, really...
Javascript:
$(".coupon_button").live('click', function (event) {
$(".coupon_button").remove().fadeOut('slow');
$(".coupon_main").after($("<div class='coupon_code'>code:newhgcoupon</div>").fadeIn());
//$(".coupon_main").after().fadeIn('slow').html("<div class='code'>code:newhgcoupon</div>");
});
HTML:
<div class="module">
<div class="coupon_title">Pay <span class="yellow">1 Cent</span> your First Month</div>
<div class="coupon_main">To help save you some time, we created a link that takes you directly to the easily missed area on the official Medifast site that lists all of their latest specials and discounts.</div>
<div class="coupon_button"><img src="button.png" /></div>
<div class="coupon_footer">Expiration: 11-30-2010</div>
</div>

Your script is not executing in IE. To fix it, just change the script type to text/javascript.
IE does not recognize the application/javascript type as being a script at all.

I think you're missing your document.ready function. Add this line right above the first line of your script:
$(document).ready(function() {

Simple Javascript doesn't work in FireFox (but does in ALL other Browsers)

I have this code which I'm using to reveal the Answers to some questions in an FAQ section on my website. You click the question and the div containing the answer is revealed below.
It works in Safari, Chrome, Opera and even IE, but not in Firefox.
The links just do nothing.
Any ideas why, or any better methods for doing an 'FAQ' section? I have already got jQuery loaded in my page if there's something that could be done better with it there, I don't know. Or a CSS only solution?
Here is my code:
JS code:
<script type="text/javascript">
function toggle(tag) {
if (tag.style.display=='') {
tag.style.display='none'
} else {
tag.style.display=''
}
}
</script>
HTML code:
FAQ Question goes here
<div id="question1" style="display:none">
<p>FAQ Answer goes here</p>
</div

Because you set the ID of the element you want to toggle, you would need to use:
document.getElementByID(tag).style.display
instead of just tag.style.display inside of your toggle function.

try setting your display to 'block'
tag.style.display='block'

A simpler way to do this is:
<script type="text/javascript">
function toggle(tag) {
tag.style.display = (tag.style.display == 'block') ? 'none' : 'block';
}
</script>

Ok there are a number of issues in your code
First, it is important to end your lines with a semi-colon.
tag.style.display='none' should be tag.style.display='none';
Second, You must use document.getElementById on the id to get the DOM Element
I would do somthing like this:
function toggle(elementId) {
var tag = document.getElementById(elementId);
...
}
Here is a demo http://jsbin.com/abuce4/edit

Seriously, I recommend you use jquery, you will not have this kind of problem and it's less than 30 Kbs.
Here is what you look for:
http://api.jquery.com/toggle/
Anyway, you should always use: document.getElementByID to get a certain element.
EDITED
It depends on the structure of your HTML, if I had this situation:
http://www.jsfiddle.net/dactivo/Qcm4G/
I would do this:
$(".questionsheader").click(function(){
$(this).next("div").toggle(); }
);
SOME OTHER CONSIDERATIONS
I wouldn't use "display:none" for the answers for a simple yet perhaps not practical reason. People without javascript enabled (as happen with the software of some handicapped people) will not be able to read the answers. This is why I hide the answers with javascript. They will only disappear if javascript is enabled.
You can use other effects like animate(), slidetoggle() to make it more interesting.

Since you already have jQuery, try this:
$("#" + tag).toggle();

try <a onclick='toggle(document.getElementById("question1"));'">

Try this (quotes added):
FAQ Question goes here
<div id="question1" style="display:none">
<p>FAQ Answer goes here</p>
</div>
and (used getElementById):
<script type="text/javascript">
function toggle(tag) {
tag = document.getElementById(tag);
if (tag.style.display=='') {
tag.style.display='none'
} else {
tag.style.display=''
}
}
</script>
UPDATES: for the jQuery solution, I would use the jQuery Tabs approach:
<a class="toggle" href="#question1">FAQ Question Link 1</a>
<div id="question1" style="display:none">
<p>FAQ Answer goes here</p>
</div>
<a class="toggle" href="#question2">FAQ Question Link 2</a>
<div id="question2" style="display:none">
<p>FAQ Answer goes here</p>
</div>
and the JS:
<script type="text/javascript">
$(document).ready(function() {
$('.toggle').click(function() {
$($(this).attr('href')).toggle();
return false;
});
});
</script>

Question
<div style="display:none;">Answer</div>
Or more 'generic' and clean :
HTML :
<a class="question">Question 1</a>
<div class="answer">Answer 1</div>
<a class="question">Question 2</a>
<div class="answer">Answer 1</div>
CSS :
.answer{
display:none;
}
JS :
$(document).ready(function() {
$(".question").click(function(event){
$(this).next().slideToggle();
});
}
slideToggle(); or toggle();
Enjoy.