How to select div whith jquery from inside another div - javascript

so I have this html:
<div>
<div>
<a class="member-img" href="#" >
<img src="image.jpg" alt="member">
</a>
</div>
<div class="member-bar">
</div>
</div>
and i try to select "member-bar" when the user hovers "member-img"
$('.member-img').hover(function(){ $(this).closest(".member-bar").slideDown() });
but it doesn't seem to work, any help for this code ?

member-bar would need to be a parent of member-img in order for that to work. You need to first find the parent, then find member-bar as a sibling:
$(".member-img").hover(function() {
$(this).parent().next(".member-bar").slideDown();
});
Here's a fiddle for the above code

Related

Add div before the div using jQuery

I have this HTML:
<p></p>
<div class="comment_like">
<span class="reaction_2 tooltipstered" id="like13seperator2" rel="unlike"><i
class="likeIconDefault"></i>Like</span>
</div>
Now I want to add this div: <div class="commentLikeCount"></div> before this comment_like class using jQuery.
I am trying with this code:
$("#like"+posts_id).parents(".comment_like").prepend('<div class="commentLikeCount"></div>');
but somehow not working :(
Updated for the new Questions:
Now I have that HTML:
<p></p>
<div class="commentLikeCount">
<br>
<span class="float-right"> 1</span>
<img src="assets/images/db_haha.png" alt="" class="float-right old">
<img src="assets/images/db_love.png" alt="" class="float-right">
</div>
<div class="comment_like">
<span class="unLike_2" id="like13seperator2" rel="unlike">
<i class="loveIconSmall likeTypeSmall"></i>Love
</span>
</div>
Now, I just want to remove the last Img from the coomentLikeCount class.
You can use insertBefore:
$('<div class="commentLikeCount" />')
.insertBefore($("#like"+posts_id).parents(".comment_like"))
Or before:
$("#like"+posts_id).parents(".comment_like")
.before('<div class="commentLikeCount" />')
If you're inserting commentLikeCount in every .comment_like, then just use $('.comment_like') instead of $("#like"+posts_id).parents(".comment_like")
Regarding your comment:
well if I already have this div then how can select this div?
You can prepend using insertBefore like:
$('.commentLikeComment').insertBefore($("#like"+posts_id).parents(".comment_like"));
To your updated question, you can remove last image like:
$('.commentLikeCount img').last().remove()
You can do with before().
$(".comment_like").before("<div class='commentLikeCount'></div>");

Add number to end of div with jQuery

I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.
Here is my jQuery:
$('#science-panel-1').hover(function(){
$('#iphone-screen-1').addClass('active');
},function(){
$('#iphone-screen-1').removeClass('active');
});
$('#science-panel-2').hover(function(){
$('#iphone-screen-2').addClass('active');
},function(){
$('#iphone-screen-2').removeClass('active');
});
$('#science-panel-3').hover(function(){
$('#iphone-screen-3').addClass('active');
},function(){
$('#iphone-screen-3').removeClass('active');
});
My HTML:
<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-2" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-3" class="science-panel__item">
Content goes in here!
</div>
</div>
<div class="col-md-4">
div id="iphone-screen-1" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
div id="iphone-screen-2" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-3" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-4" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-5" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-6" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
</div>
<div class="col-md-4">
<div id="science-panel-4" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-5" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-6" class="science-panel__item">
Content goes in here!
</div>
</div>
This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.
This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...
$("[id^=science-panel-]").hover(function() {
// get the corresponding iphone-screen element id
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).addClass("active");
},function() {
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).removeClass("active");
});
I recommend changing the markup to include the data you need to drive the script:
<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This allows you to select all the science panel items at once:
$('.science-panel__item')
and perform the exact same script on each of them:
$('.science-panel__item').hover(function () {
$($(this).data('target')).addClass('active');
// ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
$($(this).data('target')).removeClass('active');
});
If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:
$('[data-hover-target]').hover(function () {
$($(this).data('hoverTarget')).addClass('active');
}, function () {
$($(this).data('hoverTarget')).removeClass('active');
});
I'd firstly ask if the active class is strictly necessary? Can what you want be achieved with CSS if it is for styling only by using the :hover pseudoclass?
If you do need the .active class for some reason, I would change the markup to be a little more generic so that all the science panels had a CSS class of .science-panel and all the iphone screens had a class of .iphone-screen. Then you could simplify the JS to look like
$('.science-panel').on('mouseenter mouseleave', function(e) {
$(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});
This will find the .iphone-screen inside of the .science-panel that you hover over and toggle the class to on if the mouse enters and off when the mouse leaves it.
edit: I see you've updated your answer to include your markup, this answer was assuming that your iphone-screens were nested in the science-panels so this won't necessarily work for you if you don't/can't nest your markup

JavaScript/jQuery guidance needed

Today I am building my self a vertical navigation menu and I'm wondering how I would go about build a particular feature I was thinking of.
Here is the coding behind my buttons:
html:
<div class="button"><a href="#">
<img src="../images/article.png" />
<p>Articles</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/leaderboards.png" />
<p>Leaderboards</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/events.png" />
<p>Events</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/search.png" />
<p>Search</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/other.png" />
<p>Other/Tools</p></a>
</div>
css:
.button{
border-left:10px solid #e5dad6;
padding-left:5px;
margin-bottom:20px;
width:120px;
height:120px;
text-align:center;
}
My Goal:
Now my goal is to change the image of the relevant buttons when a user hovers over the whole div (button div), now of course I can do this by adding a hover state in css, but that's not what I want to do, because I don't want to just change that particular div.
What I want:
I want it so I can basically say = if .button is being hovered over, then change the img src of something else on the page, NOT change something related to the element being hovered over.
Do something like this with jQuery:
$(document).ready(function() {
var oldSrc = $('.myNewImage').attr('src');
$('.button').hover(function() {
//on hover of your element
$('.myNewImage').attr('src','http://mynewimagesrc.com');
}, function() {
//when the cursor leaves your element
$('.myNewImage').attr('src', oldSrc);
});
});
You'll have to switch out the .myNewImage, class for the actual class of the image on your page but that should work for what you're asking. It also assigned the original source of your image so that you can always return the element back to it.
you may want to check .hover() for jQuery
You can do what you want really easy with jquery.
<div class="button" id="article_button"><a href="#">
<img src="../images/article.png"/>
<p>Articles</p></a>
</div>
$('.button').on('hover', function(){
$('#some_other_element').data('oldimg', $('#some_other_element').attr('src')).attr('src','other_image.jpg');
}, function(){
$('#some_other_element').attr('src', $('#some_other_element').data('oldimg'));
});

Retrieve child node from parent node

I have created a document with html. I want to retrieve child node from the root node for that I am using following code...
That is HTML.
<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
javascript.
function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}
However, That is not working. I have tried finding the problem but cant solve it... Any help ?
If you want to get the first child element only:
var element = document.getElementById('Main1').children[0];
If you want to get the first anchor element:
var element = document.getElementById('Main1').getElementById('Middle1');
getElementById is a method of Document, not Element. Try this:
<script type="text/javascript">
function RetrieveElement(element){
window.alert(document.getElementById("Middle1").innerHTML);
}
</script>
<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
I'm Middle.
</div>
<div id="Bottom1">
</div>
Can you use jQuery?
It would be as easy as this

