Javascript click function not reacting in proper parent - javascript

I have this javascript that animates a div into a parent div.
Javascript
$(document).ready(function() {
$("a").click(function() {
var $righty = $(this).next();
$righty.animate({
right: parseInt($righty.css('right'),10) == 0 ?
-$righty.outerWidth() :
0
});
});
});
HTML
<div id="home" class="page">
<div id="page1">
Inside Div
</div>
Outside Div
<div id="page2" class="page">
content
</div>
</div>
I want the <a> tag to live in the page1 div. As of now, the Javascript only works when the <a> tag lives in <div id="page1">. I apologize if this is very basic, as I am new to Javascript. Thank you!

Use a selector for your a tag, instead of just a. Like a class or an id. You don't want this to happen to every single a tag, right?
Also, righty is getting NEXT...well, there's nothing next to the a tag you want to hit.
You want to do $(this).parent().next(); - no, see edit below. I am guessing, because you never told us what you wanted, exactly.
EDIT: This may not help at all. Just know that you can't have an a tag in a div, and call .next() - it has no siblings. .next() hits the next sibling. Not as it appears visually on the page, but as it exists in the DOM tree....you need to have a sibling in the div for the a tag to grab with .next().....you don't. Does that make sense? What exactly are you trying to animate?
EDIT EDIT: Tell me the id or class of the tag you want animated when a given a tag with a given class or id is clicked, and I'll show you how to do it.
EDIT EDIT EDIT: If you just want to make page2 animate when page1 > a is clicked, do this:
$('#page1 a').click(function(){ $('#page2').animate(...put animation stuff here...) });

Related

How do I get a jQuery function to work with specific elements when they have the same class names?

I have sections (divs) with text in it, but when the text is too long I made it so the text "fades" (with css) and displays a "show more" button, which shows the full text for that specific div when clicked. The problem is that it only works for the first div, and I believe it's because they all have the same class and id name. What's the best way to get around that? Here's my code:
HTML:
<div id="fade-container">
<div id="fade-content">
<p>
Long text goes here...
<div class="fade-anchor"><span class="btn-primary round-xl small btn-shadow">Show more</span></div>
</p>
</div>
</div>
Script:
<script>
$('.fade-anchor').click(function(e){
e.preventDefault();
$('#fade-content').css('max-height','none');
$('.fade-anchor').remove();
});
</script>
By the way, info is being fetched from the database in a php while loop.
When the user clicks on .fade-anchor you can use thisto get the element currently selected, you should also use classes instead of ids for multiple elements, like so:
$('.fade-anchor').click(function(e){
e.preventDefault();
$(this).parent('.fade-content').css('max-height','none');
$(this).hide(); // Maybe you should hide instead of removing, in case you want to add a toggle effect later on.
});
You can also check out this jsFiddle with the working version.
Hope it helps.
You can achieve it by e.currentTarget
$('.fade-anchor').click(function(e){
e.preventDefault();
$(e.currentTarget).css('max-height','none');
$('.fade-anchor').remove();});

Show children/find

I have a few buttons and under every single one there is some div with display:none. All I want to do is to show the div after click under the particular button but it doesn't work and I don't know why. Could someone take a look at it please?
> button
<div class="hideHelper" style="display:none;">
</div>
here goes the script:
<script>
$(".settingsButton").click(function(){
$(this).find(".hideHelper").show();
})
</script>
Your code isn't working because find will search for children of the selector, and the div you wish to show is not a child of the button.
Try next:
$(".settingsButton").click(function(){
$(this).next(".hideHelper").show();
});
You can also find it using siblings as follows:
$(".settingsButton").click(function(){
$(this).siblings(".hideHelper").show();
});

Javascript access nested HTML element from given Javascript object argument

