I am trying to create simple widget with fixed position using Jquery. I recently started learning JQuery so I would like to ask what is the better way to to this than:
var i = 0 ;
$('#button').on('click', function() {
if( i === 0) {
$('#widget').animate({'bottom':0},700);
i = 1;
} else {
$('#widget').animate({'bottom': -211},700);
i = 0;
}
});
Full code:
http://jsfiddle.net/zX8He/
There are better ways I think
You could just toggle a class on click and let CSS do the rest.
UPDATED EXAMPLE HERE
$('#button').on('click', function() {
$(this).parent('#widget').toggleClass('open');
});
CSS
#widget {
width: 150px;
height: 250px;
background: gray;
border: 1px solid black;
position: absolute;
right: 0;
bottom: -211px;
transition:all 2s;
-webkit-transition:all 2s;
-moz-transition:all 2s;
}
#widget.open {
bottom:0px
}
It's pretty simple, just use a CSS transition and add styling to the .open class. It's worth noting that I added overflow:hidden to the body element in order to hide the element below the screen. You can also add cursor:pointer to the button element on :hover in order to indicate that it is clickable. (example)
#button:hover {
cursor:pointer;
}
Using jQuery will allow your code to be cross browser compatible, as CSS3 transitions are not supported in all browsers. http://jsfiddle.net/fyCcx/
the css:
.btn{
border:1px solid #888;
background: #f8f8f8;
width:150px;
height:40px;
margin:0px;
}
#widget{
width:150px;
position: absolute;
right:0px;
background: #333;
bottom:0px;
}
the html
<div id="widget">
<button class="btn">Click Me</button>
</div>
the script:
$(document).ready(function(){
var open = false;
$('.btn').click(function(){
if( !open ){
$('#widget').animate({
height: '400px'
}, 2000);
open = true;
} else{
$('#widget').animate({
height: $('.btn').height() + 'px'
}, 2000);
open = false;
}
})
});
Related
Is there a way to have a smooth transition between two states of an element if javascript is selector is used? For example, I have an element with the class of click__box and the id of clickBox. I can set the opacity from 0 to 1 when the button is clicked by using JS. The problem is that transition property has no effect at all. I know that it can be used something like the checkbox hack with pure css but i would like to know if there is a way of doing this with JavaScript.
//CSS
.click__box {
width:100%;
height:100%;
opacity:0;
transition:all .5s;
}
//JS
const collectionButton = document.querySelector("#collectionButton")
var clickBoxStyle = document.getElementById("clickBox").style
collectionButton.addEventListener('click', (e) => {
clickBoxStyle.opacity = "1"
})
It works well.
const collectionButton = document.querySelector("#collectionButton")
var clickBoxStyle = document.getElementById("clickBox").style
collectionButton.addEventListener('click', (e) => {
clickBoxStyle.opacity = "1"
})
.click__box {
width: 100%;
height: 100%;
opacity: 0;
transition: all .5s;
background-color: GREEN;
}
#collectionButton {
width: 150px;
height: 50px;
background-color: red;
cursor: pointer;
}
.container {
position: relative;
width: 150px;
height: 200px;
background-color: blue;
cursor: pointer;
}
<div id="collectionButton">
collectionButton click me
</div>
<div class="container">
Click Box Container
<div id="clickBox" class="click__box">
Click Box
</div>
</div>
Demo for you pal https://codepen.io/init1/pen/mddKgyw
I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/
So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery.
$(function() {
$(".block").on("click", function() {
$(this).addClass("fullscreen");
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.block {
width: 50%;
margin: 0 auto 50px auto;
height: 300px;
background-color: red;
transition: all 0.5s linear;
}
.block.fullscreen {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
All I have so far can be found on this pen: http://codepen.io/anon/pen/RKGeYj
make your #block fullscreen first and then apply the position:absolute; after a delay greater than the fullscreen animation speed.
Here's a working snippet.
var isFullscreen = false;
$("#block").click(function (){
var prop = {};
var speed = 910;
if(!isFullscreen){ // MAXIMIZATION
prop.width = "100%";
prop.height = "100vh";
isFullscreen = true;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","absolute");
}, 920);
}
else{
prop.width = "50%";
prop.height = "250px";
isFullscreen = false;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","relative");
}, 920);
}
});
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#block,#blockTwo{
width:50%;
height:250px;
margin:0 auto;
background-color: red;
}
#block{
z-index:100;
}
#blockTwo{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>
<div id="blockTwo"></div>
Checkout http://usefulangle.com/post/38/animating-lightbox-with-css-javascript .It contains the animation that you're looking for.
When you're making the position as fixed, you should give the initial top & left properties as well. You can get the initial top & left properties using the getBoundingClientRect method.
Along with animating top & left, you should animate width & height as well for a smoother look.
.in-animation {
animation: inlightbox 0.8s forwards;
position: fixed !important;
}
#keyframes inlightbox
{
50% {
width: 100%;
left: 0;
height: 200px;
}
100% {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}
I tried a different approach. I used added and removed classlists using a Javascript onclick function. To make so that the image only took the full pages size rather than spreading downward if there was text or contents at the top of page above the image, I put those images in a div and used classlists there too to remove or to add these areas if the picture expanded. For this to work, you will need to stretch your image. If this fits your website, try the following code:
<html>
<head>
<style>
.image {
margin: 0px;
transition: all 0.5s linear;
background-image: url('https://tse2.mm.bing.net/th?id=OIP.4_3Eev4xNVvGA5aRvaevLAHaJa&pid=Api&P=0&w=300&h=300');
background-repeat: no-repeat;
}
.image.small {
width: 200px;
height: 100px;
background-size: cover;
background-size: 100% 100%;
}
.image.fullScreen {
width: 100%;
height: 100%;
background-size: cover;
background-size: 100% 100%;
}
.topContent {
display: contents;
}
.bottomContent {
display: contents;
}
.topContent.remove {
display: none;
}
.bottomContent.remove {
display: none;
}
</style>
</head>
<body>
<div class="topContent">
<h1>Hello</h1>
</div>
<div class="image" onclick="imageChange()"></div>
<div class="bottomContent">
<h1>Hello</h1>
</div>
<script>
window.onload = function() {
document.querySelector('.image').classList.add('small')
}
function imageChange() {
if (document.querySelector('.image').classList.contains('small')) {
document.querySelector('.image').classList.remove('small')
document.querySelector('.image').classList.add('fullScreen')
document.querySelector('.topContent').classList.add('remove')
document.querySelector('.bottomContent').classList.add('remove')
} else {
document.querySelector('.topContent').classList.remove('remove')
document.querySelector('.bottomContent').classList.remove('remove')
document.querySelector('.image').classList.remove('fullScreen')
document.querySelector('.image').classList.add('small')
}
}
</script>
</body>
</html>
If you want the image to stretch all the way to the very edge, that should be very possible. Also, with classlists, you could even turn the background black creating a black border.
i cant seem to find the problem in my code.
I want to click the #menu and it will slide the #menudrop from the right.
#menudrop {
width: 200px;
height: 300px;
background: red;
position: absolute;
right: -9999px; /* get element out of viewport */
transition: 0.5s ease;
}
#menu{
width:100px;
height:100px;
position:absolute;
top:20px;
left:200px;
background-color:black;
}
<div id="menu"></div>
<div id="menudrop"></div>
$(document).ready(function(){
$('#menu').Click(function(){
$('#menudrop').css('right', '0px');
});
});
https://jsfiddle.net/theUnderdog/n60guhkq/
There are 2 issues in your code,
There is no function like Click (capital C used) available with jquery its click,
$(document).ready(function(){
$('#menu').click(function(){
$('#menudrop').css('right', '0px');
});
});
And its very important to include jquery library into our page before using it.
DEMO
I have one question about CSS hide transition using jquery hide function.
I have created this DEMO from codepen.io
In this demo you can see the show button. When you click the show button then .test and .user-image div opening with CSS transition effect .
I want to make it when clicked hide button then the .test div hide with CSS transition effect.
Anyone can tell me a little example how can i do that ?
CSS
<div class="container">
<div class="usr">Show</div>
<div class="test">
<div class="hide">Hide</div>
<div class="user-image" style="background-image:url(...);"></div>
</div>
</div>
JS
$(document).ready(function() {
$('.usr').click(function() {
$(".test").show();
});
$(".hide").click(function() {
$(".test").hide();
});
});
You don't need jQuery for this at all. Check this example:
http://codepen.io/anon/pen/JdKWWW
.hide-show-element {
background-color: #eee;
height: 400px;
position: relative;
text-align: center;
width: 400px;
}
.hide-show-element input[type='checkbox'] {
display: none;
}
.hide-show-element label {
background-color: #a00;
border: 1px solid #111;
color: #fff;
display: block;
text-align: center;
transition-duration: 0.4s;
}
.hide-show-element label:after {
display: block;
content: "Show";
}
.hide-show-element input:checked + label {
background-color: #fff;
border: 1px solid #a00;
color: #a00;
}
.hide-show-element input:checked + label:after {
content: "Hide";
}
.test1 {
opacity: 0;
position: relative;
height: 0;
top: 20%;
transition-duration: 0.4s;
width: 0;
}
.hide-show-element input:checked ~ .test1 {
opacity: 1;
height: 200px;
width: 200px;
}
<div class="hide-show-element">
<input type="checkbox" id="toggle" />
<label for="toggle"></label>
<img class="test1" src="http://lorempixel.com/200/200" />
</div>
$('#id-of-your-div').fadeOut(); //fade out
$('#id-of-your-div').fadeIn(); //fade in div
check documentation for more info.
If you insist on using jQuery, that's very easy to achieve as well. Define the styles to transition to when showing in a separate css class .show. Add transition-duration: 0.5s; to .test.
Then
$(document).ready(function() {
$('.showHideToggle').click(function() {
var toggle= $(this);
if ($(".test").hasClass("show")) {
toggle.text("Hide");
$(".test").removeClass("show");
}
else {
toggle.text("Show");
$(".test").addClass("show");
}
});
});
Assuming you are actually talking about literal css transitions, toggle a class on and off. If you want it to fade out then display none, you'll need to use a timeout of the length of your animation that sets to display none at the end. There's no way to keyframe with transitions.
$(document).ready(function() {
$('.usr').click(function() {
$(".test").css('display','block').removeClass('hidden');
});
$(".hide").click(function() {
$(".test").addClass('hidden');
setTimeout(function(){
$(".test").css('display','none')}, 500 //Animation Time
)
});
});
--
.test{
opacity:1;
transition:500ms cubic-bezier(0,0,0.58,1);
-webkit-transition:500ms cubic-bezier(0,0,0.58,1);
}
.hidden{
opacity:0;
}
I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.
Link: http://jsfiddle.net/Vv6Eb/4/
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div:before { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/
$("div").click(function(e){
var $me = $(this),
width = $me.outerWidth(),
height = $me.outerHeight(),
top = $me.position().top,
left = $me.position().left;
var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));
if (len < 10)
alert('ding');
});
A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.
var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);
CSS
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div span { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
I know you are trying to use :before, but for this situation, can't you just create a new div with a class to use as a hook and append it to the original div?
Something like this might work:
var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);
And the CSS:
.parentDivToOrangeCircle { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
.orangeCircle {
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
Do simply like using jquery
$(document).on("click", "span", function(e){
if (e.offsetX > $(this)[0].offsetWidth) {
alert('clicked on after');
}
else
{
alert('clicked on main span');
}
})
div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>
My purpose was solved by another workaround which is just adding a child DIV. Wrapping up all child elements inside the parent into this new child DIV:
My working sample as same as the problem statement: See Fiddle
HTML:
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**Note: Ignore the :before in the HTML, just showing to understand.
CSS:
div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}
div.childDiv{padding:20px; margin:0}
jQuery:
jQuery(document).ready(function($){
$('div.parentDiv').click(function(e){
if( $(e.target).closest('.childDiv').length==0 ){
//so clicked on psudo :before element!
//do your work here ;)
alert('Psudo :before element is clicked!');
}
});
});