i'm not getting a response on a div click just need to know what i'm doing wrong
http://jsfiddle.net/7nF2t/76/
thanks
<div id="click"><br></div>
$('#click').click(function(){
alert('yes');
});
You need to make sure the document is ready before adding your event, e.g. :
$(document).ready(function() {
$('#click').click(function() { alert('yes'); }
});
Damnd, didn't see jsfiddle. xdazz is right.
First if this is jQuery you have to use .click as many guys said.
AND #alpha isn't a CLASS it's an ID
i have changed your CSS, script, and HTML here:
http://jsfiddle.net/7nF2t/89/
<div id="alpha" class="alpha">
<iframe id="iframe" src="http://time.is"></iframe>
</div>
<div id="click"><br></div>
<script>
$(document).ready(function() {
$('#click').click(function(){
alert('yes');
$('#alpha').removeClass('alpha').addClass('alphas');
});
});
</script>
#click {
z-index:2;
margin-top:-200px;
height:200px;
width:200px;
background-color:#888;
opacity:0.48;
filter:alpha(opacity=48);
}
.alpha {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transform:scale(0.25);
-moz-transform-origin:0 0;
-o-transform:scale(0.25);
-o-transform-origin:0 0;
-webkit-transform:scale(0.25);
-webkit-transform-origin:0 0
}
.alphas {
opacity:0.38;
filter:alpha(opacity=38);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
You are using .onclick in your jsfiddle, use .click instead.
The demo.
Related
An element has class slider-item:
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
When i click on a button ,i want the element to transition between translateY(-100%) and translateY(0).
I add classes prev-version and next by javascript respectively:
.slider-item.prev-version{
transform: translateY(-100%);
transition: none;
}
.slider-item.next{
transform: translateY(0);
transition: transform 100s ease;
transition-delay: 800ms;
}
But i see transition happens between translateY(100%) and translateY(0). next class overrides transform: translateY(-100%); in prev-version class. Please help me what should i do?
The best thing to try would probably be to use Vanilla JavaScript, jQuery, or some other type of framework to directly edit and change the CSS attributes.
So for example the jQuery version would be:
$("#slider-item.next").css("transform:translateY(0)");
Keep in mind you would need to add logic so that if the attribute was 100 it would change it back to 0 and then if it was 0 it would change it back to 100.
w3schools.com/jquery/jquery_css.asp
I might didn't understand your question but seems that you can use css animation for this:
document.querySelector('button').addEventListener('click', function () { document.querySelector('.slider-item').classList.add('example'); });
button {position: fixed; bottom: 10vh} /* just for demo */
.slider-item{
transform: translateY(100%);
transition: transform 100s ease;
transition-delay: 800ms;
}
.example {
animation: example 3s ease-in-out;
}
#keyframes example {
from {transform: translateY(-100%);}
to { transform: translateY(100%);} /* should be the same as the value declared initial on .slider-item */
}
<div class="slider-item">Slider Item</div>
<button>Click</button>
I can't seem to get the images to spin as I wanted. I believe there's trouble with the image classes but I keep trying and failing to make the animation function.
Here's a part of my code. I only included the code that was relevant to the question:
img: hover {
cursor: default;
transform: rotate(360deg);
transition: all 0.3s ease-in-out 0s;
}
img: nth-child (1) {
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: 3;
}
#keyframes spin {
from {transform: rotate(0deg);
}
to {transform: rotate(360deg);
}}
</style>
<body>
<header>My Tutorial 3</header>
<img class = "as" src="as.png" />
<article><header>About this tutorial</header>
In this tutorial I need to make a picture spin for ever...
<img src="a2.png" /></article>
<footer>my footer
<img src="a3.png" /></footer>
<div class="ribbon">My Tutorial 3</div>
</body>
</html>
Your source is rather broken. Try something like this:
<style type="text/css">
img:hover {
transform: rotate(360deg);
transition: all 0.3s ease-in-out 0s;
}
#spin {
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: 3;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<p><img src="spin.png" id="spin"></p>
<p><img src="spin.jpg"></p>
The img with id="spin" gets the anim, whereas the other flips only on hover. Careful with nth-of-type! Except Firefox there's little support for this.
Pseudo selectors shouldn't have spaces between the : and the name.
Instead of img: hover, you should use img:hover
Demo: https://jsfiddle.net/webtiki/62RJc/
I am trying to make a menu like the semantic UI but I only achieved to click the menu button and open the menu and vice versa. I use toggle class to show the sidebar but I dont know if this way is completely right:
<div class="menu-button" id="menu-button"></div>
$('#menu-button').click(function(event) {
$('#hide-menu').toggleClass('show-menu');
});
.hide-menu {
background-color:#336ca6;
position: absolute;
top:0;
right:0;
z-index: 1;
width: 300px;
height: 100%;
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.show-menu {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
I've tried the event propagation but I can't manage to make it play.
Edit your js code to following
$('#menu-button').click(function(e){
e.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('#hide-menu').click(function(e){
e.stopPropagation();
});
$('body,html').click(function(e){
$('#hide-menu').removeClass('show-menu');
});
Hope this will work.
Here is fiddle.
http://jsfiddle.net/ex8ddv5q/1/
For a different take on it check this Fiddle
$('#menu-button').click(function (evt) {
evt.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});
$('body,html').click(function (e) {
var container = $("#hide-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('show-menu');
}
});
In case somebody comes here and is using Angular instead of JQuery, we got this to work with something similar to the above like this:
public toggleSideNav() {
this.showSideNav = !this.showSideNav;
console.log('show side nav', this.showSideNav);
event.stopPropagation();
}
public hideSideNav() {
this.showSideNav = false;
console.log('hide side nav');
}
And this in the template:
<app-sidenav></app-sidenav>
<div class="main-body" (click)="applicationService.hideSideNav()">
<router-outlet></router-outlet>
</div>
Suppose if your sidebar width is 270px,check the mouse click coordinate.If it's greater give its style left attribute as -270px;
function handleMousePos(event) {
var mouseClickWidth = event.clientX;
if(mouseClickWidth>=270){
document.getElementById("mySidenav").style.left='-270px'
}
}
document.addEventListener("click", handleMousePos);
Here is my sample:https://codepen.io/johncy/pen/oMyzZr
$('body').click(function(){
$('#hide-menu').removeClass('show-menu');
});
I have this JavaScript for a transforming animation using css transform and waypoint
$('.scrollimation').waypoint(function(){
$(this).addClass('in');
},{offset:'80%'});
$('.projects-container.scrollimation').waypoint(function(){
var i = 1,
delay = [];
$(this).find('.project-thumb').each(function(i){
i++;
var elem = $(this);
delay[i] = setTimeout(function(){
elem.addClass('in');
},200*i);
})
},{offset:'70%'});
$('.iphones-wrapper.scrollimation').waypoint(function(){
$(this).find('.iphone-landscape-frame').addClass('in');
},{offset:'60%'});
and this CSS associate with it
.scrollimation.fade-up{
opacity:0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
transform:translateY(100px);
-webkit-transition: -webkit-transform .4s ease-out,opacity .4s ease-in;
transition: transform .4s ease-out,opacity .4s ease-in-out;
}
.scrollimation.fade-up.in{
opacity:1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform:translateY(0px);
}
on a HTML page it does work once I get it into a .net page I won't
Any clues?
Thanks
modernizer was causing the issue. Just move /js/libs/modernizr.min.js to the js directory with all the other files an problem solved.
my context
HTML
<div class="cart">
<div class="black"></div>
</div>
JS
var whiteEl="<div class="white"></div>";
//I would like to replace black with white, flip animation.
$(".cart").empty().append(whiteEl);
whiteEl.addClass("flipanim");
css
#-webkit-keyframes flip{
from{
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
/*
similar cross browser code*/
.flipanim{
-webkit-animation: flip 1s 1;
-moz-animation:flip 1s 1;
-o-animation:flip 1s 1;
animation:flip 1s 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
I am using key frame animation for show transform animation.
and in javascript adding class to attached element.
my animation not working.
How can I add the new element with flip animation to ".cart"?
try this
$(".cart").html('').append(whiteEl);
//since you have already appended the created div here.. you can use class selctor.
$('.white').addClass("flipanim");
You don't need to remove any content for that and also don't need Javascript for it:
html-markup:
<div class="container">
<div class="cart">
<div class="black">Black side</div>
<div class="white">White side</div>
</div>
</div>
css:
.cart div {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
.cart .black {
background:#111;
color:white;
}
.cart .white {
-webkit-transform: rotateY(180deg);
color: black;
background: #eee;
}
Now you can apply your effects simply with:
.container:hover .cart {
-webkit-transform: rotateY(180deg);
}
See the Demo