I can't figure out whats wrong with it.. it worked fine before, I don't now what I changed to make it break.. The jQuery should be correct and the cdn works as well..
check my pen: http://codepen.io/mathiasvanderbrempt/pen/oXMJRr
HTML:
<div class="header">
<p class="covertxt">INTERIEURINRICHTING <br> & SCHRIJNWERKERIJ</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
CSS:
.header {
background:#333;
z-index: 5;
margin: 0 auto;
width: 80%;
max-width: 500px;
top: 30vh;
/*absolute centering*/
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #fff;
}
.header img {
width:100%;
}
.header p {
font-size: 22px;
font-family: montserratlight;
letter-spacing: 0.4em;
line-height: 1.3em;
text-transform: capitalize!important;
cursor: default;
text-align: center;
-webkit-transition: all 1.25s ease-in-out;
-moz-transition: all 1.25s ease-in-out;
-ms-transition: all 1.25s ease-in-out;
-o-transition: all 1.25s ease-in-out;
transition: all 1.25s ease-in-out;
}
jQuery:
$(document).ready(function() {
var delay = 3000; //3 seconds
setTimeout(function() {
$('.header p').fadeOut(300, function() {
$(this).text("A LIFESTYLE FOR EVERYONE").fadeIn(300);
});
}, delay);
console.log("replaced");
});
I'm not entirely sure what you're trying to do but commenting out all the xxx-transition properties makes the text fade.
See corrected pen
Related
How can I animate a height change after changing the height with javascript?
Do you can use Tranform scale and transition, in this case scaleY(). See an example:
<!DOCTYPE html>
<html>
<head>
<style>
html {
text-align: center;
font-size: 14px;
}
body {
font-size: 1.6rem;
}
h1 {
font-size: 4rem;
line-height: 5rem;
margin: 4rem;
}
.container {
margin: 4rem auto;
width: 90%;
max-width: 60rem;
}
p {
line-height: 2.2rem;
}
p:not {
margin-bottom: 2rem;
}
.btn {
bg: #09c;
background: #09c;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 1.4rem;
padding: 1.5rem 3rem;
transition: background .2s;
width: 100%;
}
.btn:hover, .btn:focus {
background: darken(bg, 15%);
}
.btn:in {
background: darken(bg, 50%);
}
.box {
background: #e5e5e5 ;
margin-left: auto;
margin-right: auto;
padding: 3rem;
text-align: left;
transform: scaleY(0);
transition: transform .3s;
transform-origin: top left;
}
.box.in {
transform: scaleY(1);
}
</style>
</head>
<body>
<h1>Animated height with CSS transitions</h1>
<div class='container'>
<button class='btn'>Click me</button>
<div class='box'>
<p>
Some text here!
</p>
</div>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function (event) {
event.currentTarget.classList.toggle('in')
document.querySelector('.box')
.classList.toggle('in')
})
</script>
<body>
<html>
Example without JS
<div class="accordion">
Hover for height animate
<div class="accordion-content">
<div class="accordion-inner">
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
body{
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.accordion{
display: inline-block;
text-align: left;
margin: 1%;
width: 70%;
&:hover{
// max-height technique
.accordion-content{
// If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and we can use "max-height" with a great value for emulate this effect.
max-height: 300px;
}
}
}
.accordion-content{
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
// "height: 0" not work with css transitions
max-height: 0;
}
.accordion-inner{
padding: 0 15px;
}
.accordion-toggle{
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #fff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: center;
text-decoration: none;
&:hover{
background: darken(#00b8c9, 15%);
}
}
Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3
The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
var dv = document.getElementById("dd");
var item = dv.getElementsByTagName("A");
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px");
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:
$("#btn").on("click", function() {
$("#dd").toggleClass("show");
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
top: 10px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
max-height: 225px;
}
#dd.show:hover {
border-radius: 37.5px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)
You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)
at the time that this line executes:
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")
you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element
<div id="dd">...</div>
doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.
This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying
#dd.show {
max-height: 225px;
}
then I'd just do that.
If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.
console.log($("#dd").hasClass('show'));
I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3
Here is the final code for people that might come in later to see the solution :3
$("#btn").on("click", function() {
if(!$("#dd").hasClass("show")) {
$("#dd").toggleClass("show");
$("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px");
} else {
$("#dd").toggleClass("show");
$("#dd").css("max-height", "0px");
}
});
body {
margin: 10px;
}
#btn {
background-color: red;
color: black;
border: none;
outline: none;
width: 100px;
height: 100px;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#btn:hover {
background-color: black;
color: white;
border-radius: 52.5px;
}
#dd {
opacity: 0;
max-height: 0;
width: 200px;
position: relative;
overflow: hidden;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
#dd.show {
opacity: 1;
}
#dd.show:hover {
border-radius: 15px;
}
#dd a {
background-color: red;
color: black;
padding: 16px 16px;
text-align: center;
text-decoration: none;
display: block;
font-size: 20px;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
#dd a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">press me</button>
<div id="dd">
press me 1
press me 2
press me 3
press me 4
</div>
I pretty new in CSS/Javascript and i'm trying to do an animation where i'm zooming out in a photo and adding a text, it's basically working but i have a glitch at the beginning that i don't understand how to get rid of it...
You can also find this code on CodePen.io or GitHub Gist
I hope my description is clear enough, thanks in advance for any input !
var x = document.getElementById("img_txt");
// if (x) {
x.addEventListener("mouseover", func, false);
x.addEventListener("mouseout", func1, false);
// }
function func()
{
document.getElementById("toto").setAttribute("style", "display:block;")
}
function func1()
{
document.getElementById("toto").setAttribute("style", "display:none;")
}
.voyages {
height: 400px;
width: 100%;
margin: 0 auto;
padding: 20px 0px 10px 0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
img.imgvyge {
border-radius: 50%;
object-fit: cover;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
margin: auto 30px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.imgvyge:hover {
width: 400px;
height:400px;
}
p.text {
display: none;
z-index:100;
position:relative;
color:black;
font-size:24px;
font-weight:bold;
left:130px;
bottom:160px;
/*-webkit-transition: all 0.7s ease;*/
transition: all 0.7s ease;
}
<section class="voyages">
<a id="img_txt" class="anchorvyge" href="#">
<img class="imgvyge" src="https://unsplash.it/1600/900/?random" alt="vyge1"></img>
<p id="toto" class="text">YOPYOP</p>
</a>
</section>
I think your height is making the problem and you talked about this glitch that image jumped at the first place when you hover the mouse.just Make it 100% .hope it helps.
var x = document.getElementById("img_txt");
// if (x) {
x.addEventListener("mouseover", func, false);
x.addEventListener("mouseout", func1, false);
// }
function func()
{
document.getElementById("toto").setAttribute("style", "display:block;")
}
function func1()
{
document.getElementById("toto").setAttribute("style", "display:none;")
}
.voyages {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 20px 0px 10px 0px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
img.imgvyge {
border-radius: 50%;
object-fit: cover;
width: 300px;
height: 300px;
justify-content: center;
align-items: center;
margin: auto 30px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.imgvyge:hover {
width: 400px;
height:400px;
}
p.text {
display: none;
z-index:100;
position:relative;
color:black;
font-size:24px;
font-weight:bold;
left:130px;
bottom:160px;
/*-webkit-transition: all 0.7s ease;*/
transition: all 0.7s ease;
}
<body>
<section class="voyages">
<a id="img_txt" class="anchorvyge" href="#">
<img class="imgvyge" src="https://unsplash.it/1600/900/?random" alt="vyge1"></img>
<p id="toto" class="text">YOPYOP</p>
</a>
</section>
</body>
I'm implementing this codepen I found for a file upload function. It works fine on codepen, however when I actually put it into my own html/css/js setup the file does not upload. I get no file name showing after a file has been selected.
Here is the code from codepen:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="file-upload">
<div class="file-select">
<div class="file-select-button" id="fileName">Choose File</div>
<div class="file-select-name" id="noFile">No file chosen...</div>
<input type="file" name="chooseFile" id="chooseFile">
</div>
</div>
CSS
body
{
background-color: black;
}
.file-upload
{
width: 400px;
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
text-align: center;
}
.file-upload .file-select
{
background: #FFFFFF;
border: 2px solid #dce4ec;
color: #34495e;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
overflow: hidden;
position: relative;
text-align: left;
}
.file-upload .file-select .file-select-button
{
background: #dce4ec;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select .file-select-name
{
display: inline-block;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select:hover
{
border-color: #34495e;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select:hover .file-select-button
{
background: #34495e;
color: #FFFFFF;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select
{
border-color: #3fa46a;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload.active .file-select .file-select-button
{
background: #3fa46a;
color: #FFFFFF;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.file-upload .file-select input[type=file]
{
cursor: pointer;
filter: alpha(opacity=0);
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
.file-upload .file-select.file-select-disabled
{
opacity: 0.65;
}
.file-upload .file-select.file-select-disabled:hover
{
background: #FFFFFF;
border: 2px solid #dce4ec;
color: #34495e;
cursor: default;
cursor: pointer;
display: block;
height: 40px;
line-height: 40px;
margin-top: 5px;
overflow: hidden;
position: relative;
text-align: left;
}
.file-upload .file-select.file-select-disabled:hover .file-select-button
{
background: #dce4ec;
color: #666666;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}
.file-upload .file-select.file-select-disabled:hover .file-select-name
{
display: inline-block;
line-height: 40px;
padding: 0 10px;
}
JS
$('#chooseFile').bind('change', function () {
var filename = $("#chooseFile").val();
if (/^\s*$/.test(filename)) {
$(".file-upload").removeClass('active');
$("#noFile").text("No file chosen...");
}
else {
$(".file-upload").addClass('active');
$("#noFile").text(filename.replace("C:\\fakepath\\", ""));
}
});
I've pasted the exact same code into my html and tried linking the javascript in both head and body. Also tried putting jquery cdn in both head and body. No success.
Any help would be much appreciated. Thanks.
******UPDATE******
Thanks for the suggestions guys. I actually tried the it with the CSS turned off and it works fine, which tells me it's nothing to do with the JS. So follow up question, what is it about this CSS that's stopping it from displaying the uploaded file?
You can open up the JavaScript tools in your browser and set a breakpoint on this line:
if (/^\s*$/.test(filename)) {
Then when the code runs you can see what value 'filename' has and figure out why the regular expression fails, and what it should be. The regexp you have there looks like it is checking for "a string that starts and ends with 0 or more spaces", so maybe you'll need to check for "filename.length == 0" or "filename === undefined".
You can debug the code in your destination website, but also within Codepen. It's a little tricky but can inspect your code running inside the pen to get a value for comparison.
If you still need help, please write back with the value of "filename" from your debugger sessions.
Debugging JS in Chrome tutorial.
Maybe it don't works in your html site, because the javascript will be executed too early. Wrap your js code into:
$(document).ready(function() {
// Put code here
});
This worked for me
$(document).ready(function () {
$("#chooseFile").change(function () {
//your code here
});
});
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
opacity:1;
}
This is css for my hover over image and text appreance.
http://jsfiddle.net/LbLHc/
here is what i have. How do i put the text inside of my image when i hover over?
thank you
Here is solution for you problem.
Html Code
<div class="row">
<div class="relative imgContainer">
<a href="works/nytimes/nytimes.html">
<span class="text">NY times magazine: Table of Contents</span>
<img src="http://placehold.it/500x200" class="img-responsive" />
</a>
</div>
<div class="relative imgContainer">
<span class="text">Eloquence Magazine</span>
<img src="http://placehold.it/700x500"class="img-responsive" />
</div>
</div>
**Css Code**
.imgContainer:hover .text{
display:block;
opacity:1;
}
.relative{
position: relative;
}
.imgContainer{
height: 250px;
width: 400px;
margin-bottom: 20px;
}
img{
height: 250px;
width: 400px;
}
.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
display:none;
width: 100%;
height:100%;
text-align: center;
top:0; left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.text:hover {
display:block;
opacity:1;
}
FiddleLink
http://jsfiddle.net/anu1718/Y2AYj/
If I understand it correctly, you want to hide the text by default, and only show it when hovering over the image. IF you want to use just simple CSS for that, you need to have a common container for the image and the text (the latter one being absolutely positioned and hidden), and add a CSS rule targeting the :hover state of the container to show the text.
In your code I added a class (fadingtext) to the container:
<div class="row">
<div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
<span class="text">Title</span>
<img src="http://placehold.it/500x200" class="img-responsive"/>
</a>
</div>
<div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>
<img src="http://placehold.it/700x500" class="img-responsive" />
</div>
</div>
And here is your CSS with the fixed selectors:
.fadingtext .text {
position: absolute;
font-family:"courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255, 255, 255, 0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0;
left:0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.fadingtext:hover .text {
opacity:1;
}
Here is a modified version of your jsfiddle:
http://jsfiddle.net/Rws85/2/