find ID of parent DIV and fade DIV out - javascript

Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!

You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/

Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.

jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});

Related

Adding a div element to another part of the website when clicking a button

I'm trying to code a jQuery script that adds some functionality to a button.
Basically when I click a button (ex: Settings), I want to add that specific text (ex: Settings), to a different div (the div is predefined with css rules), just like how a google chrome tab works.
$(document).ready(function() {
var wButtons = document.getElementById('#wrapper');
$(".buttonSettings").click(function() {
var domElement = $('<span>Settings</span>').appendTo(wButtons);
$(this).after(domElement);
});
});
The code works partially, but it won't append to #wrapper, just under the .buttonSettings div. Also I should mention that I have a predefined number of tabs (max 6).
Thank you!
If you want to append html string into element, use jquery appendTo() method like this.
$("button").click(function() {
$("<span>Span content</span>").appendTo("#wrapper");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Append</button>
<br/><br/>
<div id="wrapper">Wrapper content</div>
Remove # from getElementById and in this case this == button,
demo: https://jsfiddle.net/
$(document).ready(function() {
var wButtons = document.getElementById('wrapper');
$(".buttonSettings").click(function() {
wButtons.innerHTML += '<span>BALALALALA</span>';
});
});

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/
Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});
Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

Selecting elements to show and hide, traversal issue! (jQuery)

I have been trying every combination under the sun of parent()/children()/find() and selector syntax to .show() an element of my webpage that i hid on document ready, but I just can't get it to work! I'd really appreciate it if someone could take a look..
If you go to the portfolio section you can see it live here -> http://holly.im/ .
In any case the html looks something like this:
<div id="portfolio">
<h1>Heading</h1>
<div class ="little_column">
<div class="project">
click
</div>
</div>
<div id="c++_games_engine_construction" class="big_column">
<?php include "projects/C++_game_engine_construction.php"; ?>
</div>
</div>
And the relevant jquery:
$(document).ready(function() {
//hide all the big_columns /
// project details within the portfolio page
$('#portfolio').find('.big_column').hide(); //This seems to be working
});
$(function(){
$('.project').click(function () {
var selectedProject =
$(this).children('a.projlink').attr('href');
$(this).parent().parent().find(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show.
return false;
});
});
That's it really, thanks!
Having the character + in the ID of an element causes jQuery to become confused because the + character is reserved for the Next Adjacent Selector.
If you remove those characters from your code, it works just fine. As was mentioned in one of the comments to this answer, since the href is essentially the ID of the item to be shown, you can select it directly.
HTML
<div id="portfolio" class="section">
<h1>Heading</h1>
<div class="little_column">
<div class="project"> click
</div>
</div>
<div id="c_games_engine_construction" class="big_column">
I'm hidden at first!
</div>
</div>
JS
$(document).ready(function () {
//hide all the big_columns /
// project details within the portfolio page
$('#portfolio').find('.big_column').hide(); //This seems to be working
});
$(function () {
$('.project').click(function () {
var selectedProject = $(this).children('a.projlink').attr('href');
$(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show.
return false;
});
});
jsfiddle
The issue is with the + in the selector. It needs to be escaped because it has special meaning in the Selectors API (and is invalid for an ID).
If you removed the ++ from the href and the id, it works.
Alternately, you can do .replace(/\+/g, "\\+")
var selectedProject = $(this).children('a.projlink').attr('href').replace(/\+/g, "\\+")
Off topic: You don't need two .ready() calls, which is what you have, but using different syntax.
As others have mentioned, your problem are the + characters mistreated by jQuery. So the simple solution is: do not use jQuery - or at least, not for the selector thing. Since every target you have is an id selector, we can easily change it to
$(document).ready(function() {
$('#portfolio').find('.big_column').hide();
$('.project').click(function () {
var selectedProject = $(this).find('a').attr('href'); // a littebit simplified
var el = document.getElementById(selectedProject.slice(1));
$(el).show();
return false;
});
});

How to toggle every jQuery element except the clicked?

So I'm trying to achieve something seemingly very basic in jQuery. I have a number of "headers," and when I click on a header I want the info beneath that header to slide down, and all other header info to slide up (so that only one header is showing info at a time).
Here's sudo code of what I want to happen:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
[all other ('.game-info-text')].slideUp(fast)
});
For the life of me though, I can't figure out how to code that second line ([all other ('.game-info-text')]). Any help is much appreciated!
(I'm implementing this as a drupal behavior, which is why I have the "jquery-processed" class being added)
Something like:
$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
$(this).children('.game-info-text').slideToggle("Slow");
$('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
// ^-- removes the clicked element from all `.more-info-header`
});
Reference: .not()
Sounds like you're after the jQuery UI Accordion plugin.
$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
var these = $(this).children('.game-info-text').slideToggle("slow");
$('.game-info-text').not(these).slideUp("fast");
});
With the not() function you can exclude the already selected elements.
Like this?
$('.more-info-header').click(function(e){
var target = e.target || e.srcElement;
$(this).children().not(target).find('.game-info-text').slideUp('fast');
$('.game-info-text', target).slideToggle("slow");
});

Using mouseover in CSS

All,
var a='<div id="details" onmouseover="tip(this)">';
function tip(el)
{
$(this).mouseover(function() {
var b="<div id='test'>"+el.innerHTML+"</div>";
$(b).css("display", "inline");
});
}
Is anything wrong with the above code? I am trying to display el.innerhtml on mouserover next to the hyperlink
Why not try this instead :
function tip(el) {
$(this).mouseover(function() {
$("#test").html(el.innerHTML);
$("#test").css("display","inline");
}); }
Try to expand on what you want. Give us a list of requirements spell out exactly what you want. I expect a couple of the down votes will be rescided if you do this.
For my part, try this:
<div id="details">
<script type="text/javascript">
$(document).ready(function(){
$("#details").mouseover(function(){
var $this = $(this);
$this.append("<div id='test'>"+$this.html()+"</div>");
});
})
</script>
To show/hide would have been simple call to .show() or .hide()
If you really wanted this code:
var a='<div id="details" onmouseover="tip(this)">';
Then you would have to append to the DOM:
$(document).append('<div id="details">');
And then bind your event:
$("#details").mouseover(function(){
You need to append the code to your page DOM so it could be displayed. Currently you create a div, set CSS for it but it's still only in memory.
You are using $(this) inside your function, maybe it should be $(el)? And you need to do something like $('body').append(b); as well to add the <div> to the DOM.

Categories