We Keep Coding

How to solve the issue with preloader and session storage in jQuery?

I have a problem with the pre-loader. I was trying to set it up as once per session. It works first time, but when you refresh the website the pre-loader does not stop at all and it is impossible to see the content of the website until the moment I will delete the data from the session storage. Adding visibility: invisible in to stylesheet does not work at all.
canvas {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
z-index: 99;
}
<canvas id="c"><img id="logo" width="1280" height="1024" alt="logo"></canvas>
<div>
content
</div>
if (sessionStorage.getItem('dontLoad') == null){
jQuery("#c").delay(1000).fadeOut('slow', function(){
jQuery( "body" ).animate({
visibility: visible
}, 1000);
});
sessionStorage.setItem('dontLoad', 'true');
}

The problem is that you need to change the CSS. I will try to explain.
In your CSS, you have set the canvas to display: none. In your jQuery, you try to use the fadeOut animation. This won't work because the element is not displayed, it is basically removed from the document, so jQuery can't change it.
What you need to do is set the canvas to display: block. So that the 'preloader' is visible when the user accesses the website. Then the 'preloader' will fade out.
Here is the updated CSS.
canvas {
display: block;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #000000;
z-index: 99;
}
JavaScript
if (sessionStorage.getItem('dontLoad') == null)
{
jQuery("#c").delay(1000).fadeOut('slow', function()
{
jQuery( "body" ).animate({
visibility: visible
})
}, 1000);
}
if (sessionStorage.getItem('dontLoad') == true)
{
$('#c').css('display', 'none');
}

How can you make Google VR View responsive?

How can you make Google VR View responsive?
https://codepen.io/EightArmsHQ/pen/mwLyvy
I've obviously set the the CSS width to 100%, but it doesn't crop as the screen becomes smaller than the view.
JavaScript
$( window ).on('load', function() {
$(".vrview").each(function(){
var $this = $(this);
var id = $this.attr('id');
var src = $this.attr('data-src');
var vrView = new VRView.Player('#' + id, {
image: src,
is_stereo: false,
width: '100%',
height: '400px'
});
});
});
CSS
.vrview{
width:100%;
max-width:100%;
}
But that doesn't seem to do anything.
I don't think there are any setters like setWidth(x) or set('width', x) so I can't do anything like this:
$(window).resize(function(){
for(var v = 0; v < vrViews.length; v ++){
var view = vrViews[v];
view.set('width', 40);
}
});

I believe if you omit the width and height in the JavaScript you can then size the iFrame (not the .vrview container) via CSS.

I actually had some joy with embed responsively.
I created the standard code, made an iframe, then copied the iframe into embed responsively to get the following code:
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<iframe allowfullscreen='true' scrolling='no' src='https://storage.googleapis.com/vrview/2.0/index.html?image=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5961/HY360_0103.jpg&is_stereo=false&' style='border: 0px;'></iframe>
</div>
Result:
https://codepen.io/EightArmsHQ/pen/Bdvrrw

Styles apply just to first two slides

I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>

It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.

You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio

I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch

How to fade background image so links/text is visible?

What I'm trying to achieve is to have an image fade upon mouseover so that text is visible - the image is (eg) a cd cover, and when the mouse-pointer is placed over the image, it should fade to show the track listing of the album. Each track listing is a hyperlink to the track on youtube.
I've zero experience of jquery, so am hoping to do this with javascript.
I'd be very appreciative of any help, as I've spent about two days now trying to google an answer.

If under "fade" you mean animation, try this:
function SetObjectOpacity(obj, op, op100)
{
obj.style.opacity = op.toString();
obj.style["-moz-opacity"] = op.toString();
obj.style["filter"] = "alpha(opacity=" + op100 + ")";
}
function FadeImage(imageid)
{
var framedelay = 50;
var frame = 0, img = document.getElementById(imageid), animint;
animint = setInterval(function() {
frame++;
SetObjectOpacity(img, frame / 20, frame * 5);
if (frame == 20) {
img.style.visibility = 'hidden';
clearInterval(animint);
}
}, framedelay);
}
And in HTML code:
<div style="width: 200px; height: 200px; position: relative;">
<div style="position: absolute; top: 0; left: 0; width: 200px; height: 200px;">
text you want to show
</div>
<img src="yourimage.jpg" id="yourimage" onMouseOver="FadeImage('yourimage');" style="position: absolute; top: 0; left: 0;">
</div>
Fading back on mouse out is obvious.

