I have this script generated by wordpress plugin:
<script type='text/javascript'>
if (typeof(jQuery)=="function") {
(function($) {
$.fn.fitVids=function(){}})(jQuery)
};
jwplayer('jwplayer-0').setup({
"aspectratio":null,
"width":604,
"height":410,
"skin":"beelden",
"primary":"html5",
"advertising":{
"client":"vast",
"tag":"http://vasttag"
},
"sharing":{},
"image":"http://i1.ytimg.com/vi/image/0.jpg",
"file":"http://www.youtube.com/watch?v=hgfakjhs"
});
</script>
I simply want add this line:
,"position":"post"
after:
"http://vasttag"
I can't edit the plugin, so is there a way to do it with javascript?
Sorry for my bad english.
Please help me!
Thanks!
Edit: This is the plugin file that generates the player:
link
if anyone knows how to add that parameter I would be very grateful :)
Edit 2:
I solved adding that parameter directly in the database, in wp-option table at jwp6_player_config_2 option name. If you know better solution let me know, thanks.
Due to what the script does (it creates a new jwPlayer as soon as the script is encountered) and the fact that there seems to be no method in the jwPlayer API to edit a players settings, it is impossible to change your script as you want.
The only solution is to edit the script at its source.
I dont think you can do that using javascript.We generally use javascript to do changes in DOM and not in javascript itself.You can do one thing that you create.
<script>
if(typeof(jQuery)=="function")
{
(function($){$.fn.fitVids=function(){}})(jQuery)};
jwplayer('jwplayer-0').setup({"aspectratio":null,"width":604,"height":410,"skin":"beelden","primary":"html5","advertising":{"client":"vast",,"position":"post","tag":"http://vasttag"},"sharing":{},"image":"http://i1.ytimg.com/vi/image/0.jpg","file":"http://www.youtube.com/watch?v=hgfakjhs"});
</script>
and append it somewhere in DOM using javascript or jquery.
More better solution: Just edit the script added by plugin.It is the best approach.
One thing you can always do is use our JavaScript API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
To make the VAST tag play after the video is complete. Just put this script block after the shortcode on your post:
<script>
jwplayer().onComplete(function(){jwplayer().playAd('your_ad_tag');});
</script>
Related
Good day! Newbie here. I just want to know if it's possible to change the whole content of an html using javascript? I got some codes here. (not mine but whoever did this, thank you so much!) I don't know where to put/insert all the codes of the new layout like when you click a button then the whole content will change. Thank you very much for helping me.
<script language="Javascript">
<!--
var newContent='<html><head><script language="Javascript">function Hi()</script></head><body onload="Hi();"><p id="p">hello</p></body></html>';
function ReplaceContent(NC) {
document.write(NC);
document.close();
}
function Hi() {
ReplaceContent(newContent);
}
-->
</script>
The easiest way to do this is with jQuery.
function insertHtml()
{
var newHtml = '<div><span>Hello World</span></div>';
$('body').html(newHtml);
}
Something like that will replace the entire contents of body with newHtml. You can also do this with pure javascript using the .innerHtml property but jQuery has many advantages.
EDIT: If you want to add something to the DOM rather than replacing the entire thing, use
$('body').append(newHtml)
instead. This will add the content to the end of the body. This is very often used for things like adding rows to a table.
Yes it is possible but this code is not valid unless you remove the comment tags however don't use the document.write() after page load unless you want to overwrite everything in page including the script
I hope someone could explain to me how to script a button element on my web page.
I am new to javascript and html. So I hope what I'm asking makes sense.
The idea is that the contents of an element changes to content obtained from a php file on the server.
I am using php to serve html5. I have tried the following:
<a onclick="document.getElementByID("myID").innerHTML(src="_document_with_new_content.php")") class="myClass"></a>.
my results are that the styles on my elements are lost and the desired elements do not load into the container element.
I also get no success from the ajax:
<a onclick="document.getElementByID("myID").load(src="_document_with_new_content.php")></a>
I am obviously doing it wrong, but can anyone help with this?
You can do this using Ajax but the code in your example was slightly wrong.
How about something like this?
<script>
$(function(){
$("a#some-identifier").on("click", function(e){
$( "#myID" ).load( "document_with_new_content.php" );
e.preventDefault();
});
});
</script>
jQuery example and explanation below:
https://api.jquery.com/load/
I have a few things to mention:
Use single quotes for you javascript: onclick="document.getElementById('myID')..." instead of onclick="document.getElementById("myID")...".
Javascript is case sensitive: So document.getElementByID('myID') won't work, but document.getElementById('myID') will.
innerHTML is not a function. This will work:
<a onclick="document.getElementById('myID').innerHTML = 'this will load'" class="myClass">click here</a>
<div id="myID"></div>
Loading an external document isn't that easy. If you simply want to learn some javascript, then I recommend to take a step back and start with the basics. But if you just want to build something quick, then have a look at a library like JQuery which is easy to learn and makes a lot of things a lot easier.
Hope this was useful.
I am trying to use some sort of script on prompt page using HTML Item, what i am trying to accomplish is after clicking finish button script checked if there is nothing left black. Nothing means any of the prompt/filter (text, prompt, date/time) and if it is than it doesn't go through.
Hope i made things clear.
Thank You
Personally I think the fastest and easiest way if you don't already have a js framework is jQuery validate... check out this page, see the examples and give this a go. I should think the description you've provided will be covered in the basic usage examples for this plugin.
http://docs.jquery.com/Plugins/Validation
If you don't want to use jQuery as in Ben's answer, you can use the form's onSubmit event:
<form id="datform" action="http://path.to/action.script" onsubmit="return isValidated()">
...
...
'</form>
You'll then use a javascript function, ala
<script type="text/javascript">
function isValidated(){
var so=false;
return so;
}
</script>
Personally, I prefer jQuery but this allows for some on-the-fly validation
The code that produces the headache for me is rather simple:
$(function(){
$("#test").append('<img onload="alert(\'hi\')" src="Image.jpg"/>');
})
I have the above code in my head and a div with id 'test' in the body. Now my problem is that the page produces two alerts when the image is loaded, but I expected it to produce only one as the 'onload' should be triggered only once- The way it happens when I add the image manually without any javascript..
See the fiddle I made at: http://jsfiddle.net/9985N/
Any help/explanation is greatly appreciated...
UPDATED (Because some people don't believe me, lol)
Because .append creates the node first and then moves it to its appropriate position. Try appending the element first then adding its attributes as follow:
$(function() {
$("#test").append(
$("<img />").attr({
src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg",
onload: "alert(\'hi\')"
})
);
});
My answer does not "avoid" the problem, it answers it very directly. If you open the jQuery.js file in uncompressed format you can clearly see that .append creates the node on the document which is when the onload event is first called and then shifts it into position which is when it gets called again. Perhaps shift is the wrong word, forgive me as vocabulary is not my strong suit. However if you follow the code you see its creation and its movement, however the same is not said for using append again to move it, as the node is already created it simply moves from one element to another with no respark of onload. As I said, not sure best terminology, but it's very easy to follow along on the jQuery.js.
Don't believe me? Just tested the following fiddle in MSIE9, FF12, & GoogleChrome20 with 0 problems.
jsFiddle
just FYI, it's not really a horrible practice, but I see people write whole lines of HTML in jQuery all the time and that kind of defeats the purpose. It's a library with many books to read on purpose. Sometimes a complete line of HTML might seem easier, but it may not be faster as it doesn't follow all the great layout work that has been done for you. The idea is to "Write less, do more" and this includes HTML. After all, if you were gonna write the whole line of HTML, why use jQuery at all when you could just PHP it in!? :P Just a thought.
or this:
var img = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"/>').on('load', function(){
$('#test').append(img);
alert('loaded');
});
I was thinking of using Fiddler for the following purpose...
I have a JavaScript based service I want to demonstrate to potential clients. In order to show them what their website could look like if they install (i.e. include) my script, I want to set up Fiddler on my PC, so that when fetching the client's website, the
<script type="text/JavaScript" src="myscript.js"></script>
line will be included in the HTML <head> section.
Can this be easily done with Fiddler? Could someone point me to where I may find the documentation covering that, if it is?
Thanks!
----Update----
For the time being I have resorted to using a BHO to add my script to the page. I use execScript(), upon onDocumentComplete, to run a simple piece of JavaScript which appends the .js file I need to the page. But EricLaw's pointers and jitter's answer seem like the way to go for a more complete (and elegant) way to do what I need.
If someone is interested I could upload the BHO code here.
-Thanks!
Open fiddler -> Menu Rules -> Customize Rules (or hit Ctrl+R)
The CustomRule.js file opens. Scroll down until you find the line
static function OnBeforeResponse(oSession: Session)
This is where your code goes. Here you can change the server response before the browser sees it.
The following code sample shows how to include a custom piece of jQuery code which replaces the Unanswered link in the horizontal menu with a link which serves as short cut to Unanswered jQuery Questions
I first show you the jQuery code I want to include
<script type='text/javascript'>
$(function() {
var newLink = 'Unanswered jQuery';
$('div#hmenus div.nav:first ul li:last a').replaceWith(newLink);
});
</script>
Now the fiddler code (based on code found in CustomRules.js and code samples from the FiddlerScript CookBook)
//is it a html-response and is it from stackoverflow.com
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
oSession.HostnameIs("stackoverflow.com")) {
// Remove any compression or chunking
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
// Match the jQuery script tag
var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi;
// replace the script tag withitself (no change) + append custom script tag
oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('Unanswered jQuery');})</script>");
// Set the response body to the changed body string
oSession.utilSetResponseBody(oBody);
}
I think you should now able to hackyourself together a piece of code which fits your problem.
Example
// Match the head end
var oRegEx = /(<\/head>)/gi;
// replace with new script
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1");
if you use jQuery you can add js on the fly. I would probably think you can have a method which would include/exclude your script based on some query param. This is how you would include JS with jQuery
$.getScript('someScript.js',function(){
//Do something here after your script loads
});
Haven't tried it, but how about GreaseMonkey for IE?