Rendering a background using bigvideo.js within a Rails application - javascript

I have the following implementation of bigvideo.js functioning perfectly outside of my Rails project.
<script src="modernizr.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui-1.8.22.custom.min.js"></script>
<script src="jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/3.0/video.js"></script>
<!-- BigVideo -->
<script src="bigvideo.js"></script>
<script>
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('yay.jpg');
} else {
BV.show('test.mp4',{ambient:true});
}
</script>
However, when I try to translate this to Rails, it will not render either the image or the video.
- I have all javascript files in assets/javascripts. They appear to be pulling correctly.
- Application.js is untouched and includes //= require_tree .
- For the custom JS (the one where the js code is displayed above) I currently have it as a JS file in assets/javascripts. I've tried putting the relevant image/video files in the folder with it, changing the paths to web addresses for the files, and naming it .html.erb and using ruby snippets, all with no success.
How can I make my implementation work? You can see it working outside of Rails here.

I was able to get BigVideo to work with rails. I'm not sure if this is the most ideal fix, but if you give the full url for the video (via something like <%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>) it will load on the page.
So the code I ended up using in the end was:
<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show("<%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>",{ambient:true});
});
</script>
I've set up an example app that you can take a look at. It's located here (note: I tried to remain somewhat faithful to your onepager example, but it's not exactly the same):
http://bigvideo.herokuapp.com/
You can also see the code I used to create it here:
https://github.com/scouttyg/bigvideo-example
I also did some fun stuff like put the video in its own directory (assets/videos), and added the precompiled paths to application.rb as well.
I think the idea is in general, you should use BigVideo with a CDN and not serve it up from the rails app itself -- similar to why it's suggested in rails to offload file uploading to things like S3, etc.

if js working properly your files would render properly in case you put them into app/assets/images directory and include them into js like below
BV.show('assets/yay.jpg');
} else {
BV.show('assets/test.mp4',{ambient:true});

Another way:
Add these (required) lines of code to your application.html.erb file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.11.3/video.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/BigVideo.js/1.1.5/lib/bigvideo.js"></script>
and then the code Scott included above
<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show("<%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>",{ambient:true});
});
</script>
...and then eventually decide to do it a better way, because this will get things working at the very very least.

Related

Loading a function on pageload wont load Laravel 5.0

