As I am increasing its width by 10%, it will apply suddenly, I want it to have some smooth movement.
var counter=0;
function moveBy10(x){
var width =10;
var bar = document.getElementById('bar');
counter++;
if(counter*x < 101){
bar.style.width = counter*x +'%';
}
}
#barHolder {
background-color: black;
width: 100%;
height: 80px;
}
#bar {
background-color: red;
width:5%;
height: 80px;
}
#by10 {
background-color: grey;
height: 40px;
width: 100px;
border-radius: 5px;
margin-top: 10px;
padding-top: 10px;
text-align: center;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Progress bar</title>
<link rel="stylesheet" type="text/css" href="bar.css">
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
<!--- progress bar container -->
<div id="barHolder">
<div id="bar"></div>
</div>
<div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div>
</body>
</html>
By adding to the desired element the property transition (in your case #bar), we can achieve the smoothing effect you seek for with CSS. That will result in a smoother experience, than accomplishing the same effect with Javascript.
transition: width 2s;
(Adds a smoothing of 2s for the transition of width)
CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.
Learn more about transitions.
But to fully answer the question to achieve the same results with JavaScript (only) i would use a timeout to step to small intervals of the real step (If we wanted to transition by 10% for 1 second i'd split it to 0.1 per 1%)
But i strongly advice to use the best technology for each solution and not try to achieve something with a specific technology without a really good reason.
I don't understand your question, because you do not this, but I understand you need this
var counter=0;
function moveBy10(x){
var width =10;
var bar = document.getElementById('bar');
counter++;
if(counter*x < 101){
bar.style.width = counter*x +'%';
}
}
#barHolder {
background-color: black;
width: 100%;
height: 80px;
}
#bar {
background-color: red;
width:5%;
height: 80px;
transition: width 2s; /* Add this */
}
#by10 {
background-color: grey;
height: 40px;
width: 100px;
border-radius: 5px;
margin-top: 10px;
padding-top: 10px;
text-align: center;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Progress bar</title>
<link rel="stylesheet" type="text/css" href="bar.css">
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
<!--- progress bar container -->
<div id="barHolder">
<div id="bar"></div>
</div>
<div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div>
</body>
</html>
Related
My goal is that the code in class = "nscr" is no longer affected by zooming. So if in the browser with CTRL and mouse wheel or on the mobile device by gesture, the zoom is changed, the menu should continue to be displayed as a zoom of 100%. The problem becomes clear with strong zoom. Then the menu takes up too much space on the display. Zooming should be done normally outside of class = "nscr". I do not want to use external libraries like jquery or bootstrap. All solutions using HTML, CSS and JavaScript are welcome. Does anyone have any idea how to solve this problem?
This is my code:
html,
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-size: 100%;
}
div.nscr {
width: 100%;
padding-left: 10%;
background: #FFFFFF;
color: #000000;
}
div.content {
box-shadow: 0em 0em 1.25em silver;
clear: left;
height: 93%;
overflow: auto;
background: #ffffff;
color: #000000;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width-device-width; initial-scale-1.0; maximum-scale-1.0; user-scalable-no" charset=UTF-8>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nscr">
<h1>Menu</h1>
</div>
<div class="content">
<p>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br> test
<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</p>
</div>
</body>
</html>
In my webpage I have accordion panels which collapse and close. I have set the page height to be specific. However, I want it to be specific from the start, but be able to expand when I open and close the panel, so that I don't have to set the page too be so long with no content. Any ideas about how I go about doing this?
This is only an example I used, which is the reason for the small height currently.
My Current Code:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta charset = "utf-8">
<title>London Tour Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="jquery.js"></script>
<style>
div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
background-color: white; }
div.content {
width: 700px; height: 120px;
background-color: lightblue; padding: 5px; }
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class = "content">
<button class="accordion">Panel</button>
<div class="panel">
Hello
</div>
<button class="accordion">Panel 2</button>
<div class="panel">
Hello
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</div>
</body>
</html>
If I understand correctly,
you're looking for min-height:1300px instead of height:1300px on div.container
The most robust way without the use of Javascript is to get rid of explicitly setting the height of your containers in CSS - that way the height is automatically going to conform to the total height of your child elements.
If your container is not absolutely positioned, I believe Vlad is Glad's answer with using the CSS property, min-height, will apply.
If your container must be absolutely positioned, you could grab the height of the expanded panel through jQuery in your onClick handler, and add/subtract the height to your container.
I read the W3Schools JavaScript Chapter and am trying to make an image slide. I did everything first and it works properly for the first round. For example lets say I click the next button it will keep sliding the slides till the end of the slideshow and then if I click once more it will reset every thing but never works after that. Also when I include the DocType deceleration it won't even work from the beginning.
Here is the HTML with CSS and JavaScript Code:
<html lang="en">
<head>
<title>
Project Name
</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
body
{
margin: 25px;
}
#slideshow
{
width : 300px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
}
#slides
{
position: relative;
width: 900px;
height: 300px;
transition: 1s;
}
.slide
{
width : 300px;
height: 300px;
float: left;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slides">
<img class ="slide" src="images/slide1.jpg">
<img class="slide" src="images/slide2.jpg">
<img class="slide" src="images/slide3.jpg">
</div>
</div>
<button onclick="prev()">prev</button>
<button onclick="next()">next</button>
<script type="text/javascript">
var value = 300;
function next()
{
var slider = document.getElementById("slides");
if(value == 900)
{
slider.style.left = "0";
value = 300;
}
else
{
slider.style.right = value;
value += 300;
}
}
</script>
</body>
Hardcoding JS values is bad practice.
One day you'll change the slider width in CSS and wonder what's going on with the JS part...
make it responsive
calculate dynamically the number of slides with JS
create a counter variable c=0
prev/next manipulate your counter value (loop using %)
tranistion-animate to -100*c in percentage %
var slider = document.getElementById("slides"),
slide = slider.querySelectorAll(".slide"),
tot = slide.length, c = 0;
function anim() {
c = c<0 ? tot-1 : c%tot;
slider.style.left= -100*c +"%";
}anim();
function next() { ++c; anim(); }
function prev() { --c; anim(); }
#slideshow {
height: 150px;
border: 1px solid #000;
overflow:hidden;
}
#slides {
position: relative;
height: 100%;
width: 100%;
white-space:nowrap;
font-size:0; /* removes 4px inline-block gap */
transition: 1s; -webkit-transition: 1s;
}
.slide {
font-size: 1rem; /* restore font size */
display:inline-block;
vertical-align:top;
width : 100%;
height: 100%;
background: none 50%;
background-size: cover;
}
<div id="slideshow">
<div id="slides">
<div class="slide"
style="background-image:url(http://placehold.it/800x600/0fb);"></div>
<div class="slide"
style="background-image:url(http://placehold.it/800x600/bf0);"></div>
<div class="slide"
style="background-image:url(http://placehold.it/800x600/f0b);"></div>
</div>
</div>
<button onclick="prev()">prev</button>
<button onclick="next()">next</button>
Now that your slider is responsive, put into any container and it's width will accommodate.
You must set back the right property to 0 once you finish one round. In your code you are setting left as 0 but your right still remains 900 . This is the problem, So change your code to set right to 0
if(value == 900)
{
slider.style.right = "0";
value = 300;
}
I am learning jQuery, and I've written a simple script that is intended to add (or remove) a class when a mouse enters (or leaves) a div. The new class adds a different height and is also supposed to change the background color and opacity of the entered div.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
margin: 20px;
float: left;
}
#one {
background-color: red;
}
#two {
background-color: green;
}
#three {
background-color: blue;
}
.change {
height: 150px;
background-color: rgba(0,0,0,0.4);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script type="text/javascript">
$(document).ready(function () {
$("div").mouseenter(function () {
$(this).addClass("change");
});
$("div").mouseleave(function () {
$(this).removeClass("change");
});
});
</script>
</body>
</html>
While the height changes, there's no effect on the background-color property. Why is that so?
I've checked out the .mouseenter(), .mouseleave() and the .addClass() API documentation, but couldn't find anything specific to this problem.
Your javaScript code is 100% fine. The problem is in CSS You have written. Selection by id #one is more important than classname .one, so when you apply some #rules and .rules to the emenet at the same time, browser will chose the first ones as more important. If You can, try not to use #id selectors at all in css and leave it for javaScript usage.
css:
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
html:
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
demo: https://jsfiddle.net/cz8v1gy4/
Edited answer after a re-read:
You're running in to CSS specificity issues. IDs are more specific than classes, which means that your background color is going to stay the color of the ID and not the class. This is one reason why it's (often) recommended to not use IDs in CSS.
If you change everything over to classes it will work how you're expecting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
margin: 20px;
float: left;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.change {
height: 150px;
background-color: rgba(0,0,0,0.4);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<script type="text/javascript">
$(document).ready(function () {
$("div").mouseenter(function () {
$(this).addClass("change");
});
$("div").mouseleave(function () {
$(this).removeClass("change");
});
});
</script>
</body>
</html>
Try utilizing css selectors #one:hover, #two:hover, #three:hover , :hover pseudo-class, transition . See also Specificity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing jQuery</title>
<style type="text/css">
div {
width: 400px;
height: 300px;
margin: 20px;
float: left;
}
#one {
background-color: red;
}
#two {
background-color: green;
}
#three {
background-color: blue;
}
#one:hover, #two:hover, #three:hover {
height: 150px;
background-color:rgba(0,0,0,0.4);
transition: height 1000ms, background-color 1000ms;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
There are some good answers here and explanations why it's not working, but it looks like no one has answered how to do what it seems like your intent was.
Which was to add the two background colors together to get a darker color on hover. You can get around it changing it to a grey by adding something else in.
For example:
.change {
height: 150px;
background-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 100%)!important;
}
This puts a solid color gradient in as the background image which layers on top of the background color.
Like This JSFiddle
When you hover over div#one it becomes div#one.changed. Now with regard to background color you have two competing values:
#one {
background-color: red;
}
And:
.change {
background-color: rgba(0,0,0,0.4);
}
The first one wins, because it is more specific.
To get around this use
.change {
height: 150px;
background-color: rgba(0,0,0,0.4)!important;
}
I'm trying to put together a site that has a welcome-type screen followed by a header/navigation that scrolls to the top of the page and is then fixed, remaining at the top of the page as the user scrolls on. The solution I have works in most browsers, except in the desktop touch version of Chrome I can't stop the header/nav from bouncing around once it reaches the top. I've looked at at least 10 Stack Overflow questions that address this problem, and I've tried a lot of different tutorials and plugins but none of them seem to work for me. I know it's possible because the technique appears on http://laravel.com, and the header/nav is ROCK-SOLID when it reaches the top and becomes fixed. This is what I have now:
html {
height: 100%; }
body {
height: 100%; }
#welcome {
background-color: grey;
height: 100%; }
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: absolute;
width: 100%; }
#header.fixed {
position: fixed;
top: 0;
width: 100%; }
#nav {
position: absolute;
bottom: 30px;
right: 2%; }
#nav a {
color: black;
letter-spacing: 1px;
line-height: 1.25em;
padding-left: 17px;
text-decoration: none;
text-rendering: optimizelegibility;
text-transform: uppercase; }
#about {
height: 2000px; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="welcome"></section>
<header id="header" class="container">
<nav id="nav">
One
Two
Three
Four
</nav>
</header>
<main>
<section id="about" class="container">
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
$('#header').toggleClass("fixed", top >= viewport);
});
});
</script>
</body>
May be jquery toggle make it.
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
if (top >= viewport ) {
$('#header').addClass("fixed");
} else if ($('#header').hasClass('fixed')) {
$('#header').removeClass('fixed')}
});
});
http://jsfiddle.net/molo4nik11/zvom6o5w/
I think this is working solution.
http://jsfiddle.net/molo4nik11/zvom6o5w/3/
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: relative;
width: 100%;
}
#header.fixed {
position: fixed;
top: 0;
width: 100%;
}
It has been a long time, and this is no longer an issue, but at the time chrome was not able to keep this header in place without it appearing "jumpy". I was able to fix it by adding
-webkit-transform: translateZ(0);
to the .fixed class. Although this didn't have any bearing on the visual styles that were applied, using the transform property would cause chrome to treat it as a 3d element and devote more resources to it.
As I mentioned before, this doesn't seem to be an issue anymore, and I have since been able to remove this hack without the old problem recurring.