We Keep Coding

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

Simple image with text slider/rotator

I need to create a simple image + text rotator. Like on the picture https://dl-web.dropbox.com/get/Public/rotator.jpg?_subject_uid=6084477&w=AADd9lfxtZZzhWbGMTKwMdWn3eVjgGZ_OplgxVycsivbHA.
It will be a small block in the body of the page. Elements should change automatically after certain time, but it should be also possible to rotate them with arrows.
I am a newbie in programming, so my apologies if this is too obvious question. I suppose I should use CSS and Javascript here?
Also I've tried to google for some code example, but everything I find looks too complicated, while I need really light and basic functionality.
Thanks for advice.

The basic idea of something like this is to have a div with position: relative and width and height of one image. Lets call it #images_holder. In this #images_holder would be another div with position: absolute, height of one image, and width of all images. Lets call this inner div #moving_part. In this #moving_part you can put your images. If you want to have images with text, create div with float: left, position: relative and width and height of one image for each image. Lets call this divs .image_holder. Inside .image_holder you can put your images and texts for example as spans with position: absolute.
With something like this you are able to move the #moving_part by setting left with javascript.
I wrote an example of this using jQuery, but it's intended just to show you the way, it's not complete solution. It has some flaws, like if you click multiple times on move_left_button while moving, it can move your images outside viewable area, as the checking if it can be moved is done as soon as you click the button and it does not consider if it is already moving. To solve this you should use for example data-moving attribute, set it to true when moving is started and to false when it's finished, and start moving only if it is set to false. It would be also good idea if the width and height were dynamicly obtained from elements instead of hardcoding it. With this code as it is you will have to put your own values for widths and heights, and calculate when moving should be allowed based on image width, count of images and current left value.
Also this would work only if you have just one slider per page. If you want to have more you have to change ids to classes, and rewrite the code so it move only moving_part of the images_holder you clicked. Something like $( ".images_holder" ).each( function(){ $this_moving_part = $( this ).find( ".moving_part" ); /* and so on... */ } );
Here is Jsfiddle: http://jsfiddle.net/5Lc7cc7u/
HTML:
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
CSS:
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 1440px; /* image_width * number_of_images */
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
Javascript:
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
function move_left() {
if( get_acct_left() >= -480 ) {
$( "#moving_part" ).animate( {
left: "-=480px"
}, 1000, function() {
if( get_acct_left() <= -480 * 2 ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: "+=480px"
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );

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 make tooltip display beside every image

I have several images that I applied jQuery tooltip effect on..it works, but the problem is that irrespective of the image i click the tooltip only displays at the top of the page.
Is there a way I can make the tooltip appear beside each image that is clicked.
The jQuery I have so far looks like this :
$('.image').hover(function () {
$('.tooltip').fadeIn(1000);
}, function () {
$('.tooltip').fadeOut(1000);
});
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})
CSS
.tooltip {
display: none;
height: auto;
position: absolute;
background-color: #D1C585;
color: black;
border: 2px solid rgba(128, 0, 32, 0.3);
padding: 5px;
border-radius: 5px;
font-family: actor;
}
HTML
<img src="image.jpg" class="image">

It needs to have position: absolute and its parent has to be position: relative. Inside the hover function do:
$('.tooltip').css({
top: e.pageY,
left: e.pageX
})

It all depends on where the location of the tooltip node is located. However, you can get the fixed position of the image by grabbing and adding all the offsetLeft/offsetTop of all the element and it's parents. For example.
$('.image').hover(function() {
var e = this,top=0,left=0;
while(e){
top+=e.offsetTop;
left+=e.offsetLeft;
e=$(e).parent();
}
$(this).css({position:'fixed',top:top+"px",left:left:left+"px"});
$('.tooltip').fadeIn(1000);
}, function() {
$('.tooltip').fadeOut(1000);
});
I did not test this code. However, I hope this points you in the right direction. You can then use the size of the image(offsetHeight and offsetWidth) to position the tooltip around the image.

Here is an example using jquery ui, see jquery ui tooltip for documentation
HTML
<img src="http://img262.imageshack.us/img262/68/sahara4rs.jpg" title="tyre">
Javascript
$(document).tooltip({
track: true,
show: {
effect: "fade",
delay: 1000
},
hide: {
effect: "explode",
delay: 250
}
});
On jsfiddle

background image event handler

If a HTML element (e.g. div) has a CSS background image is it possible to assign an event handler that is triggered when the user clicks on the background image, but not any other part of the element?
If so, a JQuery example would be much appreciated.

While it's not possible to detect a click on the background image, you can use some clever JS and CSS wizardry and come up with a masking element over the background image like this: http://jsfiddle.net/ahmednuaman/75Rxu/, here's the code:
HTML:
<div id="bg_img_1"></div>
<div id="bg_img_2">
<div id="hit"></div>
</div>
CSS:
div
{
display: block;
position: relative;
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-position: center center;
}
#bg_img_1
{
background-image: url('http://placekitten.com/100/100');
}
#bg_img_2
{
background-image: url('http://placekitten.com/100/100');
}
#hit
{
display: block;
position: absolute;
width: 100px;
height: 100px;
background: #000000;
opacity: .3;
margin: 50px;
}
JS:
function handleClick(e)
{
console.log(e.target.id);
}
$( '#bg_img_1' ).click( handleClick );
$( '#hit' ).click( handleClick );

I think there is a better and simple way to achieve this here is my solution
$(document).ready(function() {
$("*").click(function(event)
{
if(event.target.nodeName == 'BODY')
{
alert('you have just clicked the body background');
}
});

Here is a very basic code that only work in x axis to show it's possible with injection of an img element with background-image url value as it's src and detecting the background image height and width to calculate if click happened on background image or not.
This code needs tons of improvement. It doesn't work in y axis. Also background-position and background-size are not involved. But it's easy to add those futures.
Here is Fiddle:
And here is jQuery code:
$('#d').bind('click', function(e){
var d = $(this),
bg = {};
//insert an image to detect background-image image size
$('body').append(
$('<img/>').attr('src',
d.css('background-image').split('(')[1].split(')')[0]
).attr('class', 'testImage'));
bg.h = $('.testImage').height();
bg.w = $('.testImage').width();
console.log(bg, e.offsetX, $('.testImage').width());
if(e.offsetX > $('.testImage').width()){
$('#l').text('it was NOT on background-image');
}
else{
$('#l').text('it was on background-image');
}
$('.testImage').hide();
})