Close div when clicked
- Started
- Last post
- 25 Responses
- Q01
YO QBN
Me again. I'm stupid as hell.
How do I hide a div when it is clicked? Not outside the div, not anywhere on the page. On the specific div only. I've googled and googled.
Also, any way to 'fade out'?
Thanks in advance for any support.
Q
- ********0
jQuery ->
$('div').click(function(){
$(this).fadeOut(300)
});- better:
$('html').click(func...
$(this).fadeOut(300)
});fairbaken
- better:
- ********0
http://www.google.co.uk/search?s…
That produces pretty much everything you'd want for it. Your Google may not be working properly.
- Ravdyk0
hahahahha @ your google may not be working properly
- Q010
Trust me, I went through that. I do not fully understand JQuery yet. So I can't cannibalise code I see.
The code you gave me doesn't work.
- Q010
But I thank you greatly for trying to help.
- ********0
You didn't give me exactly what you were doing.
$("div").click(function(){
$(this).fadeOut(300);
});That is just a suggestion. Have you included it in a $(document).ready, and have you loaded the jQuery library.
I just tested the code on a page with jQuery loaded, no prototype, and within a doc/ready and it worked fine.
- ********0
That function I gave you works as follows:
When you click on anything that is a 'div', fade whatever you have just clicked out over 300 milliseconds.
- Q010
I have the JQuery loaded, yes.
I presumed I needed a do '$(document).ready,'
So it will look like this —$(document).ready,
$("div").click(function(){
$(this).fadeOut(300);
});yes?
- no comma after .readyQ01
- Just go to the jquery website and spend 5 minutes seeing how to implement it - it's real simple and you won't look backmikotondria3
- Will do!Q01
- ********0
document.ready is where you've gone wrong:
$(document).ready(function(){
// ALL YOUR STUFF
});
- Q010
Ok! Thanks for your help orrinward.
I'm starting to pick this up now. It's the characters I'm trying to learn. Like with CSS you have , : . # for example. Is JQuery still worth learning? How well does it work on iPads and other mobile devices?
- It works fine on iPads e.t.c. I find jQuery more browser-stable than CSS.********
- It works fine on iPads e.t.c. I find jQuery more browser-stable than CSS.
- ********0
What I reckon you'll probably want to do though is only have the function get called when you click on specific things on a page.
For the sake of this example, I'm going to say you want an item called 'thingy' to fade out when you click on it, and for the code to be able to handle multiple 'thingy' instances.
in your HTML, give anything you want to hide when you click on it a class called 'thingy', like so:
<div class="thingy" id="object1"></div>
<div class="thingy" id="object2"></div>
<div class="thingy" id="object3"></div>then make a jQuery doc like so:
$(document).ready(function(){
$(".thingy").click(function(){
$(this).fadeOut(300);
});
});What you'll find is that even though there are multiple thingy object on the page, when you click the div with id 'Object 1', only object 1 will close.
- ********0
Giving a class to the objects you want to hide-on-click will futureproof your page a bit. If you just targetted div, it means any element on the page you decide to add later on that happens to be a div will fade-on-click.
- fugged0
jQuery's awesome, but if this is the only time your using it on the site, it's kind of ridiculous to require the entire library for something that can be achieved in very little JavaScript.
- Then again if you reference Google's jQuery library, it is most likely cached on a users machine and therefore load time is less of an issue.********
- is less of an issue.********
- Then again if you reference Google's jQuery library, it is most likely cached on a users machine and therefore load time is less of an issue.
- Q010
Yeah I'm loading off Google. I've got about 10 different jquery files loading in (including this one) off my own hosting. How much does that affect the speed of loading?
Hold on — let me do a few adjustments then I'll link you up.
- the more http requests the browser hast to make, the slower the page load.fugged
- Q010
You've really helped orrin yo. Thank you very much, I really appreciate it.
- ********0
$(this).hide().css({display:"non...
- ********0
getEmersonPalmerById("mydiv").st...
- Q010
Huuuuuuuuuuuuuuuuuuuuuuuuuu —
I've got this image fade Jquery going on. (Not scrolling image fade, fuck that, load in fade.)
Except I'm loading in images into the page after the initial page has loaded. Using this code — http://codesnippets.joyent.com/posts/show/602
This is the JQuery I'm using —
$(document).ready(function () {
.load(function () {
// set the image hidden by default
$('#fader').hide();.fadeIn(300);
}}It's not working. Because... I presume it only reads for the #fader tag once the body of the page has loaded. Is there a way for it to continually check for the #fader tag each time new content is loaded?
- $('#fader').hide...
I'm not an expert but this doesn't seem to make sense.********
- $('#fader').hide...
- Q010
I'm loading external HTML pages into a div when a link is clicked. I'm assuming that when that content is loaded in JQuery doesn't bother looking for #fader tag attached to the new images.
- ernexbcn0
Post this somewhere we can test it, jQuery does identify new dom elements loaded after page load, you must be using the wrong selectors.