I have this code that is bringing in a video background file.
I am trying desperately to create multiple links that when clicked change the "filename" cloud to different file,
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../jquery.backgroundvideo.min.js"></script>
<script>
$(document).ready(function() {
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": "cloud",
"types": ["mp4","ogg","webm"]
});
});
</script>
any help would be greatly appreciated
The plugin creates a div called #video_background. Just remove it and call $.backgroundVideo again. You could put that in a function with the filename as a parameter:
function changeVideo(filename){
$('#video_background').remove();
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": filename,
"types": ["mp4","ogg","webm"]
});
}
To call it by clicking on a link, you could do this:
Sun video
And
$('[data-video]').click(function(e){
e.preventDefault(); // prevent the link from reloading the page
changeVideo( $(this).attr('data-video') );
});
Related
I want to play a random video on my website. But I don't know how I can make that, because I'm a noob with HTML & JSS. I searched for a simple way to do that, but I can't find a solution.
Thats my code on the Website, where the different videos should come:
<div class="bg-video-wrapper" id="video-background-1">
<div class="bg-video-overlay bg-dark-alfa-50"></div>
</div>
And thats my code for "video-background-1":
var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
"align": "centerXY",
"width": 1920,
"height": 1080,
"path": "assets/videos/",
"filename": "trailer3",
"types": ["mp4", "ogg", "webm"],
"autoplay": true,
"loop": true
Is it possible to add a filename to "trailer3" with a comma or something? Is there an easy way to add a video and it get picked randomly which one is played?
How many videos do you have? You could build a hashmap with a numeric key <int, path to video>
then use a random number function for example:
Math.floor(Math.random() * 11); //gets 0-10
and use that number as a key to get filename from the hashmap to use in the request...
Building a little on #ItGrunt's answer (upvote his, too, if you found mine helpful):
You would have to implement something like this:
var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
"align": "centerXY",
"width": 1920,
"height": 1080,
"path": "assets/videos/",
"filename": ["trailer1", "trailer2", "trailer3"][Math.floor(Math.random()*3)],
"types": ["mp4", "ogg", "webm"],
"autoplay": true,
"loop": true
You could also write a function for this to clean your code up like the following:
function random(a) {
return a[Math.floor(Math.random()*(a.length))]
}
var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
"align": "centerXY",
"width": 1920,
"height": 1080,
"path": "assets/videos/",
"filename": random(["trailer1", "trailer2", "trailer3"]),
"types": ["mp4", "ogg", "webm"],
"autoplay": true,
"loop": true
It's probably really easy but I just can't figure out how to change the ticker symbol in the Tradingview widget. I want the chart to change to the tickers in a array i got. The chart needs to change every 30 seconds with a new ticker and do that forever.
This is what I got so far:
<div class="tradingview-widget-container">
<div id="tradingview_5889e"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">RIG</span> <span class="blue-text">chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var i = 0
function createchart(){
var companies = ['NYSE:SDRL','NYSE:RIG','CHXEUR:SEVDRO','NYSE:TK','CHXEUR:GBBP']
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": companies[i],
"interval": "15",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true,
"container_id": "tradingview_5889e"
}
);
i++;
}
setInterval(createchart(),10000)
</script>
</div>
Hope you guys can help me out. Been struggeling on this for way too long.
You can write it like this also
setInterval(createchart, 10000);
Try using:
setInterval(function(){
createchart()
}, 10000);
For some reasons it usually doesnt work the other way
That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}
Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.
I have a package.json file that looks like:
{
"name": "title",
"description": "description",
"version": "0.1",
"main": "https://path-to-application/",
"window": {
"show": true,
"toolbar": false,
"frame": true,
"position": "center",
"width": 800,
"height": 600,
"min_width": 220,
"min_height": 220
}
}
But when I attempt to run the code:
var GUI = null;
var win = null;
try { GUI = require('nw.gui'); win = GUI.Window.get(); } catch (ex) { }
win.toggleFullscreen();
Nothing happens, adding alerts for GUI and win show they are both set to null. When I run the same code from an index.html file within the same .zip as package.json it works as expected. It appears to be failing with the initial call to require().
Is there some way to get this working in a remotely hosted application?
I was able to solve this following by adding the node-remote field to the package.json file if anyone else runs into this issue.
I'm getting to grips with ExtJs 4 and having an issue showing a modal window upon a double click event on a grid.
A listener defined on grid component:
"listeners": {
"itemdblclick": function() {
var win =Ext.getCmp('myCmp');
win.myWindow.show();
}
}
previously defined property of myCmp to be a window component:
(I've used the parent container object myCmp as I'm code generating the javascript to build the ExtJs config)
myCmp.myWindow = Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
....
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
});
The logic works well, I double click the grid, the window object is present (myCmp.myWindow) but when i call show() the window is displayed very small (6px x 6px).
if I change the handler to :
Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
....
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
}).show();
It works ok. obviously this is creating a new window instance.
Any ideas? am I doing this right?
Thanks in advance
sam
Why do you refer to "myCmp" when you can directly refer to your window?
var win = Ext.getCmp('myWindow');
win.show();
This should work. Also, Why do you instantiate a window else where and then use it? Wouldn't it be better to create a instance when you need it and destroy it after use?
Also, you should configure the window correctly. The width and height are numeric fields and not string. Refer to api documentation and examples to see how to configure the objects properly. you should use the following window:
Ext.create('Ext.window.Window',{
layout: 'fit',
items: [
....
],
title: 'Hello Window',
width: 300,
height: 300,
id: 'myWindow'
}).show();