Develop Reference

I have a conflict libraries

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!!

Twitter bootstrap:Popop are not showing up on first click but show up on second click

Here is my code. Please help me
$(document).ready(function(){
$(document).delegate(".view","click",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});

Try replacing the function .delegate() by .on(), this function has been superseded in the last versions of Jquery.
jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
jQuery 1.7+
$( elements ).on( events, selector, data, handler );
The code would be:
$(document).ready(function(){
$(document).on("click",".view",function(){
var id = $(this).attr("id");
alert(id);
$("#"+id).popover({
html : true,
content: function() {
return $("#"+id+"tt").html();
},
title: function() {
return $('#popoverTitle').html();
}
});
alert("thisa");
});
});

Try doing this way..
$('.view')
.popover({trigger: 'manual'})
.click(function() {
if($(this).hasClass('pop')) {
$(this)
.popover('hide')
.removeClass('pop');
} else {
var id = $(this).attr("id");
var title = $('#popoverTitle').html();
var response = $("#"+id+"tt").html();
$(this)
.attr({'title': title, 'data-content': response})
.popover('show')
.addClass('pop');
}
});

Combining masonry, imagesLoaded with ajax functionality

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

Changing dynamic site script to work with the latest jquery library

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

Issue with slideUp/slideDown JS

I have been using this code here:
$(document).ready(function(){
$('a[href*=#]').bind('click', function(){
var $href = $(this).attr('href')
$('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1200, 'easeInOutExpo');
return false;
});
$(".category-slider-trigger").click(function(e){
e.preventDefault;
$this = $(this);
var isVisible = $this.next().is(":visible");
$(".category-slider-content").stop(true,true).slideDown('slow');
$(".trigger-symbol").attr('src', '/images/plus.png');
if (!isVisible) {
$this.find(".trigger-symbol").attr('src', '/images/minus.png');
$this.next().stop(true,true).slideUp('slow');
}
return false;
});
});
On this html:
<div class="category-slider-content">
<div class="grid_1"> </div>
<div class="grid_10 category-filter-area">
<a class="stock-latest-additions" href="/stock/latest-additions">Latest additions</a>
<?
foreach ($stock_categories as $cat) {
echo("<h2 class=\"stock-category-title\">".$cat['title'].":</h2>");
echo("<ul class=\"stock-categories-list\">");
foreach ($cat['sub_categories'] as $sub_cat) {
echo("<li>".$sub_cat['title']."</li>");
}
echo("</ul>");
echo("<div class=\"clear\"></div>");
}
?>
</div>
<div class="grid_1"> </div>
Show/Hide Categories
But I'm having a problem with the functionality. When the link is clicked, the categories reveal themselves from the top and slide down, but it won't slide back up.
I've set up a jsFiddle here... http://jsfiddle.net/CwP8w/
Any suggestions?
Thanks,
R

Working demo http://jsfiddle.net/GmpZb/3/
Good API: http://api.jquery.com/slideToggle/
you can avoid the full isVisible logic if you where only doing that for show and hide by using slideToggle.
This will help. B-)
code changed
$(".category-slider-content").stop(true,true).slideToggle('slow');
full code
$(document).ready(function() {
$('a[href*=#]').bind('click', function() {
var $href = $(this).attr('href')
$('html,body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 1200, 'easeInOutExpo');
return false;
});
$(".category-slider-trigger").click(function(e) {
e.preventDefault;
$this = $(this);
var isVisible = $this.next().is(":visible");
$(".category-slider-content").stop(true, true).slideToggle('slow');
$(".trigger-symbol").attr('src', '/images/plus.png');
if (!isVisible) {
$this.find(".trigger-symbol").attr('src', '/images/minus.png');
//$this.next().stop(true,true).slideUp('slow');
}
return false;
});
});​

DEMO
$('a[href*=#]').bind('click', function(){
var $href = $(this).attr('href');
$('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1200, 'easeInOutExpo');
return false;
});
$(".category-slider-trigger").click(function(e){
e.preventDefault;
$this = $(this);
var isVisible = $('.category-slider-content').is(":visible");
if (!isVisible) {
$('.category-slider-content').slideDown();
$this.find(".trigger-symbol").attr('src', '/images/minus.png');
}else{
$('.category-slider-content').slideUp();
$this.find(".trigger-symbol").attr('src', '/images/plus.png');
}
return false;
});

I really don't get what the first function is supposed to do, but anyway:
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault;
$('html,body').animate({scrollTop: $(this.href).offset().top}, 1200, 'easeInOutExpo');
});
$(".category-slider-trigger").on('click', function(e) {
e.preventDefault;
$(".category-slider-content").stop(true, true).slideToggle('slow');
$(".trigger-symbol").attr('src', $(this).is(':visible')?'/images/plus.png':'/images/minus.png');
});
});​
FIDDLE