I'm building a responsive page that, when viewed on mobile, includes some popular behaviors.
I have an element that includes text and a link. The text portion needs to cover 100% of the width of the viewport and when clicked/tapped the link should push the text content left and reveal the link.
Fiddle: http://jsfiddle.net/Flignats/0n0fwm20/
HTML:
<div id="container">
<div id="block-one">
I'm a bunch of informational text.
</div>
<div id="block-two">
I'm a link!
</div>
</div>
CSS:
#container {
width: 100%;
height: 100px;
}
#block-one {
float: left;
width: 75%;
height: 100px;
background-color: #626366;
}
#block-two {
float: left;
width: 25%;
height: 100px;
background-color: #969696;
}
#block-two a {
color: blue;
}
How can I have block-one span the full width of the screen, block-two hidden off the screen, and, on click, animate (the margin?) block-two into view with block-one pushed to the left?
My apologies if I missed a clear example on site, most other questions were more complex.
I'd prefer not to build a jquery mobile page, though the push and reveal panels would accomplish this action. I'm also using Angular if nganimate is preferred over javascript.
Here is pure css solution: http://jsfiddle.net/3wcfggmf/
I've used trick with label and checkbox:checked to recognize if element is clicked or not.
input:checked + #block-one {
width: 75%;
}
If I didn't understand you correctly please let me know and I'll modify this PURE css solution for you :)
I forked your fiddle here with a working example: http://jsfiddle.net/90gm224q/
Added CSS to yours:
#container * { transition: width .4s; }
#container.clicked #block-one { width:25%; }
#container.clicked #block-two { width:75%; }
The JS:
var container = document.getElementById('container'),
link = document.getElementById('block-two').getElementsByTagName('a')[0];
link.onclick = function() {
container.className = 'clicked';
return false;
}
Assuming I understood your question correctly, you can play with the CSS values for width to achieve your desired effect.
You could accomplish this via CSS transistions and a JavaScript class toggle.
Demo - http://jsfiddle.net/Leh5t9t6/
In my demo, clicking #block-one toggles a class which fires the CSS transision. I included a pure JavaScript and jQuery version in the demo (you mentioned you'd prefer not use jQuery).
I also edited the styles slightly to accommodate the off-screen link.
Pure Javascript
var element = document.getElementById('block-one');
element.addEventListener('click', function () {
this.classList.toggle('reveal');
}, false);
jQuery
$('#block-one').on('click', function(){
$(this).toggleClass('reveal');
});
Related
Easy question for a lot of you but I'm still learning. I'm trying to get better at toggling between active and inactive states of simple objects.
I have a square div:
<div id = "square"></div>
With the following css to, onclick, make the div extend
#square
{
height: 50px;
width: 60px;
border: 1px solid red;
transition: height 2s ease;
}
#square:active
{
height: 100px;
}
And the following javascript to set up the click event:
var square = document.getElementById("square").addEventListener("click", function()
{
this.classList.toggle("active");
}, false);
But nothing seems to happen when I click. I'm including JS in this because I'm also new to learning JS as well, and I'm trying to get used to simple logic principles.
Here is the fiddle: https://jsfiddle.net/theodore_steiner/fsk6y50k/4/
Any help would be wonderful
The way that you used the class selector is wrong,
#square.active{
height: 100px;
}
It should precede with a dot not a colon
DEMO
I have a series of articles
<section>
<article>1</article>
<article>2</article>
<article>3</article>
....
<article>999</article>
<section>
arranged in a grid of three per row
section {
position: relative
}
article {
display: inline-block;
width: 33%;
}
and I want that they expand horizontally to fully occupy its row when clicked.
so I create an expanded class
.expanded {
position:absolute;
left:0px;
width: 100%;
}
and apply it on click
$("article").click(function(){
$(this).toggleClass("expanded");
});
I am almost there, as you can see in the fiddle here http://jsfiddle.net/aqw339r0/1/
When I click on any of the articles they expand to the full width of the row; but the problem is that when I click the first article of a row (except the first row) it "jumps" to the row immediately above.
I have tried changing the position and display attributes of both article and .expanded but I cannot get the behavior I need. For example: When I change the position:absolute of .expanded, the blocks 5 and 6, "jump" to the row below. Similar when I remove display:inline-block and change to float:left.
Do you have any ideas of why this happens and how to correct it?
Using the solution from #Rick (minus the css top edit) and then toggling an additional element to keep other elements in place, this should do what is needed: Fiddle
$("article").click(function() {
$(this).toggleClass("expanded");
if ($(this).hasClass("expanded"))
{
$(this).before("<article class='blank'> </article>");
}
else
{
$(this).prevAll('.blank').first().remove();
}
});
To explain further, when the element is clicked:
if ADDING the class 'expanded', then this will also add a blank article element (before) as a placeholder to keep the flow consistent. This is important because when the element with class 'expanded' becomes position: absolute it is removed from the normal flow of the content.
if REMOVING the class 'expanded', then this will also remove the blank article placeholder element. The prevAll function looks through all previous elements with the class 'blank' and then takes the first() one and removes it. Because it was inserted 'before', this is guaranteed to remove the correct blank article placeholder.
When position:absolute is set on an <article> element, that takes it out of the normal content flow, and causes the offset. We can correct it by adding an empty <article> as a placeholder when the click triggers, and removing it when click again.
var open = false;
jQuery("article").click(function () {
open = !open;
if (open) {
$(this).addClass("expanded");
$(this).before("<article class='holder'> </article>");
} else {
$("article").removeClass("expanded");
$(".holder").remove();
}
});
p.s. I'm not that good at jQuery, any suggestions are welcome.
jsfiddle
I can't think of a pure CSS solution, but since you're using jQuery anyway, simply hard-code the expanded element's top:
$("article").click(function() {
$(this).css('top', $(this).position().top);
$(this).toggleClass("expanded");
});
Fiddle
The top style will be ignored once the expanded class is removed.
Try this
<section>
<article>1</article>
<article>2</article>
<article>3</article>
</section>
<section>
<article>4</article>
<article>5</article>
<article>6</article>
<section>
<section>
<article>7</article>
<article>8</article>
<article>9</article>
</section>
section {
position:relative;
}
article {
width: 30%;
min-width: 200px;
min-height: 200px;
display: inline-block;
border: 1px solid black;
}
.expanded {
width: 100%;
background-color:#eef;
left:0px;
top:0;
position:absolute;
transition: 0.2s linear;
}
// if you want others to close while expanding
$("article").click(function(){
$('article').removeClass("expanded");
$(this).toggleClass("expanded");
});
// esle if you want everything to be expanded
$("article").click(function(){
$(this).toggleClass("expanded");
});
I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});
I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle
.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/
I have a container that is working similar to notifications in mac os - elements are added to the queue and removed after a certain timeout. This works great but has one jarring visual side effect.
When they are removed from the DOM there is a jagged update to the UI as the next element in the stack fills the void created by the previous element. I would like the elements below in the stack to move up into that space smoothly, ideally with css3 but adding a transition: all 0.5s ease-in-out to the .notice class had no effect on the object when its sibling was remove.
Minimal JS interpertation :
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
Better yet fiddle here :
http://jsfiddle.net/kMxqj/
I'm using a MVC framework to data-bind these objects so some native css / jQuery is preferred over a Jq plugin.
This should remove the clicked element with a fade out effect and then move everything below up smoothly. This will work for any notice div in the stack regardless of it position within the stack.
Try:
$('body').on('click','p.notice', function(e) {
$(this).fadeOut(500,function(){
$(this).css({"visibility":"hidden",display:'block'}).slideUp();
});
});
Fiddle here
Update August 7th, 2018:
As asked by one of the users about using pure JS to do the slideUp functionality, I've put together a quick demo using requestAnimationFrame to animate the height of an element. Fiddle can be found here.
jQuery's Animate() method is a great tool to learn because not only can you fade your objects in and out, but you can move them around, all at the same time.
The CSS:
.notice {
position:relative;
top:20px;
width: 100%;
height: 50px;
background-color: #ccc;
opacity:0;
}
The jQuery:
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
$('.notice').animate({opacity: 1, top:0}, 1000);
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
And my jsFiddle demo
A simple way of doing this would be to animate the height and margin properties - http://jsfiddle.net/kMxqj/14/
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
});
$('body').on('click','p.notice', function(e) {
$(this).animate({'height':0,'margin':'0'});
$(this).fadeOut();
});
This will animate the height and margins to 0, while also fading out the object which results in a smooth transition. Also adding overflow hidden to your notice box so any content inside is covered as the animation happens.
How about this fiddle
CSS
.notice {
width: 0;
height: 0;
background-color: #ccc;
}
JS
$('#add').click(function(e) {
e.preventDefault();
$('#container').append('<p class="notice">Notice #</p>');
$('#container p.notice:last-child').animate({
width: 100%,
height: 50px
});
});
$('body').on('click','p.notice', function(e) {
$(this).fadeOut();
});
Tweak the values as needbe, but something like this should accomplish what you'd like - it sounds like animate() might be what you want though
No JQuery:
Preferable way is with max-width:
HTML
<div id="wrapper">
<div class="myspan">
child
</div>
<div id="removable" class="myspan">
removable child
</div>
<div class="myspan">
child
</div>
<div class="">
child
</div>
</div>
CSS
.myspan {
display: inline-block;
font-size: 30px;
display: inline-block;
max-width: 200px;
transition: all 1s;
overflow: hidden;
}
.myspan:hover {
max-width: 0;
}
I am trying to work out how to show more divs when hovering over one div.
I know how to show changes of the same div when hovering over it but how can I show more divs when hovering over one div?
Take this as an example:
http://jsfiddle.net/j4LFD/
How can I make it so when you hover over the box another box appears next to it?
Im not sure if this can be done with css or needs javascript?
Thanks!
James
You can do it with css like this:
.box , .appear{
background: #151515;
height: 100px;
width: 100px;
float:left;
}
.appear{
background:red;
display:none
}
.box:hover{
background: #e6e6e6;
height: 100px;
width: 100px;
}
.box:hover + .appear {
display:block;
}
Check this example http://jsfiddle.net/j4LFD/1/
To my knowledge it's not possible without Javascript, and I'd recommend using jQuery because it will make your life a lot easier. If you just want to show a div then you can do something similar to
<div id="div1">First Div</div>
<div id="div2" style="display:none">Second Div</div>
Then in the javascript
$('#div1').mouseover(function(){
$('#div2').show();
})
$('#div1').mouseout(function(){
$('#div2').hide();
})
If you actually want to add it dive on hover then you can use the jquery .append() function (http://api.jquery.com/append/)
Edit: Ok seeing sandeep's answer it clearly is possible in CSS, but still, this is how you'd do it in JS :-)
CSS solution: Use a parent/container div.
http://jsfiddle.net/samliew/j4LFD/4/
You can also do this with vanilla Javascript (no JQuery) and without having your elements be adjacent siblings. Example fiddle: http://jsfiddle.net/3nxfG/
html/js:
<div id="box1" class="box"></div>
<div id="box2" class="box hidden"></div>
<script type="text/javascript">
var box1 = document.getElementById('box1');
box1.onmouseover = function() {
var box2 = document.getElementById('box2');
box2.style.visibility = 'visible';
};
box1.onmouseout = function() {
var box2 = document.getElementById('box2');
box2.style.visibility = 'hidden';
};
</script>
css:
.box {
background: #151515;
height: 100px;
width: 100px;
float: left;
}
.hidden {
visibility: hidden;
}
You can fake it, use the box to hide the second box and the border to be the box,http://jsfiddle.net/j4LFD/3/