Forums

Hompimpa

@Mottie... (or anyone who first saw it). How do I add a class in the parent element only if the checkbox inside is checked. I want the .sortable element become yellow if checkbox is checked:

http://jsfiddle.net/uH8Ez/

Mottie

o.O

What checkbox? and what sortable?

Hompimpa

Click Add Paragraph...

Mottie

DUH... LOL... ok try this demo

Hompimpa

Quite complicated, but I will learn it! >o<
I want to ask another tomorrow. Today is a lot of work. Thank you very MUCH.

Hompimpa

@Mottie... (or anyone who first saw it). This might be a bit tricky. But how can I remove the .sortable and input.remove then replace it with breakspace or paragraphs in the generated codes?

@Chris can do that on his CSS3 Button Maker. I don't know how to change html code into other code without changing the content.

Can it be done for the html code? Or not?

http://jsfiddle.net/tovic/3DMue/15/

// how can I write my wishes correctly?
$('button#generate').click(function(){
       var realContent = $('.sortable').html();
       $(realContent).replaceAll('.sortable');
       var thecode = $('#area').html();
       $('#thecode').text(thecode);
       $('#thecode').dialog({show:"fade", hide:"explode"});
       $('#area').html('');    
});

Mottie

If I am understanding your question, you could just replace the text:

realContent = $('.sortable').html().replace('<input type="checkbox" class="remove">', '');

Hompimpa

Huh, nothing happens. So I returned it. I think this will not be as easy as I think.

Mottie

Ok, I understand now... try this (demo):

$('button#generate').click(function() {
    var realContent = $('#area').clone();
    realContent.find('input').remove();
    realContent.find('.sortable').children().unwrap();
    var thecode = realContent.html();
    $('#thecode').text(thecode);
    $('#thecode').dialog({
        show: "fade",
        hide: "explode"
    });
    $('#area').html('');
});

Hompimpa

Wow. Mottie, what's your daily meals?

I was thinking about Whiskas. Does Whiskas can make a person clever in JavaScript?

...

Then, how can I add <br /> in every li, ul, ol, h1 and p? So the code would be neater.

http://jsfiddle.net/tovic/3DMue/20/

Mottie

Catnip... nuff said.

Try this (demo)

    $('button#generate').click(function() {
        var realContent = $('#area').clone();
        realContent.find('input').remove();
        realContent.find('.sortable').children().unwrap().after('<br>');
        var thecode = realContent.html()
            .replace(/<\/?(br|ol|ul|li)>/g, function(m){
                return {
                    '<br>'  : '\n\n',
                    '<ol>'  : '<ol>\n',
                    '</ol>' : '</ol>\n',
                    '<ul>'  : '<ul>\n',
                    '</ul>' : '</ul>\n',
                    '<li>'  : '  <li>',
                    '</li>' : '</li>\n'
                }[m]});
        $('#thecode').val(thecode);
        $('#thecode').dialog({
            show: "fade",
            hide: "explode"
        });
        $('#area').html('');
    });

I changed the code div to a textarea and added a bit of formatting... I originally had a "\t" in front of the LI's but it added too much indentation, so I switched it to two spaces.

Hompimpa

WARRRRGGGGGHHH!!!!!!!!!!! So complicated. Like C++

T_T

Incredible!

http://jsfiddle.net/tovic/3DMue/23/

Hompimpa

Huh.. when the elements dragged, the generated codes mess again! T_T

Hompimpa

Thank's for your help Mottie. I already get the point, on how to remove .sortable and how to add breakspace on the generated codes. It would be a good reference for me in the future :D

Mottie

Hey... umm what do you mean by almost solved? And I'm not sure I understand what you mean by "when the elements dragged, the generated codes mess again!". I moved the elements around and the code seemed to be fine to me.

Hompimpa

I hope that I can make Lorem Ipsum Generator with JQuery :p
Until then and then I thought: "Does anyone want to add and subtract paragraphs then copy it while they can copy a paragraph with the classic way".

At that time I decided to add paragraphs, tables, headings and other inside <div id="area"> by default, so JQuery only serve to modification, not as a main actor in the generator. But when I add an element with my generator rules the elements that I put in it all messszzz!!! (only the <br /> tag), Whether I've inserted it correctly according to the rules in the generator. *sigh*

Mottie

http://jsfiddle.net/Mottie/3DMue/25/

Merry Christmas

Hompimpa

WOW! But why the </p> of the original elements position are different with the inserted paragraph?

PS: Am I too perfectionist?

http://jsfiddle.net/tovic/3DMue/27/

Mottie

When I add a new paragraph, it looks exactly the same as the other ones already in there... which browser are you using? I just checked it on Firefox and Chrome.

I'm a perfectionist too (a lazy one really), but it sounds like you might be running into a css problem.

Hompimpa

Firefox.

In inserted paragraph, the generated code will look like this:

<p>Blah blah blah blah blah 
    </p>

but in the default paragraph will look like this:

<p>Blah blah blah blah blah</p>

Mottie

You're killing me! LOL

Actually I had that fixed way back about 10 versions ago, but it didn't get copied over or got removed in one of your updates. All it needed was the trim function seen below (demo)

    $('button#addParagraph').click(function() {
        var paragraph = $('textarea#pg').val();
        $('#area').append('<div class="sortable"><input type="checkbox" class="remove" /><p>' + $.trim(paragraph) + '</p></div>');
        removing();
    });

Hompimpa

WOW. It looks better. Thanks.
I'll go find out about .trim(). And will prepare the next question maybe :p

Hompimpa

What's wrong with my code?

    $('a.plus').click(function(){
        $(this).parent().before('<li>The List</li>');
        return false;
    });
    $('a.minus').click(function(){
        $(this).parent().before().remove();
        return false;
    });

http://jsfiddle.net/tovic/3DMue/29/ (Click add ordered/unordered list!)

Mottie

You're killing me man!...

Try using .live("click", function(){ instead of .click(function(){, because the list items don't exist until you add them.

Hompimpa

Work for the first trigger but not for the second: http://jsfiddle.net/tovic/3DMue/30/

Mottie

$(this).parent().prev().remove();

Hompimpa

OOOOOOOOHHHHHHHHH!!! :(o)
http://jsfiddle.net/tovic/3DMue/31/

Hey Mottie, Did you also feel that here's too many .click() functions? Can I integrate them all in a bracket? For example like this:

var blah = *this element*;
blah.click(function(){
button#id1 = function(){
...
}
button#id2 = function(){
...
}
button#id3 = function(){
...
}
});

?????????????????????

Mottie

Please, don't fix stuff that isn't broken.

Hompimpa

Okay!

Hompimpa

This may not be too important: How do I increase the number each time the list added. I hope I can also determine the amount of list to specify the beginning start counting. I've found the snippet but I was confused. I can't determine this: http://stackoverflow.com/questions/2970196/use-jquery-to-keep-adding-numbers-to-a-variable-on-click

    $('a.plus').live("click", function(){
        var n = $(this).parent().length;
        $(this).parent().before('<li>The List ' + (n + 1) + '</li>');
        return false;
    });

Mottie

This code: $(this).parent().length points to the parent of the link, which is the LI. Try this (demo):

$(this).parent().siblings().length;

Or this would work too, but a bit more messy

$(this).parent().parent().find('li').length;

It uses .parent().parent() instead of .closest('ul,ol') since I'm not sure it works and I'm too lazy to test it.

Hompimpa

You're alien Mottie... http://jsfiddle.net/tovic/3DMue/34/

This will be the last question: How do I unwrap the <span> from text? I've tried it but did not succeed:

realContent.find('.sortable p span').contents().unwrap();

I add this code to increase the paragraph too:

    $('a.pplus').live("click", function(){
    var paragraph = $('textarea#pg').val();
    $(this).parent().before('<span> ' + $.trim(paragraph) + '</span>');
    return false;
    });
    
    $('a.pminus').live("click", function(){
    $(this).parent().prev().remove();
    return false;
    });

Example: http://stackoverflow.com/questions/2308366/remove-element-with-jquery-but-leave-text

Hompimpa

Nevermind. It solved HAHA :D

realContent.find('span.p').contents().unwrap();

Hompimpa

Mottie, check what you created with javascript :D

Lipsum-UI

joshuanhibbert

@Hompimpa I'm getting all sorts of malware warnings when attempting to view that site.

Hompimpa

what??? I din't do anything. Is getting all sorts of malware warnings a metaphore?

Mottie

Hompimpa

Oh, that image. It is simply a banner image. Not a virus. I am a follower of that friendship communities. I'll try to get rid of it. But HERE IS NOTHING HAPPEN T_T

How about now?

Mottie

Ok, it's fine now... nice work, but I think it would be better to have it online instead of making people download the files. You know, at the top of the jsFiddle page is a Share button that has a link to a full page demo.

Also, since you're using jQuery UI, you might was to include the stylesheet - http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css - Just add it under the "Add Resources" tab.

Hompimpa

http://jsfiddle.net/tovic/TK3cz/embedded/result/

EDIT: http://hompimpa.googlecode.com/svn/trunk/Lipsum-UI/index.html

treehouse : what would you like to learn today?

Forums

[Solved] Add Class to Parent if Checkbox is Checked