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
Related
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!!
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'm making a site where all internal links make the current page fade out and the new page fade in. This works great for me now. The problem is that I'm trying to combine it with the great masonry plugin. On the first pageload masonry does work, but I can't seem to figure out how to re-fire masonry on the newly loaded content via ajax. I should add that all the items from the current masonry get deleted, and then replaced by new ones.
The masonry code is like this:
$container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
transitionDuration: 0
});
});
And the ajax load code is like this:
var newHash = "",
$mainContent = $("#ajaxcontainer"),
$ajaxSpinner = $("#loader"),
$el;
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
$(document).on('click', '.internal', function() {
window.location.hash = $(this).attr("href");
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent.fadeOut(500, function() {
$ajaxSpinner.fadeIn();
$mainContent.load(newHash + " #container", function() {
$ajaxSpinner.fadeOut( function() {
$mainContent.fadeIn(1000);
});
$('.internal').each(function() {
$(this).attr("href", "#" + this.pathname);
});
});
});
};
});
$(window).trigger('hashchange');
Does anyone have any input as to how to achieve this? Thank you very much.
I finally managed to get it to work!
I hope other people will find this helpful so I'm posting it here for future reference.
One of the problems I had, seems to be that I hid the container while the data was loading. I hid it with fadeOut and fadeIn which seems to cause problems with masonry. Insted of hiding it per se, I now animate the opacity to 0 and back to 1 once the data is loaded. The script is as follows:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$('#ajaxcontainer').fadeTo(500, 0, function() {
$ajaxSpinner.fadeIn();
$mainContent.empty();
$.get(newHash, function(data){
var $data = $(data).find("#container > *");
$container.prepend($data).imagesLoaded(function(){
$container.masonry( 'prepended', $data, true );
});
$ajaxSpinner.fadeOut( function() {
$('#ajaxcontainer').fadeTo(1000, 1);
});
});
});
};
});
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>
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/