Develop Reference

script conflict contact form, fancybox

I have contact form problem. The form fails to deliver a message. The source of the problem is two conflicting script libraries. Both libraries are needed for different effects.
The fancy box scripts works with the image display mechanism.
<script type="text/javascript" src="./fancybox/lib/jquery-1.10.1.min.js"></script>
The jquery scripts works with contact form mechanism
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
If I remove the fancy box script the contact form works but lose the fancybox interactive image display features.
If I remove the googleapi script I loos the form functionality.
Changing the order of the scripts or loading them asynchronously has not worked.
Is the away to deal with this script conflict?

You should use noConflict() jquery method.
The $other variable now has the "ajax google api jquery.min.js", $other is now an alias to the jQuery function; creating the new alias is optional.
The $ variable now has the "jquery-1.10.1.min.js", which is a shortcut for
document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
solution for remove conflict in different jquery version
<!-- Putting jQuery into no-conflict mode. -->
<script src="./fancybox/lib/jquery-1.10.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var $other = jQuery.noConflict();
$other(document).ready(function() {
$other("div").hide();
});
window.onload = function() {
var main = $("main");
}
</script>

How can I use jQuery on Magento 1.9.0.1 rwd theme?

I noticed Magento 1.9.0.1 rwd theme now include jQuery library and use "jQuery.noConflict();" associated on "$j" token on default.
First, I'ld like to use google CDN jQuery library instead of local jQuery library.
As second, how can run my jQuery code?
For example, I tried to insert in minicart.phtml:
.....
$_cartQty = 0;
}
?>
<script type="text/javascript">
$j(document).ready(function() {
$('#header-cart').hide();
});
</script>
<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
<span class="icon"></span>
........
Also, I tried to use add my code at the end of app.js:
.....
};
$j(document).ready(function() {
ProductMediaManager.init();
});
$j(document).ready(function() {
$('#header-cart').hide();
});
but no effect. Where I wrong? How can I run my code in a separate file in app/js folder?

“First, I'ld like to use google CDN jQuery library instead of local jQuery library.”
You should research more before asking easy questions, the following is taken from this post and this post. Overall I think it's not worth the extra effort just to rely on a 3rd party.
In your theme's local.xml layout file add this.
<default>
<reference name="head">
<action method="addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>
<block type="core/text" name="google.cdn.jquery">
<action method="setText">
<text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="/skin/frontend/rwd/default/js/lib/jquery-1.10.2.min.js">\x3c/script>');</script>
<script>jQuery.noConflict();</script>]]></text>
</action>
</block>
</reference>
</default>
“As second, how can run my jQuery code?”
$j(document).ready(function() {
$('#header-cart').hide();
});
Here you know you must use $j instead of $ but you have forgotten that on the 2nd line! There are many ways to change it,
Use $j everywhere:
$j(document).ready(function() {
$j('#header-cart').hide();
});
Rename $j using the function argument:
$j(document).ready(function($) {
// $ is different inside this function only
$('#header-cart').hide();
});
Use Prototype instead:
// $j is alias for jQuery
$j(document).ready(function() {
// $ is Prototype alias for document.getElementById
$('header-cart').hide();
});

To avoid conflicts with prototype.js you'll need to use jQuery instead of $
For example instead of:
$(document).ready(function(){
// do something
});
Write:
jQuery(document).ready(function(){
// do something
});

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});
});
})

Wordpress javascript works how?

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.

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();
?>