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();
}
Related
The jQuery hasClass() isn't working as it should. When I click on text it should give it a class (and it does), but it doesn't check if it has that class?
There is my code!
$(document).ready(function() {
$('#example').on('click', function() {
$(this).addClass("redText");
});
if ( $('#example').hasClass("redText") ) {
$('#example').addClass("bigText");
}
});
.redText{
color: red;
}
.bigText{
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">Hey</div>
You're only adding the redText class when you click the div. When the if runs that class has not yet been added.
You need to either move the if into your click function, or remove the click function entirely.
I think you might want to do this, but I'm not completely sure;
$(document).ready(function() {
$('#example').on('click', function() {
if ( $('#example').hasClass("redText") ) {
$('#example').addClass("bigText");
}
else{
$(this).addClass("redText");
}
});
This is a total guess, can you please try to explain what it is that you are trying to achieve in more detail.
Your doing your if test only once when the page loads. You'd want to do that test when the element gets clicked and to show that, I've changed addClass to toggleClass so you can keep clicking.
$(document).ready(function() {
$('#example').on('click', function() {
$(this).toggleClass("redText");
if ( $('#example').hasClass("redText") ) {
$('#example').addClass("bigText");
}
});
});
.redText{
color: red;
}
.bigText{
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">Hey</div>
What you are trying to do can be achieved in a single statement like below:
$('#example').on('click', function() {
$(this).addClass("redText bigText");
});
The reason why your code is not working is because: Upon document load, first click listener gets registered. After which if() statement executes which does a lookup on all the redText class elements and finds none, and thus no bigText class gets added. Its not a LIVE listener that you are trying to achieve.
I have a <ul> that when clicked, toggles the visibility of another <ul>. How can I attach an event to the body of the page when the <ul>s are revealed so that the body will hide the <ul>.
I am new to writing these sorts things which bubble, and I cannot figure out why what I have done so far seems to work intermittently. When clicked several times, it fails to add the class open when the secondary <ul> is opened.
And of course, there may be an entirely better way to do this.
$(document).on('click', '.dd_deploy', function (e) {
var ul = $(this).children('ul');
var height = ul.css('height');
var width = ul.css('width');
ul.css('top', "-" + height);
ul.fadeToggle(50, function () {
//add open class depending on what's toggled to
if (ul.hasClass('open')) {
ul.removeClass('open');
} else {
ul.addClass('open');
}
//attach click event to the body to hide the ul when
//body is clickd
$(document).on('click.ddClick', ('*'), function (e) {
e.stopPropagation();
//if (ul.hasClass('open')) {
ul.hide();
ul.removeClass('open')
$(document).off('click.ddClick');
// }
});
});
});
http://jsfiddle.net/JYVwR/
I'd suggest not binding a click event in a click event, even if you are unbinding it. Instead, i would do it this way:
http://jsfiddle.net/JYVwR/2/
$(document).on('click', function (e) {
if ( $(e.target).is(".dd_deploy") ) {
var ul = $(e.target).children('ul');
var height = ul.css('height');
var width = ul.css('width');
ul.css('top', "-" + height);
ul.fadeToggle(50, function () {
//add open class depending on what's toggled to
if (ul.hasClass('open')) {
ul.removeClass('open');
} else {
ul.addClass('open');
}
});
}
else {
$('.dd_deploy').children('ul:visible').fadeOut(50,function(){
$(this).removeClass("open");
})
}
});
If you need to further prevent clicking on the opened menu from closing the menu, add an else if that tests for children of that menu.
You dont' really need all that code. All you need is jquery's toggle class to accomplish what you want. simple code like one below should work.
Example Code
$(document).ready(function() {
$('ul.dd_deploy').click(function(){
$('ul.dd').toggle();
});
});
Firstly, you are defining a document.on function within a document.on function which is fundamentally wrong, you just need to check it once and execute the function once the document is ready.
Secondly why do you want to bind an event to body.click ? it's not really a good idea.
Suggestion
I think you should also look at the hover function which might be useful to you in this case.
Working Fiddles
JSfiddle with click function
JSfiddle with hover function
I want to fold down the div onclick event and on another click want to fold up the div
my jquery is following
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").show("fold", {}, 500);
}
else {
$(".reply").hide("fold", {}, 500);
}
});
and the div I want to fold is having display:none at the initial point
In My reply tag
< div class="reply" style="display:none; " > at the initial reply is not shown
so when I click then div is fold down but on other div it is not fold up
Please help me
$(".fold_reply").click(function() {
$(".reply").toggle(500)
}
Toggle will show or hide the element depending on its current state, eliminating your if block.
Check this fiddle out for an example:
http://jsfiddle.net/z9rGz/3/
yes #levib answer is short and correct one to use. Another alternative is that you can use slideUp() and slideDown() functions.
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").slideDown("slow");
}
else {
$(".reply").slideUp("fast");
}
});
You should use the jquery .toggle or jquery UI .toggle method which does just that.
But the error in your logic is the $('.reply').css('display', 'none'). This sets the display to none. It does not check if it is none...
If you had to use that code you should change it to
if ( $('.reply').css('display') === 'none') )
Use the jQueryUI version of toggle() since you seem to be using a jQuery UI effect
.toggle( effect [, options ] [, duration ] [, complete ] )
Reference: http://api.jqueryui.com/toggle/
$(".fold_reply").click(function() {
$(".reply").toggle("fold", 500);
})
$(".fold_reply").click(function() {
var style=$('.reply').css('display');
if (style=='none') {
$(".reply").show(500);
}
else {
$(".reply").hide(500);
}
});
<input type="button" class='fold_reply' value="button">
<div class='reply'>
text<br/>text<br/>text<br/>text<br/>text
</div>
Working Demo
I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn't work when I do it with jquery/javascript.
Here is the HTML code:
<div id="connWindow">Conn Window
<div id="closeButton" onclick="javascript:connHide();"></div>
</div>
Here is the jquery code:
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
Any help will be greatly appreciated!
Why not bind your click events in jQuery as well
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
$(document).ready(function () {
$("#contab").click(function () {
connShow();
return false;
});
$("#connWindow").click(function() {
connHide();
});
});
The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.
Hide the anchor programmatically instead:
HTML:
<div id="connWindow">
Conn Window
<div id="closeButton"></div>
</div>
Script:
$(function() { // on document load
$('#connTab').css('display', 'none');
// I'm going to replace your inline JS with event handlers here:
$('#connTab').click(function() { connShow(); return false; });
$('#closeButton').click(function() { connHide(); });
});
function connHide() {
$('#connTab').css('display', '');
$('#connWindow').css('display', 'none');
}
function connShow() {
$('#connWindow').css('display', '');
$('#connTab').css('display', 'none');
}
Hope that helps.
You don't need to state javascript: for onclick events. Try changing to:
<div id="closeButton" onclick="connHide();"></div>
I would also change the first line to the following:
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/