I implemented the fancy box as usual:
<img src="img/fotos/architektur/thumbs/1.jpg">
<img src="img/fotos/architektur/thumbs/2.jpg">
It works totally cool on Desktops but on my iPad it only works with the left control. A move forward to the next image (right arrow) doesn't work... Why?
if "cyclic" is set to true, maybe there's an overlay issue
did you try to display the page in a desktop window resized to ipad resolution? maybe with "Pesticide" activated ? (it's extension for chrome, will make outlines on all elements)
.fancybox-overlay {
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: none;
/* z-index: 9999;*/
background: url('fancybox_overlay.png');
}
Related
I am trying to hide the scrollbar of my iPhone but overflow: hidden doesn't seem to be working. I also tried touchmove(e) {e.preventDefault()} but if I drag from down to up, I still see the scrollbar appear.
If I do position: fixed, then my page jumps (for example: if I open a modal view with my addressbar and nav bar minimized, on doing position: fixed, the address bar and nav bar appears back causing a jump on the page.)
Any advice would be appreciated.
I have also tried adding the styling for the scrollbars like:
.hide-scrollbar::-webkit-scrollbar {
display: none;
width: 0px;
background: transparent;
}
.hide-scrollbar::-webkit-scrollbar-button {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; // IE 10+
overflow: -moz-scrollbars-none; // Firefox
}
but still doesn't hide the scrollbar.
I have created a video thumbnail image which, when clicked, triggers a video autoplay hidden behind it. The video/image thumbnail are also both responsive, and adjust to changes in browser size.
The functionality works fine on Chrome & Firefox on Desktop, but not safari. Furthermore, it doesn't work on my iPhone 4s in both the Chrome and Safari app.
This does not have to do with Safari not handling large images, because my image is only 416 × 234.
EDIT: I should add that the autoplay feature remains intact. Whenever I click where the img should be on the screen, autoplay begins. This even works in mobile (albeit without autoplay, as that is not mobile supported). It's also not an extension/naming issue, as the image is being loaded by the safari browser when I inspect the source code.
Relevant HTML:
<div id="video-thumbnail">
<img src="norman.png" class="video-image" alt=""/>
<iframe class="video-embed" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&showinfo=0" s8011508427261248624="true" replaced="true" ></iframe>
</div>
CSS:
#video-thumbnail {
position: relative;
padding-bottom: 56.25%;
padding-top: 55px;
height: 0;
overflow: hidden;
}
.video-image {
position: relative;
content: "";
cursor: pointer;
z-index: 5;
}
.video-embed {
display: none;
opacity: 0;
z-index: 10;
}
.video-image, .video-embed {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
padding: 60px 60px 80px 60px;
}
JS:
(function($){
$(document).ready( function(){
$(".video-image").click(function(){
$(".video-embed").css({"opacity":"1","display":"block"});
$(".video-embed")[0].src += "&autoplay=1";
$(this).unbind("click");
});
} );
})(jQuery)
I have answered my own question. Removal of the line
content: "";
from the CSS for .video-image did the trick. This was mistakenly copied over from a previous example. Interesting enough, the JS handled the presence of this tag differently in Chrome & Firefox differently than in Safari. Not experienced enough in JS to fully-understand why, I'd love an explanation if someone has one.
So this is not really a fix since you already answered the question yourself but since you seemed interested the JS is handled under different regulations by default on each modern browser. Hence in this example,
content : " ";
makes chrome and firefox take the default value while safari probably does not allow empty strings to be used in their JS handlers. If you're more interested on how this works in detail, these links will help you out.
https://www.quora.com/Why-do-different-browsers-process-CSS3-HTML-5-and-JavaScript-differently and this stack question
I build a website with skrollr, which is my personal plugin of the year.
It works well in most situations except on an iPad mini. I haven't had the opportunity to test it on other iOS devices yet.
The problem is, that the site doesn't start scrolling until after I stopped scrolling.
So, basically, I put my finger onto the screen and start dragging, and nothing happens. Only when I stop scrolling and pull my finger away from the screen, the site starts scrolling the correct way.
<div id="skrollr-body">
<div id="scene1" class="scene" data-anchor-target="#scene1-anchor"
data-0-top="visibility: visible"
data--1950-top="visibility: visible"
data--2000-top="visibility: hidden">
</div>
</div>
#skrollr-body {
height: 100%;
position: fixed;
width: 100%;
}
.scene {
width: 100%;
height: 100%;
top: 0%;
left: 0%;
position: absolute;
background-color: white;
}
<script>
var s = skrollr.init({
smoothScrolling: true,
keyframe: function(element, name, direction) {
// add videos only after scrolling for a bit
},
mobileCheck: function() {
// makes no difference :-(
return false;
}
});
</script>
</body>
Is this behavior to be expected? How can I make the browser scroll while I still have the finger on the screen?
Apparently, it's not a bug, it's a feature :-/
According to this answer to a similar question the whole "only move after touch event is over" is standard behavior for iPads.
So I guess I could go and rig something up for skroller to react not to the scroll event, but instead to react to the touchstart / touchend events.
Very unsatisfying...
Im creating a mobile version for my website, and I'm currently busy with a 'image scroll' by swiping. I found a code on the internet I'm using, but it doesn't work with the menu i've created.
The menu that pops up, stays below the image scroller..
How do I get it to get below the opened menu?
Thanks for the help!
Regarding this page: http://m.tf2-29.com/TF_Members.asp
Try to set z-index of popmenu
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
.bbstable
{
BACKGROUND: #1e201c;
margin: 0px;
padding: 0px;
z-index: 2; /* set z-index higher than image scroller */
}
or remove z-index: 1 in .swiper-container
I have visited some sites where when I scroll half a page, a semi-transparent horizontal column of 100-150px height appears right at the bottom of the page with an image on the left and some message, links on the right.
How can I create it?
Its just a css rule.
#footer {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
Using Chrome, click CTRL-SHIFT I, then click on the magnifying glass in the bottom left-hand corner to inspect the element. That's the best way to see how they did it on the site you're looking at.
In IE, F12 gives you the Developer Tools, where the arrow selector tool does the same job. In Firefox, use Firebug.
Then just copy their HTML. And Javascript too if necessary.
Use an element with a style similar to following:
#footer {
opacity: 0.7;
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background-color: #330000;
}
and then lay things inside it as you wish.