We Keep Coding

Toggling the opacity of a div

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."

Targeting previous div in javascript or css

HTML code:
<div class="content">
<textarea> hello.png </textarea>
</div>
<div class="content-btn">
Click me
</div>
Javascript code:
$(".button").click(function() {
if ($(this).parent().previousSibling('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().previousSibling('.content').show();
}else {
$('.content').hide();
}
});
How would I go about only showing the textarea when 'Cick me' is clicked or hovered preferably in css but if not javascript. Thanks guys
https://jsfiddle.net/uway5hhg/8/

As exercise you could do this effect in pure css (using :target pseudoclass and a long delay in a simple transition) if you add a close button just below the textarea
http://codepen.io/anon/pen/JYoMRK
<div class="content" id="text">
<textarea> hello.png </textarea><br />
Close
</div>
<div class="content-btn">
Open
</div>
CSS
#text {
overflow: hidden;
height: 0;
opacity: 0;
transition: opacity 0s 999999s;
}
#text:target {
opacity: 1;
height: auto;
transition-delay: 0s;
}
#text:target ~ div a.button { display: none; }
Anyway if you look for a straight jQuery approach, a simple toggle() is enough (you might have to hide the .content element via css depending on the initial condition of your textarea)
https://jsfiddle.net/uway5hhg/39/
$(".button").click(function() {
var content = $(this).parent().prev('.content');
content.toggle();
});

As far as I know there is no way to catch previous sibling in CSS.
But it works with jQuery, here is your slightly changed code:
$(".button").on('click', function() {
var ele = $(this),
par = ele.parent(),
sbl = par.prev();
if (sbl.css('display') == 'none'){
$('.content').hide();
sbl.show();
}else {
$('.content').hide();
}
});
Working example is here: https://jsfiddle.net/y0ab3n0L/

That should do it's job
JS:
$(".button").click(function() {
var contentBtn = $(this).parent(".content-btn");
var content = $(contentBtn).prev(".content");
var textarea = $(content).find("textarea");
$(textarea).toggle();
});
or event shorter:
$(".button").click(function() {
$(this).parent(".content-btn").prev(".content").find("textarea").toggle();
});
https://jsfiddle.net/uway5hhg/21/
Hope this helps :)

Solution provided by Fabrizio is a good one if you want no javascript.
However you can also modify the DOM to have a similar effect.
<div class="content-wrapper">
<div class="content" id="text">
<textarea>hello.png</textarea>
</div>
Click me
</div>
CSS
.content {
display:none;
}
.content-wrapper:hover .content {
display:block;
}
.content-wrapper:hover .button {
display:none;
}
https://jsfiddle.net/2Lsszgqz/

There is no such CSS pseudo element - a.button:click, so only JS solution will work (without changing your HTML structure). You can also get to close of it using :focus CSS pseudo class. But you will lack to go up one level in CSS and then show the textarea. So, only solution left is using JS.
In your sample JS code you have used .previousSibling('.content') which is native JS, which you are calling on jQuery object, that's why it will not work. jQuery equivalent of this function is .prev('.content')
Correct Syntax would be -
$(".button").click(function() {
if ($(this).parent().prev('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().prev('.content').show();
}else {
$('.content').hide();
}
});
Working Fiddle

jQuery: animate element to give room for another one appearing

So I have a function which is called when input's value changes.
It checks if new value is not '' and then it's supposed to slide an input field a little to the left to make room for "clear" button to appear, but I just don't know how to do it.
Here's what I have.
<div class="searchbox">
<input type="text" ng-model="search" ng-change="filterHeaders()"
ng-focus="changeSearchValue()" ng-blur="changeSearchValue()" />
<button id="clearSearch">x</button>
</div>
Please ignore the ng-stuff, but I left it here, so there are no questions how the function is called. It's called from angular.
$('#clearSearch').hide();
searchButton = function() {
if($('.searchbox input').val() !== '') {
if($('#clearSearch:hidden')) {
$('.searchbox input').stop().animate(
{marginRight: 20},
{queue: false, duration: 500}
);
$('#clearSearch').stop().fadeIn(500);
}
}
};
But, of course, it doesn't work as I want it to. It first jumps to the left, giving room for the button to appear, as it would without any animation, and only after begins to slide 20px more to the left.
I understand, that marginRight is not the way to achieve this, but I have no other idea. What do you think?
tldr: I want to slide input to the left to make room for a button to fade in. Simultaneously.
Here is a fiddle of the problem.

All you need to do is make the clear button absolutly positioned so it doesn't disturb the other elements: (Working jsFiddle)
.searchbox {
float: right;
position:relative;
}
.searchbox button{
position: absolute;
top:0; right:0;
}
Also, I would add an "animating" class or something to tell if the input is currently animating.. What currently happens is that when typing fast the .stop() function is called every time which causes a short "break" on each keypress. Another jsFiddle to illustrate this.

If I understand correctly, what you want to do is run your second animation like so:
http://jsfiddle.net/rktpw89p/3/
$('#clearSearch').hide();
$('.searchbox input').keyup(function() {
if($('.searchbox input').val() !== '') {
if($('#clearSearch:hidden')) {
$('.searchbox input').stop().animate({
marginRight: 20
}, 500, function() {
alert('first animation complete!');
$('#clearSearch').stop().fadeIn(500);
});
}
}
});
it's waiting for the first one to complete.

use absolute positining like so :
.searchbox {
right:0;
position: absolute;
}
#clearSearch {
right:0;
top:0;
position: absolute;
}
That way, the search box does not jump to the left when the button gets rendered because absolute positioning does not affect the positioning of other DOM elements like described here
here is a working jsfiddle:
http://jsfiddle.net/rktpw89p/5/

You don't want to change the position of the input, just decrease its width, so animate the width property instead of any margins.
Here's a running example where the animation starts after two seconds.
$(function() {
$('#clearSearch').hide();
setTimeout(function() {
animate();
}, 2000);
});
function animate() {
var input = $('.searchbox input');
var newWidth = input.width() - 20;
input.stop().animate({
width: newWidth
}, {
queue: false,
duration: 500
});
$('#clearSearch').stop().fadeIn(500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="searchbox">
<input type="text" />
<button id="clearSearch">x</button>
</div>

Prevent children divs from moving while div toggle

I'm new and have I think very simple problem to solve.
I have 4 buttons to show/hide each panel. What should I do to prevent child divs from moving to te left while hiding some div?
I prefer them to stay at the initial position.
This is my code:
HTML:
<button class="panel-button" data-panel="panel1">1</button>
<button class="panel-button" data-panel="panel2">2</button>
<button class="panel-button" data-panel="panel3">3</button>
<button class="panel-button" data-panel="panel4">4</button>
<div class="wrapper">
<div id="panel1">1</div>
<div id="panel2">2</div>
<div id="panel3">3</div>
<div id="panel4">4</div>
</div>
JS:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggle();
});
});
CSS:
.wrapper {
overflow: hidden;
width: 420px;
}
.wrapper > div {
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 5px;
margin-top: 10px
}

Apply css rule opacity = 0; to the div, instead of hiding it.
Like this:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});
Solution for clickability issue:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
if(pnl.is(':visible'))
$('<div></div>').appendTo(pnl).width(pnl.width());
else
pnl.next().remove();
pnl.toggle();
});

But still you can use another approach
You can use the visibility property in CSS to achieve this as shown in the below Fiddle link : link
JS Snippet:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
console.log($('#'+panelId).css('visibility'));
if($('#'+panelId).css('visibility') === 'hidden') {
$('#'+panelId).css('visibility','visible');
}
else {
$('#'+panelId).css('visibility','hidden');
}
});
});

The CSS visibility is designed to keep the space a DOM object occupies, but not actually rendering it. Opacity changes its appearance, but not its behavior (eg. still clickable).
So instead of .toggle(), combine visibility with jQuery's .toggleClass():
jsFiddle solution
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggleClass('hideMe');
});
});

div content doesn't animate

Hello i am using jquery to animate a box on the left to slide right to show the facebook link , the box slides fine but the text inside seems not to be affected by the jquery function , my code is :
JQUERY
$(document).ready(function () {
$("#social").mouseenter(function () {
$("#social").animate({
width: 50
});
});
$("#social").mouseleave(function () {
$("#social").animate({
width: 20
});
});
});
HTML
<div id="social">test</div>
The problem is whith the a href , it doesnt animate with the div , i tried to give the a href an id , still didnt work

Try with e.preventdefault()
$("#social").mouseenter(function () {
e.preventdefault();
$("#social").animate({
width: 50
});
});

You need to make sure that your div has a specified width for it to animate, for example:
#social {
width: 20px;
}
Fiddle Demo

Not sure if this is what you want, but if you want the <a> to expand along with the <div>, just add a display: inline-block; and width: 100%; in your css:
#social a {
display: inline-block;
width: 100%;
}
Fiddle demo

Thank you guys i found the solution , i need to change the marginLeft so that it looks like the whole thing box with link was a bit hidden then shows
$(document).ready(function(){
$("#social").mouseenter(function(){
$("#social").animate({width:80});
$("#social").animate({marginLeft:'0px'});
});
$("#social").mouseleave(function(){
$("#social").animate({width:40});
$("#social").animate({marginLeft:'-10px'});
});
});