I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});
.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});
You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok
Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();
Related
I want to auto-scroll my timeline to the bottom. I tried jQuery but that didn't worked I am using bootstrap's scroll-area-lg class for creating a scroll area.
My Code -
<div id="autoScrollArea" class="scroll-area-lg" style="height: 70vh;">
<div class="scrollbar-container" >
<div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 1 <span class="text-danger">*</span></p>
</fieldset>
</div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 2 <span class="text-danger">*</span></p>
</fieldset>
</div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 3 <span class="text-danger">*</span></p>
</fieldset>
</div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 4 <span class="text-danger">*</span></p>
</fieldset>
</div>
<button class="btn btn-primary" id="submitButton" ng-click="submit()" ng-if="showOnSubmit">Submit</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="scrollBottom()">Scroll Bottom</button>
<script>
$scope.scrollBottom=()=>{
var questionScrollSectionHeight = $('#questionScrollSection').height();
//get scroll height
var scrollHeight = $('#questionScrollSection').scrollTop() + questionScrollSectionHeight;
console.log('scrollHeight', scrollHeight); //getting height
$('#questionScrollSection').animate({
scrollTop: scrollHeight
}, 1000);
//focus on submit button
$('#submitButton').focus();
}
</script>
I am getting the height but the area is not scrolling. I am also not getting any errors on the console.
Here's the first page that the a href='' code is working .
moneypro.online/website-design
<div class="row animate-box fadeInUp animated-fast">
<!-- Tabs -->
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6">
<div class="gtco-video gtco-bg gtco-image img-responsive" style="background-image: url(/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6">
<h2>Website Design</h2>
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-success btn-block">Appointment</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-block">Inquiry</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-warning btn-block">Pricing</button>
</div>
</div>
</div>
</div>
</div>
and here is the other page that the a href='' code does not work.
moneypro.online/services
<div class="gtco-tab-content-wrap" style="height: 643px;" data-section="services">
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="gtco-video gtco-bg img-responsive" style="background-image: url(assets/public/images/icons/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel panel-heading panel-cust-bg">
<h2 class="cust-txt"><strong>Website Design</strong></h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="/contact" class="btn btn-success btn-block" role="button" >Appointment</a>
</div>
<div class="col-md-4">
Inquiry
</div>
<div class="col-md-4">
Pricing
</div>
</div>
</div>
</div>
they're are exactly the same and i don't know why the other page is working . here's the live website of it
live example
Can someone please explain it to me.
Ok, here is the difference between the two:
Working:
<a href="/contact">
<button type="button" class="btn btn-success btn-block">
Appointment
</button>
</a>
Not Working:
<a href="/contact" class="btn btn-success btn-block" role="button">
Appointment
</a>
You are adding class btn to "a" tag, and it thinks the tag is a button so it ignores href attribute.
Every href element needs a corresponding anchor which should be a name or id attribute and it must match/exist in the page.
This example by w3schools show a good practice of href.
I have 4 images which allows users to select only 1 image out of 4.
When the user clicks on any image, the clicked image along with other 3 images should be disabled and the same user has to again click on the 'clicked' image to enable the image.
Basically i need to make the images look like its Clickable (with some borders or something..), Then onclick of image say 'A' the user gets a message (as shown from the when_i_click_carrom()), post which all the images (B,C,D) should be disabled (for that user only), and same user has to click on disabled image 'A' to enable it.
NOTE: Only the Image A should be disabled for the current user and other users, but other images B,C,D should be clickable for other users, until the current user enables the image A
...
<script>
var when_i_click_carrom = function(){
alert('You selected Carrom!');
}
</script>
...
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
Try with querySelectorAll .Img not have a default disable attribute .So try with class
document.querySelectorAll('.img-responsive').forEach(function(a) {
a.addEventListener('click', function() {
this.disabled = this.disabled == true ? false : true;
this.classList.toggle('disable')
//console.log(this.disabled)
})
})
.disable {
opacity: 0.5;
}
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
You can check it out over here.
jQuery(".sidebar").click(function(){
if(jQuery(".sidebar").hasClass("disabled")){
jQuery(".sidebar").removeClass("disabled");
}else{
jQuery(".sidebar").addClass("disabled");
}
});
https://jsfiddle.net/ott5wanq/4/
Since you are using bootstrap, you can use image buttons and use disabled class for all items when one of them clicked. I created an example :
HTML :
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn1" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/1" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn2" class="btn btn-primary myBtn" onclick="imgClicked()" >
<img src="http://lorempixel.com/400/200/sports/2" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn3" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/3" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn4" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/5" alt="carrom" class="img-responsive">
</button></div>
</div>
</div>
Script ( using Jquery ) :
function imgClicked (){
$('.myBtn').addClass('disabled');
}
https://jsfiddle.net/emilvr/80u0pbyw/2/
I'm trying to create a simple webpage using Flask, I'm trying to capture the text written in a textfield in a javascript variable and then display it on console, when the user presses a button.
Here is the code
HTML
<script type="text/javascript" language="javascript" src="{{url_for('static',filename='js/main.js')}}"></script>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<br>
<button class="btn btn-success" type="button" id="buttonSearch" onclick="getText()">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
Javascript
function getText() {
var txt = document.getElementById('txtWord').innerHTML;
console.log(txt);
}
Here is working solution
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<br>
<button class="btn btn-success" type="button" id="buttonSearch" onclick="gt()">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
<script>
function gt() {
var txt = document.getElementById("txtWord").value;
alert(txt);
}
</script>
https://jsfiddle.net/ovtkmnmn/3/
I believe in Your case the problem is about order of loading this js file.
Always check what console displays, when I used "On load" load type it clearly returned an error that the function is not defined
You should simply clear your browser's cache. A full browser's cache can cause such a problem.
(function () {
function getText() {
var txt = document.getElementById('txtWord').value;
console.log(txt);
}
document.getElementById('buttonSearch').addEventListener('click', getText, true);
})();
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<button class="btn btn-success" type="button" id="buttonSearch">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
I was having the same problem using jQuery until I figure out that I declared the function inside the $(document).ready() method :
$(document).ready(function () {
function name(){} // not working
}
To scroll to an element in my Bootstrap modal, I can check the offset of the element. There are for instance 8 div's, each with their own id (#row-1, #row-2, etc.). If I open the modal and then input the following into the console, I get the correct offset value.
$('#row-6').offset()['top'];
But when I console.log this into the code itself, after opening the modal with .modal('show'), I get 0 back.
How can this difference occur? I tried all the solutions I could find on here, but all solutions gave me the same 0.
My problem would also be solved if I could scroll to the element in any other way with JavaScript.
You must wait for the modal to be shown:
// The modal is shown
$('#yourModal').on('shown.bs.modal', function() {
// Get the right offset
var offset = $("#yourelement").offset();
var offsetTop = offset.top;
var offsetLeft = offset.left;
});
My guess would be that the elements are not done being shown yet in order to give you the correct value? Try using a setTimeout to verify this:
setTimeout(function(){ $('#row-6').offset()['top']; }, 3000);
You said:
My problem would also be solved if I could scroll to the element in
any other way with javascript.
So, here is my suggestion to your problem:
html:
<button id="modal_show" class="btn btn-warning">Show modal</button>
<div id="myModal" class="modal modal-flex fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:60px;">
<div class="modal-dialog">
<div class="modal-content" style="padding:5px;">
<div class="modal-body">
<div class="row" id="row1">
<div class="col-xs-12">
<p>
This is row 1
</p>
</div>
</div>
<div class="row" id="row2">
<div class="col-xs-12">
<p>
This is row 2
</p>
</div>
</div>
<div class="row" id="row3">
<div class="col-xs-12">
<p>
This is row 3
</p>
</div>
</div>
<div class="row" id="row4">
<div class="col-xs-12">
<p>
This is row 4
</p>
</div>
</div>
<div class="row" id="row5">
<div class="col-xs-12">
<p>
This is row 5
</p>
</div>
</div>
<div class="row" id="row6">
<div class="col-xs-12">
<p>
This is row 6
</p>
</div>
</div>
<div class="row" id="row7">
<div class="col-xs-6">
<p>
This is row 7
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="3">Go To 3</span>
</p>
</div>
</div>
<div class="row" id="row8">
<div class="col-xs-6">
<p>
This is row 8
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="2">Go To 2</span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-12 pull-right">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Jquery:
$('#modal_show').on('click', function(){
$('#myModal').modal({show: true});
});
$('.scroller').click(function(){
var targetId = $(this).attr("data-to");
$('#myModal').animate({
scrollTop: $("#row"+targetId).position().top
}, 1000);
});
and some css:
.row {
min-height:100px;
}
.scroller {
cursor:pointer;
text-decoration:underline;
}
When you scroll down to div's 7 and 8, you will notice links that scroll you up to div #3 and #2 respectively.
working fiddle: http://jsfiddle.net/xL9at8sc/
Hope that helps you and others...