Help with Javascript in wordpress - javascript

I'm trying to add a java script slide show to my wordpress home page. In my theme folder I have a js folder and then in that I have jquery.cross-slide.min.js and jquery.min.js
This is what I have and what I'm pasting into my post area
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cross-slide.min.js"></script>
<script type="text/javascript">
function() {
crossSlide({
sleep: 3,
fade: 1
}, [
{ src: 'images/slideshows/block1.jpg' },
{ src: 'images/slideshows/block2.jpg' },
{ src: 'images/slideshows/block3.jpg' }
])
});
</script>
If I paste this into a wordpress page throught the html editor it doesn't work. Please could you check for errors and advice.

See the Wordpress Codex: JavaScript in Posts.
For the occasional or one time use of
Javascript, you need to put the script
into a Javascript file and then call
it out from within the post. Make sure
that each script is defined by its
function name such as:
function updatepage(){var m="Page updated "+document.lastMo.......}
To include a Javascript inside a post,
you need to combine both the call to
the script file with the call to the
Javascript itself.
<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>

Related

How to make an javascript load only on frontpage in the <head> section

I have two adserver javascript codes that must be loaded in the head section of our website. The first needs to load only on frontpage and the second needs to load only on other pages.
I use a Joomla! platform and Easy Scripts plugin to add javascript codes to head section. The problem is that this plugin is loaded on the entire website and I'm not able to make it load only on a specific page.
Please, help me!
Sorry for the lack of details. Here are the codes:
<!--START of script to be loaded everywhere-->
<script type="text/javascript" src="//ro.adocean.pl/files/js/ado.js"></script>
<script type="text/javascript">
if(typeof ado!=="object"){ado={};ado.config=ado.preview=ado.placement=ado.master=ado.slave=function(){};}
ado.config({mode: "old", xml: false, characterEncoding: true});
ado.preview({enabled: true, emiter: "ro.adocean.pl", id: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"});
</script>
<!--END of script to be loaded everywhere-->
<!--START of script to be loaded only on frontpage-->
<script type="text/javascript">
ado.master({id: 'yyyyyyyyyyyyyyyyyyyyyyyyy', server: 'ro.adocean.pl' });
</script>
<!-- END of script to be loaded only on frontpage-->
<!--START of script to be loaded only on otherpages-->
<script type="text/javascript">
ado.master({id: 'zzzzzzzzzzzzzzzzzzzzzzzz', server: 'ro.adocean.pl' });
</script>
<!--END of script to be loaded only on otherpages-->
You can use something like modulesanywhere ( https://www.nonumber.nl/extensions/modulesanywhere ) & sourcer ( https://www.nonumber.nl/extensions/sourcerer ) to 1) define where it loads and 2) the other to include php. With those two things you can use the native Joomla functions like addScriptDeclaration ( https://docs.joomla.org/Adding_JavaScript ) to add the script's code to the head.

Rainbow Jquery Plugin does not work

I am trying to implement the rainbow jquery plugin on my blog: https://levalencia-public.sharepoint.com/blog
Rainbow plugin here:
http://craig.is/making/rainbows
I have included the following on the head
<link rel="stylesheet" href="css/rainbow/kimbie-dark.css" />
I have included the following before the body end tag
<!-- you can create a custom build with specific languages this should go before the closing </body> -->
<script src="js/rainbow.min.js"></script>
<script src="js/languages/generic.js"></script>
<script src="js/languages/csharp.js"></script>
<script src="js/languages/css.js"></script>
<script src="js/languages/html.js"></script>
<script src="js/languages/javascript.js"></script>
<script src="js/languages/shell.js"></script>
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
Then I included one post to test it with the code:
<pre><code data-language="javascript">var testing = true;</code></pre>
When I check the source code of my blog, it looks like the html is being changed, because I see this:
If I debug the rainbow.color is being hit.
So I am clueless
First of all, Rainbow initializes itself so you should be able to remove this without any problem:
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
The main issue you are seeing is that your theme file is not being included correctly. If you look at the theme you are including it is not a valid css file. It is returning some sort of html.
See
https://levalencia-public.sharepoint.com/_catalogs/masterpage/css/rainbow/kimbie-dark.css

How to import a js file into view in mvc

I have below view with scripts at the end:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// here all my stuff
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
</script>
so what I want is to put all the code within into a js file and place it under /Scripts folder in mvc 4 so how to do this? In this script I refer to items in the view.
so after this change I have:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.10.2.min.js)"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/Customs/MyCustomJsFile.js")">
</script>
Javascript file (under /Scripts folder):
MyCustomJsFile.js:
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
in runtime I am getting an error saying synatx error in MyCustomJsFile.js in the ie debug console so I click the error and first line is shown as error:
but my js file has not any script line....
The only thing that should be in your MyCustomScript.js file is the code you had between the <script> tags, not the tags themselves nor the <script> tag to include jQuery. jQuery should be included in your view on in your Layout and it should be included before your file.
For example, your view:
<script type="text/javascript" src='#Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/Tests/MyCustomScript.js")'></script>
Your MyCustomScript.js file:
// here all my stuff
jQuery should really be included on your Layout since you will likely be using it on most, if not all, of your Views.

Getting two jquery scripts to work together like they're supposed to

For the love of God I need help! I'm trying to get Caroufredsel and fancybox to work together like they do here:
http://caroufredsel.frebsite.nl/examples/carousel-lightbox-tooltip.php
...bu I can only get them working independently. I don't really know javascript so I'm failing hard :(
Here is where I've tried implementing it:
http://www.meanbeangames.com/
Only Caroufredsel is working at this point. Fancybox works if I remove all Caroufredsel code.
You are referencing jQuery library twice at line 15 and 189 (view source), this caused all reference to fancybox plugin added earlier to be lost (as jQuery variable is re-defined the second time you include jQuery). Remove the
<script type="text/javascript" src="js/jquery.js"></script>
at line 189 and you should be set.
First of all:
You are loading jQuery (the Javascript library) twice. Once in your <head> section (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>) and once in before your closing </body> tag (<script type="text/javascript" src="js/jquery.js"></script>). Remove the last and update the first one to the most recent version of jQuery, like so:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Second:
It might be better to give better structure to your script: or you load all of them in your head, or all of them before the closing </body> tag. This way, you won't look over scripts that are somewhere you wouldn't expect them to be. Best practice is often said to include all scripts before the closing </body> tag. Don't forget to load jQuery before all the rest of your scripts! In your case it would look like this:
<footer>...</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#foo2").carouFredSel({
circular: true,
infinite: false,
auto: false,
prev: {
button: "#foo2_prev",
key: "left"
},
next: {
button: "#foo2_next",
key: "right"
},
pagination: "#foo2_pag"
});
$('.fancybox').fancybox();
});
</script>

