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...
Related
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/
Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>
If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}
I have a 2 popup on myscreen which is linking one to another. when i click the 2nd popup it appears and when i close the pop up, the popup content goes off, but the backdrop still remains and disables the whole page.
html:
<div id="license-temp" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="get-license-popup">
<div class="license-heading">Get License</div>
<br>
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-8">
<div class="license-description reg">What is the duration of the usage?</div>
<div class="duration">
<select id="usage-time">
<option>1 Week - $0.9</option>
<option>1 Weeks - $2.0</option>
<option>1 Month - $5.0</option>
<option>2 Months - $10.0</option>
</select>
</div>
</div>
<div class="col-md-5 col-sm-4 col-xs-8"><div class="license-description reg">What is the preferred return method?</div>
<div class="return-method">
<div><input type="radio" value="auto"> Automatic Return</div>
<div><input type="radio" value="manual"> Manual Return</div>
</div>
</div>
</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
GET LICENSE</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!--<img class="modal-cont" src="images/license-popup.png">-->
<div class="purchase-license">
<div class="license-heading">Get License</div>
<table class="get-license-confirm">
<tr>
<td><!--<a href="" class="btn btn-warning confirm-my-license">GET LICENSE</button>-->
GET LICENSE</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="confirm-license" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="purchase-license">
<div class="license-heading">Confirm</div>
<table class="get-license-confirm">
<tr>
<td>Confirm</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
code:
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide')
});
After closing all popups it looks like below image...the backdrop still remains.
When you open modal then there is some style add in body and append div to body so you need to remove that style and that div.
Hi have solution for that.
$(".get-me-license").click(function(){
$("#license").modal('show');
});
$(".get-me-license-tmp").click(function(){
$("#license-temp").modal('show');
});
$(".buy").click(function(){
$(".buy").modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});
$(".confirm-my-license").click(function(){
$("#confirm-license").modal('show');
$('#license').modal('hide');
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove(); // added by me
});
Use This Code
$('body').removeClass().removeAttr('style');$('.modal-backdrop').remove();
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();
I'm trying to align my product box to look like this:
What I have thus far:
jsFiddle
I'm just trying to obtain the results of the "boxed" area, but I cannot for the life of me figure out this alignment.
I've included external resources to my JS & CSS as well.
HTML is below:
<section id="product">
<div class="container White_BG">
<aside class="col-md-4">
<!--Category-->
<div class="sidewidt2">
<div class="productprice" id="StandardProductBox">
<div id="ItemNumber">
<span itemprop="identifier" content="sku:EB06">
<p># EB06</p>
</span>
</div>
<div itemprop="availability" id="StockStatus" content="in_stock">
<strong>Out of Stock,</strong>
Please call for availability
</div>
<p class="prod-det-price">Call for Pricing</p>
<label for="qtyproduct" id="qtylabel">Qty</label>
<input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
<ul class="productpagecart">
<li>
<span style="position:relative;">
<input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
<div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
</span>
<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
<h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ShipWeight" id="ShipWeight">
Weight: 29.80 lbs
</div>
</aside>
</div>
</section>
I'm not sure what you have the ability to adjust and what you don't, but you can do this a couple ways by changing the markup and the classes. I'll show you the finished product and you'll have to work to convert your markup to something like this.
If you want half the content to hug the left, and the other half to hug the right, you should keep each separate. You can float one section left and the other right (.pull-left and .pull-right in Bootstrap), but since you're already using Bootstrap, why not use their grid system for layout. That's what it's there for!
So set up your shopping cart item, and add a .row inside of it, and then split the content in half with two divs with .col-xs-6. Put the content inside each div. The content for the one on the right can align to the right by using .text-right.
Like this:
<div class="ItemBox ">
<div class="row">
<div class="col-xs-6">
<b>#EBRO1</b><br/>
Call for pricing.<br/><br/>
<label for="qtyInput" >Qty</label>
<input type="text" id="qtyInput" />
</div>
<div class="col-xs-6 text-right">
<b>Out of Stock,</b><br/>
Please call for availability <br/><br/>
<button class="btn btn-default">Add to Cart</button>
</div>
</div>
</div>
Demo in fiddle
Which will look like this: