We Keep Coding

Textarea startswith function not working

I am trying to apply starts with function on textarea, but obviously I am doing something wrong. I don't understand javascript, so I am sorry for obvious mistakes or problems. At least I tried what seemed logical to me... Fiddle here: http://jsfiddle.net/SVxbW/235/
HTML:
$("textarea").bind(function () {
if ($(this).startsWith("Hello") {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
.kuk {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea></textarea>
<button class="kuk">Clear</button>
And what if someone pastes the text "Hello" with right click of mouse? How to recognize that action too?

You need to get the val() then use startsWith(). Additionally you need to bind proper event handler. Here I have used keyup
$("textarea").on('keyup', function() {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
} else {
$(".kuk").hide();
}
});
Updated Fiddle

Try this. You need to bind an event also you need to get val to check whether it startswith hello or not.
$("textarea").bind('keyup',function () {
if ($(this).val().startsWith("Hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});
Here is jsfiddle

I made jsfiddle for those wondering which code I am using right now. I added few kinds of input options and now it works in chrome as well.
final fiddle
$("textarea").bind('change keyup paste blur input',function () {
if ($(this).val().startsWith("Hello") || $(this).val().startsWith("HELLO") || $(this).val().startsWith("hello")) {
$(".kuk").show();
}
else {
$(".kuk").hide();
}
});

Showing value in form fields if class exists

When the form fields are inputted and submitted (#submit_btn) correctly my values disappear. When they are not valid this doesn't happen. I have tried fixing this with jQuery:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok") === true) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
but it is not working.
Edit: #register is parent and .wpcf7-mail-sent-ok is child
Any ideas?

From what I understood this should work for you:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok")) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
checking $("#register .wpcf7-mail-sent-ok") with true will not work as it is a dom object which is truth-sy but not strictly same as true

Try this:
$('#submit_btn').click(function() {
if($("#register .wpcf7-mail-sent-ok").length) {
$('#name-007').val('Full Name').show();
$('#email-007').val('Email').show();
$('#phone-007').val('Phone Number').show();
}
});
This is the "proper" way of checking if element exists.
No need for using " > 0" or "==="

$('#submit_btn').click(function() {
if($("#register").hasClass("wpcf7-mail-sent-ok") {
$('#name-007').show();
$('#email-007').show();
$('#phone-007').show();
}
});

How to check already given class and add another one

recently I wrote one few lines of js in order to check the DOM structure and add "in" class in case user clicked on link. Now I need to use has property but I dont know how its used. Here is code:
$(document).on('click', '.collapse-all > a', function () {
var $collapseList = $(this).closest('#main-content').find('.collapse-list'),
$container = $collapseList.find('.collapse').removeAttr('style'),
$collapsed = $collapseList.find('.mehr-pfeil');
if ($container.filter('.in').length > 0) {
$container.removeClass('in');
} else {
$container.addClass('in');
}
});
$(function () {
$('.collapse-all > a').click();
});
// here is my try to check the DOM and add another class on <a> element
$(function () {
$container.hasClass('in') {
if ($container.filter('.in').length > 0) {
$collapsed.addClass('mehr-pfeil-active');
} else {
$collapsed.removeClass('mehr-pfeil-active');
}
}
});
So right now everything worked but when I tried to check if js has gave in class to .collapse then my code breaks. Can anyone tell me where I've made mistake

hasClass() returns a bool so your function may check something like this
if($container.hasClass('in')) {
...
}
As noted by TheBlueAussie, your $container is also not in the scope of your ready function.
A quick fix would be to global the variable like so
var $container;
$(document).on('click', '.collapse-all > a', function () {
var $collapseList = $(this).closest('#main-content').find('.collapse-list'),
$collapsed = $collapseList.find('.mehr-pfeil');
$container = $collapseList.find('.collapse').removeAttr('style');
...
}

There are 2 problems in your code
1,$container is not in the scope of your class checking function.
2, The way you used hasClass method is wrong
It will return true or false. So you can check it inside an if condition.
var $collapseList = $(this).closest('#main-content').find('.collapse-list');
$container = $collapseList.find('.collapse');
if ($container.hasClass('in')) {
$collapsed.addClass('mehr-pfeil-active');
} else {
$collapsed.removeClass('mehr-pfeil-active');
}

take a look at
.hasClass() to check if element has a class.
you can use it in a if and than addClass
if($('.class').hasClass('className'))
{
$('.class').addClass('xy');
//or
$('.class').removeClass('className');
//and so on
//.class could be #id as well
}

You should move the hasClass statement to a condition start since this method returns a boolean (true/false) value:
// here is my try to check the DOM and add another class on <a> element
$(function () {
if ($container.hasClass('in')) {
if ($container.filter('.in').length > 0) {
$collapsed.addClass('mehr-pfeil-active');
} else {
$collapsed.removeClass('mehr-pfeil-active');
}
}
});
You should also declare the $container variable inside this function or move its initialization to be a global one.

try this
$container.hasClass('in');
or if you want to toggle class
$container.toggleClass('in')

Toggling character in div on click

I would expect the following code to toggle the html content of .articleArrow between up and down arrows when .articleTitle is clicked:
jQuery
$(".articleTitle").click(function () {
if ($(this).children('.articleArrow').html() == '↑')
$(this).children('.articleArrow').html('↓');
else if ($(this).children('.articleArrow').html() == '↓')
$(this).children('.articleArrow').html('↑');
});
HTML
<div class='articleTitle'>
Blah
<div class='articleArrow'>
↓
</div>
</div>
But it doesn't do anything. On the other hand if I take the if...else if out and just set the character with $(this).children('.articleArrow').html('↑'); it works. So setting the character works it's the if...else if that's not getting triggered properly and I can't figure out why.
You can view it live on my website here (don't get excited it's not the actual admin panel!)

Works for me if I use the unicode characters to compare to:
$(".articleTitle").click(function () {
if ($(this).children('.articleArrow').html() == '↓') $(this).children('.articleArrow').html('↑');
else if ($(this).children('.articleArrow').html() == '↑') $(this).children('.articleArrow').html('↓');
});
jsFiddle example

You can easily do with this without the messy if statement by simply making use of the .slideToggle's complete callback method and jQuery's :visible selector.
$(".articleTitle").click(function () {
// 1st, i go ahead and asign our arrow element to a variable for use in callback
var arrow = $(this).find('.articleArrow');
$(this).siblings('.articleContent').slideToggle("slow", function(){
// this is the `complete` callback method
// in here, we can now manipulate whatever we need to when the "toggle" is `complete`
arrow.html( $(this).is(':visible') ? '↑' : '↓' );
// inside the .html statement is a simple `inline if` statement that simply says:
// if true ? do this : else do this
});
});
ExampleBehind the show
Plain Code:
$(".articleTitle").click(function () {
var a = $(this).find(".articleArrow");
$(this).siblings(".articleContent").slideToggle("slow", function () {
a.html($(this).is(":visible") ? "↑" : "↓")
})
});

If div is empty, remove it and change class of next div

Some generated output can be as follows:
<div class="fivecol"></div>
<div class="sevencol">content</div>
if the div.fivecol is empty, I want to remove it and change the div.sevencol to a div.twelvecol
$('.fivecol').each(function() {
if ($(this).html() ==''){
$(this).remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
doesn't do the trick. Any ideas?

$('.fivecol:empty + .sevencol').toggleClass('sevencol twelvecol')
.prev()
.remove();
DEMO: http://jsfiddle.net/JY9NN/

$('.fivecol').each(function(i, div) {
if (!div.html().trim()) {
div.remove().next('sevencol').removeClass('sevencol').addClass('twelvecol');
}
});
basically I just fixed some syntax errors, and changed the this reference to the proper argument call. Let me know how that works.
Best,
-Brian

Try this,
$(function () {
$('.fivecol').each(function() {
if ($(this).html() =='') {
$(this).remove();
$('.sevencol').each(function(){
$(this).attr('class','twelvecol');
});
}
});
});

We could use a couple fancy selector tricks:
$(".fivecol:empty + .sevencol").attr("class", function(){
return $(this).prev().remove(), "twelvecol";
});
As you can probably guess, .fivecol:empty attempts to find an empty element with the class fivecol. It then proceeds to grab the sibling element, using +, which has the class .sevencol.
Once we have our .sevencol element, we set out to change its class value to twelvecol. Since we're in this function, we know that .fivecol:empty was found, so we can safely remove it. Lastly, we simply return the new class value to be assigned in the place of sevencol.
Demo: http://jsfiddle.net/cLcVh/1/