I'm trying to get a image to change opacity based on a boolean flag. It should drop opacity when the var pauseDisabled = true and go back to a value of 1 when pauseDisabled = false.
I created the fiddle below to simulate what I'm attempting. In this example I simply am trying to use a link to control the on/off switch. It won't drop opacity however and I'm not sure what I'm doing wrong.
JS Fiddle: https://jsfiddle.net/w51Lxvjp/8/
<div class="pause">
<a class="pause-btn">
<img class="pause-img" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_4-512.png">
</a>
</div>
<a class="disabler" href="#">Disable Button</a>
$(document).ready(function() {
var pauseDisabled = false;
$('.disabler').click(function() {
pauseDisabled = true;
})
if (pauseDisabled === true) {
$('.pause').css('opacity', '0.2');
} else if (pauseDisabled === false) {
$('.pause').css('opacity', '1');
}
});
Your logic is flawed as the if condition will only run once on load of the page. Instead you need to set the opacity each time the pauseDisabled flag is toggled within the click event handler. Try this:
jQuery($ => {
let pauseDisabled = false;
$('.disabler').click(() => {
pauseDisabled = !pauseDisabled;
$('.pause').css('opacity', pauseDisabled ? '0.2' : '1');
})
});
img { width: 250px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="pause">
<a class="pause-btn">
<img class="pause-img" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_4-512.png">
</a>
</div>
<a class="disabler" href="#">Disable Button</a>
Your jsFiddle has been updated:
https://jsfiddle.net/w51Lxvjp/15/
Essentially, your IF structure was executed only once, before any click on the link.
$('.disabler').click(function() {
pauseDisabled = !pauseDisabled;
if (pauseDisabled === true) {
$('.pause-img').css('opacity', '0.2');
} else {
$('.pause-img').css('opacity', '1');
}
})
No need to create this if else outside of this click event . You can change the opacity directly inside the click event .
$(document).ready(function() {
var pauseDisabled = false;
$('.disabler').click(function() {
if (pauseDisabled === false) {
$('.pause').css('opacity', '0.2');
pauseDisabled = true;
} else if (pauseDisabled === true) {
$('.pause').css('opacity', '1');
pauseDisabled = false;
}
})
});
Related
I have a div that contains the attribute aria-hidden. I would like to set up a listener or execute an action each time the attribute value dynamically changes.
My div is
<div class="slide2" aria-hidden="*"></div>
The value for "aria-hidden" could either be true or false.
My code is:
$(document).ready(function () {
$(".slide2").bind('change', function(event) {
if ( $('.slide2').attr('aria-hidden') == 'false' ) {
alert('do something');
}
});
});
I have read examples using MutationObserver but that examples I've seen display an action being executed when ANY element attribute changes. I would like to see an example showing that when a specific div (<div class="slide2"></div>) changes an action is executed.
Explanation
Inside of the observer you have to check the attribute you want to change. I did it with pure javascript (mutation.target.getAttribute('aria-hidden')).
With the attributeFilter you can choose specific attributes to observe. In your case aria-hidden.
The Important Part
var slideObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type == "attributes") {
// here you can play with it now :)
if (mutation.target.getAttribute('aria-hidden') == "true") {
console.log('ok. aria-hidden is true')
} else {
console.log(':s aria-hidden is false')
}
}
});
});
Example
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
var slide = document.querySelector('.slide2')
document.querySelector('#btn').addEventListener('click', toggleAriaHiddenRole)
var slideObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type == "attributes") {
// here you can play with it now :)
if (mutation.target.getAttribute('aria-hidden') == "true") {
console.log('ok. aria-hidden is true')
} else {
console.log(':s aria-hidden is false')
}
}
});
});
slideObserver.observe(slide, {
attributes: true, //configure it to listen to attribute changes
attributeFilter: ['aria-hidden'] // filter your attributes
});
function changeAriaHiddenRole(element, boolean) {
element.setAttribute('aria-hidden', boolean)
}
function toggleAriaHiddenRole(boolean) {
if (slide.getAttribute('aria-hidden') === "true") {
changeAriaHiddenRole(slide, false)
} else {
changeAriaHiddenRole(slide, true)
}
}
<div class="slide2" aria-hidden="false"></div>
<button id="btn">toggle aria-hidden</button>
It works for me after I put the js code at the bottom of the file. The possible error occurs should be:
parameter 1 is not of type 'Node'
That is because the listener was executed before the DOM was read, so obviously, it has to be loaded before you call observe(node, config);
here is one suggestion:
<body>
<div class="slide2" aria-hidden="*"></div>
<script>
$(document).ready(function () {
$(".slide2").bind('change', function(event) {
if ( $('.slide2').attr('aria-hidden') == 'false' ) {
alert('do something');
}
});
});
</script>
</body>
I have a navigation with mouseover and mouseout animations. They work. I also have a statement for the click listener that adds a CSS class. The class sets the height of a div, the issue is that the mouseout also alters this div. So I'm trying to figure out a way to disable the mouseout listener when the link is clicked.
I tried to unbind it with no luck
js
var currentDiv;
function slideMenu(e) {
if(e.type === "mouseover"){
// console.log("mouseover");
TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
// console.log("mouseout");
TweenMax.to($(this).find('div') , 0.25, {height:1});
}
else if(e.type === "click"){
console.log("click");
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
$(currentDiv).unbind('mouseout'); // not working
}
}
$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);
css
.selected{
height: 20px;
}
Would this accomplish your goal? Instead of worrying about the binding of click events, you could just check the "selected" class before you do anything else within that click event. Like the following...
var currentDiv;
function slideMenu(e) {
if(e.type === "mouseover"){
// console.log("mouseover");
var child_div = $(this).find("div")
if (!$(child_div).hasClass("selected")) {
TweenMax.to($(this).find('div') , 0.25, {height:20});
} else {
$(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
}
}
else if(e.type === "mouseout"){
// console.log("mouseout");
var child_div = $(this).find("div")
if (!$(child_div).hasClass("selected")) { // check to see if selected/clicked on
TweenMax.to($(this).find('div') , 0.25, {height:1})
} else {
$(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
}
}
else if(e.type === "click"){
console.log("click", this);
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
}
}
$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);
If I'm understanding you correctly, you want the height of the element to remain the same size when you click on it and move the mouse off the element. You can try using
var currentDiv;
// add a state
var hasBeenClicked = false;
function slideMenu(e) {
if(e.type === "mouseover"){
TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
// only resize if the element hasn't been clicked
if (!hasBeenClicked) {
TweenMax.to($(this).find('div') , 0.25, {height:1});
}
}
else if(e.type === "click"){
// assuming all this stuff is what you want and wasn't testing code
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
// set state to true
hasBeenClicked = true;
}
}
Note that this will only work for one element, if you plan to use this function for multiple elements you'll need to have a var hasBeenClicked set up for every element.
guys
I have a following HTML code with wrap (notice-wrap):
<div class="notice-title">
Title
</div>
<div class="notice-content">
Content text
</div>
<div class="notice-toggle" value="Hide" onclick="toggle()">
<img src="../img/icon_rollout.png">
</div>
And Toggle Script
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
When i'm clicking on the toggle, open once all the items. How to make the opening only that element which i choose?
P.S. I also use Angular
Thanks in advance!
Maybe you can just change this:
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
to:
function toggle() {
var noticeToggleElement = $(this);
var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
noticeToggleElement.val(newStatus);
if (newStatus == "Show") {
noticeToggleElement.css('overflow','hidden');
noticeToggleElement.css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
noticeToggleElement.css('overflow','visible');
noticeToggleElement.css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
As you should have the context of the element you toggle on with the mouse click.
As you're using jQuery, should be better if you remove the onclick from the HTML tag and make the bind in your javascript code, on a function that is executed on document ready:
$(function(){
$('div.notice-content').click(toggle);
})
But this is just a plus.
What you should do first is move that styling from js to css,
and have additional variations of your classes, for example:
.notice-title--toggled {
...
}
.notice-content--toggled {
...
}
.notice-toggle--toggled {
...
}
Now you have good separation of concerns, and your toggle function could just toggle classes for those elements.
Also you should put this toggle click handler on document ready, so final result would be:
$(function) {
$('.notice-toggle').click(function() {
$('.notice-title').toggleClass('notice-title--toggled');
$('.notice-content').toggleClass('notice-content--toggled');
$('.notice-toggle').toggleClass('notice-toggle--toggled');
});
}
I am using this HTML on my site:
<a id="slick-toggle" href="javascript:change_status()"><img src="img/enable.png"></a>
When I click this link, I would like to change the image src to img/disable.png. And revert back to img1.jpg when clicked again & so on. Can someone explain how I do this using jQuery?
Also on each click i want to change my table's column emp_ref_table.enabled_flag value 0 for disable.png and 1 for enable.png
Here is my existing jQuery if this helps:
function change_status() {
alert('sure to change the status ?');
$(document).ready(function() {
$('#slick-toggle').click(function() {
e.preventDefault();
$('img', this).attr('src', function(i, oldSrc) {
return oldSrc == 'img/enable.png' ? 'img/disable.png' : 'img/enable.png';
});
return false;
});
});
}
Try this code : place all your pic changing code in a function:
var changeStatus = false;
function change_status() {
var r = window.confirm("Sure to change the status!");
if (r == true) {
if (changeStatus == false) {
changeStatus = true;
document.getElementById("en-ds").src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg";
} else {
changeStatus = false;
document.getElementById("en-ds").src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg";
}
}
}
<a id="slick-toggle" href="javascript:change_status()"><img id="en-ds" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
</a>
Try the simplified one below, set your enable and disable image paths.
$(function() {
$('#slick-toggle').click(function() {
$('img', this).attr('src', function(el, src) {
var imgEnable = 'http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg';
var imgDisable = 'https://www.google.com/logos/2012/d4g_poland12-hp.jpg';
return (src == imgEnable) ? imgDisable : imgEnable;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="slick-toggle" href="javascript:;">
<img src="http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg">
I'm having trouble getting the "else" bit of this working. Anyone know what the problem is?
var navOpen = false;
if (navOpen == false) {
$("nav").click(function() {
$(this).css("bottom","0");
navOpen = true;
});
} else {
$("nav").click(function() {
$(this).css("bottom","-84");
navOpen = false;
});
}
The condition is in the wrong place.
var navOpen = false;
$("nav").click(function() {
if (navOpen == false) {
$(this).css("bottom","0");
navOpen = true;
} else {
$(this).css("bottom","-84px");
navOpen = false;
}
});
You are binding several handlers to the same element, you can use css method:
$("nav").click(function() {
$(this).css("bottom", function(i, bottom) {
return bottom === '0px' ? '-84px' : '0px';
// return navOpen ? '-84px' : '0px';
});
})
Try with
$(this).css("bottom","-84px");
You need to define metering (e.g px, %). CSS doesn't support just numering parameters like HTML attribute does.