Cycle2's scrollHorz doesn't work smoothly on fullscreen images - slideshow

I'm currently using Cycle2 with scrollHorz on full screen (100% width and height) with background images with their size to 'cover', besides that there are no callbacks or much else on the page so its a very basic slider.
I find that when the browser is too big, the slide transition appears jagged, not smooth. However its somewhat better when the screen is smaller. I also do not experience any issues with 'fade', or at least its not noticeable at all.
I have tried with various combination of easing and speed, but haven't had much luck.
I'm not sure if its a css thing or a cycle2 thing, and I'm unable to find a similar issue via google, can someone please shed some light to this?
HTML
<ul id="homepage-carousel" class="hero">
<li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
<li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
<div class="homepage-carousel-info">
<h1 class="homepage-carousel-title">Title</h1>
<h2 class="homepage-carousel-subtitle">Subtitle</h2>
<div class="homepage-carousel-desc">
<p>some info here</p>
</div>
<div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div>
</div>
</li>
</ul>
CSS
#homepage-carousel {
width: 100%;
height: 100%;
.homepage-carousel-item {
height: 100%;
background-repeat: none;
background-position: top center;
background-size: cover;
}
}

This isn't a cycle issue
background-size: cover just has horrible performance.
You can ease the pain some by adding transform: translate3d(0,0,0) to the slides as well, but it will still be choppy.
Replacing the background with an actual image normally increases the performance for me, like this fiddle. Though, the larger the image is the slower the performance will be in any browser; rendering large moving images is hard for them.
Then it's just a matter of sizing and positioning the images, for that you could use something like:
.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
/*img size*/
min-width:100%;
min-height:100%;
width:auto;
height:auto;
/*img pos*/
top:50%;
left:50%;
transform:translate(-50%,-50%);/*offset position based on img size*/
}
If you need to support legacy browsers, then you would run a routine through the images to size and offset like this does.
There are other solutions that only work in certain browsers (like object-fit: cover), but these options should work in all browsers.

Related

Foundation 6: top-bar-right and left stack when wrapping

When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.

Bokeh - Issue responsive design with Flask and Bootstrap4

I am developing an dashboard with Flask, Bootstrap4 and Bokeh. However, I cannot get a stable responsive design with bokeh. I have eight tabs with each two bokeh plots. The tabs are hidden via javaScript so can select a tab and it will be shown. The responsiveness is only working for the default visible tab. Accordingly, for the first tab the plots adjust to the given size. However, for the other tabs (same css, same html) the plots do not limit to the given css boundary and occupy a bigger space as the div they live in actually has. And, once I go back to the default visible tab, also those plots lost their responsiveness and behave like all the others.
I am using the sizing mode: "stretch both" and limit the height of the plots via css.
I would be thankful if someone could point me towards the solution. Cheers Lars
Here is my plotting code:
def plottingto(dataframe, lineID, plotnametext ):
names = lineID
source = ColumnDataSource(data={
'date' : dataframe['date'],
'time' : dataframe['time'],
'index' : dataframe.index,
'pendeltime_To_Real': dataframe['pendeltime_To_Real'],
'pendeltime_To': dataframe['pendeltime_To'],
'pendeltime_Back_Real': dataframe['pendeltime_Back_Real'],
'pendeltime_back': dataframe['pendeltime_back'],
'delay_to': dataframe['delay_to'],
'delay_back': dataframe['delay_back'],
})
hover_tool = HoverTool(tooltips=[('Uhrzeit', '#time'),('Pendelzeit', '#pendeltime_To_Real'),('Verzögerung','#delay_to')], names=names)
tools = [hover_tool, ResetTool(), BoxZoomTool()] #WheelZoomTool(), PanTool(),
#Bokeh Plott Rückweg Live Today
p = figure(plot_height=320, x_axis_type="datetime", y_range=(26, 60),tools=tools, sizing_mode="scale_width")
p.line(x='index', y='pendeltime_To_Real',line_width=1, line_color="#7db800", legend="Echte Pendelzeit", name=names[0], source=source)
p.line(x='index', y='pendeltime_To', line_width=1, line_color="red", legend="Durchschnittliche Pendelzeit", source=source)
p.toolbar.logo = None
plotname = file_html(p, CDN, plotnametext)
return plotname
Here is my css (in addition to bootstrap4):
.fixed_height{
height:380px;
padding-bottom: 30px;
margin-bottom: 50px;
}
Here is my html:
<div class="row mainrow">
<button class="accordion">
<h3 class="headingfullrow">STATISTIKEN ZUM PENDELFENSTER</h3>
</button>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-sm diagrambox">
<div class="x_title">
<h2>Verkehrslage letzte 7 Werktage Hinweg</h2>
<div class="clearfix"></div>
</div>
<div class="x_panel tile fixed_height overflow_hidden">
{{BOKEHWEEKTO | safe}}
</div>
</div>
<div class="col-sm diagrambox">
<div class="x_title">
<h2>Verkehrslage letzte 7 Werktage Rückweg</h2>
<div class="clearfix"></div>
</div>
<div class="x_panel tile fixed_height overflow_hidden">
{{BOKEHWEEKBACK | safe}}
</div>
</div>
</div>
</div>