I currently call a file using onload in javascript.
It works fine, I just can't seem to get it to work in Laravel, if I load an html file it's fine, but not a php file.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#query").load("test.php");
});
</script>
</head>
<div id="query"><img src='https://m.popkey.co/163fce/Llgbv_s-200x150.gif'/></div>
<div id="query2"><img src='https://m.popkey.co/163fce/Llgbv_s-200x150.gif'/></div>
Results are blank.
The test.php file is located in the public folder, it just has a simple echo in it:
<?php echo 'This is Working';
I have a test.html in the same folder that returns what ever I put in it perfectly, it seems to be an issue with javascript pulling the php file.
If i run this url : https://domain/Home/public/test.html it works fine, if i run this url https://Domain/Home/public/test.php it also works fine. The test.php echo's out This is Working
I had a similar issue a while back.
What i did was not run the file directly from the public folder, i created a Route.
Route::get('test.php', function(){
echo 'This is Working';
);
Now you can either run what you want directly from this function or return it to your view.
Now you can use :
<script type="text/javascript">
$(function() {
$("#query").load('test.php');
});
</script>
What Configuration are you using? This link shows that it's a problem using Laravel Valet. Github Issue Here.
I would recommend that you use an API route for loading these images and try to keep everything within the Framework for the sake of neat and tidiness?
But for a quick solution:
Route::get('foo.php', function () {
return 'foo';
});
API: (Within routes/api.php
Route::get('/test', function () {
return asset('assets/images/image.jpg');
});
and your JS would point to your URL of the Route.
Add the script tag of jQuery function in body and make sure you have used jQuery CDN for access the jQuery function
Can you please try this?
$("#query").load("{{ asset('public/test.php') }}");
I think this solve your problem

CKEditor baseHref not working and editor not working after minification/bundeling

I am developing a Web-Application using ASP.NET MVC 4 and I am trying to use CKEditor for some content editing.
In debug everything works fine as long as no bundeling or minification is happening, but as soon as this does CKEditor generates wrong URLs even if I have set baseHref:
CKEDITOR.replace('ckeditor',
{
autoUpdateElement: true,
baseHref: '#Url.Content("~/Scripts/ckeditor/")',
filebrowserImageUploadUrl: '/Uploads/Upload'
});
In debug the following is included:
<script src="/Scripts/ckeditor/ckeditor.js"></script>
And after bundeling/minifaction it is just:
<script src="/bundles/ckeditor?v=dLE-_JqB4vxXJ9idGep_8yUL8KfOwGhfYoEZAeIudoE1"></script>
and it trys to load the following JS files:
http://DOMAIN.net/CONTROLLER/ACTION/config.js?t=D26D
Which is wrong as it should be:
http://DOMAIN.net/Scripts/ckeditor/config.js?t=D26D
Does anyone know what I am doing wrong or how to fix this?
Alternatively I would also be fine with a possibility to disable bundeling/minification for that one bundle to avoid that problem.
Try to add the following content before include the ckeditor's js file:
<script type="text/javascript">
var CKEDITOR_BASEPATH = '#Url.Content("~/Scripts/ckeditor/")';
</script>
More information: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Specifying_the_Editor_Path
And it will also work with ckeditor 4.x.
I had similar problem but found this to work. Include it in the cshtml layout file.
<script>
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
</script>
or with JQuery
$(document).ready(function() {
CKEDITOR.basePath = "#Url.Content("~/lib/ckeditor/")";
});
I found that a similar approach to #bluee worked for me:
I put the following in my cshtml layout file:
<script type="text/javascript">CKEDITOR_BASEPATH = "#Url.Content("~/Scripts/ckeditor/")";</script>
#Scripts.Render("~/Scripts/ckeditor/ckeditor.js")
The subtle difference being using CKEDITOR_BASEPATH rather than CKEDITOR.basePath. This resolves the 'CKEDITOR is not defined' issue.
I met the same problem. In fact, the bundle system trouble the ckeditor loading. So you can avoid it doing the following :
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/Script/CKEditor/ckeditor.js")
#Scripts.Render("~/Script/CKEditor/adapters/jquery.js")

Referencing javascript from trac wiki

I have a problem running javascripts from trac.
I know there are security issues around this, but my trac installation is only used as an intranet.
I have got the following code to work (requires setting rendering_unsafe_content = true under [wiki] in trac.ini):
{{{
#!html
<script type="text/javascript" >
document.write("This is a test")
</script>
}}}
However, replacing this with the javascript in a seperate file will fail:
{{{
#!html
<script type="text/javascript" src="/tracproject/htdocs/test.js" >
</script>
}}}
where tracproject is the root folder of trac and test.js contains document.write("This is a test").
Any clues?
Have you tried the 'Add Headers Plugin' (http://trac-hacks.org/wiki/AddHeadersPlugin) ? It looks like it allows you to do include custom javascript like you want but in a more straightforward way than having to modify templates directly.
The option is [wiki] render_unsafe_content (see documentation). You can reference the file in your site htdocs directory on the path /tracproject/chrome/site/test.js. I tried your example just now and it work correctly once the src path is changed.
See the TracInterfaceCustomization page for more details.

javascript error: this.node is null or not an object

I am working on ASP.NET 3.5, c#, visual studio 2010. I have made a master file and a default page that uses this master file. I have placed a couple asp:contentplaceholders in the master and corresponding code in the page that uses this master. I have also inserted JavaScript like this in the content page (and not the master):
<asp:Content ID="Content6" ContentPlaceHolderID="Mainpage" Runat="Server">
<script src="path1" type="text/javascript"></script>
<script src="path2" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
</script>
</asp:Content>
On running the website I get the following runtime error in visual studio:
Microsoft JScript runtime error: 'this.node' is null or not an object
and it point to some function inside the JavaScript like
this.node.onload=function(){..............//I am not a java guy so do not know much about this
Where am I going wrong? Why does the site compile correctly but throw this runtime error?
I also tried inserting this java code inside the master file in the <head>, but same error. This is urgent please so if someone experienced can pinpoint where exactly to put the code that would be solve my problem quickly.
Have you included a reference to the jQuery library? A good practice would be to have the jQuery include in the Master.
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the remainder of your .js references should follow-->
</head>
If it's your intention to have that script run on 'page load', then ensure you have it set correctly:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
More info on jQuery document ready.
I'm not sure exactly what it is you are doing with that snippet of code, but I don't think it is the proper syntax.
You probably should re-write it to look like this:
$(document).ready(
function () {
var options = {
//some java code
};
$(".mycssclass").effect(options);
});
Just passing in the function to the jQuery selector will probably get some wonkiness.
Thank you everyone! there was no problem with either the syntax in the javascript or the location/page where it was first included by me. I just figured out that the mistake was somewhere else. This javascript works on an <img> tag. It zooms the image insdie the <img> tag. I was using the <asp:ImageButton> instead og <img>. It works perfect as soon as I replaced it. Thank you all for your time and the knowledge sharing.

Relative Paths in Javascript in an external file

So I'm running this javascript, and everything works fine, except the paths to the background image. It works on my local ASP.NET Dev environment, but it does NOT work when deployed to a server in a virtual directory.
This is in an external .js file, folder structure is
Site/Content/style.css
Site/Scripts/myjsfile.js
Site/Images/filters_expand.jpg
Site/Images/filters_colapse.jpg
then this is where the js file is included from
Site/Views/ProductList/Index.aspx
$("#toggle").click(function() {
if (left.width() > 0) {
AnimateNav(left, right, 0);
$(this).css("background", "url('../Images/filters_expand.jpg')");
}
else {
AnimateNav(left, right, 170);
$(this).css("background", "url('../Images/filters_collapse.jpg')");
}
});
I've tried using '/Images/filters_collapse.jpg' and that doesn't work either; however, it seems to work on the server if I use '../../Images/filters_collapse.jpg'.
Basically, I want have the same functionallity as the ASP.NET tilda -- ~.
update
Are paths in external .js files relative to the Page they are included in, or the actual location of the .js file?
JavaScript file paths
When in script, paths are relative to displayed page
to make things easier you can print out a simple js declaration like this and using this variable all across your scripts:
Solution, which was employed on StackOverflow around Feb 2010:
<script type="text/javascript">
var imagePath = 'http://sstatic.net/so/img/';
</script>
If you were visiting this page around 2010 you could just have a look at StackOverflow's html source, you could find this badass one-liner [formatted to 3 lines :) ] in the <head /> section
get the location of your javascript file during run time using jQuery by parsing the DOM for the 'src' attribute that referred it:
var jsFileLocation = $('script[src*=example]').attr('src'); // the js file path
jsFileLocation = jsFileLocation.replace('example.js', ''); // the js folder path
(assuming your javascript file is named 'example.js')
A proper solution is using a css class instead of writing src in js file.
For example instead of using:
$(this).css("background", "url('../Images/filters_collapse.jpg')");
use:
$(this).addClass("xxx");
and in a css file that is loaded in the page write:
.xxx {
background-image:url('../Images/filters_collapse.jpg');
}
Good question.
When in a CSS file, URLs will be relative to the CSS file.
When writing properties using JavaScript, URLs should always be relative to the page (the main resource requested).
There is no tilde functionality built-in in JS that I know of. The usual way would be to define a JavaScript variable specifying the base path:
<script type="text/javascript">
directory_root = "http://www.example.com/resources";
</script>
and to reference that root whenever you assign URLs dynamically.
For the MVC4 app I am working on, I put a script element in _Layout.cshtml and created a global variable for the path required, like so:
<body>
<script>
var templatesPath = "#Url.Content("~/Templates/")";
</script>
<div class="page">
<div id="header">
<span id="title">
</span>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
<span></span>
</div>
</div>
I used pekka's pattern.
I think yet another pattern.
<script src="<% = Url.Content("~/Site/Scripts/myjsfile.js") %>?root=<% = Page.ResolveUrl("~/Site/images") %>">
and parsed querystring in myjsfile.js.
Plugins | jQuery Plugins
Please use the following syntax to enjoy the luxury of asp.net tilda ("~") in javascript
<script src=<%=Page.ResolveUrl("~/MasterPages/assets/js/jquery.js")%>></script>
I found this to work for me.
<script> document.write(unescape('%3Cscript src="' + window.location.protocol + "//" +
window.location.host + "/" + 'js/general.js?ver=2"%3E%3C/script%3E'))</script>
between script tags of course... (I'm not sure why the script tags didn't show up in this post)...
You need to add runat="server" and and to assign an ID for it, then specify the absolute path like this:
<script type="text/javascript" runat="server" id="myID" src="~/js/jquery.jqGrid.js"></script>]
From the codebehind, you can change the src programatically using the ID.
This works well in ASP.NET webforms.
Change the script to
<img src="' + imagePath + 'chevron-large-right-grey.gif" alt="'.....
I have a master page for each directory level and this is in the Page_Init event
Dim vPath As String = ResolveUrl("~/Images/")
Dim SB As New StringBuilder
SB.Append("var imagePath = '" & vPath & "'; ")
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "LoadImagePath", SB.ToString, True)
Now regardless of whether the application is run locally or deployed you get the correct full path
http://localhost:57387/Images/chevron-large-left-blue.png

Categories