I'm trying to write a code that toggles the opacity of a div but I'm running into trouble with it. If I click this button, I want it to set the opacity of #infodiv to 1.0, where it's set at 0.0 right now, like so.
#infodiv{
width: 250px;
height: 0px;
margin-top: 10%;
opacity: 0.0;
}
This is the function that I'm trying to call.
function toggles(){
infodiv.css('opacity', '1.0');
}
It's probably the function that it's need of some tweaking, maybe? Thanks to anyone willing to take a look to help out. Here's a fiddle
You must set style of element with jQuery:
function toggles() {
$('#infodiv').css('opacity', '1.0');
}
If you use pure javascript, your function will be look like that
function toggles(){
document.getElementById('infodiv').style.opacity = '1.0';
}
Use Element.classList
var infodiv = document.querySelector("#infodiv");
function clickToggle(){
this.classList.toggle("active")
}
infodiv.addEventListener("click",clickToggle, false);
#infodiv{
width: 250px;
height: 250px;
background: red;
opacity: 1;
}
#infodiv.active{opacity: 0}
<div id=infodiv></div>
The simplest way to toggle whether something is displayed in jQuery is with .toggle()
$('#infodiv').click(function(){
$(this).toggle();
})
if you need to change opacity then try toggleClass() and create a new CSS class that has opacity 1
// CSS
.opaque{
opacity: 1;
}
// jQuery
$('#infodiv').click(function(){
$(this).toggleClass('opaque');
})
$(function() {
$('#btn').click(function() {
$('#infodiv').toggleClass('active');
});
});
#infodiv {
width: 250px;
margin-top: 10%;
opacity: 0.0;
}
#infodiv.active {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="infodiv">
<div class="infotext">This is a test.</div>
</div>
<button type="button" id="btn">btn</button>
You need to use with ID selector which returns a jQuery object as the method .css() is a jQuery function
function toggles() {
$('#infodiv').css('opacity', '1.0');
}
DEMO
However I would recommend you to create a CSS class like
.higheropacity {
opacity: 1.0 !important
}
Then use .toggleClass() method
function toggles() {
$('#infodiv').toggleClass('higheropacity');
}
DEMO
Well, besides the jQuery one, you can always do something like
function toggles() {
document.getElementById('infodiv').style.opacity = 1;
}
if you feel like using pure javascript.
Does it have to be a function?
Why not use:
$('#infodiv').toggle();
From the api - "The .toggle() method animates the width, height, and opacity of the matched elements simultaneously."
Related
I want to create two animations in css. In my project, I use two button, one object. I care, that the first button is being clicked, the first animation on the object is being run.
I know, what I should do, when I have one button and one animation, but I do not know how to solve problem with two different animations on the same object.
Edit 3. I find problem!
Does this meet your requirements?
let btn_a = document.getElementById('a')
let btn_b = document.getElementById('b')
let btn_c = document.getElementById('c')
let div = document.getElementById('obj')
btn_a.addEventListener('click', function() {
div.className = 'anim-a'
})
btn_b.addEventListener('click', function() {
div.className = 'anim-b'
})
btn_c.addEventListener('click', function() {
$('#obj').animate({}, function(){
$('#obj').css({transform: 'rotate(30deg) translate(200px)'})
})
})
div {
background-color: pink;
width: 100px;
transition: all linear 0.5s;
}
.anim-a {
background-color: yellowgreen;
width: 150px;
}
.anim-b {
background-color: grey;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='obj'>animated</div>
<button id='a'>anim-a</button>
<button id='b'>anim-b</button>
<button id='c'>anim-c</button>
EDIT
Without css fields, assuming that you're using jQuery, you can use .animate(). However, .animate() won't take transform as its property. We'll do this in the callback.
btn_c.addEventListener('click',function() {
$('#obj').animate({}, function(){
$('#obj').css({transform: 'rotate(30deg)'})
})
})
I would like to expand a div, filters, when filtertoggle is clicked. I would like to do this by adding the class on to filters. Then, when the user clicks anywhere else on the page, I would like to remove the on class, thereby closing filters.
Here is the code I have attempted:
jQuery(document).ready(function($) {
$('body').click(function(evt) {
if (evt.target.attr('class').includes('filtertoggle')) {
$(this).toggleClass('on');
$('.filters').slideToggle(200);
return;
} else {
$(this).element.className = element.className.replace(/\bon\b/g, "");
return;
});
As it stands, filters does not open.
Your logic has a couple of issues. Firstly, evt.target is an Element object, not a jQuery object, so it has not attr() method. You need to wrap it in a jQuery object to make that work. Then you can use hasClass() to check what class is on the target.
Also a jQuery object has no element property, so element.className will cause a syntax error. You can just use removeClass() in that case. Try this:
$('body').click(function(evt) {
if ($(evt.target).hasClass('filtertoggle')) {
$('.filtertoggle').addClass('on');
$('.filters').slideToggle(200);
} else {
$('.filtertoggle').removeClass('on');
$('.filters').slideUp(200);
}
});
body, html { height: 100%; }
.on { color: #C00; }
.filters { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
You should also note that it may be possible to achieve this in CSS alone, depending on how your HTML is structured. You can use the :focus selector to do it, like this:
body, html { height: 100%; }
.filtertoggle { outline: 0; }
.filters {
opacity: 0;
transition: opacity 0.3s;
}
.filtertoggle:focus { color: #C00; }
.filtertoggle:focus + .filters { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtertoggle" tabindex="1">
FilterToggle
</div>
<div class="filters">
Filters...
</div>
Ok so I have a div that contains a canvas and a span which contains an image. I want it such that if the user hovers over or focuses on the div that the image inside of the span will appear. The image wil be invisible otherwise.
Long story short I want to have a canvas with a red 'X' on the corner that is only visible when the canvas is active
$('image-canvas').hover(function() {
$('delete-image').addClass('active');
}, function() {
$('delete-image').removeClass('active');
})
.delete-image {
position: absolute;
top: 0px;
right: 0px;
}
.delete-image>img {
width: 32px;
visibility: hidden;
}
.delete-image.active>img {
width: 32px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-container" tabindex="1">
<canvas id="imageCanvas"></canvas>
<span class="delete-image">
<img src="file:///E:/Apps/Emoji-App/emojis/icons/if_erase_delete_remove_wipe_out_181387.png"/>
</span>
</div>
The hover event fires just fine but the image refuses to toggle visibility. Any help?
When you use a class within your selector, write it like this:
$('.myDiv')
When you use an ID within your selector, write it like this:
$('#myDiv')
For further informations, check out jQuery's learning center website.
Seems like you have misspelled or have not specified the jQuery selector type (class . or id #). Please try this:
$('#imageCanvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
See here .
$("#control").mouseover(function(){
$('#img').show();
});
$("#control").mouseout(function(){
$('#img').hide();
});
#img{
display:none;
}
#control{
margin-bottom:10px;
padding:5px;
background-color:#eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='control'>Show/Hide</div>
<img src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg' id='img'>
The question is not well-phrased, so I ain't sure I totally understood what you wanted.
When you try to select by class, don't forget the dot '.'
$('image-canvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
When using functions 'addClass', 'removeClass', 'toggleClass', etc. - you don't use the '.' sign because it is a function that refers only to classes. On the other hand, when using jQuery selector $(' ') or vanilla querySelector(' '), you should declare what kind of attribute you are selecting by, those will be '#' for ID, '.' for Class, and if you want to select by anything else you can use $('*[anyattribute=anyvalue]'), in your clase it could be $('span[class=delete-image]').
Good luck
I'm trying to swap background using jQuery. But the problem is that it doesn't successfully switch to new background, instead, the old one is removed and I get a white background instead.
I've been googling and trying out putting the path as a var instead for example, and some other unsuccessful suggestions.
My jQuery function looks like the following:
$("#btn").hover(function () {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
});
And my CSS for the default background looks like this:
#page1 {
height: 100vh;
max-height: 100vh;
background-image: url("../images/bg1_rw.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
I'm using Java Play Framework and the pictures are in the same folder, and it is the correct path to it since the default background works.
EDIT: I Tried as well to use an img source from the web, just to be 100% sure it wasn't some issues with the path, but it still only makes it white.
I believe jQuery's hover() function isn't able to remove that particular style when the mouse leaves.
You could just do it yourself
$("#btn").on({
mouseenter : function() {
$('#page1').css('background-image','url(../images/bg1_normal.jpg)');
},
mouseleave : function() {
$('#page1').removeAttr('style');
// or simply set the backround again to the other image
}
});
Try .addClass and .removeClass functions - it's simple and all style work is done in stylesheet file:
$("#btn").on({
mouseenter : function() {
$('#page1').addClass('inverted');
},
mouseleave : function() {
$('#page1').removeClass('inverted');
}
});
and then simply add
#page1.inverted {
//style as you need
}
to your stylesheet.
If you're using images you could do an image swap like this
https://jsfiddle.net/RachGal/oee3guxz/
$("#flowers").mouseover(function () {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
_this.toggleClass("opaque");
});
.opaque {
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg' width="500" height="400" />
or if you could just use color like this
$("#color").mouseleave(function () {
$("body").css("background-color","black");
});
$("#color").mouseover(function (){
$("body").css("background-color","red");
});
$("#color").click(function(){
$("body").css("background-color","green");
});
body, #color {
height: 800px;
width: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="color"> </div>
https://jsfiddle.net/RachGal/8p783jfo/
Hope this helps
Rach
The code is pretty simple.
HTML:
<div class="simpleDiv" id="Child1" onmouseover="expandDiv(this);"></div>
CSS:
.simpleDiv {
background-color: red;
width: 100px;
height: 50px;
margin: 5px;
margin-left: 50px;
opacity: 1;
}
JavaScript:
function expandDiv(object){
alert(document.getElementById(object.id).style.height);
}
Why am I not able to alert the height of the div like this? If I alert the id or class using the function hasAttribute, thats working fine but not able to alert the css properties of the elements.
Any help appreciated!
Why not just alert(object.style.height)?
Anyway, the reason it doesn't work is because elem.style.property only works with inline style="..." attributes. To take into account all styles, you need this:
alert(window.getComputedStyle(object).height)
Older versions of IE don't support this, but it's a very easy shim:
window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};
function expandDiv(object){
alert(document.getElementById(object.id).innerHeight);
}
try using:
alert(document.getElementById(object.id).offsetHeight);
Here is description:
offsetHeight on MDN
Use JQuery:
alert($('#Child1').css("height");
Or to change the attribute, use:
$('#Child1').css("height", value )
Ignore if you don't want JQuery.