Develop Reference

jQuery Simple text change on image hover

I'm trying to create a script for changing text on image hover. This is the HTML in simple version:
<section id="#first">
<div class="img-1"></div>
<div class="img-2"></div>
</section>
<section id="#second">
<div class="text-1"></div>
<div class="text-2"></div>
</section>
Javascript
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('text-1-active') },
function(){ $('.img-1').addClass('img-1-active') },
function(){ $('.text-2').removeClass('text-2-active') },
function(){ $('.img-2').removeClass('img-2-active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('text-2-active') },
function(){ $('.img-2').addClass('img-2-active') },
function(){ $('.img-1').removeClass('img-1-active') },
function(){ $('.text-1').removeClass('text-1-active') }
)
});
Can't change the HTML structure. The classes do get added but don't get removed.
FIDDLE

:) actually this is all you need: DEMO
$("#first [class^=img-]").hover(function() {
$('#second .text-'+ this.className.replace(/\D/g,'')).toggle();
});
If you want to toggle classes? Nothing simpler: DEMO
$("#first [class^=img-]").hover(function() {
$(this).toggleClass("wow");
$('#second .text-'+ this.className.replace(/\D/g,'')).toggleClass("wow");
});
To explain the above, you just need to find out the number of the hovered element and reference-by number the needed .text-N element.
Also this <section id="#first">, that #first is not the way to set an ID to an HTML element.
Use simply <section id="first">

You are attempting to pass four separate callback functions, rather than a single callback that executes all the necessary code.
Here is what you want:
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
)
});
http://jsfiddle.net/w4mLtec8/5/

first, you use the .hover function wrongly, it should only accept 2 arguments which is for mouseenter and mouseleave. You should be using it like this
$("selector").hover(
function(){
// mouseenter function
},
function(){
// mouseleave function
}
});
and second you don't need to use too long class name to to decide it's active or not, hence you can use it to diferentiate it like this text-1 active and text-2 active, so you can write it like this in jQuery
jQuery(document).ready(function($){
$('.img-1').hover(
function(){ $('.text-1').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
$('.img-2').hover(
function(){ $('.text-2').addClass('active') },
function(){ $('.text-1, .text-2').removeClass('active') }
)
});
and CSS
.text-1,
.text-2{
display:none;
}
.text-1.active,
.text-2.active{
display:block;
}
here's the Updated Fiddle with the optimized way to use it.

I'm making an assumption of what you're looking for...but try this jQuery code:
jQuery(document).ready(function ($) {
$('.img-1').mouseover(function () {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active')
}).mouseout(function () {
$('.text-1').removeClass('text-1-active');
$('.img-1').removeClass('img-1-active');
});
$('.img-2').mouseover(function () {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active')
}).mouseout(function () {
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
});
});

You are handing the hover event a list of functions. Just send it one that does eveything.
I.E.
jQuery(document).ready(function($) {
$('.img-1').hover(
function() {
$('.text-1').addClass('text-1-active');
$('.img-1').addClass('img-1-active');
$('.text-2').removeClass('text-2-active');
$('.img-2').removeClass('img-2-active');
}
);
$('.img-2').hover(
function() {
$('.text-2').addClass('text-2-active');
$('.img-2').addClass('img-2-active');
$('.img-1').removeClass('img-1-active');
$('.text-1').removeClass('text-1-active');
}
);
});

Try this
jQuery(document).ready(function($){
$('.img-1').hover(function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
});
$('.img-2').hover(function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
$('.img-1').toggleClass('img-1-active');
$('.text-1').toggleClass('text-1-active');
});
});

jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').toggleClass('text-1-active');
$('.img-1').toggleClass('img-1-active');
}
)
$('.img-2').hover(
function(){
$('.text-2').toggleClass('text-2-active');
$('.img-2').toggleClass('img-2-active');
}
)
});
http://jsfiddle.net/w4mLtec8/10/

If I understand what's to be done, the approach itself used to solve the problem could be better. Basically, use CSS to your advantage. Here, I've reduced the number of times we call JQuery by taking a little time to set up the HTML and CSS.
Tag the corresponding text div with a number
Put the same number in a data attribute so the item to hover knows which text it's associated with
I believe the intent is to have one text hover active at a time, so we can simple remove all 'active'. Naturally, we'd one to restrict the selector here to only pull text hovers, but you get the idea.
//Javascript Code
$('.img').hover( function() {
var name = $(this).attr('data-name');
$('.text').removeClass('active');
$('.text[data-name="'+name+'"]').addClass('active');
});
http://jsfiddle.net/LkL9uo0k/1/

