We Keep Coding

i have an issue with .focus() on an input

Here I have an input that I like with a cursor that I thought was nice. I would like this input to be "focused" on when my window is loaded up so that the cursor is blinking and the input is ready to type in. I use jquery to make the cursor work but cannot make the .focus() function work
https://jsfiddle.net/cityFoeS/z9Ldt/233/
This is my jquery:
$(function() {
var cursor;
$('#cmd').click(function() {
$('input').focus();
cursor = window.setInterval(function() {
if ($('#cursor').css('visibility') === 'visible') {
$('#cursor').css({ visibility: 'hidden' });
} else {
$('#cursor').css({ visibility: 'visible' });
}
}, 500);
});
$('input').keyup(function() {
$('#cmd span').text($(this).val());
});
$('input').blur(function() {
clearInterval(cursor);
$('#cursor').css({ visibility: 'visible' });
});
});
$('#text').focus();

$(function(){ }); is the same as $(document).ready(function () { })
It fires when the document has been parsed and is ready.
You have the $('#text').focus(); outside of this snippet and that piece of code is being executing before the document.ready. So onclick and onblur functions weren't setted yet.
You can try this. If you change your js and simulate click action of "cmd" div after attach the function, it works:
$(function() {
var cursor;
$('#cmd').click(function() {
$('input').focus();
cursor = window.setInterval(function() {
if ($('#cursor').css('visibility') === 'visible') {
$('#cursor').css({ visibility: 'hidden' });
} else {
$('#cursor').css({ visibility: 'visible' });
}
}, 500);
});
$('#cmd').click();
$('input').keyup(function() {
$('#cmd span').text($(this).val());
});
$('input').blur(function() {
clearInterval(cursor);
$('#cursor').css({ visibility: 'visible' });
});
});

Two the same popup plugins not working on one page

I am using popup plugin presented by some user of stackoverflow.
It works perfectly, but I wanted to add another one on the same page and it does some strange things. The first one works fine, the second one opens, but when i want to close it, it opens the first one instead. Could someone give me any clue please? I have changed all the classes, IDs etc
First one:
...
<a href='/contact' class='menuButton' id='contact'>KONTAKT</a>
<div class="messagepop pop">
<p>popup message1</p>
</div>
...
<script>
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
Secone one:
...
<a href='/contact2' class='menuButton' id='contact2'>BILETY</a>
<div class='messagepop2 pop2'>
<p>popup message 2</p>
</div>
...
<script>
function deselect(e) {
$('.pop2').slideFadeToggle(function() {
e.removeClass('selected2');
});
}
$(function() {
$('#menuButtonBilety').on('click', function() {
if($(this).hasClass('selected2')) {
deselect($(this));
} else {
$(this).addClass('selected2');
$('.pop2').slideFadeToggle();
}
return false;
});
$('.close2').on('click', function() {
deselect($('#menuButtonBilety'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
</script>
EDIT: The script comes from the best answer HERE

In your case probably you are overriding the deselect function.
But instead of multiply your code one for each element instance you can set it more general using DOM structure hierarchy, like:
function deselect(e) {
e.next('.pop').slideFadeToggle(function () {
e.removeClass('selected');
});
}
$(function () {
$('.menuButton').on('click', function () {
if ($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$(this).next('.pop').slideFadeToggle();
}
return false;
});
});
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
height: 'toggle'
}, 'fast', easing, callback);
};
Demo: http://jsfiddle.net/IrvinDominin/u2fkff64/

Sub menu needs to fold away first and then the first menu following using jQuery

please see this fiddle http://jsfiddle.net/rabelais/t6qc4Lrd/1/
var $menu = $('#menu');
$menu .click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
});
});
} else if ( $('#fatal').css('display') == 'none' ) {
$('#fatal').animate({ left: 'toggle' }, 300, function() {
$('#igna, #black, #dazed, #sons, #mad, #stimp').slideToggle("fast");
});
} else {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
}
if ($('#bio-line-1').css('display') != 'none') {
$('#bio-line-2').slideUp("slow");
window.setTimeout(function () {
$('#bio-line-1').animate({ width: 'hide' });
}, 300);
}
else if ( $('#mad-1').css('display') != 'none' ) {
$('#mad-1, #mad-2, #mad-3').slideToggle("fast", function() {
$('#mad-4').animate({ left: 'hide' }, 300, function() {
$('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
$('#fatal').animate({ left: 'hide' }, 300);
});
});
});
}
1.Clicking on the WORK link opens further links.
2.Clicking on MAD LONDON opens a sub menu.
3.With both these menus open when you click on WORK again, both menus close at the same time.
My Question: Instead of them closing together I need the sub menu to fold away first and then the first menu. This affect does happen when one selects any link from the sub menu.
Please help. Thanks.

It's closed by the last else of your first if group, simply removing that last else will solve the problem (and in the example doesn't cause any other). See the working fiddle: http://jsfiddle.net/ktn425c6/

Change (toggle) css when clicked on another div

When I click on a div with the classname 'show', i'm adding css to the div 'mobile-menu', this works perfect, but I would like to change the css to another height when I click on the the classname "show" again
$(".show").click(function() {
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});

Try this code.
$(".show").click(function() {
if ($('#mobile-menu').css('height') === '100%')
$('#mobile-menu').css({ 'height': '51px' });
else
$('#mobile-menu').css({ 'height': '100%' });
});

<style>
.highlight{
height: 100%;
}
</style>
$('.show').click(function() {
$('#mobile-menu').toggleClass( "highlight" );
});

You need to set a boolean indicating the state of the #mobile-menu
var isFullHeight;
$(".show").click(function() {
if (isFullHeight)
{
$('#mobile-menu').css({ 'height': '51px' });
isFullHeight = false;
}
else
{
$('#mobile-menu').css({ 'height': '100%' });
isFullHeight = true;
}
});

Try something like this:
$(".show").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$('#mobile-menu').css({ 'height': '100%' });
} else {
// even clicks
// when i click on .show again: .css({ 'height': '51px' });
}
});

What I do in these cases is
$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');
this adds and removes a class on all selectors

Try this code:
$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});

jQuery .mouseover() (.mouseout) div is flickering

i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).
$(document).ready(function() {
/*$(".bulletProj").mouseenter(function () {
console.log("You're Over!");
$(".caption").animate(
{top: "0px"},
300, function() {
console.log("i slided");
});
});
$(".bulletProj").mouseleave(function() {
$(".caption").animate(
{top: "-200px"},
300, function() {
console.log("i left");
});
});*/
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").toggle();
});
});
Part of the code is commented since I tried more ways.
What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering.
Anyone has an idea?
Thanks very much.

try this:
$(document).ready(function() {
$(".bulletProj,.caption").mouseenter(function() {
$(".caption").toggle();
}).mouseleave(function () {
$(".caption").hide();
});
});
working fiddle here: http://jsfiddle.net/r2y8J/4/
I hope it helps.

You can easily use
.caption{pointer-events:none}
http://jsfiddle.net/r2y8J/5/

Try this.
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
stopImmediatePropagation();
$(".caption").toggle();
});

I have faced a similar problem, in my case i have used css: opacity like below to stop flickering
css:
.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}
JQuery:
$(".caption").mouseenter(function(){
$(this).css('opacity','1');
})
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").css('opacity','1');
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").css('opacity','0');
});
Working Fiddle

var caption = $(".caption");
$(".bulletWrapper").hover(function(){
console.log("mous is over");
caption.toggle();
}, function(){
console.log("mous leaves");
caption.toggle();
});
or
$(".bulletWrapper").bind("mouseenter mouseleave", function(){
$(".caption").toggle();
});