On my web app, I have a div that hides when clicked. Then a new div (video) appears. My problem is that I have an upvote button and a link in the first div, but if you click those, the div hides and pops up the video instead of the wanted functionality.
How can I have it so if they click the button or the link, it doesn't hide the first div and show the video?
<script type="text/javascript">
$(function () {
$('.videoDiv').hide();
$('.firstDiv').on('click', function () {
$('.videoDiv').show();
$('.firstDiv').hide();
});
});
</script>
First Div:
<div class="panel-body firstDiv">
<div class="col-xs-7 col-sm-8 col-md-7">
<a class="btn btn-xs btn-info" rel="nofollow" data-method="put" href="/startups/1/follow">Follow</a>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="btn-group-vertical pull-right" role="group">
<a class="btn btn-sm btn-default pull-right upvote-btn" data-type="json" data-remote="true" rel="nofollow" data-method="put" href="/startups/1/upvote">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</div>
</div>
</div>
Video Div:
<div class="panel-body videoDiv">
<div class="video-js-box">
<video id="" class=" video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="" data-setup="{}">
</video>
</div>
</div>
Exclude events for link /upvote button that is, apply click function on div and check it is not on .btn only then execute your statements. Also, you need to check if target is not child of .btn
<script type="text/javascript">
$(function () {
$('.videoDiv').hide();
$('.firstDiv').on('click', function (e) {
if (!$(".btn").is(e.target) //not clicked on .btn
&& $(".btn").has(e.target).length === 0) //clicked thing is not child of .btn
{
$('.videoDiv').show();
$('.firstDiv').hide();
}
});
});
</script>
Try utilizing .is() , calling .show() , .hide() if e.target does not have btn class
$(function () {
$(".videoDiv").hide();
$(".firstDiv").on('click', function (e) {
if (!$(e.target).is(".btn")) {
$(".videoDiv").show();
$(".firstDiv").hide();
};
});
});
Related
I have a wordpress query looping through posts on a page. Each .audio-box has 2 .play buttons that I need to work together, when one is clicked I want the other one in that div to do the same. The problem is i have multiple audio-box divs on the page. I just need the 2 play buttons in that specific .audio-box div to work at the same time not all the others.
This is the html I have:
<div class="audio-box">
<div class="audio-btn">
<img src="image/path.jpg" alt="play" />
</div>
<div class="audio-content">
<div class="date">Published 18/01/20</div>
<h2>title</h2>
<p>content</p>
</div>
<div style="clear:both;"></div>
<div class="audio-player play-wrap">
<audio id="player" class="music">
<source src="path/to/audio.mp3" type="audio/mpeg" />
</audio>
<div id="audio-player">
<div id="controls">
<i id="play" class="fa fa-play play"></i>
<div id="progressbar"></div>
<span id="time" class="time">00:00</span>
<i id="mute" class="fa fa-volume-up"></i>
<div id="volume"></div>
</div>
</div>
<i class="fa fa-play play"></i>
</div>
</div>
This is the javascript that i have:
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$('.play').toggleClass("fa-pause", !player.paused);
$('.play').toggleClass("fa-play", player.paused);
});
I know the issue is because I am saying toggle class on the .play element but is there any way to say that .play element within that specific .audio-box div?
The following will look upward from the clicked button, to the next parent .audio-box
and will unfold the action on the .play elements it finds in it somewhere:
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$(this).closest('.audio-box')
.find('.play')
.toggleClass("fa-pause", !player.paused)
.toggleClass("fa-play", player.paused);
});
$(".audio-box").click(()=>{
$(".audio-box").children().css({"color": "red", "border": "2px solid red"});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am a newbie to jQuery and need to change the class of the parent div.
When the user clicks on "Toggle Class" button, the class of the parent div changes from "col-md-8" to "col-md-4" and the height attribute of the image changes from "500" to "300". Can anyone suggest me a solution to this problem.
My html code is
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Image</strong>
<button class="btn btn-default" style="float:right;">Toggle Class</button>
</div>
<div class="panel-body">
<img class="img-responsive" height="500" src="http://lorempixel.com/750/500/" />
</div>
</div>
</div>
You've added the class='img-responsive' inside your image element. This is a Bootstrap class which converts your image into a responsive one.
It means that will resize itself as you resize its parent div.
Bootstrap responsive images: http://v4-alpha.getbootstrap.com/content/images/#responsive-images
To change the parent div, add an id='parent' to the div and an id='toggle' for your button. Also, in your button, instead of style='float:right' you can add a class called pull-right. It's the same thing.
<div class="col-md-8" id='parent' >
<div class="panel panel-default">
<div class="panel-heading">
<strong>Image</strong>
<button class="btn btn-default pull-right"
id='toggle'>Toggle Class</button>
</div>
<div class="panel-body" style=''>
<img class="img-responsive" height='500'
src="http://lorempixel.com/750/500/" />
</div>
</div>
</div>
Jquery
$(document).ready(function(){
$('#toggle').on('click',function(){
$('#parent').toggleClass('col-md-4');
});
});
Cheers! :)
Here you go, the code you need is:
var $div = $('#div');
var $img = $('#img');
$('button').on('click', function() {
if ($div.hasClass('col-md-8')) {
$div.removeClass('col-md-8');
$div.addClass('col-md-4');
$img.attr('height', 300);
} else {
$div.removeClass('col-md-4');
$div.addClass('col-md-8');
$img.attr('height', 500);
}
});
Add div ID to your div, and img ID to your image (or target them by the class or tag name).
I have multiple(it can be 100+) collapsible div (using bootstrap)
<div>
<a href="#id1" data-toggle="collapse">
<div class="col-lg-12">Title</div>
<div class="image">Image</div>
</a>
<div id="id1" class="collapse">
<div class="col-lg-12">Description</div>
</div>
</div>
<div>
<a href="#id2" data-toggle="collapse">
<div class="col-lg-12">Title</div>
<div class="image">Image</div>
</a>
<div id="id2" class="collapse">
<div class="col-lg-12">Description</div>
</div>
</div>
And have Jquery
$('#id1').on('show.bs.collapse', function () {
$(".image").addClass('hidden');
});
$('#id1').on('hidden.bs.collapse', function () {
$(".image").removeClass('hidden');
});
I want to add hidden class on show.bs.collapse(this is from bootstrap) and remove hidden class on hidden.bs.collapse'With the jq code above I can do this just with one div that has id1. But how can I do this independently?
Try not to subscribe on the elements by ids but by element type
$('a').on('show.bs.collapse', function () {
$(this).next().find("div.image")[0].addClass('hidden');
});
$('a').on('hidden.bs.collapse', function () {
$(this).next().find("div.image")[0].removeClass('hidden');
});
Where
$(this)
should return a pointer to the collapsed/uncollapsed element
next()
should move pointer to the next element ( div id="id1" as example)
find("div.image")[0]
will find div with class "image" and take the first found element
then you can hide the image in this block or show it without using ids
If you're using
$(".image").addClass('hidden');
this will hide all the images in all blocks (not only in that one that has been collapsed)
Id refers to one element on the DOM therefore you should use classes instead. Therefore you should select divs based on their classes.
The following is a possible solution:
<div>
<a href="#id1" data-toggle="collapse">
<div class="col-lg-12">Title</div>
</a>
<div class="some-class collapse ad-col-2">
<div class="col-lg-12">Description</div>
<div class="image"></div>
</div>
</div>
<div>
<a href="#id2" data-toggle="collapse">
<div class="col-lg-12">Title</div>
</a>
<div class="some-class collapse ad-col-2">
<div class="col-lg-12">Description</div>
<div class="image"></div>
</div>
</div>
Jquery:
$('.some-class').on('show.bs.collapse', function () {
$(".image").addClass('hidden');
});
$('.some-class').on('hidden.bs.collapse', function () {
$(".image").removeClass('hidden');
});
See Here i create my css file for show paragraph
<div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" >photos</div>
<div id="rates" >Rates and Reviews</div>
</div>
see here, describe jquery code. please help in implements
<script type="text/javascript">
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});
toggle() function is what you need to show or hide specific element.
.toggleClass only add or remove specific class but it will not work for adding hidden and show class at same time
Replace $(target).toggleClass('hidden show'); with $(target).toggle();
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$('#mainDiv').find('a').removeClass("active");
$(this).addClass('active');
$("#detailsDiv").children().hide();
$(target).toggle();
});
});
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv"><div>About</div>
<div>Photos</div>
<div>Rates and Reviews</div>
</div>
<!-- middel -->
<div class="col-lg-6" id="detailsDiv" align="center" style="background-color:#CFF">
<div id="about" >about </div>
<div id="photos" style="display: none;">photos</div>
<div id="rates" style="display: none;">Rates and Reviews</div>
</div>
So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/