As far as I understand, you don't need classes to show and hide the text, use .show() and .hide() to take care of it, in the original js you're passing 4 functions to the hover event whereas only 2 are needed, one executes when the element is hovered and the second one when mouse exits the element causing hover event to stop.
Here's the modified js, take a look at the fiddle too -
jQuery(document).ready(function($){
$('.img-1').hover(
function(){
$('.text-1').show();
$('.text-2').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
$('.img-2').hover(
function(){
$('.text-2').show();
$('.text-1').hide();
},
function(){
$('.text-1, .text-2').hide();
}
);
});
FIDDLE
I'm basically hiding both texts on exit, if you want one text block to always stay visible you can hide the other one in hover 'exit' function. Here's the fiddle for that -
http://jsfiddle.net/w4mLtec8/9/

Click on a div with JavaScript

On a website, when I click "Tchat" (in the header), the box containing the "Live Chat" (in the bottom right) opens.
I tried with :
Tchat
-
function showChat() {
$('#belvg-feedback').click());
}
or :
function showChat() {
$('#belvg-feedback').css({"margin-bottom":"0"});
}
Can you tell me how to do ?

Try using "trigger" function provided by JQuery
Pseudo-code:
$("#belvg-feedback").trigger( "click" );
Handle the click event like this
$("#belvg-feedback").click(function() {
//Do whatever is needed here.
});

I assume that belvg-feedback is the id of div that you want to see.
You can use show() in Jquery: http://api.jquery.com/show/
Initially assigns this css at div: display: none;
At this point you can change the function this way:
function showChat() {
$('#belvg-feedback').show();
}
To do so hide instead:
$('#belvg-feedback').hide();

You can show and hide by this..
Show:
function showChat() {
$('#belvg-feedback').show();
}
Hide:
function Hide() {
$('#belvg-feedback').hide();
}

Jquery If/Then in Click Function?

This is what I want it to do...
When div called 'bd' is clicked > check if the div with id of 'ump' has a class of 'active' >
if it does, get div with class of 'brandDump' and slide it up slowly, hide it, and remove the class of 'active' > else, take the div with class 'brandDump' and slide it down, show it, and add class of 'active'
Nothing is happening when I click div.bd. What am I doing wrong?
Fiddle link and code below.
http://jsfiddle.net/K2V8f/36/
<div class="bd">cool</div>
<div class="brandDump" id="ump">works</div>
<div>shape</div>
.brandDump {
background-color:#fff;
width:100px;
display:none;
}
.bd {
width:100px;
height:100px;
background-color:#000;
}
$(".bd").click(function () {
if ("#ump".hasClass("active")) {
$(".brandDump").slideUp("slow");
$(".brandDump").hide();
$(".brandDump").removeClass("active");
} else {
$(".brandDump").slideDown("slow");
$(".brandDump").show();
$(".brandDump").addClass("active");
}
});

Updated fiddle
You need to use callbacks when the slideUp finishes.
$(".bd").click(function () {
if ($("#ump").hasClass("active")) {
$(".brandDump").slideUp("slow", function () {
$(".brandDump").removeClass("active");
});
} else {
$(".brandDump").slideDown("slow", function () {
$(".brandDump").addClass("active");
});
}
});
Also there was an error with ("#ump")... should have been $("#ump")

The problem is that you had:
"#ump".hasClass(...
...when you should've had:
$("#ump").hasClass(...
But note also that the .slideUp() and .slideDown() methods hide and show your element(s) so you don't need to call .hide() and .show() as well. Also it is more efficient to chain jQuery methods together if you want them to operate on the same element:
$(".bd").click(function () {
if ($("#ump").hasClass("active")) {
$(".brandDump").slideUp("slow")
.removeClass("active");
} else {
$(".brandDump").slideDown("slow")
.addClass("active");
}
});
Demo: http://jsfiddle.net/K2V8f/50/
"check if the div with id of 'ump' has a class of 'active' > if it does, get div with class of 'brandDump' and slide it up slowly"
The div with id ump is the same div as the one with class brandDump. I'm not sure why you're talking about them as if they're two different divs when in fact your code seems to then use the #ump and .brandDump selectors interchangeably to select the one div, but if you treat them as one more consistently you can cut your function down to one line:
$(".bd").click(function () {
$(".brandDump").slideToggle("slow").toggleClass("active");
});
Demo: http://jsfiddle.net/K2V8f/51/

jQuery toggle search button

I use old javascript code to flip my search button from search to searching in my forms as follows
<div id="search_clickable"> <input class="search" type="submit" value="search" onClick="javascript:flipSearchButton();"></div>
<div id="search_unclickable" class="hidden"><img src="/assets/img/searching.png" alt=""></div>
My javascript function is
function flipSearchButton()
{
document.getElementById('search_clickable').style.display = 'none';
document.getElementById('search_unclickable').style.display = 'block';
}
How to I achieve this with jQuery?

function flipSearchButton(){
$('#search_clickable').hide(); // or - $('#search_clickable').toggle();
$('#search_unclickable').show(); // or - $('#search_unclickable').toggle();
}
And stop using inline javascript:
$('.search').click(flipSearchButton);
Note that your search button is of type submit (?!) so it will submit the form, You probably want to change the type to button or return false from the callback:
function flipSearchButton(){
$('#search_clickable').hide();
$('#search_unclickable').show();
return false;
}

include jquery:
<script type="text/javascript" src="jquery.js"></script>
then:
function flipSearchButton()
{
$('#search_clickable').hide();
$('#search_unclickable').show();
}

i thought something like this:
$("#search_clickable").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
if you wanna toggle this element, use toggle() instead of hide() and show().

You can also consider to use fade effect to improve user experience
function flipSearchButton()
{
$('#search_unclickable').fadeIn('slow', function() {
// Animation complete
});
$('#search_clickable').fadeOut('slow', function() {
// Animation complete
});
};

You don't even need a separate function:
$("input[type=submit").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});
Or use the id/class of the submit button if you want to on a specific button:
$(".search").click(function() {
$("#search_clickable").hide();
$("#search_unclickable").show();
});

Please refer below URL for toggle Div.
Check below Working Demos
As per your question : Demo1
As per my opinion : Demo2
Thanks

jQuery text() change on toggle()?

I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.

It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});

You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/