I am trying out Products.Carousel. I created a Carousel for my homepage,and added two Banners, which rotate automatically after n seconds.
Problem is I am supposed to set the width and height in the Carousel settings, or leave those values blank to use the ones for the first banner.
What I wished is that the carousel used the same width for the main content area. I tried to set a fixed value, but of course it won't work in different resolutions (the banners might invade the right portlet area, or might be too short for the main content width).
Any ideas on how I can work this around?
You should be able to give the Carousel a variable width by overriding Products.Carousel.viewlet (either in filesystem code or in portal_view_customizations). You'll probably want to base the Carousel width on the width of another element, like the #content div:
<div tal:condition="view/available"
tal:attributes="id view/element_id;"
class="carousel">
<tal:banners tal:define="banners view/banners;"
tal:condition="banners"
tal:content="structure banners">
Banners
</tal:banners>
<tal:pager tal:define="pager view/pager;"
tal:condition="pager"
tal:content="structure pager">
Pager
</tal:pager>
<script type="text/javascript" charset="utf-8" tal:content="string:
(function ($$) {
$$('#${view/element_id}').ploneCarousel({
height: ${view/height},
width: $$('#content').width(),
transition: '${view/transition}',
speed: ${view/speed},
delay: ${view/delay}
});
})(jQuery);
">
</script>
</div>
I don't have an answer, only ideas.
can you set a class on the banner area that will set its width the same as the main content area?
can you use a % width?
or the evil, but successful, method I've used:
flash banner using swfobject.js
Related
I am trying to give a div a dynamic height depending on screen size. In the div I have a calendar that has multiple lines of content, that can be shown or not (user's choice), e.i. the calendar's height is not fixed. With that in mind I have div's height set to auto. Which works fine (the height is set according to number of lines in calendar).
The problem arises when I make the browser's height smaller than the amount of height that calendar needs. It becomes a scroll which is not a problem, the position of the scroll is. The scroll is placed on the entire div not on the calendar in the div. The scroll is correct, if the div does not have it's height set, but it does not dynamically shrink to fit only the content (it stays the same height no mater if there is content of not) and I am trying to avoid that.
I suppose the solution is to say that if the div has enough space to use auto and if not it should have the height of it's parent. The min does not take parameters such as auto. I am a bit lost as to how to write code correctly to achieve this preferably using only CSS.
EDIT:
html:
<html>
<body>
<div class = "calendar">
<div class = "content">
<\div>
<\div>
<\body>
<\html>
CSS:
body {height: 100vh; overflow: hidden}
. calendar {overflow-y: auto;}
. content {height: auto;} \\the problem
The height of calendar in JS is set to "parent"
Well, by your answer I am sure you want to make the content responsive. So there is an easy trick or you can say a cheat sheet for your requirement.
Step 1: Include Bootstrap 4 CDN scripts
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
Step 2: In your HTML, write a classname as 'form-group' to adjust your calendar's height content as per the screen size.
<div class="form-group">
<div class = "calendar">
<div class = "content">
<\div>
<\div>
</div>
Step 3: Run your project and see how your width of the container adjusts according to the browser when you drag or make it small.
Hope this helps.
I'm using bootstrap, angular and angular-ui-router
what I want to achieve is this mockup:
where the menu on the left is a navigation bar, a toolbar on the top, some breadcrumbs, content and a footer.
I can get all these elements in place. However, I need to populate the content with a variable number of elements from a rest data source. I want to wrap these nicely, so I am using the following angular / html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
this works, and shows all the data. However, as there is more data than can fit into the div, scrollbars appear on the window
What I would like to acheive is to get the scrollbar to appear in the content div , like the screenshot
I have tried all sorts of css, like overflow: scroll-y, but can't figure it out.
Your problem seems to be related to dynamic heights. Using fixed heights (also %, vh, ... are useable), you can get that layout to work properly. There are a lot of solutions for that.
1. Using %
If you're going to use %, and that would by far be the best option, you have to start at the root tag which basically is <html>. After that you've to add the proper height value to it's child elements you want to use. Keep in mind to start at 100% and shrink your child element to the desired heights.
2. Using vh
The vh value is kinda same as %. You just don't need to set a height to every parent element. Demo
Note: You may have to check if that's working with your target browser.
3. CSS3 calc() function
Propably the newest method. You can calculate values through CSS(3), by using e.g. calc(100% - 100px). That's pretty cool though, but also isn't supported by every browser. See here.
4. Fixed layout
You could also use some fixed positionings. Setting up your footer, header and nav to position: fixed; would also keep up everything smooth and clean. I'd use a fixed layout in order to get that done, since I'd like it the most. Also it doesn't have any incompatibility with legacy browsers.
instead of overflow: scroll-y,
please try:
height:100%;
overflow-y:scroll
*giving it a height enables the scroll bar to appear.
I know such questions are galore in SO but I do not find a single solution to meet my need fully.
I am using fancybox jQuery plugin to create a thumbnail gallery ( non-responsive version : here- gallery is on the right side ) of images and slideshow as well.
The issue is with the thumbnail gallery - images of varying aspect ratios are uploaded and shown in the thumbnail gallery. The wrapper element (.project_gallery a - inline anchor has been made to display as block) for each image has the dimension 195x195px;
I want the images to stretch to the full of the div and be centered both vertically and horizontally.
In case you need any explanation of the last sentence above, I provide it below:
If the uploaded image has its width smaller then the height, the width should be set to fill the wrapper element fully in the horizontal direction. Even when the image width is resized to be equal to that of the wrapper, image height may not still fill the full height of the wrapper. So the image width still needs to be enlarged maintaining the aspect ratio. At a certain enlargement point, the image height fits the full wrapper height but the image width is then larger than the wrapper width. So the image needs to be placed in center of the wrapper in the horizontal direction. And the left and right side of the image may get cropped i.e: made invisible. The reverse thing should take place if we interchange the height and width of the image in the just-mentioned explanation.
And all those stuff I need to to do in a responsive design way.
EDIT:
HTML mark-up for the image gallery is below.The a element will be many as this is the wrapper of the image and .many images will be there.
<div class="project_gallery">
<a class="fancybox" href="some_href_here" data-fancybox-group="gallery" title="Project"><img src="assets/img/projects/img_name " class="inline_block" alt="image project"/></a>
...
</div>
EDIT2 : The responsive version being devloped is here now.
EDIT 3 : In case you do not like to look into any specific site, you can just consider the full question as below :
Responsive design thumbnail gallery : how to resize and place images with randomly varying aspect ratios in the center of the same sized wrapper divs (img_wrapper) both vertically and horizontally leaving no part of the wrapper unused ? The HTML markup and a bit CSS is below:
HTML:
<div id="gallery">
<div class="img_wrapper"><img src="..." alt="img"/></div>
//the above line will repeat as many images as are there.
</div><!-- end of id gallery-->
CSS:
<style>
#gallery{
width:70%
}
.img_wrapper{
width:25%;
float:left;
}
</style>
See if this helps get you started:
CSS
.fancybox img.inline_block{
margin-left:0 !important;
}
.project_gallery a{
width:100%;
}
.project_right img:first-child{
margin-left:0;
}
.project_gallery a{
width: 100%;
height: 100%;
}
It's possible you might need to add !important or extra selectors to some of these rules so that they will take precidence and overule the exiting defaults.
Regarding the behaviour you want for the background image filling the full div, I think the existing background-image:cover; setting should do what you want. If it doesn't, start by checking that your images are large enough to fill the div.
You mention that you want to do this is responsive way. Your page design doesn't appear to be responsive, for example the image in the top slider is hard coded at 1050px so this would prevent the page from collapsing in a responsive manner. Unless you moved from your existing fancy box plugin to something like a lightbox, I think it could be a challenge to get your existing gallery to be responsive.
Good luck!
I'm building an android app with phonegap using angularJS + topcoat. I managed creating the index page, views and all the basic structure. My question is, there is some pages(partials) that doesn't have data to show. In that case, the view does not fill the height of the page. That makes a problem because I have a drawer menu hidden usin angular-snap. Because the page doesn't fill all the available height, the menu that is supposed to be hidden is visible. Does anybody know how to handle this situation? I'm attaching a image to examplify! app-example
Thank you!
Why don't use the css min-height property. Assume every page of your app is wrapped inside a div as follow :
<div classs="page">
//your page content
...
</div>
You can then create the following CSS rule
.page {
min-height :100%;
}
that will ensure that even if the height of your content is less than the total height of your screen it will occupy 100% of the page's height.
I managed solving the problem with Nicolas help. It didn't worked in the beginning because I was setting the new style on the partial's div. After trying for a while I set the class on the "main" div which holds the ng-view directive and it worked. Just an example in case others have the same issue:
<body ng-controller="MainCtrl">
<div snap-content snap-options="snapOpts" class="page">
<div ng-view ng-class="slide"></div>
</div>
</body>
.page {
min-height :100%;
background:inherit;
}
Note: I had to set a background for the page class otherwise it won't work.
following situation:
<body>
<div style="position:fixed; width:100%">[place holder for header]</div>
<div style="position:relative;width:100%;margin-top:100px">[content]</div>
</body>
I need the header always visible and at the top, so this one should be with position:fixed.
A problem occurs after self adjustments of the header - height. If the header is higher than 100px a part of the content is hidden.
How can I (CSS) dynamically set the start position of the content div regarding the end of the header.
I'm still looking for a CSS only solution, but for the moment here's an idea using just one line of JavaScript – when using jQuery:
JavaScript
$(document).ready(function () {
$('#content').css('marginTop', $('#header').outerHeight(true) );
});
HTML
<body>
<div id="header" style="[…]">[place holder for header]</div>
<div id="content" style="[…]">[content]</div>
</body>
The advantage of using .outerHeight(true) is, that it takes care of borders and margins you may have applied to your header.
CSS only solution (although not super clean) could be to display the same block twice: 1st block "position: fixed", 2nd block "visibility: hidden". Since both would have the same height, the role for the 2nd block would be to push down the page content to the appropriate level.