Anyone know how to resize an image up and down on click.
Example: nrk.no
The website you give as an example uses CSS Transitions to make some of their images grow and shrink. You can learn more about CSS Transitions at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Below is a simple example using JQuery. When you click on the Google logo it will grow and when you click on it again it will shrink.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box img {
transition: width .4s,margin .4s,max-width .4s;
transition-property: width, margin, max-width;
transition-duration: 0.4s, 0.4s, 0.4s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
}
.box img.clicked{
width: 500px;
}
</style>
<script>
$(function(){
$('.box img').on('click', function() {
$(this).toggleClass('clicked');
});
});
</script>
</head>
<body>
<div class="box">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
</body>
</html>
Related
I'm having big trouble making a website. For some reason in whatever I do I can never get javascript to work. Is there something I'm missing for 'enabling' this?
For example I copied a very simple thing exactly.
https://codepen.io/thetallweeks/pen/boinE
In a test file this is:
<html>
<head>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
Yet the button does nothing in my test file.
What did I do wrong?
In addition to making sure JQuery has been loaded you should also load your JQuery code(script tag) before the closing body tag or wrap it in a document ready function call. If JQuery has been loaded then what is happening is that the JQuery is being executed before the html element your are attaching the event to has actually been loaded. So basically the JQuery event can't see your button element yet.
$(document).ready(function(){
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
});
The $() is a jQuery shorthand for finding elements in DOM. Did you include the jQuery Library?
Try this
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
This happens as you did not include Jquery and tried using it.
Note additional script tag on the top of your script tag
I'm a beginner in javascript and I stumbled upon this problem.
This is a part of markup from site i'm working on:
<div class="row">
<div class="col-lg-12">
<div id="target">
<div id="bgDiv">
<img src ="someurl">
</div>
</div>
</div>
</div>
It's a part of a simple bootstrap layout. What i want to do is to animate the #target div so that the image fills the whole browser screen on mouseover , preferably using pure javascript. If I do it with this function:
function(){
var target = document.getElementById('target');
function FullScreen {
target.style.cssText ='position:absolute;top:0;bottom:0;left:0;right:0;z-index:999'
document.body.appendChild(target);};
target.addEventListener('mouseover', FullScreen)};
It does the job of displaying the image covering whole browser window, but I'm cluless how to make the "fill" animation. I tried experimenting with transitions, but i think since i change the 'position' property and append the element to body it does not work.
I would be grateful for any help or suggestions.
As Portal_Zii already mentioned, you can easy create animations without javascript using CSS3 properties only like:
transition
animation
With this knowledge its quiet simple to implement an hybrid solution with CSS3 transition property, the onmouseenter and onmouseleave event.
Try to run the Code and re-size the window.
var myDiv = document.getElementById("myDiv");
var myImg = document.getElementById("myImg");
myDiv.onmouseleave = shrinkImage;
myDiv.onmouseenter = growImage;
function shrinkImage() {
myImg.style.width = 50 + "px";
myImg.style.height = 50 + "px";
}
function growImage() {
myImg.style.width = window.innerWidth + "px";
myImg.style.height = window.innerHeight + "px";
}
img {
width: 50px;
height: 50px;
transition: all 0.7s;
}
<div id="myDiv">
<img id="myImg" src="data:image/gif;base64,R0lGODlhMAAwAOMAANTS1Ozq7Nze3PT29Nza3PTy9OTm5Pz+/NTW1Ozu7OTi5Pz6/P///wAAAAAAAAAAACH5BAEAAAwALAAAAAAwADAAAAT+kMlJq72YnUDMymAoMgUCAMWorqQJBGy8LMc1EKcSr4sgwJYbAEHYqQInxMBywA1rxlDCJfhUBCaENZppngAG6MTwXXJB02yKkhgCEmfQJknYkr6GOGgg+AbEA1kCegdiFAcFSQhrGlSGOyUvA48MCklVEwgmBGZRfUMCjBNCJ3kSlkOdRmRfCH+HAVlKEmSaojsLsUkAoWIHqLwfbUNwZwcJTkkJW4FZf5FghHxZQwqdbVkDQgjFhGmKCTULlrYHAwbhehQFWK0eDHwAnHHmlBq5Liec5gWTZws4EAhIMIBGhWlu5qmb8gVUgGViFhhwsUhdCzcNiShYJgFRH0z+FiUSoNjwxI8CNAxanIDIgAJq1EDdWtnRXIJ2u0rZo8mygAEsznaGKEQ0BqIABt7VLDTipgAFjI497KfyAlMJNxUoDIHkBCNgGQk8DfBQW9WuKEag7fYpJkY3mggwQjvzQlduE9DmfNtKQY0DE72OCPyGpc2kPrCM1JTP1Bxiat10s7pA24AECZAaCGAFsIvJGe6CHlG04926Fgh341egtevX/fr507BWbZZuumDCLVlRQ63CImpLyFey1W4Bf0/bhkxL026+cIsB/oK6gi7gDBZkRoo0wWZ04B+mo019OV56rHpz/Uzo5QlVGRgKpEG0vv379dklgY+BlDwBYgUw6INYACZm4IAAXmIHCLkV5+CDGQ1RHROE6UYSdLtQNJ4K2r3E2IcghhiiAQUIJUEEADs="
/>
</div>
You can describe all of the target's element properties in the class 'over' of css and describe an animation through transition on properties of position of your element. Then when you this class 'over' to element with id=target.
function FullScreen {
target.style.classList.add('over')};
I think all you need to do is add transition styles in your css:
#target {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Additionally you could accomplish this in just using css no?
#target {
DEFAULT:STYLES;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#target:hover {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
padding:0;
z-index:999;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(
You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/
What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".
Please see example in chrome. I try to implement row height animation with image that shouldn't exceed parent block.
Why does image width change only after changing any property example?
Try to click the first button, image height will updated, but width no. Then click the second button, opacity will changed, and image width will be setted properly.
<!DOCTYPE html>
<html>
<head>
<title>Image resizing</title>
<style>
.header-row {
width:900px;
height:90px;
margin:0 auto;
background:#0f3a51;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
-ms-transition: all .9s ease;
-o-transition: all .9s ease;
transition: all .9s ease;
}
.header-row img {
display: inline;
max-height: 100%;
background:#ff9900;
}
.header-row-reduced {
height:50px;
}
</style>
</head>
<body>
<div id="hr" class="header-row">
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Volkswagen_Logo.png/600px-Volkswagen_Logo.png" alt="">
</div>
<button id="btn" onclick="check();">Update row height</button>
<button id="btn" onclick="changeProp();">Toggle opacity</button>
<script>
var el = document.getElementById('hr'),
img = document.getElementById('img');
function check(){
var classes = el.className.split(' '),
hasClass = classes.indexOf('header-row-reduced');
if(~hasClass) {
classes.splice(hasClass,1);
} else {
classes.push('header-row-reduced');
}
el.className = classes.join(' ');
}
function changeProp() {
img.style.opacity = '0.5';
}
</script>
</body>
</html>
Thats a good question. I don't know why this is not working like expected.
But you could fix it by applying the rule with the height to the element as well:
.header-row-reduced, .header-row-reduced img {
height:50px;
}
This works, but I'm sure it is not exactly what you want to have!
Setting max-height in pixels should fix the issue as well.
Below is my HTML-CSS-Jquery code.
Problem: When I click on the background button, The Colour changes from Orange to Green instantly.
What I want is, when I click on the Background button the background color of the div must change colour slowly.
Please note that I am only permitted to use Jquery. No Other plugins may be used.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#box
{
position:absolute;
height:200px;
width:200px;
background-color:orange;
padding: 20px;
margin: 200px 200px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#width").click(function(){
$("#box").animate(
{"width": "300px"},
"slow");
});
$("#height").click(function(){
$("#box").animate(
{"height": "300px"},
"slow");
});
$("#background").click(function(){
$("#box").css("background-color","green");
});
});
</script>
</head>
<body>
<button id="width" type="button"> Width </button>
<button id="height" type="button"> Height </button>
<button id="background" type="button"> Background </button>
<div id="box">
<p>Bringing so sociable felicity supplied mr. September suspicion far him two acuteness perfectly. Covered as an examine so regular of. Ye astonished friendship remarkably no. Window admire matter praise you bed whence. </p>
</div>
</body>
</html>
try something like this,FIDDLE
$("#background").click(function(){
$("#box").css({
transition : 'background-color 1s ease-in-out',
"background-color": "green"
});
});
you can do also by css
In CSS
.slowbackground {
background-color: green;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
background-color: D3E1FA;
}
in js
$("#background").click(function(){
if( $("#box").hasClass("slowbackground")) {
$("#box").addClass("slowbackground");
}
});