So I'm using the Prinzhorn skrollr to create a site that has text and images roll in with the scrolling or swiping of the page. Everything works fine but I think I found a performance bug. The way skrollr works is by using data attributes with numbers as names and the number is the point at which the animation is supposed to happen. The values of the data attributes are css rules.
I have to use display:none on a few code blocks that are hidden or visible depending on screen size. This is b/c the number in the data attribute is sometimes too large for mobile screens and the animation happens at the wrong time.
Anyways, the problem is the css in the code blocks that are hidden is calculating even while the block is set to display:none.
In the code below, you can see the opacity for the mobile nav block recalculating in Chrome's dev tools while at desktop widths.
<nav>
<!-- === Desktop and tablet === -->
<div class="hide-for-small">
<a id="menu-btn" href="#">
<img src="/assets/img/menu-btn.png" alt="Menu" data-600="opacity:1" data-620="opacity:0" />
<img src="/assets/img/menu-btn-alt.png" alt="Menu" data-600="opacity:0" data-620="opacity:1 />
</a>
</div>
<!-- === End Desktop and tablet === -->
<!-- === Mobile === -->
<div class="show-for-small">
<a id="menu-btn" href="#">
<img src="/assets/img/menu-btn.png" alt="Menu" data-560="opacity:1" data-580="opacity:0" />
<img src="/assets/img/menu-btn-alt.png" alt="Menu" data-560="opacity:0" data-580="opacity:1" />
</a>
</div>
<!-- === End Mobile === -->
Any thoughts on how to prevent this? Like I said, everything looks and works fine but I'm noticing some minor lag on mobile and I'm betting it's b/c the device is having to do the same calculations twice.
Related
I have a problem with my YouTube iFrame: it becomes not clickable when I set margin (negative ones). And that is not what I want! I would like the visitor to be able to play the video on my website.
To add a bit more context, it is a Bootstrap website, and the video is in a timeline. I set negative margins, so that I do not lose space on the page. If I do not set margins, I get a left item - everything on the right is blank -, then after scrolling to the end of the first item, I get the second one on the right - but everything is blank on the left, and so on...
I tried to use relative and absolute positions, but it does not work in bootstrap timelines (every item crash together when I change it).
Do you have any idea or clue about this issue?
Here is what my HTML looks like:
<li style="margin-top: -140px">
<div class="timeline-badge"><i class="fa fa-gamepad" id="round"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Solitaire Android app</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> November 2016 - Work in Progress</small></p>
</div>
<div class="timeline-body">
<p style="margin-bottom: 10px;">This solitaire card game is an Android application, that tells the player when there is no more move to do.
This feature exists on iOS but not on Android, as far as I know.
So I wanted to do this to avoid the player to lose time in looking for a solution that does not exist.
You can play by dragging and dropping cards on the screen.
I plan to publish it on the Play Store! </p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A2nMAct2w88"></iframe>
</div>
<p style="margin-top: 10px;"><i>Technologies used: Java, Android</i></p>
</div>
</div>
</li>
And here is a link to my WIP-website, if it can help :)
http://horlogehumaine.net16.net/slegras/code.html
Are you talking about the small video in, say, "Solitaire Android App"?
If so, it's being relatively positioned among other relative/absolutely positioned things that are "covering" it.
Give .embed-responsive a z-index:1;
I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"
I would like to get all three of these divs (logo, slideshow, and subslider) to fit the entire screen window no matter the size. I basically want to mimic the background:cover action in CSS but with all three of these elements. From my research I need to do something in javascript but I just can't seem to get it to work no matter what I try. I would also like to note that I am using drupal if that changes anything... Despite reading a lot on the subject, I'm way out of my comfort zone when it comes to trying to understand window resizing issues, any help, advice, and code snippets would be a godsend please!
<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation"> </h5>
</div>
Use vh unit in CSS. 100vh is exactly 100% of your viewport's height, so you can make your 3 divs heights sum to 100vh.
I have Flexslider working nicely. However, I needed it to slide under a navigation bar so set it's margin-top to -75px and it's div.flexslider z-index to -2. Looks great but now the next/prev arrows don't fly in and the click navigation doesn't work. It's just an automatic slide show right now. If I remove the z-index setting, it works but shows over the top of the nav bar.
It's sitting in a site using bootstrap 3 :-
<div class="row">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/garden.jpg" />
</li>
<li>
<img src="images/house.jpg" />
</li>
</ul>
</div>
</div>
In Chrome there are no errors thrown in the dev tools. In Firefox, the slider disappears altogether unless the browser window is reduced in size.
What else do I need to adjust to allow the prev/next and slide navigation to work with the z-index set or is there another way?
The answer turned out to be removing the z-index:-2 on the flexslider. Then to push the nav over the top of it, had to add position:relative AND z-index:10. So the position:relative was the key to the solution.
Hope this helps someone else.
Craig
I am building a responsive web site and would like to use this effect for desktop versions only (where the screen is big enough).
The code looks like this:
<div class="block_holder">
<div class="hover_block block_4">
<img src="images/thumbnail.png" />
<div class="top_half">Top Div that slides down on hover</div>
<div class="bottom_half">Bottom Div that slides up on hover</div>
<div class="hover_info">Caption text content</div>
</div>
</div>
Transitions take place in these classes: .block_4 .top_half .block_4 .bottom_half and all content in .hover_info to produce the hover effect.
For mobile, I would just like the photo to just be clickable, without any transitions since there is no hover. Is there a way to replace the entire block of code with something like this:
<p>
<a id="fancybox-manual-b" href="javascript:;" class="link"><img src="images/patterns_thumb.png" alt="pattern" class="portfolio"/></a>
Patterns made in Adobe Illustrator
</p>
I've tried setting .top_half .bottom_half and .hover_info to "display: none;" in the #media section designated for mobile and tablet and then making the img a link, but the image is not clickable using the first code provided. Why is this?
I apologize if there is an obvious solution for this, I have not found or thought of any.
You might be better off using modernizer for this.
if ( Modernizr.touch ) {
$('.top_half,.bottom_half,.hover_info').hide();
$('.hover_block img').click(function() {
alert('I was clicked');
}).css('cursor','pointer');
}
Here is a fiddle to demonstrate the functionality. http://jsfiddle.net/LHLHG/