We Keep Coding

Only allow one jQuery function to execute at a time

I have a grid layout and I am using jQuery to change what is displayed in each grid depending on which grid was clicked. At the moment I can click a grid and it changes and then if I click the same grid it goes back to the default but after their initial click If they happen to click in another grid it will trigger another function. I cannot hide the div's because I am using them to display content. I would like to only let one function be triggered at a time. Below is my code.
(function() {
var count = 0;
jQuery('#home-grid-one-two').click(function () {
count += 1;
jQuery('#home-grid-two-one').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-two').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
'background-size': 'cover'
});
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
'margin-top': '-450px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '-420px'
});
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
if (count == 2) {
jQuery('#home-grid-two-one').css({
'visibility': 'visible'
});
jQuery('#home-grid-two-two').css({
'visibility': 'visible'
});
jQuery('#home-grid-three-two').show();
jQuery('#home-grid-three-two').css('background-image', 'none');
jQuery('#home-grid-two-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-two-one').show();
jQuery('#home-grid-three-one').show();
jQuery('#home-grid-two-three').show();
jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
}
});
})();
(function() {
var count = 0;
jQuery('#home-grid-three-two').click(function () {
count += 1;
jQuery('#home-grid-one-one').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-one').css({
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
jQuery('#home-grid-one-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-two').css({
'background-color': 'transparent',
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
if (count == 2) {
jQuery('.home-grid').css('background-image', 'none');
jQuery('#home-grid-one-two').css('background-color', '#cccccc');
jQuery('#home-grid-two-one').css('background-color', '#cccccc');
jQuery('#home-grid-two-three').css('background-color', '#cccccc');
jQuery('#home-grid-three-two').css('background-color', '#cccccc');
jQuery('#home-grid-one-two').find('p').show();
jQuery('#home-grid-two-one').find('p').show();
jQuery('#home-grid-two-two').find('p').show();
jQuery('#home-grid-two-three').find('p').show();
jQuery('#home-grid-three-two').find('p').show();
count = 0;
}
});
})();

A simple solution would perhaps be to declare a global variable that keep tabs on when a function is running, and checking it before running other functions.

Just make them unclickable (should work in most browsers but I have not tested all) by adding and removing a couple of classes. (saves binding/unbinding which could get messy)
sample fiddle to play with: http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/
Example html:
<div class="mygrids active">one</div>
<div class="mygrids">two</div>
<div class="mygrids">three</div>
<div class="mygrids">four</div>
<div class="mygrids">five</div>
<div id='showactive'>active:<span>none</span></div>
Sample CSS
.mygrids.inactive { pointer-events: none; }
.mygrids.active { pointer-events: auto;
border: solid lime 1px;}
sample code
$('.mygrids').on('click',function(){
$('#showactive>span').text($(this).text());
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).siblings().removeClass('inactive');
}
else{
$(this).addClass('active');
$(this).siblings().addClass('inactive');
}
});
$('.mygrids').not('.active').addClass('inactive');

How to slide down a jQuery slideToggle when scaling a browser

I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/

Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});

Animating HTML Text Change jQuery

I am attempting to change the text of a HTML element using javascript and jquery. This is my code so far, and I can't seem to get it to work. I have googled it and can't seem to find anything on it.
$("div#title").hover(
function() {
$(this).stop().animate({
$("div#title").html("Hello")
}, "fast");
},
function(){
$(this).stop.animate({
$("div#title").html("Good Bye")
}, "fast");
}
);
Any help would be greatly apreciated.

$("div#title").hover(
function () {
$(this).stop().html("Hello").hide(0).fadeIn("fast");
},
function () {
$(this).stop().html("Good Bye").hide(0).fadeIn("fast");
}
);
jsFiddle example

The way you are doing currently the syntax is incorrect, also you cannot animate a text as such instead you would need to animate an element holding the text. Also not clear on what peoprty you want to animate, Here couple of examples:
Animating Opacity:
$("div#title").hover(
function () {
$(this).stop().css('opacity', '0').html(function (_, oldText) { // Set the opacity of the div to 0 and then change the html (flip it based on last value)
return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
}).animate({
opacity: 1 // Animate opacity to 1 with a duration of 2 sec
}, 2000);
});
Fiddle
Animating Width:
$("div#title").hover(
function () {
$(this).stop().animate({
'width': '0px' // Animate the width to 0px from current width
}, 2000, function () { // On completion change the text
$(this).html(function (_, oldText) {
return oldText == 'Good Bye' ? 'Hello' : 'Good Bye'
}).animate({ // and animate back to 300px width.
'width': '300px'
}, 2000);
})
});
Fiddle

You can try this also
$("div#title").hover(
function() {
$(this).stop().fadeOut("slow",function(){
$(this).html("Hello")
}).fadeIn("slow");
},
function(){
$(this).stop().fadeOut("slow", function(){
$(this).html("Good Bye")
}).fadeIn("slow");
});

The text can not really encouraged, you can change the content using html method.
Lettering.js is a plugin to play in a more visual with text.
http://letteringjs.com/
$("#title").hover(function(){
$(this).html("Hello");
},function(){
$(this).html("Good Bye");
});

Typing Style
<font size="7" style="position:absolute; left:0px; top:0px; width:150px; z-index:50;">Hello World!</font>
<div id="test" style="position:absolute; left:0px; top:0px; height:100px; width:150px; z-index:60; background-color: #ffffff;"></div>
$('#test').animate({"left" : "150"}, 2000);

