This code doesn't work. I followed exactly the syntax for animate() but not working.
<!DOCTYPE html>
<html>
<head>
<style>
#testing {
background-color: skyblue;
Position: absolute;
height: 100%;
width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#testing").animate({
width: 100%,
height: 100%
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<div id="testing">Testing</div>
</body>
</html>
It throws no error at all and doesn't perform the intended functionality.
https://jsfiddle.net/hafx8uaf/
$(document).ready(function() {
$("button").click(function() {
$("#testing").animate({
width: "0%",
height: "0%"
});
});
});
Here you have a working JsFiddle.
You need to set the width and height to "0%" in your JS if you want to hide the div when the button is clicked. if you animate to 100% there will be no effect as it is already at 100% in the CSS.
Looking at your CSS style, #testing already has a width of 100% and a height of 100%, so the code might well be working, it's just already at the end point of the animation.
Try updating your CSS to
<style>
#testing
{
background-color: skyblue;
Position: absolute;
height: 10%;
width: 10%;
}
</style>
And it will probably work.
EDIT: You would also need to add double quotes around your width/height conditions on .animate, so
width: "100%",
height: "100%"
Otherwise it will return a syntax error.
Related
I have a page with many images in divs and the layout looks good only in full size, when the browser window is smaller it's really messy. I found a similar question on stack overflow but their answers don't work for my case.
EDIT: I did everything what you guys advised but it still doesn't work.
<!DOCTYPE html>
<html>
<body background="">
<head>
<style>
div.asciigun {
top: 30%;
left: 50%;
position: absolute;
max-width: 100%;
}
</style>
</head>
<body>
<div class="asciigun">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU7ROirglSjKnpsLvt29uCDlVtpZutirtiXyg3FF0UtXFf0TnE" height="90%" width="90%" >
</div>
</body>
</html>
Let's try another approach. Try not to modify max-width or max-height. Just leave it as it is (or set width: 100% and height: 100%).
And then change <img src="url.jpg"> to background: url("url.jpg"); and then just do
.image {
background-size: cover;
}
or
.image {
background-size: contain;
}
Ok I figured it out! I needed viewport value instead of %. Now images go proportionally with browser size and stay in place.
div.asciigun {
position: absolute;
top: 30vw;
left: 74vw;
z-index: 1;
width: 30vw;
height: 15vw;
}
I just want to make a div below some fixed texts, and I want the div to fill exactly the height of the page, and I want it to work cross-browser... It is hard to believe how much work such a nature task requires.
I tried this code, which adjusts the height by jQuery. It works well in Chrome, but it does not work perfectly in Chrome: if we scroll down, we could see it does not automatically restore to the initial position.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<style>
body {
margin: 0
}
.rb .myME {
background: grey
}
</style>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
<script>
$(".myME").css({
height: (($(document).height()) - $(".top").height()) + 'px'
})
</script>
</body>
</html>
Does anyone have a perfect solution (CSS or jQuery) cross-browser?
for older and newer browsers , the display:table properties could match your requirement.
html,
body,
.rb {
margin: 0;
height: 100%;
}
.rb {
display: table;
width: 100%;
border-collapse: collapse;
}
.top, .myME {
display: table-row;
}
.buffer {
display: table-cell;
}
.top .buffer {
background: lightblue;
}
.myME .buffer {
background: tomato;
height:100%;
}
<div class="rb">
<div class="top">
<div class="buffer">
1<br/>2<br/>3<br/>4<br/>
</div>
</div>
<div class="myME">
<div class="buffer">
abc
</div>
</div>
</div>
the .buffer div is to make sure that each of your rows are made of a single cell to avoid layout to be split also in columns.
If you want to make that div under that text you need to do some css there you can find many tutorials because it is in basics:
Use position relative to parent div and position absolute to div that u want to move under text.
If you want to use full height you don't need jquery use VH - viewport height as height: 100vh; to have full height of any devices.
I am not sure does VH works everywhere but it does for me in chrome, fox, edge
By W3schools it works here: https://www.w3schools.com/cssref/css_units.asp
If top div is a fixed size ( just change size in both heights in top div and calc function ) you can try this :
body {
margin: 0
}
.rb {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
height: 100px;
}
.myME {
width: 100%;
height: calc( 100% - 100px);
background: grey;
}
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="rb">
<div class="top">1<br/>2<br/>3<br/>4<br/></div>
<div class="myME">abc</div>
</div>
</body>
</html>
I hope this helps you
I got an animation from here: http://codepen.io/jschr/pen/GaJCi
I am using it in my project.
#content {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
}
#animation {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: 600px;
left: 350px;
}
#animation2 {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: -25px;
left: 340px;
}
Inside the animation.css:
h1 {
position: absolute;
font: 12vmin/12vmin 'Special Elite', cursive;
left: 0;
top: 30%;
margin-top: -4vmin;
width: 100%;
text-align: center;
padding: 2vmin 0;
text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.5);
}
In the main html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="content">
<div id="animation"></div>
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
<div id="animation2"></div>
<script>
$("#animation2").html('<object data="./animation/animation2.htm">');
</script>
</div>
And the animations witch i load into te main html:
<head>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<link rel="stylesheet" href="animate.css" charset="utf-8" />
<link rel="stylesheet" href="animation.css" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.fittext.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<h1 class="tlt">Hello to my website and welcome</h1>
<script>
$('.tlt').textillate({
in: { effect: 'splat' },
out: { effect:'hinge', sync: true },
loop: true
});
</script>
</body>
The second animation looks almost same.
What i want is the ability to set the width, to be able to see the whole phrase with the font almost at 30px. The problem is, the first animation i am able to set the font at 8vmin while the second animation i come to 12vmin to get the phrases as one string. If i make it bigger, it will break to more strings or even cut the phrase, depends were i try to set the width. I saw the animation does inject spans into my html and they are width 300, while i need almost width 700. I was trying to find away online also tried to change my css with no result. I also tried to catch the span injection and make it larger, but not helped so fare. Still hope to find a solution to this. If someone knows how, please show me, thanks.
I found out, i can this:
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
simply to this:
<script>
$("#animation").html('<object width="600px" data="./animation/animation.htm">');
</script>
And this is how it worked for me, it increased the width inside the loaded object data, thanks anyway.
I have this code:
$('button').click(function(){
$('.slide').animate({
width: "450px";
display: block;
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"></div>
<button>Slide the div</button>
When I click on the button I want .slide to appear to the left like a slide.
I already put my width div at width: 0px. Then in jQuery this div would get width: 450px.
You had some syntax errors within the animate the ; should be a , and the button had no class so the click event was never executed. Also, you can't animate the display property.
Here's the updated snippet:
$('.open-menu').click(function(){
$('.slide').animate({
width: "450"
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"></div>
<button class="open-menu">Slide the div</button>
There are a few issues with your code:
Animate won't take care of the display property.
Click handler setup should be wrapped in the jQuery ready function.
Button needs the class open-menu.
Object properties in animate argument shouldn't end with semicolons.
See below for a working example.
$(function () {
$('.open-menu').click(function(){
$('.slide').animate({
width: "450px"
});
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="open-menu">Slide the div</button>
<div class="slide"></div>
I need some help with this project. I'm trying to get a picture as a background on a div element, that could be expanded and hid when clicked on. I don't know how to make the image a background for the div element, and I don't know how to make the div toggle from left to right.
I really appreciate any help. Thank you.
<html>
<body>
<div id="couch">Info about this couch</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="C:\Users\Jason\Desktop\CSS\HTMLBook/app.js" type="text/javascript" charset="utf-8"></script>
</html>
#couch {
height: 95px;
width: 65px;
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
}
Add this code to your page
<script>
$( "#couch" ).click(function() {
$( "#couch" ).toggle(1000);
});
</script>
test : http://jsfiddle.net/Ss86Q/1/
I have looked through your code and formatted it while also setting up a jfiddle. I hope this works and if not hopefully its a starting point. Please check my JSfiddle.
http://jsfiddle.net/jmcH8
$(document).ready(function(){
$("button").click(function(){
$("#couch").toggle('slow');
});
});
JSBIN DEMO
At first, the CSS
#couch {
height: 95px;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Now Jquery:
If you want to change the width:
$("#couch").click(function() {
$(this).toggleClass("big");
});
Add this to your css:
.big {
width: 400px !important;
}
If you want to hide the div itself
$("#couch").click(function() {
$(this).toggle();
});
In this example, if you toggle the div is hidden. How you want to restore it back.
I guess you are looking to collapse the div and expand it again.
In that case, change the height of the div based on click.
Hope its useful to you :)
Please try inserting the scripts inside the <head></head> tag
try this
html
<body>
<div id="couch" class="collapseRemoved">Info about this couch</div>
</body>
css
#couch {
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg") 100% 100%;
background-size:100%
}
.collapseRemoved{
width:200px;
height:100px;
}
.collapse{
width:100px;
}
js code
$("#couch").click(function(){
if($(this).hasClass("collapse")){
$(this).removeClass("collapse").addClass("collapseRemoved");
}else{
$(this).removeClass("collapseRemoved").addClass("collapse");
}
});