I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
Related
It is possible with jQuery to get value of ID of pop-up-custom which is ideation if user click on <span> element which is nested inside pop-up-custom class ?
<div class="elementor-element pop-up-custom" id="ideation" data-widget_type="eael-lightbox.default">
<div class="elementor-widget-container">
<div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff" class="eael-lightbox-wrapper" data-trigger="eael_lightbox_trigger_button" data-lightbox-id="lightbox_639c25cc43a03" data-type="inline" data-src="#eael-lightbox-window-639c25cc43a03" data-popup-layout="eael-lightbox-popup-standard" data-main-class="eael-lightbox-modal-popup-cf4e9a1" data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated " data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
<div class="eael-lightbox-btn">
<span id="btn-eael-lightbox-639c25cc43a03" class="eael-modal-popup-button eael-modal-popup-link eael-modal-popup-link-639c25cc43a03 elementor-button elementor-size-md">Request</span></div><!-- close .eael-lightbox-btn -->
</div>
</div>
Reason why I am asking for such logic is because code is getting generated by buider and I have access to change the id and class of top element, So ultimately goal is to when user click on <span> then I want to grab the id of top element.
jQuery(".pop-up-custom > span").click(function() {
console.log(this.id);
});
$(".pop-up-custom span").click(function() {
console.log($(this).parents('.pop-up-custom').attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element pop-up-custom" id="ideation" data-widget_type="eael-lightbox.default">
<div class="elementor-widget-container">
<div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff" class="eael-lightbox-wrapper" data-trigger="eael_lightbox_trigger_button" data-lightbox-id="lightbox_639c25cc43a03" data-type="inline" data-src="#eael-lightbox-window-639c25cc43a03" data-popup-layout="eael-lightbox-popup-standard" data-main-class="eael-lightbox-modal-popup-cf4e9a1" data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated " data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
<div class="eael-lightbox-btn">
<span id="btn-eael-lightbox-639c25cc43a03" class="eael-modal-popup-button eael-modal-popup-link eael-modal-popup-link-639c25cc43a03 elementor-button elementor-size-md">Request
</span>
</div><!-- close .eael-lightbox-btn -->
</div>
</div>
</div>
You can covert this into a jQuery object using $(this) so that you can then call the .closest() method which will traverse up the span's elements to find the element with pop-up-custom class. You can then grab its id using attr('id'). See example below:
jQuery(".pop-up-custom span").click(function() {
console.log($(this).closest(".pop-up-custom").attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element pop-up-custom" id="ideation" data-widget_type="eael-lightbox.default">
<div class="elementor-widget-container">
<div data-lightbox-type="lightbox_type_custom_html" data-lightbox-type-url="" data-lightbox-trigger-pageload="1" data-lightbox-closebtn-color="#ffffff" class="eael-lightbox-wrapper" data-trigger="eael_lightbox_trigger_button" data-lightbox-id="lightbox_639c25cc43a03"
data-type="inline" data-src="#eael-lightbox-window-639c25cc43a03" data-popup-layout="eael-lightbox-popup-standard" data-main-class="eael-lightbox-modal-popup-cf4e9a1" data-close_button="yes" data-esc_exit="yes" data-click_exit="yes" data-effect="animated "
data-trigger-element=".eael-modal-popup-link-639c25cc43a03">
<div class="eael-lightbox-btn">
<span id="btn-eael-lightbox-639c25cc43a03" class="eael-modal-popup-button eael-modal-popup-link eael-modal-popup-link-639c25cc43a03 elementor-button elementor-size-md">Request</span>
</div> <!-- close .eael-lightbox-btn -->
</div>
</div>
</div>
How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view
setting html page
<!-- page content -->
<div class="whole">
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit"> // <-- Click to hide "whole" class
<div class="col-md-12 col-sm-12 col-xs-12">
<a ui-sref=".user">Users & practitioners</a>
</div>
</div>
</div>
</div>
<div ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
</div>
<!-- /page content -->
I don't want a jquery solution.. all i need a angular of pure javascript solution
<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var
Ideally you'll use a controller variable (ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.
Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.
<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
var wholeDiv = document.getElementsByClassName(".whole");
wholeDiv.style.display = 'none';
}
I am trying create drop zones programmatically, but it doesn't work.
HTML Code:
<div class="content-wrap">
<div class="row">
<script type="text/javascript">
$(function() {
$("div#myDropZone").dropzone({
url : "/file-upload"
});
});
</script>
<div class="col-sm-12">
<div class="nest" id="DropZoneClose">
<div class="title-alt">
<h6>DropZone</h6>
</div>
<div class="body-nest" id="DropZone">
<div id="myDropZone" >
</div>
<button style="margin-top: 10px;" class="btn btn-info"
id="submit-all">Submit all files</button>
</div>
</div>
</div>
</div>
</div>
The drop zone in <div id="myDropZone"> not appers!
best regards :)
You need to give your #myDropZone div some width and height so that it takes up space. Heres a jsfiddle.
Alternatively, you can add the dropzone class to your div to get the default styling that you see in the demos. Heres the jsfiddle for that.
Add class dropzone to the div element which holds your drop zone.
Hope that you have added the dropzone stylesheet to your page.
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/
When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});
Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..