Is it possible to make an animation of this picture[1] to this picture[2] in jquery?. I would like to get "a growing arrow effect". I must admit that after some searching i found nothing and simple
$('#img').animate({width: '109px',height: '109px'});
is not enough effect for me. Maybe you guys have some clues or tips to achieve that kind of effect.
[1] http://img543.imageshack.us/i/arrowmb.png/
[2] http://img687.imageshack.us/i/pngqa.png/
UPDATED:
Try the code now, it shows the arrow in a green box contained on a red box and a click in the red box will grow and shrink the arrow compensating movement. Of course the boxes are for display purposes only you can remove the borders from the css.
The arrow was not moving anyway, the effect was because the image you provided has a blank space around the arrow which of course it also grow. You can clip the image to avoid having to compensate movement but anyway, the example illustrates that other properties can be also animated.
You just need to play a bit with the parameters to get the effect you are after.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js">
</script>
<script>
$(document).ready(function() {
$('.arrow_container').click(function() {
$('img.arrow').animate({
width: '+=70', height: '+=70', left: '-=15', top: '-=10'
});
$('img.arrow').animate({
width: '-=70', height: '-=70', left: '+=15', top: '+=10'
});
});
});
</script>
<style>
.arrow_container {
margin-left:30px;
margin-top:30px;
width:100px;
height:100px;
border: 1px solid red;
}
.arrow {
position:absolute;
width:30;
height:30;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="arrow_container">
<img class="arrow"
src="http://img687.imageshack.us/img687/9180/pngqa.png">
</div>
</body>
</html>
Related
Currently I have a huge div that would collapse from the height it automatically generated to the height of the title of the div. (i.e. 32px). I have it start out collapsed and then when I click on the div it opens to its full size, displaying all its inner information, and then when I click again, it collapses again. Unfortunately, two things happen:
The div doesn't completely expand to its full height.
The first large img in the div gets resized.
Now I understand why the latter is happening. It has something to do with the height being a percentage instead of a discrete number, for when I change the number to something like 500px, it works just fine. But I don't want to do that. I need it to remain a percentage for when I need to use, yet resize, large pictures.
I also feel this same problem may coincide with the former problem as well, but I'm not sure.
Please help me with this.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<div class="example"> <span class="h2">DIV Example</span>
<br />
<img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
<p>This is a big picture. It's here to show what this thing is supposed to be doing.
However, this picture has been squished so that it can fit within the div nicely. I am
writing a bit so that I can take up space.</p>
<img class="big" src="http://www.greenbookblog.org/wp-content/uploads/2012/03/big-data.jpg" />
<p>This is a big picture. It's here to show what this thing is supposed to be doing. However, this picture has been squished so that it can fit within the div nicely. I am writing a bit so that I can take up space.</p>
</div>
</body>
</html>
CSS:
div.example, div.example img {
border: 3px solid #402468;
border-radius: 6px;
}
div.example {
color: white;
margin: 0 15px;
background-color: #504689;
overflow: hidden;
}
img {
display: block;
margin: 0 auto;
}
img.big {
width: 85%;
height: 85%;
}
/*further formatting: pay no mind*/
div p {
text-indent: 15pt;
margin: 0 15px;
}
.h2 {
font: 32px"Times New Roman", serif;
color: #678900;
}
aaaand jQuery:
$(document).one("ready", function () {
$("div.example").each(function () {
$(this).data("height0", $(this).height());
$(this).height("32px");
});
});
$(document).ready(function () {
$("div.example").click(function () {
if ($(this).height() !== 32) {
$(this).animate({
height: '32px'
});
} else {
$(this).animate({
height: $(this).data("height0")
});
}
});
});
Here is the fiddle:
https://jsfiddle.net/AirStyle/rb95K/35/
Also this is what I get:
https://jsfiddle.net/AirStyle/rb95K/35/embedded/result/
CAUTION: I may not have made the percentages small enough for the picture used. Please lessen them if necessary.
Just remove the height setting altogether and it will keep aspect ratio
(Demo)
img.big {
width: 85%;
}
Also you should cache your jQuery objects. I've done this in the demo by caching $(this) to var self = $(this) and then referring to self therein. There is a lot of overhead in initializing jQuery objects, so if you're using the same selector more than once, cache it.
Edit:
Because you are setting the height of the div to a fixed height on expansion, if the user resizes the window the images will grow in width as well as height. As the container is a fixed height the contents will grow past the end of the container and get cut off. If you would like to fix that, add a "complete" function to the animation to remove the height setting and make it dynamic again.
(Demo)
self.animate({
height: self.data("height0")
},function() {
self.height('');
});
You can also add height: auto; to maintain the default aspect ratio.
img.big {
width: 85%;
height: auto;
}
Don't really know what they're called. For some reason I can't remember. But you know on many homepages they have that menu-like thing with panels that slide by showing their products? I pretty much need to learn how to do that, although what I'm actually doing is making a panel slide by when you click some text. The ideas are pretty much the same, from what I can tell, except those menus do it automatically every couple seconds.
Now I know pretty much exactly what to do in terms of the Javascript. The problem I'm having right now is (worryingly) basic HTML. This is what I've got:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dat Sliding Menu Doe</title>
<link rel="stylesheet" href="slidingmenu.css"/>
</head>
<body>
<div id="menu1">
<h1>This is some text.</h1>
<p>This is some more text.</p>
</div>
<div id="menu2">
<h3>This text is different.</h3>
<h1>Very different.</h1>
<p>So different, in fact, that</p>
<p>the div is a different height.</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
CSS:
#menu1 {
position: absolute;
display: inline-block;
background: #d8d808;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 0%;
}
#menu2 {
position: absolute;
display: inline-block;
background: #7feaa8;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 100%;
}
Pay no attention to the colors or anything, this is just practice!
It's doing everything it's supposed to do EXCEPT for the fact that I get a scrollbar at the bottom of the page that allows me to scroll to the right and see the second div... which is a problem. Am I doing something fundamentally wrong, or do I just need to add something to get rid of that scrollbar?
Also, a little bit of uncertainty on the Javascript. How would I get it so that the margin-left for both divs changes at EXACTLY the same time? Even a slight delay will show up, right?
It may be easier to just link to a tutorial. I tried researching this, but I didn't know what to look up (forgot what they're called!).
EDIT
Ok, so I took Joshua Chavanne's suggestion and hid the overflow for the body, which worked. Then I did all this with the Javascript:
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");
switch1.onclick = move;
switch2.onclick = move;
function move() {
if (menu1.style.marginLeft == 0) {
show2();
}
else {
show1();
}
}
function show2() {
if (menu1.style.marginLeft > -100) {
menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
requestAnimationFrame(show2);
}
}
When I click on switch1, menu1 moves over 10px, then stops moving. No idea why.
Check out free jssor carousel
It will do everything you are asking for and you don't have to write it yourself.
Is it possible to make the overflow not hidden but just change the opacity of the content that is overflowing?
So that the parts of the content that are going outside the parent div has opacity of .5 but the parts that remain in the parent are normal?
This would require JavaScript I am assuming if anyone could get me off in the right direction I would be very appreciative. In my fiddle you can drag the image around.
FIDDLE
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#img_rnd').resizable();
$('#rnd').draggable({
appendTo: 'body',
start: function(event, ui) {
isDraggingMedia = true;
},
stop: function(event, ui) {
isDraggingMedia = false;
}
});
});//]]>
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" />
<div id="frame">
<div id="rnd" style="display:inline-block">
<img id="img_rnd" style="border:1px solid red" src="http://blog.stackoverflow.com/audio/stackoverflow-300.png" />
</div>
</div>
<style>
#frame {
height: 500px;
width: 500px;
overflow: hidden;
border: 1px solid black;
}
</style>
Allow me to think outside the box here. Why, in stead of applying an opacity, don't you overlay your picture with something semi transparent... Something like this:
#frame:after {
content: '';
display: block;
position: absolute;
background: transparent;
z-index: 1;
pointer-events: none;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
box-shadow: 0 0 0 5000px rgba(255,255,255,.5);
}
It may be a bit hacky, but it works, and with just css. Have a look at the updated fiddle
Oooh. A cool, but tricky idea.
As far as I know, there's no easy way to do this without javascript.
My recommendation is to include 2 images:
The overflow: hidden; image. This will work exactly as you have in your demo.
The opacity: 0.5 image. This is the image that will show up outside of the parent. In fact, in order to show up outside of the parent, it must be just that: a sibling of the parent.
With this you can have the inner area of the parent show the overflow: hidden;, and the outer area of the parent show the opacity: 0.5.
If you take this approach, I'd recommend keeping all of the event handlers on the slightly opaque one, as that will always be on top, even when the image is entirely outside of the frame!
Here's the fiddle.
you can achieve a similar effect by having an absolute div, with same image, with less opacity and less z-index, and it would move around with your image as you move it, using start stop and drag functions.
see this fiddle for a example, there might be some lag sometimes, but consider this as a proof of concept.
http://jsfiddle.net/gaurav5430/vrUgs/1244/
accurate:
http://jsfiddle.net/gaurav5430/vrUgs/1246/
i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});
Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/
Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover
Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up
I have a world map image (png image), now I am planning to add markers on the map for various cities like new york, san francisco, london, tokya, mumbai etc..
The markers will be like red dots
I have this image inside my application, what I finally want is these markers should have an associated onclick javascript function like loadstasticschart(cityname).
So once the marker is clicked graphical charts for that city is loaded in the neighboring div in the page.
So basically I want is a way to associate javascript function onclick of the city points in the map. How can I achieve this functionality?
Edit: I did figure the way is to user image maps and have <area> tags and have onclick event on these area tags. The are tags have coordinate attribute which define the clickable area. The last thing remaining now is to color the individual area tags with some color since there are invisible in the map right now. I saw a post where they have suggested to set id to area tags and set the color of the id by document.getElementbyId since style tag change to background color or anything is not making the areas visible.
Regards
Priyank
I have two small suggestions, one is to avoid using area tags and place above the image a canvas tag, and use Paper.js to draw on it and associate to each draw an onclick event. If you wan't something that will work in older browsers I recommend Raphael.js instead.
Any way... if you still want to use the area tag, you could have a small dot.png image and place it as background to the area tag and change it's position for each country's area tag, i.e.:
.area {
background: url("../images/dot.png") no-repeat;
}
.area#poland {
background-position: 100px 150px;
}
.area#argentina {
background-position: -100px -300px;
}
I hope it helps, cheers.
---------------------------EDIT-------------------------------
Ok, here you have a working solution: http://jsfiddle.net/8gDLV/1/
The html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="map-container">
<img src="http://www.theodora.com/maps/new4/world_color.gif"/>
<div id="tucuman" class="location"></div>
<div id="buenosaires" class="location"></div>
<div id="paris" class="location"></div>
</div>
</body>
</html>
main.css:
#map-container {
width: 648px;
height: 413px;
border: 1px solid black;
position: relative;
}
#map-container .location {
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background: red;
cursor: pointer;
}
#map-container .location.active {
background: yellow;
}
#map-container .location#tucuman {
top: 337px;
left: 126px;
}
#map-container .location#buenosaires {
top: 350px;
left: 130px;
}
#map-container .location#paris {
top: 139px;
left: 264px;
}
main.js:
$(document).ready(function () {
$(".location").click(function() {
if (!$(this).hasClass(".active")) {
$(".location.active").removeClass("active");
$(this).addClass("active")
}
});
});
I hope it's clear as it is, now I don't have time to explain it better, but if you have any doubt please ask it and I'll edit it later.
Cheers!!