I am trying to write a small script that will automatically reveals/hides the content of a div when the mouse gets over/out of it. What I wanna do is to have the title visible and when someone mouseover the title some more text to get visible.
The problem is that I want to show/hide only a specific inner div of any given element and not to hide the entire element. I do have lots of elements so to handwrite javascripts for every single of them is a bit silly
My HTML code goes like:
<li id="job1" onmouseover ="div2mouseover(this)" onmouseout="div2mouseout(this)">
<div style = "display:none" id="jobDescription">
<p> Blablabla</p>
</div>
<li>
My JavaScript code goes like:
<script type="text/javascript">
function div2mouseover(obj)
{
//obj.style.display = "none"; //I can reach that
obj.getElementById("jobDescription").style.display = "initial"; //I can't reach that
}
</script>
So with the obj.style.display I can edit the visibility of any given element, but I can't reach its inner div that I am trying to reach.
I have managed to do that for a single element like this:
document.getElementById("jobDescription").style.display = "initial";
But with this way I have to write a script for all my job elements, which are a lot.
Any suggestions??
You can reference elements by their position too.
For example if the div you want to display is always the first div inside the "hover" li you can do
function div2mouseover(obj) {
var div = obj.getElementsByTagName("div")[0];
div.style.display = "initial";
}
You don't need any IDs in the divs if you do it like this.
The comment from the friend nnnnnn solved my case.. (maybe the other answers might work as well)
ID is supposed to be unique. Use a class instead, and use obj.querySelector(".classNameHere") – nnnnnn 12 mins ago
Thank you guys!

select a parent with jQuery

Hello I have some HTML that looks like this,
<div id="music_interests">
<ul class="interests">
<li >
<div class="interest inline">
<img src=""/>
<div class="interest_popup">
1 users have this interest.
Remove interest </div>
</div>
</li>
</ul>
When users clicks the remove button I need to select the parent div (in this case music_interests). How would I go about that?
I have tried doing the following,
$(this).parent().parent().parent().parent() but is there a more elegant way?
To complicate things futher I will not actually no the parents ID when in the app as the remove button occurs in 4 or 5 different areas on the page.
you should use closest()
$(this).closest('div#music_interests');
//find the nearest div with id "music_interests"
//if i omitted the id, it retrieves the div with class "interest_popup"
or parents()
$(this).parents('div:eq(1)');
//get ALL the ancestor divs (until it reaches root tag)
//since music_interests is just 2 levels up, use :eq(1)
If the ID of the DIV you want to remove is static you should only use the ID selector (not something like $("div#music_interests")) as the ID selector is directly mapped to the DOM function document.getElementsById which is pretty fast:
$("#music_interests").remove();
If the ID isn't static you could get the UL just like that:
$(function(){ //execute when page has been loaded
$(".remove").click(function(){ //attach click handler
var removeDiv = $(this).closest("ul").parent().remove(); //get next UL -> DIV is its parent
return false; //stop further processing of "click" event
});
});
if remove button always exist in ul tag (in all your 4 or 5 different areas) then you can use the following code.
$(this).closest("ul").parent()
in this case u don't even need to give id to DIV tags

How to control a div, jquery?

Okay, so basically I can't get it to work with parent as the class isn't in the parent div.
CSS:
.contentSlide{
display:none;
}
HTML:
<div class="contentSlide">
<p>Members image on left and comments on the right. Date floated on right, and link to user.</p>
</div>
<div id="button" class="open">Comments(6) ▼</div>
JS:
$(".open").live('click',function(){
$(this).parent(".contentSlide").slideDown();
$(this).html("Close \u25b2 <span style='float:right;' onclick='reply=true;' class='reply'>Post a <a href='javascript:void(0);'>comment</a></span>").removeClass("open").addClass("close");
});
Basically, we want the div class "open" to make the "contentSlide" div slideDown if it is clicked.
We don't want to use $(".contentSlide").slideDown(); as we want this to be global in the event that we have more than one of these contentSlide divs displaying on the page.
In the case of the HTML you've provided and that it's all we have to go by, you would want to use the .prev() function.
$(this).prev().slideDown();
But I would suggest giving it an ID of some sort or a data type.

Categories

Resources