Wordpress javascript works how? - javascript

Folks,
I am new to wordpress. I am converting a html template to wordpress.
THE script is this:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
And the javascript functions are:
<script>
var nice = false;
$(document).ready(function() {
nice = $("html").niceScroll();
});
var obj = window;//$(window);
console.log(obj.length);
console.log("selector" in obj);
</script>
<script>
function toCell(px,py,ok) {
$("#tab1").find('tr').eq(py).find('td').eq(px).addClass((ok)?'testok':'testko');
};
$(window).load(function() {
$("#div1").html($("#div1").html()+' '+nice.version);
$("#div2").html($("#div2").html()+' '+navigator.userAgent);
toCell(1,1,nice.detected.ismozilla);
toCell(2,1,(nice.detected.prefixstyle=='-webkit-'));
toCell(3,1,nice.detected.isie);
toCell(3,2,nice.detected.isie10);
toCell(3,3,nice.detected.isie9);
toCell(3,4,nice.detected.isie8);
toCell(3,5,nice.detected.isie7);
toCell(3,6,nice.detected.isieold);
toCell(4,1,nice.detected.isopera);
toCell(5,1,nice.detected.isios);
toCell(5,2,nice.detected.isios4);
toCell(0,8,nice.detected.cantouch);
toCell(3,8,nice.detected.hasmstouch);
toCell(1,10,nice.detected.hastransform);
toCell(1,11,nice.detected.hastranslate3d);
toCell(2,10,nice.detected.hastransition);
toCell(2,11,!!nice.detected.transitionend);
toCell(3,10,nice.hasanimationframe);
toCell(3,11,nice.hascancelanimationframe);
toCell(1,12,nice.detected.hasmousecapture);
toCell(2,12,((nice.detected.cursorgrabvalue!='')&&(nice.detected.cursorgrabvalue.substr(0,3)!='url')));
});
</script>
I know about registering, enqueuing but how will it can be transformed into wordpress theme.
Explain

Technically you can include JavaScript files in the <head> just like you would on a normal website. but registering and enqueuing is the preferred mechanism for WordPress.
You could also put your <script> directly in the header.php which would make it available on all pages. However, I would strongly suggest you make it an external script.
Depending on how you enqueue the the file, it will be added to your site header or footer with wp_head() and wp_footer() respectively.

Related

How can we add javascript file to the front-end of typo3 from extensions

I just wanna add my javascript file to be added while rendering the all front-end pages not the back-end pages. I have tried :
if (TYPO3_MODE=="FE" ) {
$pageRenderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$pageRenderer->loadRequireJsModule('EXT:eyebase/Resources/Public/JavaScript/testinjectEyebaseJS.js','code');
}
but this code added my js file within the CDATA like:-
<script type="text/javascript">
/*<![CDATA[*/
/*RequireJS-Module-EXT:eyebase/Resources/Public/JavaScript/testinjectEyebaseJS.jse6fb06210fafc02fd7479ddbed2d042cc3a5155e*/
require(["EXT:eyebase/Resources/Public/JavaScript/testinjectEyebaseJS.js"], code);
/*]]>*/
</script>
Please guide me how to do this. Thanks in advance.
You can add CSS/JS via HeaderAssets and FooterAssets sections in your Fluid template.
See TYPO3: How could I add css and js files via controller initialize action and page renderer?
You would put this into TypoScript ("setup" part):
page {
includeJS {
testinjectEyebaseJS = EXT:eyebase/Resources/Public/JavaScript/testinjectEyebaseJS.js
}
}
Have a look for the options here https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Setup/Page/Index.html#includejs-array.

Transferring an html layout into a joomla template javascript doesn't work

I created a website layout through my basic notepad editor and the code works as a standalone html page. I tried transferring it to a joomla template, but the javascript code just isn't working. It's for a menu that is mobile responsive.
Here's the javescript code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".nav-button").click(function () {
$(".nav-button,.primary-nav").toggleClass("open");
});
});
</script>
Is there a special way I need to format it for the joomla template?
I tried putting it in a .js file (js/main.js) that had this:
$(document).ready(function(){
$(".nav-button").click(function () {
$(".nav-button,.primary-nav").toggleClass("open");
});
});
and then putting in the index.php file (I found this code from a similar question)
<?php
defined( '_JEXEC' ) or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$user = JFactory::getUser();
$this->language = $doc->language;
$this->direction = $doc->direction;
//Load jQuery using Joomla's built in method
JHtml::_('jquery.framework');
// Define the template path
$template_path = 'templates/' .$this->template;
// Le Javascript
$doc->addScript($template_path . '/js/main.js');
?>
It's still not working. I would prefer to use the inline javascript code anyway, but really I just want it to work. What do I need to add to the javascript code to make it work?
Please try to add your javascript using the following code:
JHtml::_('jquery.framework');
$doc->addScriptDeclaration('
jQuery(document).ready(function(){
jQuery(".nav-button").click(function () {
jQuery(".nav-button, .primary-nav").toggleClass("open");
});
});
');
Note: Joomla loads jquery in noConflict mode so you have to change $ with jQuery in your jquery calls.
Reference: jQuery.noConflict()

Prepare jquery before jquery and page load

I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})

How do I load a specific javascript file or javascript code into an HTML document?

Here's what I'm trying to do;
I have this HTML code:
<div id="background-color-random">
DIV CONTENT
</div>
And this javascript:
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
I want to impliment this on an HTML page. I know that you can load up a *.js file by using the script tags with src="..". But that doesn't seem to work.
The javascript creates a random color and then applies that to the background of a given 'div' in the HTML.
Now, I'm not good with javascript, so please be patient with me and simple answers are needed :)
I need to be able to get the javascript to load when requested from the HTML and then apply itself to the div with id="..".
You have a syntax error (missing a comma):
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
Should be
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
You are using jQuery, not pure javascript. That's a good thing...
but you also must add the jQuery library in your head tags, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
You also need to put semi-colons (or commas, as RobM has corrected me, if between var assignments) at the end of each instruction. See line 3 in your code example.
If you want your js/jQuery code in a separate file, you can load the script code like this (again, usually done in the <head> tags):
<script src="filename.js" type="text/javascript"></script>
Or, you can include the js/jQ in the <head> tags of your document, like this:
<script type="text/javascript">
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
</script>
If including the script as an external file, you leave out the <script></script> wrapper from that file.

Pagify.js in Wordpress not working

I'm having trouble implementing Pagify in Wordpress.
First I tried this tutorial to register the script in function.php. It worked, the pagify.js is included, and the jQuery too. FYI, I'm using wp-foundation themes, its has built-in jQuery.
and then I put the script to call pagify in the header.php before wp_head() and also i try after wp_head():
$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
default: 'home' // The name of a page or null for an empty div
});
I created HTML just like in pagify tutorial, and my div container id is also named page_holder. but it doesn't work.
Second I tried to register the script above to function.php, but still didn't work.
Third, I modified pagify.js, add noConflict() but still not work.
I am always facing issues with adding jquery scripts to my WP sites and still don't find a general way to resolve them, so I do like you, I try the different possibilities: nonConflict, register scripts and enqueue them, call them in simple script tags before wp_head or before wp_footer in header.php and footer.php respectively....
The last situation was to try to implement the Tag-it jquery plugin with my wordpress site and I resolved it by calling the script in my footer.php (I tell you beacause you didn't mention you tried this option in your question).
Example with Tag-it plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTags").tagit(
{
fieldName: "tages[]"
}
);
});
</script>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>

Categories

Resources