Find DIV by class under parent DIV - javascript

I have several DIV elements nested under a parent container. When the user clicks on one of these cp-anchor, I want to modify the CSS on a different one cp-content. I've tried dozens of methods found on Stack Overflow but for some reason it just doesn't seem to work as expected. Can anyone help point me in the correct direction?
Here is a JSFiddle of the example I am using.
<script type="text/javascript">
$( document ).ready(function()
{
$('.cp-anchor').click(function(e)
{
e.preventDefault();
$(this).parent().find('cp-content').css('max-height','none');
$(this).remove();
});
});
</script>
<div class="cp-container">
<div class="cp-content">
<table id="tablepress-4">
</table>
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

You need a . to signify a class selection.
// v
$(this).parent().find('.cp-content').css('max-height','none');
$(document).ready(function() {
$('.cp-anchor').click(function(e) {
e.preventDefault();
$(this).parent().find('.cp-content').css('max-height', 'none');
$(this).remove();
});
});
.cp-content {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
<div class="cp-content">
CP CONTENT
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>
Here's a vanilla JS version:
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.cp-anchor')
.forEach(el => el.addEventListener("click", showContent));
function showContent(e) {
e.preventDefault();
this.parentNode.querySelector('.cp-content').style.maxHeight = 'none';
this.remove();
}
});
.cp-content {
max-height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp-container">
<div class="cp-content">
CP CONTENT
</div>
<div class="cp-anchor"><span class="cp-anchor-text">Show Full Contents</span></div>
</div>

in Js use following one line of code:
$(this).parent().find('.cp-content').css('max-height','none');

Related

Javascript - How to turn this into a simple function

$(document).ready(function()
{
// $('.pull-me').click(function()
// {
// $('.login').slideToggle('slow')
// });
$('#thumbnail1').mouseenter(function()
{
$('#thumbnailTitle1').css('visibility', 'visible')
});
$('#thumbnail1').mouseleave(function()
{
$('#thumbnailTitle1').css('visibility', 'hidden')
})
$('#thumbnail2').mouseenter(function()
{
$('#thumbnailTitle2').css('visibility', 'visible')
});
$('#thumbnail2').mouseleave(function()
{
$('#thumbnailTitle2').css('visibility', 'hidden')
})
$('#thumbnail3').mouseenter(function()
{
$('#thumbnailTitle3').css('visibility', 'visible')
});
$('#thumbnail3').mouseleave(function()
{
$('#thumbnailTitle3').css('visibility', 'hidden')
})
});
I'm very new to Javascript but am trying to learn. I aware this is jQuery but would like to know if there is a quicker way to do this code, like create a smaller function that i can call up to display/hide the text.
Because i will be adding more thumbnails and i don't want to have to write it all out for every photo and text that i display on the photo.
You can use bind a single event handler using Multiple Selector, In the event handler create the targeted selector using the current element this id property.
$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
$(selector).css('visibility','visible');
}, function(){
var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
$(selector).css('visibility','hidden');
})
However I would recommend you to establish the relationship using custom data-* prefixed attribute. Here example
$('.thumbnail').hover(function() {
$('#' + this.dataset.target).toggleClass('hidden');
}, function() {
$('#' + this.dataset.target).toggleClass('hidden');
})
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="thumbnail" data-target="thumbnailTitle1">thumbnail 1</span>
<span class="thumbnail" data-target="thumbnailTitle2">thumbnail 2</span>
<span class="thumbnail" data-target="thumbnailTitle3">thumbnail 3</span>
<div class="hidden" id="thumbnailTitle1">thumbnailTitle1</div>
<div class="hidden" id="thumbnailTitle2">thumbnailTitle2</div>
<div class="hidden" id="thumbnailTitle3">thumbnailTitle3</div>
The following is an option.
( function( $, window, undefined ) {
var handle_mouse_events = function handle_mouse_events( thumbnail_selector, thumbnail_title_selector ) {
$( thumbnail_selector ).mouseenter(
function() {
$( thumbnail_title_selector ).css( 'visibility', 'visible' );
}
);
$( thumbnail_selector ).mouseleave(
function() {
$( thumbnail_title_selector ).css( 'visibility', 'hidden' );
}
);
};
handle_mouse_events( '#thumbnail1', '#thumbnailTitle1' );
handle_mouse_events( '#thumbnail2', '#thumbnailTitle2' );
handle_mouse_events( '#thumbnail3', '#thumbnailTitle3' );
} )( jQuery, this );
.image_container > div {
display : inline-block;
width : 150px;
height : 200px;
}
span {
visibility : hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_container">
<div id="thumbnail1">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<span id="thumbnailTitle1">Title #1</span>
</div>
<div id="thumbnail2">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<span id="thumbnailTitle2">Title #2</span>
</div>
<div id="thumbnail3">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
<span id="thumbnailTitle3">Title #3</span>
</div>
</div>
Use classes instead of ID's if you want to target similar elements with a behaviour.
The function itself is correct. The problem is that you have structured your HTML with unique ID's for every image. Trying to fix the problem by writing functions that target your unique ID's is the wrong approach, the underlying problem is your usage of ID's to target the element in the first place.
$(document).ready(function() {
$('.thumbnail').on('mouseenter', function() {
$(this).find('.thumbnail-title').css('visibility', 'visible');
})
$('.thumbnail').on('mouseleave', function() {
$(this).find('.thumbnail-title').css('visibility', 'hidden');
})
});
In the code snippet above you can see that every element with a class of thumbnail is selected. When the user hovers over a thumbnail you can reference the currently hovered element (with $(this)) and find the child element with the class thumbnail-title.
This is the simplest approach to sharing behaviour across elements of the same type.
Here's a working fiddle: https://jsfiddle.net/wq5r97ep/2/
EDIT: You can of course abstract this away into a plugin or just a general function. But this is the basic idea.
Something like this:
function handleEventsFor(index) {
$('#thumbnail' + index).mouseenter(function() {
$('#thumbnailTitle' + index).css('visibility', 'visible')
});
$('#thumbnail' + index).mouseleave(function() {
$('#thumbnailTitle' + index).css('visibility', 'hidden')
})
}
And call it like this:
handleEventsFor(1);
handleEventsFor(2);
Or like this:
for(var i = 0; i < 5; ++i) {
handleEventsFor(i);
}
You can try like this also,
Lets say your HTML
<div id="thumbnails">
<div><img class="thumbnails" src="" /></div>
<div><img class="thumbnails" src="" /></div>
<div><img class="thumbnails" src="" /></div>
<div><img class="thumbnails" src="" /></div>
</div>
Jquery
$(document).ready(function(){
$("#thumbnails").find('.thumbnails').mouseenter(function(){
var visibility = $(this).css('visibility');
if(visibility == 'hidden'){
$(this).css('visibility', 'visible');
}
});
$("#thumbnails").find('.thumbnails').mouseleave(function(){
var visibility = $(this).css('visibility');
if(visibility == 'visible'){
$(this).css('visibility', 'hidden');
}
});
});
I would write a simple visibleHover plugin for it. Using it will work like this
$(selectorForThumbnails).visibleHover(selectorForText);
Or as the example shows
// '.thumbnail' is the class of the parent elements
// 'span' is the selector for the children text elements
$('.thumbnail').visibleHover('span');
You can customize these inputs to match any HTML structure you have.
Click the Run code snippet button below to see it work
(function($) {
$.fn.visibleHover = function(selector) {
return this.each(function(idx, elem) {
$(elem).hover(
function() { $(selector, elem).css('visibility', 'visible'); },
function() { $(selector, elem).css('visibility', 'hidden'); }
);
});
};
})(jQuery);
$('.thumbnail').visibleHover('span');
.thumbnail {
float: left;
margin-right: 10px;
}
.thumbnail .image {
width: 100px;
height: 100px;
background-color: #eee;
}
.thumbnail span {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
<div class="image"></div>
<span>Text A</span>
</div>
<div class="thumbnail">
<div class="image"></div>
<span>Text B</span>
</div>
<div class="thumbnail">
<div class="image"></div>
<span>Text C</span>
</div>
Referencing by ID (i.e. $('#thumbnailn')) is very specific. You can make broader references by accessing tags or other attributes such as class instead.
Something like:
HTML:
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle1"></span>...</div>
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle2"></span>...</div>
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle3"></span>...</div>
JavaScript:
$(".thumbnails").mouseenter(function() {
$(this).children("span").css('visibility', 'visible');
}).mouseleave(function() {
$(this).children("span").css('visibility', 'hidden');
});
In the above example I show how to reference a class (i.e. $(".thumbnails")) and a tag (i.e. ("span")) using JQuery
Using JQuery
$('#thumbnail3').mouseleave(function(e)
{
$(e.target).hide();
})
Using css.
#thumbnail3:hover {display:none}
Writing the whole thing inside a loop is one option.
for(var i = 1; i <= whatever_your_length_is; i++) {
$('#thumbnail' + i).mouseenter(function() {
$('#thumbnailTitle' + i).css('visibility', 'visible');
};
$('#thumbnail' + i).mouseleave(function() {
$('#thumbnailTitle' + i).css('visibility', 'hidden');
});
}

JQuery FadeIn and FadeOut with button issue

I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it
Here is the Jsfiddle: https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
See DEMO
Please use this code:
$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
hideTitle($(this))
});
function showTitle(target) {
target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
if (!showAllFlag) {
target.find('h1').stop().fadeOut();
}
}
function showAllTitles() {
$('.info-box h1').show();
showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);
});
Or follow by this link: enter link description here
Change your function to this:
$(function() {
$('#div1').hover(function() {
$('#div1h1').fadeIn();
});
});
$(function() {
$('#div2').hover(function() {
$('#div2h2').fadeIn();
});
});
$(function() {
$('#div3').hover(function() {
$('#div3h3').fadeIn();
});
});
Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.
Just don't trigger the fadein if its already visible?
$('#div1').not(":visible").hover(function() {
$('#div1h1').fadeIn();
},
edit - My bad i didn't see that comma :), gimme a second

Jquery attr not working Internet Explorer

I have the code below that clicking on an image hides a div.
Works perfectly, but does not work in IE ...
Why?
http://jsfiddle.net/mtsys/6qAfp/
codes:
$(document).ready(function () {
$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
$('.mais').click( function() {
var status = $(".nav").attr("hidden");
if (status)
{
$(".nav").attr("hidden",false);
}
else
{
$(".nav").attr("hidden",true);
}
});
});
HTML:
<div class="header">
Estágio
<div class="mais"></div>
</div>
<div class ="parent">
<div class="content">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>
</div>
tks
Use .hide() and toggle() to change the display of the elements
$('.fechar').click(function () {
$(".nav").hide()
});
$('.mais').click(function () {
$(".nav").toggle()
});
Demo: Fiddle
Why not change your JS to:
$('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
$('.mais').click( function() {
$(".nav").toggle();
});
This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...

Toggle a div to be closed on load?

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 :)

How to show a nested div on hover? -- JQuery beginner

I have a long list of HTML in this format:
<div id="item555">
Some name
show details
Action
</div>
<div id="details555">
Some details
</div>
I can't figure out how to:
Show the Action button only when the item div is hovered.
Show the Details box when the Show details link is clicked.
I know this is really basic js stuff! :(
I've made a few amendments to your javascript, HTML and CSS, here's a fiddle with everything working.
I also made sure the code is not broken by having repeated elements.
JS
$(".item-container").hover(
function() {
$(".action", this).show()
},
function() {
$(".action", this).hide()
}
);
$(".details").click(function(e) {
e.preventDefault();
var detailsDiv = $(this).parent().next("DIV");
detailsDiv.toggle();
if (detailsDiv.is(":visible")) {
$(this).text("Hide details")
}
else {
$(this).text("Show details")
}
});
CSS
.action, .details-container { display: none; }
First of all, I updated your markup a bit:
<div id="item555" class="item">
Some name
show details
Action
</div>
<div id="details555" class="details">
Some details
</div>
Then I would use something like this in jQuery.
$('.show-details').click(function() {
$(this).parent('div').next('div.details').show();
});
$('.item').hover(function() {
$(this).find('.action-button').show();
}, function();
You can try with having different class attached to your elements. Hope this code helps
<html>
<head>
<title>Test Show Hide Div</title>
<script src="jquery.1.6.1.min.js"></script>
<style>
.item {
color: red;
}
.anchorDetails {
color: green;
}
.anchorAction {
color: blue;
display: none;
}
.noDisplay {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.item').hover(function() {
$('.noDisplay').toggle();
});
$('.anchorDetails').click(function() {
$('.anchorAction').toggle();
});
});
</script>
</head>
<body>
<div id="item555" class="item">
Some name show details Action
</div>
<div id="details555" class="noDisplay">Some details</div>
</body>
</html>
$('div#item555').hover(function() { $('a#button555').show(); })
You should here specify a classname or, better, an ID for show details, you could do it inline though. But, assume, it's id is 'show-detail':
$('a#show-detail').click(function() { $('div#details555).show() });
Please, notice, I've used tag#id to increase performance. jQuery selects elements a way much faster if you specify tagname. If you are using an ID, it is not that big deal, but if you use $('.classname') selector and you know all your .classname are divs, it's much better to use $('div.classname')
P.S. if you are looking for more generic way, you probably better look at other answers.
<div id="item555">
Some name
show details
Action
</div>
<div id="details555" style="display:none">
Some details
</div>
$("div[id^='item']").hover(function() {
$(this).find(".action").toggle();
}).delegate(".showDetails", "click", function(e) {
e.preventDefault();
$(this).parent().next("div").toggle();
});
Demo.
You could use the .hover function
with the toggle()
Look at this fiddle :
http://jsfiddle.net/ADLLR/

Categories

Resources