I have a problem doing a transition, the div that contains the image should be going from "right: 200px;" to "400px" making the transition in 2s and the transition should start when the image is loaded in the document, here is the css code:
div.contenedor {
width: 300px;
height: 257px;
position: fixed;
right: 200px;
bottom: 0px;
z-index: 100;
-webkit-transition: right 2s;
-moz-transition: right 2s;
transition: right 2s;
}
and here the js code:
function transi() {
var id = "L" + Math.floor(Math.random() * 10000);
function open() {
var eOpen = document.getElementById(id + "_container");
eOpen.style.right = "400px";
};
var dContenedor = document.createElement("div");
dContenedor.id = id + "_container";
dContenedor.className = "contenedor";
var ima = document.createElement("img");
ima.src = "XXXX.jpg";
ima.width = "300";
ima.height = "250";
dContenedor.appendChild(ima);
document.onreadystatechange = function(){
var rsw = this.readyState;
console.log(rsw);
if (rsw) if (rsw != 'complete') if (rsw != 'loaded') {return;}
document.body.appendChild(dContenedor);
console.log(ima.complete);
if (ima.complete) {
open();
};
}
};
transi();
For some reason is not making the transition, and the div is going direct to "400px", if someone have some ideas i would apreciate it, thank you in avance
Maybe call function on load event of image?
UPD
Added work example
function transi() {
var id = "L" + Math.floor(Math.random() * 10000);
var dContenedor = document.createElement("div");
dContenedor.id = id + "_container";
dContenedor.className = "contenedor";
function open() {
// we already have ref to needed element
dContenedor.style.right = "400px";
};
var ima = document.createElement("img");
ima.width = "300";
ima.height = "250";
dContenedor.appendChild(ima);
document.body.appendChild(dContenedor);
// when image is loaded fire event
ima.onload = function() {
open();
}
ima.src = "https://v1.std3.ru/32/9b/1455811008-329b55c554efcec3988dc8ab44eb972f.jpeg";
};
transi();
div.contenedor {
width: 300px;
height: 257px;
position: fixed;
right: 200px;
bottom: 0px;
z-index: 100;
-webkit-transition: right 2s;
-moz-transition: right 2s;
transition: right 2s;
background: #333;
}
Related
Looking for a way to change link colour in JavaScript within a specific ID on scroll.
That's my CSS.
#header_nav {
transition: 0.4s;
position: fixed;
top: 0;
height: 130px;
}
#main-logo {
transition: 0.4s;
height: 52px;
width: 169.92px;
}
#main-nav a{
color: #f3f5f6;
transition: 0.4s;
}
And here is the JavaScript
function scrollFunction() {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
document.getElementById("header_nav").style.height = "70px";
document.getElementById("main-logo").style.width = "118.944px";
document.getElementById("main-logo").style.height = "36.4px";
document.getElementById("main-logo").style.filter = "invert(0)";
document.getElementById("header_nav").style.backgroundColor = "#F1F1F3";
document.getElementById("logo").style.fontSize = "25px";
document.getElementById("main-nav a").style.color = "#223732";
} else {
document.getElementById("header_nav").style.height = "130px";
document.getElementById("header_nav").style.backgroundColor = "transparent";
document.getElementById("main-logo").style.filter = "invert(1)";
document.getElementById("main-logo").style.width = "169.92px";
document.getElementById("main-logo").style.height = "52px";
document.getElementById("logo").style.fontSize = "35px";
document.querySelectorAll(".main-nav a").style.color = "#f3f5f6";
}
}
You can see where I have the code that doesn't work:
document.getElementById("main-nav a").style.color = "#223732";
Is there a way I can select just the link in javascript D from that id as I have it in CSS?
You can first select the main-nav by id and then it's children by tag name, something like:
var mainNav = document.getElementById("main-nav");
mainNav.getElementsByTagName("a")[0].style.color = "#223732";
Not that getElementsByTagName() returns an array with all elements of that tag.
I am learning JS and have created a carousel with a caption underneath.
How do I get the Prev/Next buttons to affect the caption as well as the image? I've tried combining the if statements in several ways but have failed miserably.
Relevant HTML:
<span id="prev" class="arrow">❮</span>
<div class="karussell" id="karussell">
<img class="karu" name="esislaid">
</div>
<span id="next" class="arrow">❯</span>
<div class="caption">
<h3 id="esikiri"></h3>
</div>
JS:
var p = 0;
var s = 0;
var esileht = [];
var aeg = 5000;
var kiri = [];
//Image List
esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';
//Captions
kiri[0] = 'Raamat "Tallinn. Graafiline vanalinn"';
kiri[1] = 'Tallinna vanalinna graafiline kaart (suur formaat)';
kiri[2] = 'Tallinna vanalinna graafiline kaart (väike formaat)';
// Left and Right arrows
//Eelmine
function eelmine(){
if (p === 0){
p = esileht.length;
}
p = p - 1;
return esileht[p];
}
//Jargmine
function jargmine(){
p = p + 1;
p = p % esileht.length;
return esileht[p];
}
document.getElementById('prev').addEventListener('click', function (e){
document.querySelector('#karussell img').src = eelmine();
}
);
document.getElementById('next').addEventListener('click', function (e) {
document.querySelector('#karussell img').src = jargmine();
}
);
//Change Image
function changePilt (){
document.esislaid.src = esileht[p];
if(p < esileht.length -1){
p++;
} else {
p = 0;
}
setTimeout("changePilt()", aeg);
}
//Change Caption
function changeKiri(){
document.getElementById('esikiri').innerHTML = kiri[s];
if(s < kiri.length - 1){
s++;
}
else {
s = 0;
}
setTimeout('changeKiri()', aeg);
}
document.body.onload = function(){
changePilt();
changeKiri();
};
CSS, just in case:
.karussell {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.arrow {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
color: #00A7E0;
padding: 16px;
font-weight: bold;
font-size: 18px;
border-radius: 3px;
transition: 0.6s ease;
}
#next {
right: 0;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(0,0,0,0.8);
}
.caption {
text-align: center;
color: #00A7E0;
padding: 2px 16px;
}
.karu {
max-width: 75%;
animation-name: fade;
animation-duration: 2s;
}
#keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
#media (max-width:767px){.karu{max-width: 95%;}}
I made a fiddle to try to illustrate (had to paste the js into the html tab to gt it to work for some reason): Fiddle
Really you just need to use the .innerHTML() feature and do exactly what you already have. Either create a eelmine2() function (or something like that) and call it again, grabbing the content from kiri[] or instead just return the p and use it in two places:
document.getElementById('prev').addEventListener('click', function (e){
document.querySelector('#karussell img').src = eelmine();
document.querySelector('#esikiri').innerHTML = eelmine2();
});
function eelmine2(){
if (p === 0){
p = kiri.length;
}
p = p - 1;
return kiri[p];
}
or
document.getElementById('prev').addEventListener('click', function (e){
var change = eelmine();
document.querySelector('#karussell img').src = esileht[change];
document.querySelector('#esikiri').innerHTML = kiri[change];
});
function eelmine(){
if (p === 0){
p = kiri.length;
}
p = p - 1;
return p;
}
This assumes your code is using the same global vars inside public functions that you have set up in your Fiddle. You should fix that to have variables passed into the functions before going live with all of this, but I'm not addressing that any further here.
I have a strange problem. I have digged up this code snippet that allows a text row to be animated left and then repeated infinitely. While this works perfectly. I'd like to have all the rows to be animated on body load but much slower. And then when you mouseover on each of the rows the animation picks up more speed.
https://codepen.io/umbriel/pen/RjYqRR
So far I've tried stuff like looping each of the questions and then running the animation. But it still only grabbed one of the divs and animated it.
var el_text = questions[i].querySelectorAll('.intro-question-text');
for (var i = 0; i < el_text.length; i++) {
el_text[i].style.transform = 'translate3d(' + qScrollPositions[i] + 'px,0,0)'
}
Any pointers? Thank you so much!
You can get it to do what you want by using the setInterval function (and swapping it out to a quicker one when the user hovers over the element).
var textCopy = document.querySelectorAll('.intro-question-text')
for (var i = 0; i < textCopy.length; i++) {
var text = textCopy[i].innerHTML.repeat(5)
textCopy[i].insertAdjacentHTML('beforeend', text)
}
var WIN_H,
WIN_W,
qFrame = [];
var questions = document.querySelectorAll('.intro-question');
var scrollRequest;
var qScrollPositions = [];
var passiveRepeaters = [];
var repeater;
function initIntroScript() {
Array.prototype.map.call(questions, function(q, i) {
addImageHover(i);
})
window.addEventListener('resize', resizeHandler);
resizeHandler();
}
function addImageHover(i) {
qFrame[i] = 0;
qScrollPositions[i] = Math.floor(Math.random() * -200);
questions[i].querySelector('.intro-question-text').style.transform = 'translate3d(' + qScrollPositions[i] + 'px,0,0)';
questions[i].addEventListener('mouseenter', function() {
//console.log("mouseenter -> " + i);
clearInterval(passiveRepeaters[i]);
repeater = setInterval(function() {
scrollQuestionText(i);
}, 10);
});
questions[i].addEventListener('mouseleave', function() {
//console.log("mouseleave -> " + i);
clearInterval(repeater);
passiveRepeaters[i] = setInterval(function() {
scrollQuestionText(i);
}, 20);
});
passiveRepeaters[i] = setInterval(function() {
scrollQuestionText(i);
}, 20);
}
function scrollQuestionText(i) {
var shift = Math.floor(4 + WIN_W/800) * Math.min(0.2, qFrame[i] / 20);
cancelAnimationFrame(scrollRequest);
var el_text = questions[i].querySelector('.intro-question-text');
qScrollPositions[i] = qScrollPositions[i] - shift;
if (qScrollPositions[i] < -el_text.clientWidth / 2 - 5) {
qScrollPositions[i] = 0;
}
el_text.style.transform = 'translate3d(' + qScrollPositions[i] + 'px,0,0)'
qFrame[i]++;
}
initIntroScript();
function resizeHandler() { // NEEDS TO NOT BREAK ON RESIZE
WIN_W = window.innerWidth;
WIN_H = window.innerHeight;
}
body {
font-family: sans-serif;
font-size:4rem;
}
.intro-question {
position: relative;
color: #000000;
cursor: pointer;
transition: .3s;
white-space: nowrap;
padding: 0;
backface-visibility: hidden;
will-change: transform, color, background;
flex-shrink: 2;
/* opacity: 0; */
transition: opacity .5s, transform 1s ease-out;
z-index: 2;
}
.intro-question-text {
backface-visibility: hidden;
will-change: transform;
position: relative;
display: inline-block;
transition: .5s opacity;
}
<div class="intro-questions">
<div class="intro-question">
<div class="intro-question-text white">
Testing content in here
</div>
</div>
<div class="intro-question">
<div class="intro-question-text white">
Content testing
</div>
</div>
<div class="intro-question">
<div class="intro-question-text white">
Content stackoverflow please
</div>
</div>
</div>
edit
You can increase the framerate by reducing the interval between the function calls, for example
questions[i].addEventListener('mouseenter', function() {
//console.log("mouseenter -> " + i);
clearInterval(passiveRepeaters[i]);
repeater = setInterval(function() {
scrollQuestionText(i);
}, 10);
});
questions[i].addEventListener('mouseleave', function() {
//console.log("mouseleave -> " + i);
clearInterval(repeater);
passiveRepeaters[i] = setInterval(function() {
scrollQuestionText(i);
}, 20);
});
passiveRepeaters[i] = setInterval(function() {
scrollQuestionText(i);
}, 20);
if you do this and don't want the scrolling to speed up you can decrease the step size like this
var shift = Math.floor(4 + WIN_W/800) * Math.min(0.2, qFrame[i] / 10);
I have the following hacked code to fadein text and fadeout an image on hover. I want to repeat this affect on a second image/div but I can't get it to work. i tried copying all the scripting and changing the variable names (i.e. img2 instead of img1 etc.) and I tried adding multiple handlers to the existing code but it doesn't work. Only one image will fade while the other one does not. Please help. If it is not abdunantly clear, I am a Jquery wannabe who has some HTMl skills and a rudimentary understanding of programming. Thanks
<style type="text/css">
#imgContainer {
position: relative;
}
#img1 {
opacity: 100;
filter:alpha(opacity=100);
position: relative;
top: 0px;
left: 0px;
}
#imgContainer div {
position: absolute;
top: 20px;
left: 60px;`enter code here`
}
</style>
<script type="text/javascript">
var speed = 0.8;
var fadeTimerImg, fadeTimerTxt;
function fade(obj,dir){
if(fadeTimerImg){clearInterval(fadeTimerImg);}
if(fadeTimerTxt){clearInterval(fadeTimerTxt);}
fadeTimerImg = setInterval(function(){setOpacity(obj,dir)},100);
fadeTimerTxt = setInterval(function(){setOpacity(oTxtContainer,-dir)},100);
}
function setOpacity(obj,dir) {
obj.curOpac = obj.curOpac + (speed * dir);
if(obj.curOpac < 0){obj.curOpac = 0;}
if(obj.curOpac > 10){obj.curOpac = 10;}
if(typeof(obj.style.opacity) == 'string'){
obj.style.opacity = obj.curOpac/10;
} else {
obj.style.filter = 'alpha(opacity=' + obj.curOpac*10 + ')';
}
}
window.onload=function(){
var oImg1 = document.getElementById('img1');
oImg1.curOpac = 10; //10 = opaque
oTxtContainer = document.getElementById('txtContainer');
oTxtContainer.curOpac = 0; //0 = transparent
oImg1.onmouseover = function(){fade(this,-1);}
oImg1.onmouseout = function(){fade(this,1);}
}
</script>
<div id="imgContainer">
<div id="txtContainer">
s`enter code here`ome text<br />
more text <br />
some more text
</div>
<img id="img1" src="FRY751_A.jpg">
</div>
Add the same class to each image, and do this, for example:
window.onload=function(){
var $images = $('.my-image-class');
$images.each(function() {
$(this).curOpac = 10; //10 = opaque
$(this).onmouseover = function(){fade(this,-1);}
$(this).onmouseout = function(){fade(this,1);}
});
}
I am trying to create something similar.
http://codepen.io/eka0210/pen/rjalx
Does anyone know what kind of jQuery plugin has been used in it.
It seems pretty straight forward and I can't seem to figure it out. Right now I'm using this for plugin
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
and the given js code in addition to that.
My problem is that I can't seem to make it animate to the other page.
Thanks for the response.
The animation is done via css translate , and little script controls behaviour during animation that is all , no plugins are used !
css:
html {
overflow-y: hidden;
}
html, body, #wrapper {
height: 100%;
width: 100%;
margin: 0;
}
nav {
position: fixed;
z-index: 100;
}
.main-container {
position: relative;
width: 100%;
height: 100%;
}
#wrapper {
position: absolute;
top: 0;
-webkit-transition: -webkit-transform 1.5s cubic-bezier(.8,0,.2,1);
}
.slide0 {-webkit-transform: translateY(0%);}
.slide1 {-webkit-transform: translateY(-100%);}
.slide2 {-webkit-transform: translateY(-200%);}
.slide3 {-webkit-transform: translateY(-300%);}
.slide4 {-webkit-transform: translateY(-400%);}
JS:
var slider = $('.slider'),
wrapper = $('#wrapper'),
animating = false,
current = 0,
lengthDiv = slider.length,
delay = 1500;
slider.on('click', function(e){
var anchor = $(this);
if(!animating){
animating = true;
current = anchor.parent().index();
wrapper.removeClass().addClass('slide'+current);
setTimeout(function(){
animating = false;
}, delay);
e.preventDefault();
}
});
$(document).keydown(function(e){var key = e.keyCode;if(key == 38 || key == 40)e.preventDefault();});
$(document).keyup(function(e){
if(!animating){
var key = e.keyCode;
if(key == 38 && current > 0){
$(slider[current - 1]).trigger('click');
}else if(key == 40 && current < lengthDiv - 1){
$(slider[current + 1]).trigger('click');
}
}
});
$(document).mousewheel(function(e, deltaY){
if(!animating){
if(deltaY > 0 && current > 0){
$(slider[current - 1]).trigger('click');
}else if(deltaY < 0 && current < lengthDiv - 1){
$(slider[current + 1]).trigger('click');
}
}
return false;
});