I have a library conflict problem. My code is like so in template...
<script type="text/javascript">window.jQuery || document.write(unescape(\'%3Cscript src="//code.jquery.com/jquery-1.7.1.min.js"%3E%3C/script%3E\'))</script>
<script type="text/javascript" src="' . $settings['theme'] . '/scripts/qs.js"></script>
';
}.............
And in the qs.js file I have the following
jQuery(document).ready(function($){
$('.sp-body img').each(function() {
$(this).attr({
alt: $(this).attr('src'),
src: smf_default_theme_url + '/images/loading.gif'
});
});
$("body").on("click", ".sp-head", function(event){
$this = $(this);
if ($this.hasClass("unfolded")) {
$this.removeClass("unfolded");
$this.next().slideUp("fast");
$this.next().addClass("folded");
} else {
$this.addClass("unfolded");
$this.next().slideDown("fast");
$this.next().removeClass("folded");
}
c = $this.parent().children('.sp-body');
c.find('img').each(function() {
$(this).attr('src', $(this).attr('alt'));
});
});
$("body").on("click", ".sp-foot", function(event){
$this = $(this).closest("div.sp-body").prev();
if ($this.hasClass("unfolded")) {
$this.removeClass("unfolded");
$this.next().slideUp("fast");
$this.next().addClass("folded");
}
});
});
the mistake is in "$(...).on is not a function" -> $("body").on("click", ".sp-head", function(event){
The problem is in the conflict between libraries. I have looked at the non-conflict mode but I can't get it to work for me, how can I get it to work?
Thanks!!
Related
Below is my code I've developed some time ago. Everything works fine, but I think it'd be better to combine the code parts. Unfortunately, I'm not an expert in JavaScript yet so can't understand how to improve the combining. Much appreciate any help & advice:
jQuery(function() {
jQuery('.price').hide();
jQuery('.d2').show();
jQuery('#select').on("change", function() {
jQuery('.price').hide();
jQuery('.d' + jQuery(this).val()).show();
}).val("2");
});
jQuery(function() {
jQuery('.button').hide();
jQuery('.b2').show();
jQuery('#select').on("change", function() {
jQuery('.button').hide();
jQuery('.b' + jQuery(this).val()).show();
}).val("2");
});
jQuery(function() {
jQuery('.price-2').hide();
jQuery('.e2').show();
jQuery('#select-2').on("change", function() {
jQuery('.price-2').hide();
jQuery('.e' + jQuery(this).val()).show();
}).val("2");
});
jQuery(function() {
jQuery('.button-2').hide();
jQuery('.c2').show();
jQuery('#select-2').on("change", function() {
jQuery('.button-2').hide();
jQuery('.c' + jQuery(this).val()).show();
}).val("2");
});
You can use $ instead of jQuery. Then take the common function out like:
function myFunc($hide, $show, $select) {
$($hide).hide();
$($show + '2').show();
$($select).on("change", function() {
$($hide).hide();
$($show + $(this).val()).show();
}).val("2");
}
$(function() { myFunc('.price', '.d', '#select') });
$(function() { myFunc('.button', '.b', '#select') });
$(function() { myFunc('.price-2', '.e', '#select-2') });
$(function() { myFunc('.button-2', '.c', '#select-2') });
Edit: I guess part of this is an issue of me being inexperienced with Drupal. I added a javascript file to site.info, so that it will be added to every page. This is all the file contains:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
When the site loads, it gets compiled into this larger script, which looks like this in the debugger:
(function ($) {
Drupal.behaviors.titlebar = {
init: function(context, settings) {
// Using percentage font size to easily increase/decrease page font size
var baseFontSize = 100;
$('.pgc-font-size a').click(function() {
if($(this).hasClass('increase')) {
if(baseFontSize < 150)
baseFontSize += 20;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
} else {
if(baseFontSize > 70)
baseFontSize -= 10;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
}
});
// Print button
$('.pgc-print a').click(function() {
window.print();
})
}
};
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.titlebar.init();
});;
(function ($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function(){
if($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
;
You can see my little script at the bottom there. It says there's something wrong with the first line, but I'm not sure what the problem is. What change would I need to make to my javascript file to make sure it compiles right?
I'm probably overlooking a really simple type, but I can't see what's wrong with my jQuery.
This is the part that's not working:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.website.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I have jQuery on my site, I know I do because this it's used earlier in the code with no problem. The error is showing in the debugger on the first line, '$("#ct100_btnSearch001").on("click", function(){ '. Here is a larger section of the script page:
(function($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function() {
if ($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function($) {
$("#ctl00_btnSearch001").on("click", function() {
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);;
Try to install jQuery update Module.
If you are using Drupal 6, you are not be able to use on function.
One option is to include your custom version of jQuery in your page.tpl.php, another option (not recommended) is to use live, but now is deprecated.
You can bind a function to an event use two way:
1.use bind() method and the event name as the first argument
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
or
2.just use the event method
$( "#foo" ).click( function() {
alert( "User clicked on 'foo.'" );
});
The problem of your code is that there isn't a on event.
ref http://api.jquery.com/category/events/mouse-events/
If ctl00_btnSearch001 is a correct id for what ever you are trying to click. Try changing it to this:
(function ($){
$(document).on("click", "#ctl00_btnSearch001", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I need to create on snippet of javascript that, based on an A tags id, the window will navigate to the proper html file. I've got something together that when I look at it, it should work but for some reason it doesnt. Here's what I got.
<script>
$(document).bind('pageinit', function() {
$('a').each(function (index){
var elementId = $(this).attr("id");
elementId= elementId + '.html';
$(function(){
$(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
});
});
});
});
</script>
This part is so that I can load an external html in an ios web app with out exiting the web app window
$(function(){ $(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
Did I write the variable wrong some how? Any help would be appreciated
I'll take a wild guess:
$(function(){
$('a').on('click', function(e) {
e.preventDefault();
window.location.assign(this.id + '.html');
});
});
This is a simplified version of what you have there...
<script>
$(function() {
$("a").on("click", function(e) {
e.preventDefault();
window.location.href = this.id + ".html";
});
});
</script>
So, I got the script from : http://css-tricks.com/dynamic-page-replacing-content/
and edited it to my needs. It works well with "jquery-1.4.4". But the active class assignment for the menu buttons dont work with "jquery-1.5 and later versions".
This is the script:
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$el;
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(600, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(600, function() {
});
$("nav a").removeClass("active");
$(" a[href="+newHash+"]").addClass("active");
});
});
};
});
$(window).trigger('hashchange');
});
Than I have this simple ajax loading-spinner code which also doesnt work with the latest jquery:
$(document).bind("ajaxSend", function(){
$('#spinner').fadeIn("fast");
}).bind("ajaxComplete", function(){
$('#spinner').delay(600).fadeOut("slow");
});
I would be grateful for any help.
I think your issue is here:
i am not sure but try if this works for you.
$(" a[href='"+newHash+"']").addClass("active");
// ^-----------^-----------you have missed the " ' " single quotes
i got this code to dynamically load html BUT i got a problem cause my plugins work fine on index.html but when you change page it no longer works..anyone who can help me out? thnx
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
I think what you need is .live() if you want to attached jQuery to dynamically created markup.
http://api.jquery.com/live/