Is there a way to have a top-bar with a header image that are sticky together at the top of the page?

I'm building a website for a friend's film production company using Foundation 6. I created a top-bar navigation bar with his logo image above the top-bar and made them both sticky. It seems to work fine on large screens and small screens but if viewed on anything in between the logo separates from the top-bar. This is most evident when you stretch and squish the page.
I've tried to include the image in the top-bar div but it aligns it to the left and I haven't been able to align it to the top as it is currently. This is the first time I've worked with the sticky function in Foundation. I've looked through the Foundation docs, Google, and StackOverflow but haven't found anything quite like this.
This is my top-bar section.
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li>Home</li>
<li>Current News</li>
<li>Film/Media</li>
<li>Photography</li>
<li>Publicity</li>
<li>Misc</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I would like the logo image and the navigation bar to look the way they do at larger screen sizes but minimize together to the point where the data-toggle kicks in instead of separating, as they are doing currently.

Auto heighten divs in Foundation over using media queries?

My questions is a common problem i seem to encounter but my brain never registers the right answer for some reason, probably because i'm slow.
The question I have is regarding my navigation menu.
When i'm at full width in Foundation i use the large-12 class and the small-12 class for smaller viewports, however i have that nav div inside of another parent div so when i get to small viewport the navigation drops below the height of the parent div.
I've set the parent div to a min-height: 204px and a max-height: auto assuming that it will adjust in height to wrapping child elements but i doesn't work.
So what is the best way to ensure that child divs that grow in height due to smaller viewports will push the parent div in height as well?
Here is my html:
<div>
<div class="interior-header">
<div>
<nav class="utility">
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
</div>
<div>
<nav class="main">
<div class="logo small-12 large-offset-1 large-5 columns left"></div>
<ul class="small-12 large-6 columns right">
<li>Home</li>
<li>Catalog</li>
<li>Learn More</li>
<li>Be a Broker</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
and here is the css for this particular component:
// HEADER INTERIOR
.interior-header {
background: url('../img/hero.jpg');
background-size: cover;
background-repeat: no-repeat;
min-height: 174px;
max-height: auto;
}
// NAVIGATION FIRST TIER
nav.main {
margin-top: 2%;
min-height: 100px;
height: auto;
}
Any help would be awesome, thank you.
.main {overflow: hidden;}
This causes a block-level element to contain its descendants.

100% Height Problem

here's the site I'm working on: http://antidote.treethink.com/about/
I am trying to get it so that the footer is always at the bottom of the screen unless the content runs past the screen, then it will sit below the content.
To do this, I thought to have the "wrapper" div be 100% min-height then tell the footer to sit at the bottom of that div. I tried putting min-height classes on the body, html and wrapper tags but it didn't work.
This is my css: http://antidote.treethink.com/wp-content/themes/antidote-new/style.css
Thanks,
Wade
You can try classic solution
<div id="header-content">
<div id="header">
bar
</div>
<div id="content">
bar
</div>
</div>
<div id="footer">
foo
</div>
main.css
html,
body {
height:100%;
}
#header-content {
position:relative;
min-height:100%;
}
#content {
padding-bottom:3em;
}
#footer {
position:relative;
height:3em;
margin:-3em 0 0;
}
ie.css
* HTML #header-content {
height:100%; /* min-height for IE<7 */
}
This is just off the top of my head. My thought create a container div that holds your content. Put the footer at an relative position of bottom: 0px; within that.
<div id="content-container">
<div id="page-content" style="position: relative;"><p>This holds my content</p></div>
<div id="footer" style="position: relative; bottom: 0px;">
<p>Footer content in here</p>
</div>
</div>
I think that should work...
Edit
Actually the top of my head is not right. This post has helped me in the past though...
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/