Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});
Related
So, in dom like this
<div>
<button>Click me</button>
<img src=#>
</div>
<div>
<button>Click me</button>
<img src=#>
</div>
<div>
<button>Click me</button>
<img src=#>
</div>
And script
$("button").click(function() {img.hide() });
How to make js to be executed only in div which contains clicked button? dom is generated, so we cant use specific classes or id's
You can use parent() and find() methods.
$("button").click(function () {
$(this).parent().find('img').hide()
});
Or next() method like following.
$("button").click(function () {
$(this).next('img').hide()
});
Try to use .next() at this context,
$("button").click(function () {
$(this).next('img').hide()
});
Since the image that we need to target is the next immediate sibling of the clicked button.
$("button").click(function() {
$(this).siblings('img').hide();
});
This is only dependent on the current node's structure, and it doesn't matter if the image is before or after the button. You can read more about siblings() here, and a live code example here
I think you are looking for this..
$("button").click(function() {
$(this).next('img').hide();
});
I think this is what you want, see fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/26/
HTML
<div>
<button>Click me</button>
<img src=#>
</div>
<div>
<button>Click me</button>
<img src=#>
</div>
<div>
<button>Click me</button>
<img src=#>
</div>
JQuery
$("button").click(function() {
$(this).siblings('img').hide();
});
I have four different divs with slideToggle function. I set them to slidetoggle on click, and they work fine. However, I want the rest of the divs to close when one div is clicked. can anyone help?
below is the code I have so far.
<div id="01"><p>title</p></div>
<div id="01_sub"><p>content</p></div>
<div id="02"><p>title</p></div>
<div id="02_sub"><p>content</p></div>
<div id="03"><p>title</p></div>
<div id="03_sub"><p>content</p></div>
<div id="04"><p>title</p></div>
<div id="04_sub"><p>content</p></div>
$('#01_sub').hide();
$('#01').click(function() {
$('#01_sub').slideToggle('medium');
});
$('#02_sub').hide();
$('#02').click(function() {
$('#02_sub').slideToggle('medium');
});
$('#03_sub').hide();
$('#03').click(function() {
$('#03_sub').slideToggle('medium');
});
$('#04_sub').hide();
$('#04').click(function() {
$('#04_sub').slideToggle('medium');
});
so basically, if I click #01, I want #02,#03,#04 to stay closed or to be closed. and if I click #02, I want the rest to close.
<div id="01" class="toggle"><p>title</p></div>
<div id="01_sub"><p>content</p></div>
<div id="02" class="toggle"><p>title</p></div>
<div id="02_sub"><p>content</p></div>
<div id="03" class="toggle"><p>title</p></div>
<div id="03_sub"><p>content</p></div>
<div id="04" class="toggle"><p>title</p></div>
<div id="04_sub"><p>content</p></div>
then
var $toggles = $('.toggle'), $subs = $toggles.next().hide();
$toggles.click(function(){
var $next = $(this).next().stop(true, true).slideToggle('medium');
$subs.not($next).slideUp();
});
Demo: Fiddle
You should use something like this:
http://jsfiddle.net/WbYu9/2/
$('.title').click(function(){
$('.showed').removeClass('showed');
$(this).addClass('showed');
$("div[id*='sub']").slideUp();
if($(this).hasClass('showed')){
$("div[id='"+$(this).attr('id')+"_sub']").slideDown();
}
})
this is more elastic form.
I want to add slideUp effect to my page. My <body> code is:
<script>
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
</script>
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
When i click a button nothing happens. Please help.
Wrap it in $(document).ready. Your click handler is being assigned before the #slide_up element is ready for use:
$(document).ready(function(){
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
});
JSFIDDLE http://jsfiddle.net/3uhCa/2/
Nothing wrong with your code. are you loading jquery correctly?
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
I have 6 DIVs that show and hide, triggered by an onClick event. Currently if you click the 6 different pictures that trigger these divs, they all show up on top of eachother.
I would like only one DIV to show up at a time. So when you click a different image, it hides the currently displayed div and shows the new one.
I am guessing I need to loop through these somehow, can anyone point me in the right direction? My code:
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function () {
$(".slidingDiv2").slideToggle();
});
$(".slidingDiv3").hide();
$(".show_hide3").show();
$('.show_hide3').click(function () {
$(".slidingDiv3").slideToggle();
});
$(".slidingDiv4").hide();
$(".show_hide4").show();
$('.show_hide4').click(function () {
$(".slidingDiv4").slideToggle();
});
$(".slidingDiv5").hide();
$(".show_hide5").show();
$('.show_hide5').click(function () {
$(".slidingDiv5").slideToggle();
});
$(".slidingDiv6").hide();
$(".show_hide6").show();
$('.show_hide6').click(function () {
$(".slidingDiv6").slideToggle();
});
});
</script>
Not completely sure if this is what you're going for, but something like this might work:
HTML:
<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->
<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->
JQuery:
$("img").click(function () {
$("div").slideUp(190); // hide divs previously shown
var divSelect = $(this).attr('class'); // get class of div to show
$("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});
WORKING EXAMPLE
I am still working on simplifying it, but it works. You will have to repeat it to every div, giving different selector names. When I figure a loop out, I will let you know.
Good luck!
<!--HTML starts-->
<div class="med-wrap-video">
<div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
<br>
Read More</p>
<br>
<span class="selector1">
<p class="body-text">
Title: <br>
Composer: <br>
Year: <br>
</p>
</span>
</div>
</div>
<!--JS begins-->
$(document).ready(function(){
$(".selector1").hide();
$(".a selector").click(function(event){
event.preventDefault(); //prevents page to reload
$(".selector1").slideToggle(600);
$(this).toggleClass(".selector1");
});
The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)