I really do recommend you use jQuery—it makes everything so much easier. And it's not really difficult. After all, we have the code ready for you (and I would be glad to explain it further), so all you need to do is include it.
So, assuming you go with jQuery, try this:
$(".overlay").hover(function(){
$(this).stop().fadeTo(300,0.8);
},function(){
$(this).stop().fadeTo(300,0);
});
And here's your HTML/CSS:
<div class="container">
<img src="http://placehold.it/200/200" />
<div class="overlay">
Hi<br>
Hi<br>
Hi<br>
</div>
</div>
.overlay {
position:absolute;
margin-top:-205px;
width:200px;
height:200px;
background-color:black;
opacity:0;
}

Issue with Facebook Like button in Windows Firefox

I've got a facebook like button ( iFrame edition ) that is overlaid on top of a full browser Flash application. The like button is hooked up to like separate images within the application, and when each new images is shown, the like button is refreshed with data using ExternalInterface.
The like button fades in and out for each new image using JQuery fadeIn() / fadeOut(), again being called with ExternalInterface.
The issue I'm having is that on Windows, this does not seem to want to work, in Firefox specifically...
CSS:
html {
height: 100%;
overflow: hidden;
min-width: 800px;
min-height: 600px;
}
#flashContent {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
}
body {
margin: 0;
padding: 0;
background-color: #000000;
}
#fb-like {
position: absolute;
bottom: 32px;
left: 510px;
width: 280px;
z-index: 9999;
display: none;
}
fb-like is the div containing the iFrame, and it's z-index is 9999 just to ensure it is always on top.
Here is the JS being used:
<script type="text/javascript">
var isVisible = false;
function showLikeButton( visible ){
if( visible == true )
{
$('#fb-like').fadeIn( 'slow' );
isVisible = true;
}
else if ( isVisible )
{
$('#fb-like').fadeOut( 'slow' );
isVisible = false;
}
}
var begOfUrl = "http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmywebsite.com%2fdirectory";
var endOfUrl = "&layout=button_count&show_faces=false&width=150&action=like&colorscheme=dark&height=21";
function sendIdToLikeButton( title, id ){
$( '#facebook-like' ).attr( 'src', begOfUrl + "%3Fid=" + id + endOfUrl );
}
</script>
where the sendIdToLikeButton method is taking the id of the photo sent from Flash using ExternalInterface to recreate the src attribute of the iFrame.
And of course, as this is a flash application, here is the minimal HTML:
<body>
<div id="fb-like">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fnfb.designaxiom.com/build13&layout=button_count&show_faces=false&width=150&action=like&colorscheme=dark&height=21" scrolling="no" frameborder="0" style="position: absolute; border:none; overflow:hidden; width:300px; height:40px;" allowTransparency="true" id="facebook-like"></iframe>
</div>
<div id="flashContent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
</body>
Again, this works everywhere except for Firefox in Windows, and I'm not sure what to do about it. I'm assuming that it is an error in the CSS or the Javascript somewhere.
Any help is greatly appreciated.
Thanks in advance.
Grammar

I finally figured this out after a couple weeks of back and forth. As it turned out the issue was with the iframe being placed over top of the flash content.
This was resolved by adding a param to the swfobject call -- setting wmode to transparent:
var params = {};
params.bgcolor = "#000000";
params.allowfullscreen = "true";
params.allowscriptaccess = "true";
params.wmode = "transparent";
var attributes = { id: "nfb", name:"nfb" };
var swfUrl = "Runner.swf";
swfobject.embedSWF( swfUrl, "flashContent", "100%", "100%", "10.0.0", false, flashvars, params, attributes );
Setting the wmode to transparent allowed for the "transparent" iframe to be placed over top of the application in every browser.
So as it turns out this was not an issue with the facebook like button at all, but with iframes and Flash. Of course if you are not using SWFObject to display your swf files, the wmode is a parameter that can be set in the Publish Properties in Flash when you publish your swfs.
Cheers