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
Related
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>
I wanna display a growing column when loading my website like this:
function init() {
document.getElementsByClassName('col')[0].style.height = '50px';
}
.col {
width: 20px;
min-height: 1px;
transition: height 0.5s ease-out 0s;
background-color: red;
}
<body onload="init()" >
<div class="col" ></div>
</body>
But as you can see it doesn't work. Would it theoretically help to have the onload-attribute placed in the attributes of the div? But that doesn't work, right?
I also could use keyframe animations, I guess. However, I actually have more column than one and all of them should grow to a different height. Therefore I would have to create a keyframe animation for each of my columns, which is kind of messy, I believe.
Does anyone know a clean solution to my problem? Thanks in advance...
This works. Need webkit for Chrome/Safair I believe. Pretty sure you can't animate from min-height either as min-height is not a height. CSS transitions only work from set value to set value.
function init() {
var d = document.getElementsByClassName('col')[0];
d.className = d.className + " col-animate";
}
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
background-color: red;
}
.col-animate {
height: 50px;
}
<body onload="init()" >
<div class="col" ></div>
</body>
It will be good to write like below example CSS to support more possible browsers
.col {
width: 20px;
height: 1px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s; // webkit - chrome safari
-o-transition: all 0.5s ease-out 0s; // Opera
-moz-transition: all 0.5s ease-out 0s; // Mozilla
background-color: red;
}
I want to start a CSS transition, that changes the background-color and the dimension if a button is clicked. But there is a mistake in the code:
js fiddle
jQuery
$(function() {
$('#change').click(function() {
$('#box').addClass('change');
});
});
HTML
<div id="box" class="start"></div>
<div id="button">click</div>
CSS
.start{
height:100px;
width:100px;
background: black;
transition: all 2.0s linear;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
}
.change{
width: 200px;
height: 200px;
background:yellow;
}
#button{
width: 80px;
height: 20px;
padding: 4px;
margin: 5px;
border:solid 1px black;
background: grey;
cursor: pointer;
color: white;
}
The id of the button in the HTML & CSS (#button) is different from the id of the button in the JS (#change), that's why.
If you replace #change with #button in the JS, then it works.
Note: When you list transition rules for various browsers, you don't need the -ms- one (IE10 supports transitions unprefixed and IE9 does not support them at all; the -ms- prefix was only needed for early IE10 previews) and you should always put the unprefixed one last. At this point, all current versions of desktop browsers support transitions unprefixed.
Id of your button is button, not change.
Use $('#button') instead of $('#change').
DEMO HERE.
It should be using #button,
$(function() {
$('#button').click(function() {
$('#box').addClass('change');
});
});
as per your HTML
<div id="button">click</div>
http://jsfiddle.net/qsAZQ/
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");
}
});
I am looking to create a slide out DIV, like the one here when you press "Contact". Does anybody know of anything similar to this?
Making use jQuery's slideToggle() method could help you do this.
Example
HTML:
<div id="contact">
Contact me!
</div>
Contact
CSS:
#contact
{
display: none;
background: grey;
color: #FFF;
padding: 10px;
}
JavaScript:
$(function()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});
If you don't want to use jQuery and you can stick to modern browsers you can try:
Demo: http://jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
<div id="slide">click me</div>
CSS:
#slide {
height: 50px;
transition: height 500ms ease;
-moz-transition: height 500ms ease;
-ms-transition: height 500ms ease;
-o-transition: height 500ms ease;
-webkit-transition: height 500ms ease;
}
Script:
document.getElementById( 'slide' ).addEventListener( 'click', function() {
this.style.height == '50px' || this.style.height == ''
? this.style.height = '150px'
: this.style.height = '50px';
}, false );
yet another sample, but without jquery, and with a class add/remove approach :)
Demo: http://jsfiddle.net/1wbh8pqj/
The main idea is that you have two classes, one of them applies to the slider, and the another, says how the slider should show when it is expanded.
.slider {
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
}
.slided {
height: 100px;
}
so, you have to set the 'slided' class to the slider when it has to be expanded, and remove it when the slider has to be shrinked, and using the super-mega-uber-awesome css transition, the height will smoothly change :)
var expander = document.getElementById("expander");
expander.addEventListener("click", function () {
var slider = document.getElementsByClassName("slider")[0];
if (slider.classList.contains("slided")) {
slider.classList.remove("slided");
} else {
slider.classList.add("slided");
}
});
ohbtw, the html:
<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>
Another sample
Sample
http://jsfiddle.net/9cdYR/
HTML
<div id="slide">
Slide content<br />
Slide content<br />
Slide content<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
</div>
<button id="slide_button">Slide it</button>
CSS
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
JS
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {
});
});
With jQuery, you make the div and add display:none with css. Then, something like:
$('.button').click(function(e){
e.preventDefault();
$('#mydiv').slideToggle();
});
The almighty jQuery comes to a rescue, once again.
If you don't want to use jquery, just set a timer and increase the height.