I use the jquery draggable to make this div movable in the window.
When it is dragged (in this chase, to right) I want to be deformed like the image above.
Thank you so much in advance!
If you want more info, please tell me.
This may help you:
<script>
$(function() {
var prevX = -1;
$('.movable').draggable({
drag: function(e) {
//console.log(e.pageX);
// dragged left
if(prevX > e.pageX) {
$(this).addClass('cls');
}
else if(prevX < e.pageX) { // dragged right
$(this).removeClass('cls').addClass('cls2');
}
prevX = e.pageX;
},
stop: function () {
$(this).removeClass('cls').removeClass('cls2');
}
});
});
</script>
If is dragged to right it would be like your photo, and if is dragged to left it would be transformed to 175deg.
CSS:
.cls {
-webkit-transform:skewX(5deg);
-moz-transform:skewX(5deg);
-ms-transform:skewX(5deg);
-o-transform:skewX(5deg);
}
.cls2 {
-webkit-transform:skewX(175deg);
-moz-transform:skewX(175deg);
-ms-transform:skewX(175deg);
-o-transform:skewX(175deg);
}
fiddle Demo
js
$("#drag").draggable({
drag: function () {
$(this).addClass('cls');//add class on dragging
},
stop: function () {
$(this).removeClass('cls');//remove class on drag stop
}
});
CSS
.cls {
transform: rotate(20deg);
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
}
<div></div>
.
$("div").draggable({
drag: function () {
$(this).addClass('skew');
},
stop: function () {
$(this).removeClass('skew');
}
});
.
div {
height:300px;
width:150px;
background-color:cornflowerblue;
}
.skew {
transform: skew(-20deg,0);
-moz-transform:skew(-20deg,0);
-webkit-transform:skew(-20deg,0);
-o-transform:skew(-20deg,0);
}
DEMO
Related
I'm having an issue with this jQuery that is blowing my mind. I've tried three different JS and jQuery functions people suggested online for accomplishing this and can't seem to get anything to work.
I'm trying to hide the class .arrow-up when .first is actually visible on the screen and hide the class .arrow-down when .last is visible on the screen.
Sounds simple enough, right?
Well the parent element has overflow: hidden on it (like most carousels–they really are from hell). Anyone know how to do this? I'd really appreciate any help, JS really isn't my strongest by any means...
Here's my current jQuery–
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=300"
}, 300);
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=300"
}, 300);
});
});
In this, .vid-list-container is the parent with overflow: hidden on it and .first and .last are both inside the container. The arrow classes are both outside of the container.
Built this pen for anyone who wants to play around with it.
http://codepen.io/seancrater/pen/waPNEW
Thanks!
This should work. Notice however that I used opacity:0, so the arrow can still be clicked. You need to change that!
function checkDownArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() != 0){
$('.arrow-up').css('opacity',1);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',0);
}
},350);
}
function checkUpArrow() {
setTimeout(function() {
if($(".vid-list-container").scrollTop() == 0){
$('.arrow-up').css('opacity',0);
}
if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) {
$('.arrow-down').css('opacity',1);
}
},350);
}
checkDownArrow();
checkUpArrow();
jQuery(document).ready(function ($) {
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "+=173"
}, 300);
checkDownArrow();
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
$(".vid-list-container").stop().animate({
scrollTop: "-=173"
}, 300);
checkUpArrow();
});
});
EDIT
Okay, I see you have a different problem... may I suggest using a different approach? Something like this.
HTML:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="vid-item">
...
</div>
<div class="vid-item">
...
</div>
</div>
</div>
CSS:
.outer-wrapper {width:200px; height:150px; overflow:hidden;}
.inner-wrapper {height:auto; margin-top:0;}
.vid-item {width:200px; height:150px;}
JS:
var itemHeight = $('.vid-item').first().height();
var wrapperHeight = $('.inner-container').height();
$(".arrow-down").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(itemHeight - margin > wrapperHeight) {
$('.inner-container').css('margin-top', (itemHeight-wrapperHeight) + 'px');
$('.arrow-down').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin-itemHeight) + 'px');
}
$('.arrow-up').removeClass('hidden');
});
$(".arrow-up").bind("click", function (event) {
event.preventDefault();
var margin = parseInt($('.inner-container').css('margin-top'));
if(margin + itemHeight >= 0) {
$('.inner-container').css('margin-top', '0');
$('.arrow-up').addClass('hidden');
}
else {
$('.inner-container').css('margin-top', (margin+itemHeight) + 'px');
}
$('.arrow-down').removeClass('hidden');
});
Need some JQuery help...
I want to slide in a div from the right taking 25% of the screen width.
How can I use the same '#trigger-left a' to slide out the div? (i.e. width: 0px)
JQuery:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
rightCol.animate({width:'25%'},350);
return false;
});
});
HTML:
<div id="trigger-left"><img src="images/menu-icon.png" border="0"></div>
<div id="right-col">Content right column</div>
Looking forward to your solutions!
Try this:
$(function() {
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(rightCol.width()==0)
{
rightCol.animate({width:'25%'},350);
}
else
{
rightCol.animate({width:'0%'},350);
}
return false;
});
});
If you mean by clicking the same link the div will slide out.
Here you are:
$(function () {
var div = $("#"right-col");
$("#trigger-left a").click(function (e) {
if ($(div).width() != 0) {
$(div).animate({width:'0px'},350);
} else {
$(div).animate({width:'25%'},350);
}
});
});
Try that if it didn't work I will edit my answer. Good luck ;)
Easiest way would be to just track what state it's in. In this way can keep direction going which may not be possible if clicked in the middle of a transition if using the widths.
$(function() {
var triggered = false;
$("#trigger-left a").click(function(){
var rightCol = $("#right-col");
if(!triggered){
rightCol.animate({width:'25%'},350);
triggered = true;
} else {
triggered = false;
rightCol.animate({width:'0%'},350);
}
return false;
});
});
I'm designing a website and I'd like the navigation menu to fade in once I scroll down >50px. I'm using the following JavaScript with JQuery library:
(function ($) {
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(500);
} else {
$('.menu').fadeOut(500);
}
});
});
})(jQuery);
The class .menu is set on {display: none;}.
This should work
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('nav').fadeIn(500);
}
else {
$('nav').fadeOut(500);
}
});
});
Codepen Demo
It's working for me.
Your .menu is probably at the top of a page and when you scroll you can't see it.
Add to test:
.menu {
position: fixed;
z-index: 10000; //just to check if it is behind the content
}
DEMO
Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(1000);
} else {
$('.menu').fadeOut(1000);
}
});
});
Just corrected your code! It works fine!
I got a way to solve my problem in my navigation of my site http://204.197.252.143/~paterson/ , that when I hover the link (li-element) the background will set into gray and the background-image (cross sign) of the previous element will hide also. My question is, Is there another way to make it dynamically? This is my code. Any help are appreciated.
<script>
$(document).ready(function () {
$("li#menu-item-21").hover(function () {
$("li#menu-item-23").css("background", "transparent");
});
$("li#menu-item-21").mouseleave(function () {
$("li#menu-item-23").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
<script>
$(document).ready(function () {
$("li#menu-item-23").hover(function () {
$("li#menu-item-22").css("background", "transparent");
});
$("li#menu-item-23").mouseleave(function () {
$("li#menu-item-22").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
<script>
$(document).ready(function () {
$("li#menu-item-23").hover(function () {
$("li#menu-item-22").css("background", "transparent");
});
$("li#menu-item-23").mouseleave(function () {
$("li#menu-item-22").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});</script>
<script>
$(document).ready(function () {
$("li#menu-item-20").hover(function () {
$("li#menu-item-96").css("background", "transparent");
});
$("li#menu-item-20").mouseleave(function () {
$("li#menu-item-96").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});</script>
<script>
$(document).ready(function () {
$("li#menu-item-19").hover(function () {
$("li#menu-item-20").css("background", "transparent");
});
$("li#menu-item-19").mouseleave(function () {
$("li#menu-item-20").css("background", "url(http://site.com/
~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});</script>
<script>
$(document).ready(function () {
$("li#menu-item-96").hover(function () {
$("li#menu-item-21").css("background", "transparent");
});
$("li#menu-item-96").mouseleave(function () {
$("li#menu-item-21").css("background", "url(http://site.com/~paterson/
wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
like #juno said.. why not use css?
for example:
li:hover{ attributes to change }
You can use .hover() and .prev() in jQuery to do this.
Here's the code:
<script>
$(document).ready(function () {
$("li.menu").hover(function () {
$(this).prev().css("background", "transparent");
}, function(){
$(this).prev().css("background", "url(http://site.com/~paterson/wp-content/themes/patersons/img/cross.png) no-repeat right");
});
});
</script>
rejig your html a little so that the background image appears to the left the li. Something like:
# put the background image on the left of the LI's
.nav-menu li { background: url("http://204.197.252.143/~paterson/wp-content/themes/patersons/img/cross.png") no-repeat center left;
# remove the background image from the first element
.nav-menu li:first-child { background: none }
#when you're hovering, remove the background
.nav-menu li:hover { background: transparent; }
Something like that will work without any JS.
edit:: when you come to launching, make sure your image paths are relative from the CSS document - url(../img/cross.png) - rather than hardcoding to the IP address.
i am building scroll panel of images like jquery image gallery but only thumb icon part,
this is my code,,,
function moveRight() {
var imli = $(".thumbStrip li:first-child");
$(".thumbStrip").append(imli);
}
function moveLeft() {
var imli = $(".thumbStrip li:last-child");
$(".thumbStrip").prepend(imli);
}
i want to apply smoothing effect while append or prepend,,
is it possible??
how?
You mean something like this:
function moveRight() {
$(".thumbStrip li:first-child").fadeOut(function() {
$(this).appendTo(".thumbStrip").fadeIn();
});
}
?
Or maybe:
function moveRight() {
$(".thumbStrip li:first-child").animate({
width: 'toggle',
opacity: 'toggle'
}, function() {
$(this).appendTo(".thumbStrip").animate({
width: 'toggle',
opacity: 'toggle'
});
});
}
DEMO