Simple question. I'm trying to target the 'i' tag with the panel-indicator class in the tree. Additionally I need to remove the 'hide' class from the panel-edit 'i' tag. Here's the HTML:
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<i class="panel-indicator glyphicon glyphicon-chevron-down pull-right"></i>
<i class="panel-edit glyphicon glyphicon-pencil pull-right hide"></i>
<h4 class="panel-title" id="-collapsible-group-item-#1-">
<a data-toggle="collapse" data-parent="#collapseOne" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">System Details</a>
<a class="anchorjs-link" href="#-collapsible-group-item-#1-"><span class="anchorjs-icon"></span></a>
</h4>
</div>
</div>
Here's the script code. Though it works, it seems like a sloppy way to get it to work. So I'm just wanting to know how to write it correctly so that it sets the 'rotate' class to the 'i' tag with the panel-indicator class.
$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
$(this).addClass("open");
$(this).parent().prev('i.panel-indicator').addClass('rotate');
} else if (
$(this).hasClass("open")) {
$(this).removeClass('open');
$(this).parent().prev().prev('i.panel-indicator').removeClass('rotate');
}
});
Try '.closest' instead:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
margin: 3px;
padding: 3px;
background: #EEEEEE;
}
li.hilight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li><b>Click me!</b></li>
<li>You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "li" ).toggleClass( "hilight" );
});
</script>
</body>
</html>
source: https://api.jquery.com/closest/
Edit: in your case:
$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
$(this).addClass("open");
$(this).closest('i.panel-indicator').addClass('rotate'); //edited line
} else if (
$(this).hasClass("open")) {
$(this).removeClass('open');
$(this).closest('i.panel-indicator').removeClass('rotate'); // edited line
}
});
$('.panel-heading > h4.panel-title > a').click(function () {
if (!$(this).hasClass("open")) {
$(this).addClass("open");
$(this).closest('.panel-heading').find('i.panel-indicator').addClass('rotate');
$(this).closest('.panel-heading').find('i.panel-edit').removeClass('hide');
} else if (
$(this).hasClass("open")) {
$(this).removeClass('open');
$(this).closest('.panel-heading').find('i.panel-indicator').removeClass('rotate');
$(this).closest('.panel-heading').find('i.panel-edit').addClass('hide');
}
});
Related
I have 2 icons in a wrapper what I want to achieve is when hover on the icon one of the icons hide and the other one shows. Something to note is the wrappers are getting loaded dynamically so I need to access them through document. Also I'm trying to use this because I only want the hovered element to change. How can I achieve this? I wrote a rough code below. Thanks in advance
var fa_regular;
var fa_solid;
$(document).on('mouseenter', '.wrapper .fa-regular', function() {
fa_regular = $(this)
$(fa_regular).css('display', 'none')
$(fa_solid).css('display', 'flex')
});
$(document).on('mouseleave', '.wrapper .fa-solid', function() {
fa_solid = $(this)
$(fa_regular).css('display', 'flex')
$(fa_solid).css('display', 'none')
});
.wrapper i {
font-size: 40px;
margin-top: 4%;
cursor: pointer;
}
.wrapper .fa-regular {
display: flex;
}
.wrapper .fa-solid {
display: none;
color: rgb(224, 0, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<div class="wrapper">
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</div>
<div class="wrapper">
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-heart"></i>
</div>
$obj -> parent.wrapper -> find inside
$(document).on('mouseenter', '.wrapper .fa-regular', function() {
$(this).css('display', 'none')
$(this).parent().find('.fa_solid').css('display', 'flex')
});
$(document).on('mouseleave', '.wrapper .fa-solid', function() {
$(this).css('display', 'none')
$(this).parent().find('.fa_solid').css('display', 'flex')
});
I basically want for the visitor to be able to click on a picture and for the background to change :
<div class="box1">
<ul id="bgbg">
<li id="bg1"> </li>
<li id="bg2"> </li>
<li id="bg3"> </li>
</ul> </div>
$(document).ready(function() {
$( "#bgbg > li" ).click(function() {
$( 'body' ).removeClass('bg1 bg2 bg3');
$( 'body' ).addClass( $(this).attr('id') );
});
});
But it's not working ...
EDIT : It was due to the jQuery’s Compatibility Mode of wordpress - Link
jQuery(document).ready(function() {
jQuery( "#bgbg > li" ).click(function() {
jQuery( 'body' ).removeClass('bg1 bg2 bg3');
jQuery( 'body' ).addClass( jQuery(this).attr('id') );
});
});
I belive you have mistake in selector. It should be:
$(document).ready(function() {
$( ".box1 li" ).click(function() { //check selector
$( 'body' ).removeClass('bg1 bg2 bg3');
$( 'body' ).addClass( $(this).attr('id') );
});
});
Here's a working example
$(document).ready(function() {
$( "#bgbg > li" ).click(function() {
$( 'body' ).removeClass('bg1 bg2 bg3');
$( 'body' ).addClass($(this).attr('id')) ;
alert($(this).attr('id'));
});
});
#bg1{
width:60px;
height:60px;
background:url('https://www.w3schools.com/css/trolltunga.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
#bg2{
width:60px;
height:60px;
background:url('http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
#bg3{
width:60px;
height:60px;
background:url('http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
.bg1{
background:url('https://www.w3schools.com/css/trolltunga.jpg');
}
.bg2{
background:url('http://hdwallpaperfun.com/wp-content/uploads/2015/07/Big-Waves-Fantasy-Image-HD.jpg');
}
.bg3{
background:url('http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="box1">
<ul id="bgbg">
<li id="bg1"> </li>
<li id="bg2"> </li>
<li id="bg3"> </li>
</ul> </div>
</body>
You are have a mistake in select a element:
Use the way i use in this code (You can use this code also to add att ):
<script>
$('your element #id or .class or name').attr('att name','value');
</script>
i did something similar recently and went with this approach
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg1.jpg">1</button>
<button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg2.jpg">2</button>
<button type="button" class="btn btn-default waves-effect bg-btn" data-img="bg3.jpg">3</button>
</div>
$(document).ready(function(){
$('.bg-btn').click(function(){
var img = 'images/' + $(this).data('img');
$('body').css('background-image', 'url('+ img + ')');
console.log(img);
});
});
Might help you out.
In my application I have added close button side bootstrap dropdown.
Clicking on that close button I have to close that dropdown.
This is working properly, but when I click anywhere outside dropdown, dropdown is not closing
Here is Fiddle : goo.gl/3RAkBw
Can any one tell me how can I close
You can try this:
$(document).on('click',function(){
$('#layers').hide();
})
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' );
});
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<br/><br/>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button onclick="$('#layers').toggle();" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul id="layers" class="dropdown-menu" role="menu">
<span><img class="close_img dropdown-toggle" onclick="$('#layers').toggle();" data-toggle="dropdown" src="https://www.eonenergy.com/images/icons/close.gif" alt="CloseWindow" title="Close" style="margin-top:5px;margin-right:5px" /></span>
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
<br/><br/>
You can set click event on window like, (if you have to hide only on click of anywhere on window)
$(window).on('click', function () {
$( '#layers' ).css( 'display','none' ); //$( '#layers' ).hide();
});
Simply use the below jquery code
$(document).click( function () {
$("#layers").css("display", "");
});
or use
$(document).click( function () {
$("#layers").toggle();
});
"show" class is added when the dropdown is clicked so to hide the dropdown menu you have to remove it:
$(document).on('click',function(){
$('#user-menu').removeClass('show');
})
I want to add a fadeIn() and a fadeOut() to my scrollToTop but the fadeIn is'nt worked.
If you want ot see, I've created some GIF : First GIF Here
Seconde GIF
As you can see the fadeIn() on the scrollToTop button is
triggered by the scroll of the windows,
This is my code :
$(document).ready(function() {
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
I'm not an expert at jQuery, but it looks to me as though your problem resides in you invoking fadeIn nearly every time the page is scrolled. What I suggest is that you create a boolean, called buttonShowing (or whatever), and set it to false.
Then, change buttonShowing every time the user scrolls, at the end of the appropriate if and else statements. Then, at the beginning of the if/else statements, you can check if the buttonShowing state has changed and only fadeIn/Out if the state has changed since the last scroll event fired. Here is the code:
$(document).ready(function() {
var buttonShowing = false;
//Check to see if the window is top if not then display button
$('.modal-content').scroll(function() {
if ($(this).scrollTop() > 100) {
if(!buttonShowing) $(".scrollToTop").fadeIn(1000);
buttonShowing = true;
} else {
if(buttonShowing) $('.scrollToTop').fadeOut(1000);
buttonShowing = false;
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
This example may help you. :
<html>
<head>
<style>
body {
height: 1200px;
}
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 100%;
position: fixed;
display: none;
}
</style>
</head>
<body>
<div id="cir"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(window).scroll(function(){
if($(document).scrollTop()>100)
$("#cir").fadeIn(1000);
else
$("#cir").fadeOut(800);
})
</script>
</body>
</html>
Best Solution for you:
$(window).scroll(function() {
var scroll_pos = window.pageYOffset;
var scroll_div = $('.modal-content').offset().top;
if(scroll_pos > scroll_div) {
if ($(this).scrollTop() > 100)
$(".scrollToTop").fadeIn(1000);
else
$('.scrollToTop').fadeOut(1000);
}
});
or Change $('.modal-content').scroll(function() { to $(window).scroll(function() {. See:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".scrollToTop").fadeIn(1000);
} else {
$('.scrollToTop').fadeOut(1000);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('.modal-content').animate({
scrollTop: 0
}, 500);
return false;
});
});
The solution with $(window).scroll(function() doesn't work, certainly beacause this script is used on a modal.
This is an of my HTML code with the modal :
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<!-- My content -->
<h4>Ajouter une recette</h4>
<div class="row">
<div class="input-field col s6 offset-s3">
<input id="libelle" type="text" class="validate">
<label for="libelle">Nom de la recette</label>
</div>
</div>
<form id="form_ingredient">
<div class="row">
<div class="col s4 offset-s1 input-field">
<input id="ingredient" name="ingredient" type="text" class="validate">
<label for="ingredient">Ingredient</label>
</div>
<div class="col s4 offset-s2 input-field">
<input id="poid" name="poid" type="number" class="validate">
<label for="poid">Poid</label>
</div>
</div>
</form>
</div>
<div class="modal-footer" style="text-align: right;">
<!-- My footer -->
<a id="up" class="scrollToTop" style="display:none;"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a id="add_ing"><i class="fa fa-plus" aria-hidden="true"></i></a>
<a id="valid_ing" style="margin-left: 1.5%;"><i class="fa fa-check" aria-hidden="true"></i></a>
</div>
</div>
<script>
//The script that I try to use
</script>
I resolved my problem with Css, I just add these class to my stylesheet :
.scrollToTop{
opacity:0;
text-decoration: none;
transition:opacity 1s ease-in;
float: left; }
.scrollToTop.visible {
opacity:1; }
And this Js and that works :
$('.modal-content').scroll(function(){
if ($(this).scrollTop() > 100) {
$(".scrollToTop").addClass('visible').css("cursor", "pointer");
} else {
$('.scrollToTop').removeClass('visible').css("cursor", "default");
}
});
I thought this was going to be simple, but I am having a bit of hard time getting this to work. I am able to toggle once using .show and .hide, but not able to toggle back.
all the help would be appreciated.
here is the code:
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
$(document).ready(function(){
$('.middle').click(function(){
$('.inactive').show();
$('.active').hide();
})
.click(function(){
$('.inactive').hide();
$('.active').show();
});
});
I also have a pen of it here: http://codepen.io/lucky500/pen/qdZPLe
one approach is to use toggle
$(document).ready(function(){
$('.middle').click(function() {
$('.inactive, .active').toggle();
});
});
http://codepen.io/miguelmota/pen/zGqPOX
Why not simplify this a bit by using a single element with .toggleClass().
http://jsbin.com/ceyilucuya/1/edit?html,css,js,output
$('.toggler').on('click', function () {
$(this).toggleClass('fa-rotate-180 on');
});
The structure of your HTML it a little funky, however I found a dirty fix to your problem. The following code i repeat is a dirty fix, but it works.
http://codepen.io/anon/pen/MwyEdq
JS
$(document).ready(function(){
i = 0;
$(".fa-toggle-on").click(function() {
if ( i == 0) {
$('.inactive').hide();
$('.active').show();
i++;
}
else if ( i == 1) {
$('.inactive').show();
$('.active').hide();
i = 0;
}
});
});
HTML
<div class="middle">
<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" ></i>
</div>
CSS
.middle {
text-align: center;
margin: 0 auto;
padding: 2rem;
}
.active {
color: green;
}
Generally and simply it works like this:
You can use this in general purposes.
<script>
$(document).ready(function () {
$('i').click(function () {
$(this).toggleClass('fa-plus-square fa-minus-square');
});
});
</script>
Rotating the fontawesome icon is a nice idea, however the browser may show some change in the vertical positioning since the icon has different transparent margins with respect to the visible pixels.
I combined the solutions of #miguel-mota and #oka.
Only one fontawesome tag is needed, the classes are switched in the on click function for the class .toggler.
Make sure to use the each function to apply multiple transformations.
JS
$('.toggler').on('click', function () {
$(".my-button").each(function(){
$(this).toggleClass('fa-toggle-off');
$(this).toggleClass('fa-toggle-on');
$(this).toggleClass('active');
})
});
CSS
.toggler {
text-align: center;
margin: 0 auto;
padding: 2rem;
cursor: pointer;
color: black;
}
.active {
color: green;
}
HTML
<div class="toggler">
<i class="fa fa-toggle-off fa-2x inactive my-button"></i>
</div>
This jQuery plugin worked well for me: https://github.com/hurkanaras/Hurkan-Switch-Plugin
An example:
$('[data-toggle="hurkanSwitch"]').hurkanSwitch({
'width':'90px',
'offConfirm': function(r) { return confirm('Are you sure you want to disable this?'); },
'on': function(e) { toggle(e, 'enable'); },
'off': function(e) { toggle(e, 'disable'); },
'onColor': 'green',
'offColor': 'red',
'className': 'switch-toggle' //I changed the font size with this
});
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
</head>
<body>
<i id='checkboxAbcToggle' class='far fa-square cursorIcon'></i> Show Abc
</body>
=================
$('#checkboxAbcToggle').click(function () {
// Toaster.top('toggleClass');
UiUx.setCheckbox('#checkboxAbcToggle');
});
let Key = {
uncheckedSquare: 'fa-square',
checkedSquare: 'fa-check-square',
}
let UiUx = {};
UiUx.setCheckbox = function (checkboxIcon_jqId) {
let checkboxIconElement = $(checkboxIcon_jqId);
let isChecked = checkboxIconElement.hasClass(Key.checkedSquare);
if (isChecked === true) {
checkboxIconElement.removeClass(Key.checkedSquare);
checkboxIconElement.addClass(Key.uncheckedSquare);
}
else {
checkboxIconElement.removeClass(Key.uncheckedSquare);
checkboxIconElement.addClass(Key.checkedSquare);
}
}
css
.rotate{
transform:rotate(180deg);
color:black
}
jquery
$('.fa-toggle-on').on('click',function() {
$(this).toggleClass('rotate')
});