I'm trying to make my app work in VR mode, with AR.js, on my iPhone but that's the look I have when I enable this mode (on iOS 15.4.1) :
Screenshot
(The main problem is that the camera screen doesn't split in two screen)
That is my scene in my body tag
<a-scene
vr-mode-ui="enabled: true;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;">
<div class="arjs-loader">
<h1>Loading...</h1>
</div>
...
<a-entity camera></a-entity>
</a-scene>
Do you have any idea why I have this render in VR mode and what is the solution for that ?
Thanks 😄
Related
I am showing position from django model like marker with popup:
my view file
<script>
const MAP_KEY = "{{ MAP_KEY }}";
const added_place_json = JSON.parse('{{ added_place_json | escapejs}}');
</script>
my js file
for (const place of added_place_json){
L.marker([place.fields.lat, place.fields.long]).bindPopup(
`<div class="card" style="width: 15rem;">\n` +
` <h6 class="card-header">Name place:<br>${place.fields.name}</h6>\n` +
` <div class="card-body">\n` +
` <p class="card-text" style="overflow: scroll">Place comment:<br>${place.fields.comment}</p>\n` +
` </div>\n` +
`</div>`
).addTo(map)
};
This works well on google chrome, but it doesn't work on safari. When I click on the marker in safari nothing happens
This is a bug of Leaflet 1.7.1, see Leaflet #7255
In the newest master version of leaflet it is working, see Issue Comment
So I recommand to change your leaflet-src from the Leaflet Release 1.7.1 to the master branch on Github
If for some reason you have to stick to 1.7.1 and you do not need to handle the 'taphold' event, initiating the map with tap: false might solve this issue for you.
(As suggested here https://github.com/Leaflet/Leaflet/issues/7331#issuecomment-742454380)
On this page there is a slider updating a input box with example HTML code. You can also see that same code in the source.
I would like to use this in my application so I transplanted it into my code and converted it to Jade (aka Pug). The source now looks like:
div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")
And the resulting html looks like this (after prettifying it):
<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>
Which is very close that shown on in the docs. However on the resulting page the input box is not updated. If I change the input box to a span like in the
'With Label' example it updates.
span(id="days-off-count" value="28")
becomes
<span id="days-off-count" value="28"></span>
I have the foundation.js and the .slider.js included at the bottom of the page.
In addition, if I manually change the value of the input box via the keyboard the slider will jump to that position, so there is some sort of link there.
The software being used:
Ubuntu 14_04
Chrome
Node v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0
Other things to note:
The page has more than one slider so any javascript solutions need to take this into account.
I think this is a bug (hasOwnProperty instead of hasAttribute #6221) in the version of Foundation (5.5.0) you're using. It seems that while it initially applied only to Firefox, it now applies to Chrome too.
Example with (broken) sliders from 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3
Example with (working) sliders from 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3
The bug was fixed here: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45
Basically, go to foundation.slider.js and change this (line 157):
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}
to this:
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasAttribute('value')) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}
This is not my fix, it's the same as the patch, but it should mean that when you do upgrade you don't need to modify your application code to account for a workaround.
1) Maybe I be wrong... but you didn't specify the version, you give an example from Foundation v5... are you not have installed Foundation v6?
Try this example : https://foundation.zurb.com/sites/docs/slider.html
2) After you include your js files, you need to have this:
<script>
$(document).foundation();
</script>
Edit: Sorry, first time I didn't read all, maybe the problem is that the Foundation use the "value" attribute, which is an attribute designed for <input> tags:
value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element
Source: https://www.w3schools.com/tags/ref_attributes.asp
I am putting together a Cycle2-based carousel where, essentially, every other image should be a black and white image. So, on first load it would be something like this:
IMAGE A = B&W
IMAGE B = Color
IMAGE C = B&W
IMAGE D = NOT SHOWN
Once the slideshow advances, it would be something like this:
IMAGE A = NOT SHOWN
IMAGE B = B&W
IMAGE C = Color
IMAGE D = B&W
I discovered Gianluca Guarini's jQuery.BlackAndWhite plugin which handles the black and white conversion by adding the class .bwWrapper. If I use the scrollHorz parameter, the two work nicely together, but not when using carousel. The carousel runs as expected, but BlackAndWhite isn't coming into play.
My code is below. The only difference between the two blocks is one is in a DIV. My guess is jQuery.BlackAndWhite runs on (window).load and Cycle2 carousel enters the picture after that?
Any thoughts on how to get these to cooperate?
<h3>Cycle2</h3>
<div id="slideshow">
<img src="/assets/images/img01.jpg" height="200" alt="test image">
<img src="/assets/images/img02.jpg" height="200" alt="test image">
<img src="/assets/images/img03.jpg" height="200" alt="test image">
<img src="/assets/images/img04.jpg" height="200" alt="test image">
<img src="/assets/images/img05.jpg" height="200" alt="test image">
</div>
<div class="center">
Prev
Next
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/assets/js/jquery.cycle2.js"></script>
<script src="/assets/js/jquery.cycle2.carousel.min.js"></script>
<script src="/assets/js/jquery.BlackAndWhite.js"></script>
<script>
$(window).load(function() {
$('#slideshow').cycle({
fx: 'carousel',
speed: '1000',
slides: '> a',
next: '#next',
prev: '#prev'
});
$('.bwWrapper').BlackAndWhite({
hoverEffect: false,
invertHoverEffect: false
});
});
</script>
You can just use CSS to make the images grayscale. Here is a cross-browser compatible style that I've used in the past. The first filter is for Firefox, second for IE, and third for the other modern browsers.
.bwWrapper img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
As per Foundation 4 it is possible to switch slides using a button outside the orbit slider. Is this possible in Foundation 3?
I have a button group (see below) that corresponds with individual slides within the orbit slider the goal is when button is clicked it changes slide in the slider.
<ul class="button-group even three-up">
<li>Slide 1 text</li>
<li>Slide 2 text</li>
<li>Slide 3 text</li>
</ul>
Any advice is greatly appreciated, thanks a ton in advance.
I am using zurb foundation 4 framework. The following test site looks fine on desktop view for me. On desktop view, I have on the left side: large-7 columns (gray content text box); on the right side: i have: large-5 columns (image 1 green and image 2 blue). Please help me with exact code example. On tablet and phone view, I would like to rearrange the order of the div columns to: image 1 green box first, and then below that is gray content text box, and then below that is image 2 blue box. Please help me with exact code example. Thank you so much in advance!
Here is the preview of what I have so far: http://www.endsnore.com/_test1/marketing5.html
Here is an example of what I want to happen on tablet and phone view: http://www.endsnore.com/_test1/images/_delete14.jpg
You can't have that layout without doing some jquery or javascript. There is no built-in css solution or even javascript from Foundation that will do the trick for you.
You can try this solution. First you need to have a layout something like this:
<div class="row">
<div class="small-12 columns show-for-small" id="topContent"></div>
<div class="large-7 small-12 columns panel">1st column</div>
<div class="large-5 small-12 columns panel">
<div id="img1" class="panel">img1</div>
<div id="img2" class="panel">img2</div>
</div>
</div>
And then have this script to move the first image on top:
$(document).foundation();
$(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});
Take note that the script only works on load of the page and not when resizing the browser - I don't think you will need it that way anyway. But for whatever reason you do, then just enclose the "width" logic in a resize function, something like:
$(window).resize(function () {
var wd = $(window).width();
if (wd < 768) {
$("#topContent").append($("#img1").detach());
}
});