So I'm trying to make a simple gallery of photos that enlarge when you click them and then return to their smaller size when you click them a second time. I have the enlarge part working but so far I have only been able to get the picture to scale back down by using ".mouseout" with JQuery, which is not what I want. Also I'd like the image to sit on top off all the other images/divs when it is enlarged, right now it gets covered by any other image to the left or right.
Here's my code, and a jsfiddle link at the bottom
HTML
<div id="Gpic1">
<img id='table' src='http://i.imgur.com/7ESpNI8.jpg'>
</div>
CSS
#Gpic1 {
width: 280px;
height: 187px;
display: block;
background: black;
}
#table {
width: 280px;
height: 187px;
}
JQuery
$('#Gpic1').hover(function () {
$(this).find('img').fadeTo(500, 0.5);
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#table').click(function () {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").stop().animate({
width: 800,
height: 533
}, 200); //Bigger
}).mouseout(function () {
$("#table").stop().animate({
width: 280,
height: 187
}, 200); //Smaller
});
http://jsfiddle.net/kmx6C/
Thanks
You can add a class enlarged to the element you are enlarging, and then check whether the image is currently enlarged or not.
if($('#table').hasClass('enlarged')){
$('#table').removeClass('enlarged');
$("#table").stop().animate({width: 280, height: 187}, 200 );
}else{
$('#table').addClass('enlarged')
$("#table").stop().animate({width: 800, height: 533}, 200 );
}
Fiddle: http://jsfiddle.net/4LUYM/
You will need to keep track if the image is expanded or normal:
See it here: http://jsfiddle.net/kmx6C/4/
if ($(e.target).hasClass('expanded')) {
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
} else {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").addClass('expanded').stop().animate({
width: 800,
height: 533
}, 200);
}
If you're going to still use the mouseout event, then you'll want to make sure to remove the class there:
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
As for making is "sit" a top of other images, you'll want to make sure that the "z-index" and "position" is set accordingly.
Related
I try to make a bigger photo than the div that is containing it to auto scroll vertically.
Also found a nice jQuery plugin jQuery simplyScroll but i can't make it run properly.
Here is my fiddle.
(function($) {
$(function() { //on DOM ready
$("#scroller").simplyScroll({
customClass: 'vert',
orientation: 'vertical',
auto: true,
manualMode: 'end',
frameRate: 8,
speed: 5
});
});
})(jQuery);
It doesn't scroll to bottom. What i did wrong?
https://jsfiddle.net/h5Lrq9zy/2/
.vert .simply-scroll-clip {
width: 400px;
}
.vert .simply-scroll-list li {
width: auto;
height: auto;
}
Too much hardcoded stuff within the plugin itself. A terrible plugin overall, but yes, you could modified it to be better.
You specified a custom class to use as a container called vert.
So you need to specify CSS for that class like so:
.vert {
width: 400px; /* wider than clip for custom button pos. */
height: 1000px;
margin-bottom: 1.5em;
}
/* Clip DIV */
.vert .simply-scroll-clip {
width: 400px;
height: 1000px;
}
/* Explicitly set height/width of each list item */
.vert .simply-scroll-list li {
width: 400px;
height: 1000px;
}
Fiddle here.
I am trying to make owl carousel slider full screen for my site.
This is what I need, feel free to resize Your browser
And this is what I have,
fiddle
$(document).ready(function() {
// carousel setup
$(".owl-carousel").owlCarousel({
navigation : false,
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
autoHeight: true,
afterMove: top_align,
});
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
is there any solution to fix it?
Thx
When using % for heights, you have to work your way down the DOM chain to your child element for the height to apply.
Another option is to take advantage of vh units. 100vh = 100% of the window height.
Just add 100vh to .owl-item and your div item.
.owl-item, .item {
height: 100vh;
}
A vh unit is defined as:
Equal to 1% of the height of the viewport's initial containing block.
Try this:
html, body {
height: 100%;
margin: 0;
}
.owl-wrapper-outer {
height: 100% !important;
}
.owl-wrapper {
height: 100%;
}
.owl-item {
height: 100%;
}
.b-Amarelo {
height: 100%;
}
.owl-item h1 {
margin: 0;
}
Demo: Fiddle
I have a div that needs to switch between background images as well as size. I'm able to get the initial(first) click to change the background image and div size correctly, but when I click on it again, I'm unable to return it to it's original size and background image. Can anyone explain to me what I need to do?
CSS
#navigation{
position: absolute;
display: block;
float: right;
margin: 0;
top: 0;
right: 0;
width: 25px;
height: 100%;
background-image: url(../images/left.png);
background-repeat: no-repeat;
background-position: left;
z-index: 3;
background-color: green;
}
JS
$("#navigation").on("click", function(){
if($(this).css("background-image", "url(images/left.png)")){
$(this).css("background-image", "url(images/right.png)");
$(this).animate({width: 100}, 350);
}
else{
$(this).css("background-image", "url(images/left.png)");
$(this).animate({width: 25}, 350);
}
})
Try this:
$("#navigation").on("click", function(){
if($(this).css("background-image") == "url(images/left.png)"){
$(this).css("background-image", "url(images/right.png)");
$(this).animate({width: 100}, 350);
}else{
$(this).css("background-image", "url(images/left.png)");
$(this).animate({width: 25}, 350);
}
});
But better try adding a class
$("#navigation").on("click", function(){
var ths = $(this);
if(ths.hasClass('bg-image-left')){
ths.css("background-image", "url(images/right.png)")
.animate({width: 100}, 350)
.removeClass('bg-image-left');
} else {
ths.css("background-image", "url(images/left.png)");
.animate({width: 25}, 350);
.addClass('bg-image-left');
}
});
The best things is to use addClass and removeClass. You need to created two
I have used a background color instead to make it testable.
different CSS classes see the jsfiddle
Is there any way of keeping border size fixed while scaling an object with CSS ?
I have an object with style below
.myObj{
width:100px;
height:100px;
border:1px solid red
}
when I scale this object the border of this object also scales as normal.But how can I keep it at 1px?
Here is the FIDDLE
I believe you'd have to transition the width and height ( and whatever else you need ) instead of using scale.
.box {
transition: 1s;
}
.box:hover {
width: 200px;
height: 200px;
}
http://jsfiddle.net/GJJp4/65/
This problem could however be solved using CSS3 properties only.
But, this would only be possible if you give a 'border-width' of '2px' at first and then change it to '1px' as you hover over it as 1px is the smallest unit value to render with.
.myObj { border: 2px solid red; }
.myObj:hover { border: 1px solid red; }
Here goes the FIDDLE for better understanding.
Try this fiddle
$(".box").hover( function () {
$( ".box" ).animate({
width: "300px",
height: "300px"
}, 100, function() {
// Animation complete.
});
}, function () {
$( ".box" ).animate({
width: "75px",
height: "75px"
}, 100, function() {
// Animation complete.
});
});
Of course it is possible! I think the easiest way is to change your jQuery code and use the .animate-function instead of the .transition-function:
$(".box").hover( function () {
$('.box').animate({height: 300, width: 300, marginLeft: '-=' + (300-75) / 2, marginTop: '-=' + (300-75) / 2});
}, function () {
$('.box').animate({height: 75, width: 75, marginLeft: '20%', marginTop: '20%'});
});
With a little bit of creativity you'll have the same effect with a thin border ;)
http://jsfiddle.net/GJJp4/71/
Im late to this answer, but I hope it helps. When using css scale, dimensions also scale. You can override this using jQuery (or javascript if you will)
var scale = 0.5, /*value of your scale, as in transform: scale(0.5)*/
absoluteSize = 1/scale + "px"
//absoluteSize = 1/0.5px = 2px
$(".box").css("border", absoluteSize);
This is pure math
1/0.5 = 2
1 = 2(0.5)
1 = 1
I'm now in problem about how to animate function in jQuery to expand proportionally. Normally, it expand one-sided only just like expand to bottom or expand to right.
What I want is to expand proportionally left-right-top-bottom by using animate.
Following is my coding. What I said above, it expand to bottom only.
$(document).ready(function() {
var theFrame = $("#FrmPatient", parent.document.body);
theFrame.animate({width: 650, height: 485}, 1000);
});
Try this:
<div id="frame"></div>
#frame {
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
background-color: #999;
}
$(function() {
var w = 400, h = 400;
$("#frame").animate({
width: w,
height: w,
marginLeft: -w/2,
marginTop: -h/2
}, 1000);
});
http://jsfiddle.net/GVj83/
You'll need to animate the left and top properties as well. If the original width and height of the box are (w0, h0) and the expanded ones are (w1, h1), animate left to left-(w1-w0)/2, and top to top-(h1-h0)/2. Note that would only work with absolute or relative positioning.