I have a big problem and I cant find the solution...
I must do the tooltip, for example we have this structure:
<body>
**<div class="tooltip">Long text ...</div>**
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
And if I am on h1 I want add to div with class tooltip visibility:visible, how can I do this?
I hope you find the solution to this problem.
You can use jquery .hover() for as h1 and .prepend() for adding div with class .tooltip and visibility: visible something like below
$('h1').hover(function() {
var tooltip = document.getElementsByClassName('tooltip');
if(!tooltip[0]) {
$('body')
.prepend('<div class="tooltip" style="visibility:visible;">Long text ...</div>');
}
});
.tooltip {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
****
<div style="overflow:hidden">
<div class="box">
**<h1>Short text</h1>**
</div>
</div>
</body>
Hope this will help you in some way(y).
Since your tooltip isn't a parent of the h1 you've to go up two levels then get the previous element with the class tooltip :
$('h1').parent().parent().prev('.tooltip').css({'visibility':'visible'});
You could use hover() method to toggle the visibility :
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
Hope this helps.
$('h1').hover(function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'visible'});
},function(){
$(this).parent().parent().prev('.tooltip').css({'visibility':'hidden'});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tooltip" style="visibility:hidden">Long text ...</div>
<div style="overflow:hidden">
<div class="box">
<h1>Short text</h1>
</div>
</div>
When you hover to H1 and you want to add tooltip to the grand parent this will be the answer.
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).addClass('tooltip');
});
//2nd option
$('.box h1').mouseenter(function() {
$(this.parentNode.parentNode.previousElementSibling).css('visibility', 'visible');
});
Read this to know what target you want to use the event/script W3schools.com
Related
I have a div with the following structure. When I click on "btn-edit", I want to remove the "show" class from "contentNote" and add it to "txtAreaNote"; and to add "hide" to "contentNote" and remove it from "txtAreaNote". My jQuery code does not work correctly; how to fix this?
$('.btn-edit').click(function() {
var btn = $(this);
btn.each(function() {
$(this).find(".contentNote").removeClass('show').addClass("hide");
$(this).find(".txtAreaNote").removeClass('hide').addClass("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
find() searches children of the element you're calling it on. Use nextAll() or siblings() to find following matches (or any matches, before or after, in the case of siblings()).
$('.btn-edit').click(function(e) {
e.stopPropagation();
e.preventDefault();
var btn = $(this);
btn.nextAll(".contentNote").removeClass('show').addClass("hide");
btn.nextAll(".txtAreaNote").removeClass('hide').addClass("show");
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cm-1">
edit
delete
<div class="contentNote show">
<p>some text</p>
</div>
<div class="txtAreaNote hide">
<textarea rows="5"></textarea>
</div>
</div>
I dont know your full html structure, but it will be something like :
$('.btn-edit').click(function () {
$(this).closest(".cm-1").find(".contentNote").removeClass('show').addClass("hide");
$(this).closest(".cm-1").find(".txtAreaNote").removeClass('hide').addClass("show");
});
Go to parent class and then search in between two classes.
i need to give popup for all the images displayed under a div
i tried to add div before and after image tag but its not appending properly
this is my following code
<div class="description">
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0"></div>
Expected output
<div class="description">
<div class="fancybox"> //class to be added
<img alt="" src="image.jpg" style="height:350px; width:700px" id="imagepopup0">
</div> // div to be added
</div>
You can use some JQuery for this, but you have to change the html code a bit.
See snippet
$('.imagepopup0').click(function() {
$('.outer').toggle('show');
$('.fancybox').toggle('show');
});
/* Not needed, just for show */
.fancybox {
background-color: blue;
}
.description {
background-color: red;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="description">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0 outer">
<div class="fancybox" style="display: none;">
<img src="http://www.jamfoo.com/chat/smiley.png" class="imagepopup0">
</div>
</div>
JSFiddle
Original answer: jquery, wrap elements inside a div
Could use the .wrapAll() method:
$('#imagepopup0').wrapAll('<div class="fancybox"></div>');
The wrapAll() method will wrap all the elements matched into another element whereas the .wrap() method which wraps the matched elements individually.
Thank you for your suggestion friends i have found a simple solution for that instead of using div i user a tag and fancy box in it
the following code working fine for me
$("#imgid").wrap('<a class ="fancybox" data-fancybox-group="gallery" href="'+srcimg+'" />');
<script type="text/javascript">
// FANCYBOX JS
$(document).ready(function(){
$(".fancybox").fancybox({
// openEffect: "none",
// closeEffect: "none"
});
});
</script>
I have more than one element with the same class name, ideally they will be seven, so, on pageload they will be hidden and then I want to show the extra text when clicking on the anchor, but only for that very instance of the div, my jQuery code is currently removing hidden in all instances of the div, I am guessing the solution would be to add this somewhere. Thanks!
$(".show-more").click(function() {
return $(".extra-text").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
You need to traverse the DOM to find the .extra-text element related to the one which raised the event.
To do this you can use the this keyword which will refer to the element that raised the click event. Try this:
$(".show-more").click(function() {
$(this).closest('div').find(".extra-text").toggleClass("hidden");
});
Use .prev() in this context.
$(".show-more").click(function(e) {
e.preventDefault();
$(this).prev().toggleClass("hidden");
});
Fiddle
.extra-text is sibling to .show-more, so u can use siblings() method to get adjacent sibling element
$(".show-more").click(function() {
$(this).siblings(".extra-text").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
<div>
<p>Text</p>
<p class="hidden extra-text">More text</p>
Show more..
</div>
I have a set of divs built like this with display:none; on .imageholder:
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
</div>
<!--and so on...-->
and this jQuery:
$('.parent').hover(
function() {
$('.imageholder').fadeIn('slow');
},function() {
$('.imageholder').fadeOut('slow');
}
);
When I hover the .parent div all related parent divs are displaying the image.
How can I make the hover state to work just for the actual hovered parent element?
Thanks!
function () {
$(this).find(".imageholder").fadeIn("slow");
}
You can use this in the .hover callback to refer to the hovered (parent) element.
$('.parent').hover(function () {
$(this).find(".imageholder").fadeIn("slow");
});
Try this fiddle you can use .find() method for to point div.
Just like
$(document).ready(function()
{
$('.parent').hover(function() {
$(this).find('.imageholder').fadeIn('slow');
},function() {
$(this).find('.imageholder').fadeOut('slow');
})
});
i'm trying to use jQuery to add/remove a class to an element but I only want to target the '.content' class that is directly above the '.trigger' essentially making each work independently of each other.
Any ideas on the best way to do this?
Thanks in advance
HTML
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
<br />
<div class="instance">
<span class="content showHide">this is hidden</span>
trigger
</div>
CSS
<style type="text/css">
.showHide{
display: none;
}
</style>
JS
<script type="text/javascript">
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$('span.content').toggleClass('showHide');
});
});
</script>
Try using .prev() that will only target the .content element which is a immediately preceding sibling of your .trigger element:
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).prev('span.content').toggleClass('showHide');
});
});
You could also use siblings(). It will only target everything in the same container
$(document).ready(function(){
$('.instance a.trigger').click(function(){
$(this).siblings('span.content').toggleClass('showHide');
});
});
Fiddle
This method will allow the .content to be anywhere in the container, whether it is before or after the .trigger