I've coded one plugin for that purpose, you can check it on github: jquery-bubble-text.
You can use it this way:
bubbleText({
element: $element, // must be one DOM leaf node
newText: 'new Text', // must be one string
});
Look one example in this jsfiddle.
Hope you enjoy it :)

Select a HTML element.
Here' my example:
<h1 id="heading">Heading1</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
//Changing the text part
$("#heading").text("1Heading");
// No needed code
var read = document.getElementById("heading");
var text = read.value;
console.log(text);
//Should be 1Heading
</script>
Make sure you load the jQuery first:
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

How do I change a mouseenter/mouseleave menu code to onclick menu for javascript?

I am a newbie to javascript and I am trying to make an onclick dropdown menu.
I want it to look like this:
http://www.instantshift.com/demo/dropdown_menu/
But this is mouseenter/mouseleave (in other words, hover) whereas I would like it to be onclick. How do I change this code to make it onclick?
Also can you please provide me the jquery for the onclick?
My current code for the hover (mouseenter/mouseleave menu) is the following:
$(function(){
$('.dropdown').mouseenter(function(){
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
$(this).slideUp(300);
});
});
});
</script>
Once again, I would like to change this to onclick.
Thanks.

I think that you can just trigger the menu with a click, and then any other click will close it.
So, simple modification:
$(function() {
$('.dropdown').click(function() {
$('.sublinks').stop(false, true).hide();
var submenu = $(this).parent().next();
submenu.css({
position: 'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex: 1000
});
submenu.stop().slideDown(300);
//click anywhere outside the menu
$(document).click(function() {
var $el = $(this);
$el.not('.dropdown') && $el.slideUp(300);
});
});
});

Substitute
$('.dropdown').mouseenter(function(){
with
$('.dropdown').click(function(){

Trying to make a click animation repeatable

I'm trying to make a bar that slides horizontally. If it's positioned left, it will slide right. If it's positioned right, it will slide left. Eventually this will contain multiple bars side by side that will slide out of the way to reveal different images.
right now it would work fine except i can't seem to figure out how to get it to fire more than once. I'm not a javascript guy by any stretch of the imagination, so just a little push in the right direction would be appreciated.
Thanks
Luke
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var x=1;
$(document).ready(function(){
if( x==1 )
{
x=2;
$("#block").click(function()
{
$("#block").animate({right:'20px'});
});
return;
}
if( x==2 )
{
x=1;
$("#block").click(function()
{
$("#block").animate({left:'20px'});
});
return;
}
});
</script>
</head>
<body>
<p> This block should slide right if it's positioned left, and slide left if it's positioned right. It should repeat this behavior indefinitely. Right now it's being very naughty indeed!</p>
<div id=block style="background:#98bf21;height:100px;width:16px;position:absolute;">
</div>
</body>
</html>

Bind the event out the if statment and put the condition in side event.
Live Demo
$(document).ready(function(){
var x=1;
$("#block").click(function()
{
if( x==1 )
{
x=2;
$("#block").animate({right:'20px'});
}
else
{
x=1;
$("#block").animate({left:'20px'});
}
});
});
To keep the rule cycle you may need to change the code like given below
Live Demo
$(document).ready(function() {
var x = 1;
$("#block").click(function() {
if (x == 1) {
x = 2;
$("#block").animate({
right: '20px',
left: '0px'
});
}
else {
x = 1;
$("#block").animate({
left: '20px',
right: '0px'
});
}
});
});​

You cannot easily animate left and right, because jQuery doesn't know the exact end position when you change left: 0 to right: 0. What you can do is calculating this yourself and using left only. Some other things are:
Use a boolean to flip instead of a number
Don't decide what event handler to bind, but decide what should happen when the handler is called
Use $(this) for the current element
http://jsfiddle.net/HZRWJ/
$(document).ready(function(){
var isLeft = true;
$("#block").click(function() {
var fullWidth = $(document).width();
var elemWidth = $(this).width();
if(isLeft) {
$(this).animate({ left: fullWidth - elemWidth });
} else {
$(this).animate({ left: 0 });
}
isLeft = !isLeft;
});
});

Does this do something similar to what you wanted?
Fiddle Demo
$("#block").data('position', 'left');
$("#block").click(function() {
var elem = $(this);
resetElementPosition(elem);
switch (elem.data('position')) {
case 'left': elem.animate({ right: '20px' }); elem.data('position', 'right'); break;
case 'right': elem.animate({ left: '20px' }); elem.data('position', 'left'); break;
}
});
function resetElementPosition(element)
{
element.css({ 'left' : 'auto', 'right' : 'auto' });
}

If you are going to have multiple bars it might be easier to store values in a jQuery object.
$(document).ready(function(){
$("#block").each( function( ) {
// associate data with each element. At the moment there should
// only be one but if this is implemented as a class there may
// be more
$(this).data("x", 0);
});
$("#block").click( function( ) {
// 0 will push it to the right as 0 => false
if( $(this).data("x") ) {
$(this).data("x", 0 );
// removing the css property allows you to use left & right
$(this).css("right","").animate({left:'20px'});
} else {
$(this).data("x", 1 );
$(this).css("left","").animate({right:'20px'});
}
});
});
Demo here