Script conflict Mootools Validation with jQuery Slide - javascript

Ok guys, I have the following problem I have a script to slideToggle obtained from this site, and another called formcheck.js form validation, I only load one at a time, I can avoid this conflict as I tried $.noConflict(true) without success helps the code is as follows:
<script type="text/javascript" src="js/mootools.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/lang/es.js"></script>
<script type="text/javascript" src="js/formcheck.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ check = new FormCheck('third', {
display : {
fadeDuration : 500,
errorsLocation : 1,
indicateErrors : 1,
showErrors : 1
}
});
});
$(document).ready(function(){
$("#flip4").click(function(){
$("#panel4").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip5").click(function(){
$("#panel5").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>

Try this for the jQuery part:
jQuery(document).ready(function () {
jQuery("#flip4").click(function () {
jQuery("#panel4").slideToggle("slow");
});
jQuery("#flip5").click(function () {
jQuery("#panel5").slideToggle("slow");
});
jQuery("#flip").click(function () {
jQuery("#panel").slideToggle("slow");
});
});
Or do it all with Mootools:
window.addEvent('domready', function () {
check = new FormCheck('third', {
display: {
fadeDuration: 500,
errorsLocation: 1,
indicateErrors: 1,
showErrors: 1
}
});
document.id("flip4").addEvent('click', function () {
document.id("panel4").toggle();
});
document.id("flip5").addEvent('click', function () {
document.id("panel5").toggle();
});
document.id("flip").addEvent('click', function () {
document.id("panel").toggle();
});
});
If you go for Mootools effects you can use reveal() and dissolve() to hide/show also.

Related

Is there a way I can use this Javascript / jQuery function multiple times on a single page

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').each(function(i){
$(this).click(function(){
$('.showclick').eq(i).show();
$('.clicktoshow').eq(i).hide();
});
});
});
});
</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
</style>
I want to use the above code to hide and show 4 different section (each with 2 subsections but the two will show on a single click of the corresponding list item) on the same page, here is what I have written:
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshowsatin').each(function(i){
$(this).click(function(){
$('.showclicksatin').eq(i).show();
$('.clicktoshowsatinmain, .clicktoshowsatinmainb, .clicktoshowcrepemain, .clicktoshowcrepemainb').eq(i).hide();
$('.clicktoshowsatinmain, .clicktoshowsatinmainb, .clicktoshowcrepemain, .clicktoshowcrepemainb').hide();
});
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
jQuery(function($){
$('.clicktoshowsilk').each(function(i){
$(this).click(function(){
$('.showclicksilk').eq(i).show();
$('.clicktoshowsilkmain, .clicktoshowsilkmainb, .clicktoshowsatinmain, .clicktoshowsatinmainb').eq(i).hide();
$('.clicktoshowsatinmain, .clicktoshowsatinmainb, .clicktoshowsilkmain, .clicktoshowsilkmainb').hide();
});
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
jQuery(function($){
$('.clicktoshowcrepe').each(function(i){
$(this).click(function(){
$('.showclickcrepe').eq(i).show();
$('.clicktoshowcrepemain, .clicktoshowcrepemainb, clicktoshowsilkmain, .clicktoshowsilkmainb, clicktoshowsatinmain, .clicktoshowsatinmainb').eq(i).hide();
$('.clicktoshowcrepemain, .clicktoshowcrepemainb, clicktoshowsilkmain, .clicktoshowsilkmainb, clicktoshowsatinmain, .clicktoshowsatinmainb').hide();
});
});
});
});
</script>
Also, here is the link to the website I am trying to implement this: http://justadire.com/
You could write
<script>
function addHandler(material) {
jQuery(function($){
$('.clicktoshow' + material).each(function(i){
$(this).click(function(){
$('.showclick' + material).eq(i).show();
$('.clicktoshowcrepemain, .clicktoshowcrepemainb, clicktoshowsilkmain, .clicktoshowsilkmainb, clicktoshowsatinmain, .clicktoshowsatinmainb').eq(i).hide();
$('.clicktoshowcrepemain, .clicktoshowcrepemainb, clicktoshowsilkmain, .clicktoshowsilkmainb, clicktoshowsatinmain, .clicktoshowsatinmainb').hide();
});
});
});
}
document.addEventListener('DOMContentLoaded', function() {
addHandler('silk');
addHandler('satin');
addHandler('crepe');
});
</script>

Conflict in using multiple JQUERY libraries

In my web application, I have a datepicker jquery, Everything works well, until I added a new jquery codes referencing a diffrent library. This Jquery's purpose is to fixate a gridview header.
After I added this code, the datepicker stopped working. What could be causing the conflict?
Here are the codes
1. DatePicker JQuery locatred in external JS File
$(function () {
$("#txtdatefrom").datepicker();
});
$(function () {
$("#txtdateto").datepicker();
});
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
}
function init() {
$(function () {
$("#txtdatefrom").datepicker();
});
$(function () {
$("#txtdateto").datepicker();
});
}
$(function () { // DOM ready
init();
});
3. Jquery to fix gridview header.
After adding this the the datepicker feature stopped working.
<script type = "text/javascript">
//not needed kasi it produced double scrolls, pero pwede din e.. ewan
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
}
function init() {
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
}
$(function () { // DOM ready
init();
});
</script>
upon checking the browser console to locate the error, here is the reason:
jquery-ui-1.8.19.custom.min.js:5 Uncaught TypeError: Cannot read property 'ui' of undefined
The issue is due to conflict in definition of init() function. In both the files, you have used the same name. Try renaming one of them and your issue should be fixed.
Edit: Try changing the second snippet to the following:
<script type = "text/javascript">
//not needed kasi it produced double scrolls, pero pwede din e.. ewan
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
fixGridHeader();
}
function fixGridHeader() {
$(document).ready(function () {
$('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
}
$(function () { // DOM ready
fixGridHeader();
});
</script>
I already found the answer. Based on research, using multiple Jquery codes or libraries can be done by using jquery.noConflict() code.
javascript for Datepicker
var $152 = jQuery.noConflict();
$152(function () {
$152("#txtdatefrom").datepicker({
changeMonth: true,
changeYear: true
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$152(function () {
$152("#txtdatefrom").datepicker({
changeMonth: true,
changeYear: true
});
});
}
});
};
for gridview header
var $151 = jQuery.noConflict();
//not needed kasi it produced double scrolls, pero pwede din e.. ewan
$151(document).ready(function () {
$151('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
//fixGridHeader();
}
function init() {
//function fixGridHeader()
$151(document).ready(function () {
$151('#<%=grdWSR.ClientID %>').Scrollable({
ScrollHeight: 300
});
})
}
$151(function () { // DOM ready
//fixGridHeader()
init()
});
just create a variable that will be assigned with a jquery.noconflict() function. then replace all $ with the created variable per javascript. then it will work already.
reference: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

How to have multiple functions in jQuery ready?

I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});

Div not displaying correctly on show

<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
I have a div that needs to be displayed in full-screen as an intro. The problem is that it doesn't display correctly; it just displays itself in the top left corner and grows until its full-screen. Why is it doing this?
show() takes the duration of the animation as a first parameter. You have given it a function, which is incorrect. Either you meant to chain your methods:
$('#intro-page').show().click(function () {
$(this).fadeOut(250);
});
Or, you did mean to put a callback function in there, but you missed out the first parameter; the duration:
$('#intro-page').show(250, function(){
$(this).click(function(){
$(this).fadeOut(250);
});
});
Documentation
show()
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show(function () {
$(this).click(function () {
$(this).fadeOut(250);
});
});
}
});
</script>
try the following:
<script type='text/javascript'>
$(document).ready(function () {
var fenster = $(location).attr('href');
if (fenster == 'http://www.cyrill-kuhlmann.de/index.php/') {
$('#intro-page').show();
$('#intro-page').click(function(){
// seperate it from show function call so you can have more access to object
// and do logic on it.
$(this).fadeOut(250);
});
}
});
</script>

how do I include a jQuery script into an include.js file?

lease forgive me if this is simple-minded a question.
I have a jQuery script shown below embedded in my app:
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
</script>
My boss just told me to put this jQuery in include.js file.
I included the file as shown below
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
but now it isn't working anymore.
It is supposed to show and hide certain icons.
What am I doing wrong?
A couple things. First drop the <script> and CDATA tags. They aren't necessary in an external javascript file (presumably being included by a <script> tag in the HTML).
Secondly, you'll need to wrap your javascript with $(document).ready(). You probably had this javascript at the bottom of your current HTML (or at least after the HTML elements it was binding to), and since this external JS file likely gets loaded in the header, the HTML elements aren't there to bind to.
new include.js :
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
$(document).ready(function() {
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv').slideUp();
});
});
});
Also verify that you have something like this in your HTML file:
<script type="text/javascript" src="path/to/include.js"></script>
You want to include your Javascript in a file right ?
Assuming jQuery has been included before :
Html
<script type="text/javascript" src="path/to/include.js"></script>
include.js
jQuery(function($){
$('#div1').on('click', function () { //missing '
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2').on('click', function () { //missing ' here
$('#secDiv').slideUp(); //missing ' here too
});
});
//Edit omitted this part
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
}

Categories

Resources