Here's my simple AlpineJS code -
<div x-data="{show: true}">
<video src="..." onended="show=false"></video>
</div>
I'm wondering why is this not working? No error is thrown.
Because you're trying to use native JS with AlpineJS. Instead, use x-on:
<video x-on:ended="show=false">
Related
Under jQuery 2.2.4, the below code was working. But after switching over to Bootstrap 4 and jQuery 3.5.1, it stopped working and I saw the error:
Uncaught TypeError: Cannot read property 'indexOf' of undefined
I was able to determine that the error was happening at the moment of attempting to use the load() method on the <video> container - but the container exists (el.length() == 1) and literally nothing else changed other than jQuery/Bootstrap.
HTML:
<div class="vlink"><div class="vid" id="bl">[ Video 1 ]</div></div>
<div class="vlink"><div class="vid" id="bg">[ Video 2 ]</div></div>
<div id="lb" class="absoluteDiv flex-parent">
<div id="inner" class="flex-parent">
<div id="closex"> × </div>
<div id="lbBody">
<div id="videoDiv">
<video id="video" width="700" controls><source id="vidsource" src="" type="video/mp4"></video>
</div>
<div id="explan"></div>
</div>
</div>
</div>
javascript/jQuery:
let id = this.id;
$('#vidsource').attr('src', './vid/'+id+'.mp4');
$('#video').load().attr('autoplay', true);
Solution:
Under Bootstrap4 / jQuery 3.5.1, it is necessary to set the src attribute on the <video> container itself (just totally ignore the <source> element.
Also, use attributes on the <video> container to force play:
let id = this.id;
$('#video').attr('src', './vid/'+id+'.mp4').attr('autoplay', true);
There is one report that this has something to do with the files being referenced in nested tags, specifically in webkit browsers.
Source:
https://stackoverflow.com/a/7993347
I'm trying to do an overlay when hovering images in React with this tutorial: w3 schools tutorial.
My code:
<div className="grid-item" key={movie.id}>
<img className="grid-images" alt={movie.title} src={movie.src}>
<div className="overlay">{movie.title}</div>
</div>
My error message: Parsing error: Expected corresponding JSX closing tag for <img>
As JSX doesn't allow not closing the img-tag, this method doesn't work. I can't seem to find an alternative how to do this in React with css. Anyone? :) Thanks!
You simply need to self-close the img tag by adding '/' just before the >:
<img className="grid-images" alt={movie.title} src={movie.src} />
This question already has answers here:
Image Get Requests with AngularJS
(2 answers)
Closed 6 years ago.
When loading the page the following error occurs:
<div class="row" ng-show="showChannels">
<div ng-repeat="content in formChannels" class="col-sm-2">
<div class="well alignCenter" ng-click="clickSintonizarCanal($index)">
<img src="{{content.images.image[0].url}}" class="img-responsive imgchannel" alt="{{$index}}">
</div>
</div>
</div>
I understand that is because when you start the page "formChannels" is null.
then when formChannels already has a value, everything works OK.
my question is, how do I avoid this unnecessary GET?
there is some way "Standar", Elegant, or simple to do it?
AngularJS has something for these cases?
thank you very much to all!
Just use ng-src. This will create the src attribute once it is ready.
<img ng-src="{{content.images.image[0].url}}" />
What you need to use is the ng-src directive. That way the browser won't try and load the image until angular has been bootstrapped. See here for documentation.
https://docs.angularjs.org/api/ng/directive/ngSrc
So your image tag will look like this:
<img ng-src="{{content.images.image[0].url}}" class="img-responsive imgchannel" alt="{{$index}}">
I have been following thenewboston's HTML5 video tutorials and have been trying to change bits to use AngularJS. However, I am having trouble with the bar not updating when you click in a different place than where its currently playing at.
My code:
https://github.com/IdrisAbdul-Hussein/portfolio2.git
Essentially, I have a video.html file which loads the video player etc (video.html is included in the repo) which looks like this:
<div id="big_wrapper">
<section id="skin">
<video id="myMovie" width="640" height="360">
<source src="videos/testVideo.mp4"/>
</video>
<nav>
<div id="buttons">
<button type="button" id="playButton" ng-click="playOrPause()">Play</button>
</div>
<div id="defaultBar" ng-click="clickedBar()">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</div>
The functions that the ng-click's refer to are in my controller.js.
The error that I'm getting is:
TypeError: e is undefined - controller.js(line 53)
However, when I put ng-click="clickedBar(this)" then it gives me the following error:
Error: Value being assigned to HTMLMediaElement.currentTime is not a finite floating-point value. - controller.js(line 55)
I'm not sure which is more in the right direction and not sure how to solve the problem! Been bashing my head trying to fix this problem for a while.
Any help is appreciated!
Thanks in advance!
In angular expressions this points to current scope object, not to the DOM element like in HTML event attributes.
You need to pass DOM node into your ngClick handler which is available in $event.target:
ng-click="clickedBar($event.target)"
Your "e is undefined" error is because your code expects e to contain the click event. ng-click="clickedBar() does not pass the event to clickedBar. Try ng-click="clickedBar($event)"> instead.
I have a website with some JS accordions on it, they do not open, however they do on codepen. I have looked in the console on chrome and I go no error messages. However when I looked in the console in Firefox I get the following error message 7 times:
HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://xurbia.tk/alpha/homebeta.html failed. homebeta.html
All candidate resources failed to load. Media load paused. homebeta.html
I have no idea what is going on here so any help is much appreciated.
The relevant code for one of the accordions is as follows:
<dt>
<a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">
<img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-left"/>
Detox
<img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-right"/></a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
<img src="http://xurbia.tk/alpha/pictures/accordian%20pictures/Detox.PNG" width="100%" height="100%" />
<audio controls>
<source src="" type="audio/wav" width="100%">
Your browser does not support the audio element.
</audio>
</dd>
The full code can be found here:
http://xurbia.tk/alpha/Stackoverflow.txt
Here is the code-pen where I started making the accordions:
http://codepen.io/shardros/pen/OyJqzj
Here is the website that they do not work on:
http://xurbia.tk/alpha/homebeta.html
On the live site, your JavaScript is written using the module pattern...which is good.
This pattern uses an immediately invoked function expression (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
This means that as soon as the function is declared, it is invoked (and executes).
Because you have this script in the <head> section of your page, it executes before the DOM has loaded (before your actual page loads).
This means that your JavaScript tries to add event listeners and manipulate elements that do not yet exist!
In order to fix this, move the <script> tag out of <head> and place it as the last element within the <body> tag.
This will have the effect of the JavaScript being invoked after all necessary elements have been created.
(Your example works in Codepen because they execute the JavaScript after the DOM has loaded)
Your problem is that your JS is executing before the page is loaded. It's good practice to insert your JS at the end of the <body> element to improve page load speed.
You could also use an event to fire after the page loads like this:
window.onload = function(){
//Page has loaded
}