Im trying to build a modal window with bootstrap 3 that will work as an "ImageViewer" where the user can scroll large images vertically.
On the left side of this ImageViewer, I would like to have small thumbnails of the images affixed so the user always can quickly jump between the images in the gallery.
I have tried to do this in a simple html page and it works all fine, but as soon as i put the very same html code in a modal window the affix stops working.
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-3">
<!-- This div container should be affixed when scrolling the images -->
<div class="sidebar affix">
<a href="#img1">
<img src="//placehold.it/50x50/2255EE/EEE&text=1" alt="" /></a>
<a href="#img2">
<img src="//placehold.it/50x50/2255EE/EEE&text=2" alt="" /></a>
<a href="#img3">
<img src="//placehold.it/50x50/2255EE/EEE&text=3" alt="" /></a>
</div>
</div>
<div class="col-md-9" role="main">
<img id="img1" src="//placehold.it/600x450/2255EE/EEE&text=1" class="img-responsive" style="margin: 5px" alt="" />
<img id="img2" src="//placehold.it/600x450/2255EE/EEE&text=2" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
<img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" />
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I have created a fiddle here: http://jsfiddle.net/R8D2v/
Can anyone help out?
Best Regards Niclas
You can set a defined height on the area that you want to be scrollable:
.row{
height: 600px;
}
.col-md-9{
height:600px;
overflow-y:scroll;
}
And the fiddle: http://jsfiddle.net/R8D2v/1/
You don't add the class affix manually. The affix function works by toggling the classes .affix, .affix-top, and .affix-bottom as you fulfill the 'data-offset-top' or 'data-offset-bottom' parameters.
Manually assigning the affix class is functionally setting position fixed on the element, which is why when not using a modal it doesn't move. Of course, it will /never/ move because there is no logic to its positioning.
The appropriate affix syntax can be found on the bootstrap site.
<div data-spy="affix" data-offset-top="200">...</div>
Unfortunately when you are scrolling it is not the document, but rather through the overflow's modal. My guess is affix monitors the former. I created some jquery which mimics the behavior in this edited fiddle. By inspecting the page you can see that the .affix class is added to .sidebar when you scroll past a point defined in the jquery. I leave it to you to position the element appropriately (use position:fixed).
$('.modal').on('scroll', function(){
var someThreshold = 60;
if ($('.modal').scrollTop() > someThreshold) {
$('.modal .sidebar').addClass('affix');
}
else {
$('.modal .sidebar').removeClass('affix');
}
});
On a side note: When posting a fiddle make sure you use 'col-xs-*' as using 'col-md-*' causes the elements to collapse into a single column in the inevitably narrow 'results' pane.
Try to add some style for modal.
style="position:absolute;overflow:hidden"
Demo
Related
I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:
Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.
Here is my code for service-box.component.html:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>apps</mat-icon>
</button>
<div class="box" [class.opened]="opened">
<div class="tip">
<div class="border"></div>
<div class="foreground"></div>
</div>
<div class="services">
<div class="row">
<a href="https://blog.fossasia.org">
<div class="col">
<div class="img">
<img src="assets/images/blog.png" alt="Fossasia">
</div>
<span>Blogs</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search">
<div class="col">
<div class="img">
<img src="assets/images/github.png" alt="Fossasia">
</div>
<span>Github</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search/issues">
<div class="col">
<div class="img">
<img src="assets/images/bug.png" alt="Fossasia">
</div>
<span>Bug Report</span>
</div>
</a>
</div>
</div>
<hr />
<div class="services">
<div class="row">
<a href="https://fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
</div>
<span>FOSSASIA</span>
</div>
</a>
<a href="https://phimp.me">
<div class="col">
<div class="img">
<img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
</div>
<span>Phimpme</span>
</div>
</a>
<a href="https://susper.com/">
<div class="col">
<div class="img">
<img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
</div>
<span>Susper</span>
</div>
</a>
</div>
<div class="row">
<a href="https://chat.susi.ai/">
<div class="col">
<div class="img">
<img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
</div>
<span>Susi.AI</span>
</div>
</a>
<a href="https://pslab.fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
</div>
<span>PSLab</span>
</div>
</a>
<a href="https://eventyay.com/">
<div class="col">
<div class="img">
<img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
</div>
<span>Eventyay</span>
</div>
</a>
</div>
</div>
</div>
service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:
<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>
But doing this disables the links in service box.
Any suggestion will be of great help.
You seem to be using #angular/material and therewith the CDK. You should try the CDK's Overlay package.
The overlay package provides a way to open floating panels on the screen.
By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick #Output event, to which you could bind the closing of your "Service Box".
I am using AOS library for animations. When I use the animation slide-left and slide-right, the width of the page becames wider that the body width, making the whole page look weird. I couldnt find any solution online and the only solution I figured out is if I give the elements which I apply the animation on a width in px (it cannot be bigger than 400px for whatever reason). However, that solution doesnt really work as it destroys up my css too. I have provided a js fiddle so you can see what I mean. Ive been spending hours on that so if anyone can help, I would be truly happy! Thanks!!
https://jsfiddle.net/Lca8n0ue/
code:
<div style="background-color:red; height:300px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid">
<div class="row center-block wrapper">
<div class="col-sm-6 test" data-aos="slide-right">
<h2 class="text-center">title</h2>
<p class="text-center">app</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test2" data-aos="slide-left">
<h2 class="text-center">title</h2>
<p class="text-center">appp</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test" data-aos="slide-right">
<h2 class="text-center">title</h2>
<p class="text-center">app</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test2" data-aos="slide-left">
<h2 class="text-center">title</h2>
<p class="text-center">appp</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
</div>
</div>
js:
AOS.init();
ONLY THING THAT HELPS BUT RUINS CSS IS:
.test{
width: 400px;
}
.test2{
width: 400px;
}
Although I'm not completely sure WHY is it so (I had the same problem a lot of time) there is another way to fix this.
Just set overflow-x: hidden on the parent element.
In your case this would be .container-fluid.
I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.
Every now and then, I visit the page and some of the images are overlapping each other like so:
But then when I refresh the page, it displays it properly:
I tried specifying a height on the container element but to no avail.
Here is the code I'm using:
CSS:
.packery-grid {
min-height: 500px;
}
.packery-grid-03 {
width: 20%;
}
.packery-grid-06 {
width: 40%;
}
.packery-grid figure {
padding: 15px;
}
jQuery:
$(document).ready(function() {
// visuals
$('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
});
HTML:
<div class="row">
<div class="packery-grid">
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-06">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
</a>
</figure>
</div>
<div class="packery-grid-item packery-grid-03">
<figure>
<a href="#" data-toggle="modal" data-target="#modal-visual">
<img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
</a>
</figure>
</div>
</div>
</div>
</div>
</div>
I think I've found the solution on their support page
Unloaded images can throw off Packery layouts and cause item elements
to overlap. imagesLoaded resolves this issue.
And so I've modified my code like so:
// visuals
var $grid = $('.packery-grid').packery({
// options
itemSelector: '.packery-grid-item',
gutter: 0
});
// layout Packery after each image loads
// to prevent overlapping images
$grid.imagesLoaded().progress( function() {
$grid.packery();
});
I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)
I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.
This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam