We Keep Coding

binding dynamic dom elements to content.js plugin

I have a plugin that im making use of called content.js http://innovastudio.com/content-builder.aspx
Im adding in dynamic divs to the page which I would like to have the content.js plugin assigned to it, so I can make use of its functionality.
On a single div, or already defined div within the page, I dont appear to have any issues with multiple divs.
However if I add in a div with the same class, I cant seem to bind the plugin to it.
Ive included the code for instantiating the div with the contentbuilder plugin, but I wondering if there is a way to bind it to new elements that are added to the page with the class of "letter". Or if there is a generic way of binding plugins to divs using jquery.
$('div.letter').contentbuilder({
enableZoom:false,
snippetOpen: true,
imageselect: 'images.html',
fileselect: 'images.html',
snippetFile: '/assets/templates/content-builder/default/snippets.html',
toolbar: 'left',
//sourceEditor: false,
onDrop:function(){
// function for when an item is dragged into the editable area
},
onRender: function () {
var coverLength = $("#coverpage div.row").length;
var mainContent = $("#maincontent div.row").length;
if(coverLength == 0)
{
$("#coverpage").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#coverpage div.no-content-on-page").remove();
}
if(mainContent == 0)
{
$("#maincontent").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#maincontent div.no-content-on-page").remove();
}
//custom script here
}
});

If you must add these divs in a dinamic way, i think that you should init the plugin for each time that you add a new div. To avoid init same div twice, use some class like in the following example:
function createLetter(){
$("body").append('<div class="letter mustBeActivated"></div>');
initContentBuilder();
}
function initContentBuilder(){
$('div.letter.mustBeActivated').contentbuilder({
enableZoom:false,
snippetOpen: true,
imageselect: 'images.html',
fileselect: 'images.html',
snippetFile: '/assets/templates/content-builder/default/snippets.html',
toolbar: 'left',
//sourceEditor: false,
onDrop:function(){
// function for when an item is dragged into the editable area
},
onRender: function () {
var coverLength = $("#coverpage div.row").length;
var mainContent = $("#maincontent div.row").length;
if(coverLength == 0)
{
$("#coverpage").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#coverpage div.no-content-on-page").remove();
}
if(mainContent == 0)
{
$("#maincontent").html('<div class="no-content-on-page">Select your content from the right sidebar</div>')
}
else
{
$("#maincontent div.no-content-on-page").remove();
}
//custom script here
}
}).removeClass('mustBeActivated');
}

Jquery Menu that on click toggles class to expand one list level at a time

issue#1 So I have a menu that asks for the Make, model and year of a car. I have got the basic functionality working but my code isn't clean. How can I make this DRYer?
jQuery(document).ready(function( $ ) {
$('li.menu-item-type-custom').on('click', function () {
$(this).closest('ul.sub-menu').toggleClass('expand-menu');
});
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
});
});
issue#2
I also want only one child of each make or model to be shown at a time. Right now if I click on make 1 and make 2 then the text overlaps and it looks bad. I tried
$('li.menu-item-type-custom').on('click', function () {
$(this).find('> ul.sub-menu').toggleClass('expand-menu');
if( $(this).hasClass("expand-menu") ) {
$(this).siblings().removeClass("expand-menu")
} else{}
});
but my approach is wrong and it isn't working
DEMO:
http://jsfiddle.net/BbF9K/
Thanks for the help

I'm too tired to sort out all your classes, so I just used hide() and show(). Feel free to translate it back into CSS-driven statements.
http://jsfiddle.net/isherwood/BbF9K/2/
jQuery(document).ready(function ($) {
$('li.menu-item-type-custom').on('click', function () {
$(this).siblings().find('ul.sub-menu').hide();
$(this).children('ul.sub-menu').show();
});
});
Here's a version with slide effects:
http://jsfiddle.net/isherwood/BbF9K/3/
You could also tighten up your jQuery like so:
http://jsfiddle.net/isherwood/BbF9K/4/
jQuery(function($) {
$('li.menu-item-type-custom').click(function () {
$(this).siblings().find('ul.sub-menu').slideUp();
$(this).children('ul.sub-menu').slideDown();
});
});

Need Help for better practice Jquery codes

I am trying to make my jquery codes look better here. My functions are working correctly but I was wondering if anyone can make my codes less ugly. Thanks a lot!
HTML
<div class='image_layout'>
<a href='#'><img src=' a.jpg '/></a>
<br><p class='credits'>hahahah
<br>Agency: Agency1
<br>Picture ID: 5 </p>
</div>
jQuery
$('#image_layout').on('hover', 'img', function() {
$(this).parent().next().next().fadeIn('fast');
})
$('#image_layout').on('mouseout', 'img', function() {
$(this).parent().next().next().fadeOut('fast');
})​

You can pass two functions to jQuery hover - one for mousein, one for mouseout. You can make this change as long as you don't have dynamically added images. Your code would also be a lot simpler if the element you are fading has an ID or class:
$('#image_layout img').hover(
function () {
$(this).closest('.someClass').fadeIn('fast');
},
function () {
$(this).closest('.someClass').fadeOut('fast');
}
);

$('.image_layout').on('hover', 'img', function (e) {
if(e.type == 'mouseover') {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
} else {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
}
})
You could also have done:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeIn('fast');
}, function() {
$(this).closest('.image_layout').find('.credits').stop().fadeOut('fast');
});
If you're sure that nothing other than hovering the image will cause the element to fade, you could simply write:
$('.image_layout').on('hover', 'img', function() {
$(this).closest('.image_layout').find('.credits').stop().fadeToggle('fast');
});

Look into Douglas Crockford's JS Style Guide. He'd make your code look something like (with improvements):
var obj = $('#image_layout img');
obj.mouseover( function(){
$(this).parent([selector]).next([selector]).fadeIn('fast');
});
obj.mouseout( function(){
$(this).parent([selector]).next([selector]).fadeOut('fast');
});
You don't need the on, just call the function directly.

I would use .eq as opposed to two next statements, additionally, hover takes two functions, the first being for the mouseenter event, and the second for mouseout
$('#image_layout').hover('hover', 'img', function () {
$(this).parent().eq(2).fadeIn('fast');
}, function () {
$(this).parent().eq(2).fadeOut('fast');
})
References
Take a look at eq here
Read over hover here

Number, hover (etc) effect not work after Ajax Load More

I'm using Drupal 7 and get my content with View module on page. And my pager Views Load More module. And my thumbnail effect hover, shadow etc. Image hover using this code:
var hoverImg = '<div class="hoverimg"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).find("a").append(hoverImg);
});
});
$(".thumb div").hover(function() {
$(this).find(".hoverimg").animate({ opacity: 'toggle' });
});
$(".thumb").hover(function() {
$(this).find("div").each(function(){
$(this).find(".shadow").fadeOut(500);
});
});
And getting number on my current thumbnail. This code:
var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
c = 0;
d = 0;
var i = 1;
d = $(this).find('.thumbimg').length;
$(this).find('.thumbimg').each(function(){
sayi=i++;
$(this).append('<div class="img_no">0'+sayi+'</div>');
});
});
Everything is OK. All effects on start page. But when click Load More button, my effects can't work another page.
How do i solve this problem? Thanks.

The reason why it stops working is due to the hover function (and your other scripts/functions) only works on existing elements. So if you add something with ajax, it wont apply to that unless you reload the script after the ajax load.
Another option is to use live() or on() (for the hover part. On is the new version of live, added in jQuery 1.7).
Live and on listens for any existing or future elements.
A live script would look something like this:
$(".yourElement").live({
mouseenter:
function () {
// Do something
},
mouseleave:
function () {
// Do something
},
mousemove:
function () {
// Do something
}
});

using .delegate function in slide show

I have a script that runs a slideshow for my page. I'm trying to use .delegate() to insert a new set of images shown within the slideshow including its thumbnails. I'm using a .load() function to load an external <div> to replace some HTML within the active page. I also have buttons with IDs, (#kick1, #kwick2, etc.) that determine what set of slide show is loaded.
jQuery("#kwick2").click(function () {
jQuery("body").delegate('#slideshow', 'click', function() {
jQuery('#slideshow').load('/design.html #design');
)};
)};
Pretty sure the syntax is all wrong. Can someone help me?
The #slideshow div is something I created to contain some other divs directly
effected by the slideshow script. Within div ID #slideshow are
<div class="main_image">, <div class="desc"> and <div class="image_thumb">.
These are being replaced directly when you click a KWICK button, they are all pretty much self explanatory, image thumb has and unordered list with image links.

You should not re-deligate every time you click the button. You are doing the wrong.
Instead what you should have is something like:
var foobar = (function () {
var func , mod1 , mod2;
mod1 = function () {
/* do something in state 1 */
};
mod2 = function () {
/* do something in state 2 */
};
return {
state: function (e) {
switch (this.id){
case 'kwick1':
func = mod1;
break;
case 'kwick2':
func = mod2;
break;
}
},
callback: function (e) {
func.call();
}
}
})();
jQuery("#kwick1").click( foobar.state ); // and you really should delegate this
jQuery("#kwick2").click( foobar.state );
jQuery("body").delegate('#slideshow','click', foobar.callback);
Or something similar to this ..
And no , i did not test this code. It is written to explain the concept, not to spoon-feed people.

not sure if i have understood the question well, anyway you have to specify what event you are delegating
jQuery("#kwick2").click(function () {
jQuery("body").delegate('#slideshow',"click", function(){
jQuery('#slideshow').load('/design.html #design');
)};
)};
delegate