myI have a bootstrap 3 carousel on my page and I've got it set so that on load the autoplay is disabled
$('#myCarousel').carousel({
interval: false
});
I've added some more code so that when the text appears on the screen it should start autoplaying
function myCarouselPlay(){
$('#myCarousel').carousel({
interval: 5000
});
}
Unfortunately this isn't working. Any ideas why?
Hello Can you please try this
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({
interval: 3000
});
$('.carousel').carousel('cycle');
});
</script>
Related
I'm using SweetAlert v10.14.1 as a toastr with code
<script>
const Toast = Swal.mixin({
toast: true,
position: 'top-right',
showConfirmButton: false,
timer: 5000,
})
</script>
it works fine .. but the message dropped down from top with white background .. i want to :
1- fade it in and out
2- change apperance to a bootstrap theme
No fade-in effect at the moment. If you want to remove the "boing" effect, you can just do it adding to your props:
Swal.fire({
... you other props...
showClass: {
popup: "", // it removes the 'boing' effect, the default value is 'swal2-show'
},
});
I have a scene where I am changing the src for sky using buttons I created "outside the scene". Currently everything works fine but I would like to show a preloader while waiting for the next image to load.
Here you can see my scene: http://scriptstrainer.com/vr_training/
Below I have provided some of my code:
<a-scene>
<a-sky src="images/0-1.jpg" id="img-src">
</a-scene>
<div>
<img src="images/t1.png">
</div>
<div>
<img src="images/t2.png">
</div>
<div>
<img src="images/t3.png">
</div>
<script>
var sky = document.querySelector('#img-src');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
sky.setAttribute('src', 'images/0-1.jpg');
});
button2.addEventListener('click', function() {
sky.setAttribute('src', 'images/2.JPG');
});
button3.addEventListener('click', function() {
sky.setAttribute('src', 'images/3.JPG');
});
</script>
Thanks for your assistance...
https://aframe.io/docs/0.4.0/components/material.html#events_materialtextureloaded
There's an event materialtextureloaded you can use to detect when the texture has loaded onto the mesh. In between the time you request to set the texture and the time the texture is set, you can display a loading graphic.
button1.addEventListener('click', function() {
sky.setAttribute('src', 'images/0-1.jpg');
// Display something in the meantime.
sky.addEventListener('materialtextureloaded', function () {
// Small timeout just in case?
setTimeout(function () { // Remove the placeholder. }, 100);
});
});
The loading graphic can be like a spinning object in the scene, a fade-in black mask around the camera (as used in https://github.com/aframevr/360-image-gallery-boilerplate). It depends on what you want it to be.
I had the same scenario where I wanted to add a preloader and only when the image is displayed, to remove the preloader.
I tried using events 'load' and 'loaded' but didn't work as I found out images are not displayed once they finish loading.
Eventually I got help from the AFrame GitHub page and that's how I did it:
<a-assets>
<img id='img-src' src='image.jpg'/>
</a-assets>
<a-sky src='#img-src' id='sky-id'></a-sky>
<script type='text/javascript'>
var skyEl = document.querySelector('#sky-id');
function loaded()
{
var preloader = document.querySelector('#preloader');
preloader.style.display = "none";
}
skyEl.addEventListener('materialtextureloaded', loaded);
</script>
Cycle2 carousel conflicting with cycle2 slideshow at the same page.
Means i setup two different slider .Each of them having different Images.
Carousel works fine with $.fn.cycle.defaults.autoSelector = '.carousel'; and
Slider works fine with $( $.fn.cycle.defaults.autoSelector ).cycle();
but not at the same page. How to work them at same page?
I 've tried $.fn.cycle.defaults.autoSelector = '.carousel,.slidershow'; did't work.
I had the same problem with a slideshow and a carousel on the same page. In the slideshow section I used this:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( '.cycle-slideshow' ).cycle();
});
</script>
In the carousel section I used:
<script>
$.fn.cycle.defaults.autoSelector = '.carousel';
</script>
I am using video.js (in CDN-Mode) and everything seems to work fine (with Firefox 26.0). The video is embedded and works fine. But when I want to access the video-Object, I'm getting the console-error:
ReferenceError: videojs is not defined on the code-line where I want to access the object:
var myPlayer = videojs('example_video_1');
Googling arround could not solve my problem. I saw implementations where users used: V as constructor instead of videojs but this did not solve my problem).
This is my script, where I want to access the object:
<script type="text/javascript">
$("#button1").on("click", function(){
console.log( "You clicked a paragraph!" );
var myPlayer = videojs('example_video_1');
});
</script>
This is my header
<link href="http://vjs.zencdn.net/4.5/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.5/video.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
And this is my video-declaration
<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="1270" height="720" poster="videos/search.png"
data-setup="{}">
<source src="videos/search.webm" type='video/webm'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
I would be happy for any kind of support.
A year and a half later and this issue occurred for me as well. I just installed it via npm install --save video.js and moved the file from the dist folder into my public scripts folder and it worked.
You must install or use from #videojs/http-streaming. I had same problem and solved by it.
I just made sure that the video.js file was the last attached script tag in the HTML. It worked for me.
import videojs from 'video.js';
try:
<script type="text/javascript">
$("#button1").on("click", function(){
console.log( "You clicked a paragraph!" );
var myPlayer = window.videojs('example_video_1');
});
</script>
add the event listener 'DOMContentLoaded' before calling the videojs object:
window.addEventListener('DOMContentLoaded', (event) => {
videojs('element-id', {
controls: true,
autoplay: false,
preload: 'auto'
});
});
I was wondering if somebody could help me with this problem. Everytime I show an Ext.Window with its modal config set to true, in FF and IE, it works fine, i mean everything behind the popup window is masked, whereas in Safari and Chrome, it doesn't. When i try to scroll down the page, I can see the mask is limited, which is not what i wanted to happen because one can easily do some stuff on the parent page even when the window is not yet closed. Can somebody help me? Thanx in advance. :D
I thought maybe this would happen if you were not running in a Viewport, so I put together a simple example. It turns out that the modal mask works just fine in Safari in this example. Give it a try and see where your code differs.
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var p = new Ext.Panel({
renderTo: 'panel',
html: 'this is the panel',
tbar: [{
text: 'Show a Modal Window',
handler: function() {
new Ext.Window({
title: 'Title',
html: 'Try scrolling - the entire page should be modal',
modal: true
}).show();
}
}]
});
});
</script>
</head>
<body>
<h1 style="height:100px;background-color:green;">html page</h1>
<div id="panel"></div>
<h1 style="height:1200px;background-color:green;">html page</h1>
</body>
</html>
It should work fine in Safari and Chrome out of the box. I just verified this page in Safari 4.0.4 Mac and it works fine with scrolling and/or resizing the browser. There's a chance maybe there's a bug in Ext for your particular browser/platform, but this is such a basic functionality that I doubt that. Does that page work for you?
This helped set the z-index for Ext.Msg.show() alerts to be infront of the window they were opened from for me.
Ext.WindowMgr.zseed = 10000;