ASP.NET MVC jQuery autocomplete with url.action helper in a script included in a page

I have been building my first ASP.NET MVC web app. I have been using the jQuery autocomplete widget in a number of places like this:
<head>
$("#model").autocomplete({ source: '<%= Url.Action("Model", "AutoComplete") %>' });
</head>
The thing is I have this jQuery code in a number of different places through my web app. So i thought I would create a seperate javascript script (script.js) where I could put this code and then just include it in the master page. Then i can put all these repeated pieces of code in that script and just call them where I need too. So I did this. My code is shown below:
In the site.js script I put this function:
function doAutoComplete() {
$("#model").autocomplete({ source: '<%= Url.Action("Model", "AutoComplete") %>' });
}
On the page I have:
<head>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/site.js" type="text/javascript"></script>
<script type="text/javascript">
doAutoComplete();
</script>
</head>
But when I do this I get an Invalid Argument exception and the autocomplete doesnt work. What am I doing wrong? Any ideas?Do i need to pass something to the doAutoComplete function?
The <%= will not be evaluated in your external javascript.
Solution: pass the URL as a parameter to your javascript function.
<script>
doAutoComplete('<%= Url.Action("Model", "AutoComplete") %>');
</script>
function doAutoComplete(url) {
$("#model").autocomplete({ source: url });
}
You need to put the function call in a script block, and make sure jquery is loaded before your site.js ...
<head>
<script src='path/to/jquery.js'></script>
<script src="../../Scripts/site.js" type="text/javascript"></script>
<script>
doAutoComplete();
</script>
</head>
EDIT:
Maybe the '<%= ... =%>' tag isn't being evaluated server-side, before the function gets sent to the browser? Here is an article on this: http://www.west-wind.com/weblog/posts/252178.aspx
Here is a quote from the post:
There's also a problem if you need
access to the [ASP.NET] variables in
.js files - you can't embed script
tags into a .js file so getting a
dynamic value into a static file is
problematic

Categories