I have the below jquery statement
$(this).('span.section1').css('background','url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent');
How do I write a if else statement for the css condition. What I mean is if the background image is accordion_closed_left.png then <do this> or else <do this>.
just to be precise <do this> are blocks of statement.
Thanks for your time.
I'd recommend to use a css class instead and then call jQuery's .hasClass() method on it:
css:
.closed {
background: url("images/accordion_closed_left.png") no-repeat scroll 0 0 transparent;
}
js:
var $target = $(this).find('span.section1');
if( $target.hasClass( 'closed' ) ) {
$target.removeClass( 'closed' );
}
else {
$target.addClass( 'closed' );
}
How to write this in jQuery with 'guides' as a class name....
<script type="text/javascript" >
function guideMenu()
{
if (document.getElementById('guides').style.display == "none") {
document.getElementById('guides').style.display = "block";
}
else {
document.getElementById('guides').style.display = "none";
}
}
</script>
To naively answer your question:
if ($(this).('span.section1').css('background').match('|/accordion_closed_left\.png"|')) {
}
else {
}
However I support jAndy's answer, .hasClass() is the way to go!
Related
I am trying to animate $("#somediv").slideDown("slow"); and $("#somediv").slideUp("slow"); But when it slideUp() and you make the screen bigger, it keeps hidden.
Example:
function toggle() {
$("#somediv").slideUp("2000");
}
/* Desktop */
#media only screen and (min-width: 1px) {
#somediv {
display: block;
/* More styling */
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
TOGGLE
<div id="somediv">Div</div>
I've searched on the internet but couldn't find a solution.
Is this possible?
Thanks for helping!
SOLVED For the people with the same problem:
function toggle() {
if($("#somediv").css('display') == "none") {
$("#somediv").slideDown("2000");
}else {
$("#somediv").slideUp("2000");
}
}
$(window).on("resize",function(){
if (window.matchMedia('(min-width: 800px)').matches) {
$("#somediv").show();
}else {
$("#somediv").hide();
}
});
You can't animate display. You need to animate something like the height being zero or the width being zero or transform: scale(0.0001) or something like that.
SOLVED
For the people with the same problem:
function toggle() {
if($("#somediv").css('display') == "none") {
$("#somediv").slideDown("2000");
}else {
$("#somediv").slideUp("2000");
}
}
$(window).on("resize",function(){
if (window.matchMedia('(min-width: 800px)').matches) {
$("#somediv").show();
}else {
$("#somediv").hide();
}
});
Use this:
$("#somediv").slideToggle("2000");
instead of your toggle function and you don't need anything additional.
function toggle() {
$("#somediv").slideToggle("2000");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
TOGGLE
<div id="somediv">Div</div>
Here's the script I have:
I would like to convert it to pure JavaScript, so I won't have to use jQuery.
if ( $('#movie.playing').length ) {
$('.settings').click();
$('<style> .element { display: none; } </style>').appendTo(document.head);
$('.item').click(function() {
if ($(this).text().trim() === "Ann") {
if ($(this).attr('aria-checked') == 'true') {
$('.element').css('display', 'block');
} else {
$('.element').css('display', 'none');
}
}
});
}
Here's what I have so far:
var movie = document.querySelector("#movie_player.playing-mode");
if ( movie ) {
document.querySelector(".settings").click();
var style = document.createElement("text/css");
style.styleSheet.cssText = ".element { display: none; }";
document.head.appendChild(style);
document.querySelector(".item").click(function() {
/* what do I do with this part? */
if ($(this).text().trim() === "Ann") {
if ($(this).attr('aria-checked') == 'true') {
$('.element').css('display', 'block');
} else {
$('.element').css('display', 'none');
}
}
});
}
I don't know how to convert the if-statement, where on click of the button with text "Ann" it is going to switch the elements from display: block to none and vice versa.
$(selector) = document.querySelector(selector)
$(selector).click() = document.querySelector(selector)(maybe cache the element first).addEventlistener(eventType, fn)
css stuff can be add as 'class' like el.classList.add(someClassName).
UPDATE
It's better to get the basic knowledge with JavaScript | MDN. Personal it's easy than jQuery.
This question already has answers here:
jQuery text fade/transition from one text to another?
(6 answers)
Closed 6 years ago.
Is there a way to fade in the text when it changes? I'm using jQuery's html() function. I attempted doing it with fadeOut(), but now it's going back and forth between the fadeIn and fadeOut.
Please let me know if there's a better way to do this, does the constant check on browser resize worse than detect if width is a certain size?
https://jsfiddle.net/jzhang172/uhmubhtf/2/
$(function(){
function screenClass() {
if ($( window ).width() <500){
$(".ok span").html("no");
}
else{
$(".ok span").fadeOut();
$(".ok span").fadeIn().html("yes");
}
}
$(window).bind('resize',function(){
screenClass();
});
});
.ok{
background:blue;
height:300px;
width:300px;
transition:1s;
font-size:30px;
color:white;
}
.span{
color:white;
font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok"><span></span></div>
I can't comment yet…
I have clone your fiddle and changed the javascript code just a little bit.
https://jsfiddle.net/LoicMars/3gr8fnfn/
$(function() {
yes = true;
no = true;
function screenClass() {
if ($(window).width() < 500 && yes == true) {
$(".ok span").fadeOut(function() {
$(this).fadeIn().html("no");
yes = false;
no = true;
});
} else if ($(window).width() >= 500 && no == true) {
$(".ok span").fadeOut(function() {
$(this).fadeIn().html("yes");
yes = true;
no = false;
});
}
}
$(window).bind('resize', function() {
screenClass();
});
});
I have add 2 variables for preventing the constant fading blink effect when resizing.
I tried this but it isn't working:
$('cbxShowNotifications').click(function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
});
EDIT -
Fixed a few things but I'm still unable to show the DIV AFTER I hide it:
$('#cbxShowNotifications').on('click', (function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
}));
change ($(this).checked) to ($(this).is(':checked'))
You have some syntax issues, and you should monitor the change event on checkboxes:
$('#cbxShowNotifications').on('change', function () {
var tview = $('#treeview');
if ($(this).prop('checked')) {
tview.show();
} else {
tview.hide();
}
});
NOTE: You can set the initial state by the trigger of the change event:
$('#cbxShowNotifications').trigger('change');
You can do it like this:
$('#treeview').on({
'change': function(){
if ($('div').css('display') == 'block') {
$('div').hide();
} else {
$('div').show();
}
}
})
jsfiddle: http://jsfiddle.net/PWAwz/
is this what you're searching? I wrote the codes below you can check they are working in example too. http://jsfiddle.net/jquerybyexample/xe7aL/
$(document).ready(function(){
$('.checkbox1').change(function(){
$('.tview').toggle('fast');
});
});
I know your question is related to jQuery, but if the purpose is purely presentational, perhaps you can consider a CSS way to accomplish the same thing:
#treeview {
display: none
}
#cbxShowNotifications:checked ~ #treeview {
display: block
}
You can take a look at an example here: http://jsfiddle.net/BZQX4/5/
I have a JavaScript function that looks like this:
function UpdateFilterView() {
if (_extraFilterExists) {
if ($('#F_ShowF').val() == 1) {
$('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
$('#extraFilterDropDownButton').css("display", "block");
if ($('#divCategoryFilter').css("display") == 'none') {
$('#divCategoryFilter').show('slow');
}
return;
} else {
if ($('#divCategoryFilter').css("display") == 'block') {
$('#divCategoryFilter').hide('slow');
}
$('#extraFilterDropDownButton').css("display", "block");
$('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
return;
}
} else {
if ($('#divCategoryFilter').css("display") != 'none') {
$('#divCategoryFilter').hide('fast');
}
$('#extraFilterDropDownButton').css("display", "none");
}
}
This will be triggered by the following code (from within the $(document).ready(function () {}):
$('#extraFilterDropDownButton').click(function() {
if ($('#F_ShowF').val() == 1) {
$('#F_ShowF').val(0);
} else {
$('#F_ShowF').val(1);
}
UpdateFilterView();
});
The HTML for this is easy:
<div id="divCategoryFilter">...</div>
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down"> </div>
I have two problems with this:
When the panel is hidden and we press the div button (extraFilterDropDownButton) the upper left part of the page will flicker and then the panel will be animated down.
When the panel is shown and we press the div button the panel will hide('slow'), but the button will not change to the correct class even when we set it in the UpdateFilterView script?
The correct class will be set on the button when hovering it, this is set with the following code:
$("#extraFilterDropDownButton").hover(function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up_hover');
} else {
$(this).attr('class', 'showhideExtra_down_hover');
}
},
function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up');
} else {
$(this).attr('class', 'showhideExtra_down');
}
});
To set a class completely, instead of adding one or removing one, use this:
$(this).attr("class","newclass");
Advantage of this is that you'll remove any class that might be set in there and reset it to how you like. At least this worked for me in one situation.
Use jQuery's
$(this).addClass('showhideExtra_up_hover');
and
$(this).addClass('showhideExtra_down_hover');
<script>
$(document).ready(function(){
$('button').attr('class','btn btn-primary');
}); </script>
I like to write a small plugin to make things cleaner:
$.fn.setClass = function(classes) {
this.attr('class', classes);
return this;
};
That way you can simply do
$('button').setClass('btn btn-primary');