How to replace one div with another when clicking the html hyperlink [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Replace Div with another Div
Hi,
I have got 2 navigation menus, what I want to do when a client click on a link of first menu , the div id="img" should be replaced by div id="img2" , similarly when i click on the link of menu 2 div id="img2" should be replaced by div id="img" . Any ideas or suggestions ..
Something like this might help you:
//Using jQuery Change div attribute "id" on click:
$('#link_1_id').click(function(){
$('#img').attr('id','img2');
});
Edit: Oops didnt understand the question. To replace a div with another when clicking a link element:
HTML:
Press me
Press me
<div id="div_1"> Content1 </div>
<div id="div_2"> Content2 </div>
Jquery:
$(document).ready(function(){
// Hide div 2 by default
$('#div_2').hide();
$('#link_2').click(function(){
$('#div_1').hide();
$('#div_2').show();
});
$('#link_1').click(function(){
$('#div_2').hide();
$('#div_1').show();
});
});
To add sliding effects take a look at .slideDown() or slideUp().
http://api.jquery.com/slideDown/
Try this:
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
in html
Menu 1
Menu 2
<div id="img">
//--- div content
</div>
<div id="img2">
//--- div content
</div>
in js:
function changeDiv(i){
if(i==1)
document.getElementById("img").innerHTML = document.getElementById("img2").innerHTML;
else
document.getElementById("img2").innerHTML = document.getElementById("img").innerHTML;
}
Try this:
HTML:
<a class="link_1" href="#">Link 1</a>
<a class="link_2" href="#">Link 2</a>
<div class="main" style="width:170px;height:170px;border:1px solid #000;overflow:hidden;padding:10px;position:relative;left:0;top:50px">
<div class="wrapper" style="width:350px;position:absolute">
<img src="image/Example.jpg" class="image_1 image" style="margin:10px;display:inline;height:150px; width:150px"/>
<img src="image/pr_4.jpg" class="image_2 image" style="margin:10px;display:inline;height:150px; width:150px"/>
</div>
</div>
JQUERY:
$('.link_1').click(function(){
$('.wrapper').animate({'left':'-170px'},'linear');
});
$('.link_2').click(function(){
$('.wrapper').animate({'left':'10px'},'linear');
});

Categories