After launching program all works fine, until i test javascript code, when i press button: one, css hover stop working with picture: one, animation when click and if I point at the object . Works only object position in css. Im also using eel in python to open app window.
Python
import eel
eel.init("web")
eel.start("main.html", size=(284, 490))
HTML
<script type="text/javascript">
const buttons = {
49: 'one'
};
document.onkeypress = function(evt) {
console.log("Pressed")
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
console.log(charCode);
for(let key of Object.keys(buttons)) {
if(charCode == key) {
let id = buttons[key];
let elm = document.getElementById(id).style;
elm.position = 'relative';
elm.transform = 'scaleX(0.9) scaleY(0.9)';
setTimeout(() => elm.transform = 'scaleX(1) scaleY(1)', 200)
}
}
};
</script>
CSS
#one {
position: relative;
top: -165px;
}
#one:hover{
position: relative;
transform: scaleX(1.05) scaleY(1.05);
overflow: hidden;
}
#one{
transition:0.2s all ease-in;
}
#one:active{
position: relative;
transform: scaleX(0.9) scaleY(0.9);
overflow: hidden;
}
#one{
transition:0.1s all ease-in;
}
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'm having an issue with a chat I've written. I wrote the following code so that it would scroll to the bottom when the user either hadn't touched the chat or was scrolled near the bottom. It works fine on Chrome but on Safari, it will always set the attribute scrollTop to 3 when a new entry is added. It also will randomly snap to the top after a while even if there had been no entry. Any suggestions will be greatly appreciated! Thanks!
function writeChat(elem) {
const chatty = document.getElementById('chat');
const nDiv = newLine();
const chInfo = window.getComputedStyle(chatty, null);
nDiv.appendChild(elem);
const total = parseInt(chInfo.getPropertyValue('height')) + chatty.scrollTop + 18;
if(total >= chatty.scrollHeight || hasScrolled == false) {
chatty.appendChild(nDiv);
setTimeout(function(){ chatty.scrollTop = 1000000; }, 0.15);
} else {
chatty.appendChild(nDiv);
}};
function newLine(cls) {
const nDiv = document.createElement('div');
if(cls) {
nDiv.className = cls;
} else {
nDiv.className = "chatEntry";
}
return nDiv; };
css for the chat div:
position: relative;
overflow-y: auto;
word-wrap: break-word;
height: 89%;
width: 98%;
font-size: 2vw;
padding: 1% 2%;
z-index: 1;
-webkit-overflow-scrolling: touch;
A gif of how it looks on Safari:
On Safari
A gif of how it looks on Chrome:
On Chrome
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've searched for similar question for quite a long time but all my searches gone in vain. Here is my code
<div class="footer-sidebar container" style="height:40px;"></div>
<button class="button">Click</button>
Now if someone clicks on button then my .container height should increase to 400px and if someone clicks on the same button it must back to 40px.
Edit: (Added CSS)
.footer-sidebar {
position: fixed;
z-index: 1500;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
overflow: hidden;
}
Thanks
You could do that by adding a class to your div like this:
$('.button').on('click', function(){
$('.container').toggleClass('open');
}
Inline styles for this should be avoided. Use your css file and add something like this to it:
.container {
height: 40px;
}
.container.open {
height: 400px;
}
Javascript version (opposed to the previously added JQuery option):
Using booleans (tested):
var fullSize = false; // Used for toggling
var button = document.getElementsByClassName("button")[0]; // Get button
var div = document.getElementsByClassName("footer-sidebar")[0]; // Get div
button.onclick = function() {
if(fullSize) { div.style.bottom = 0 + "px"; fullSize = false; } // If div is already 400px...
else { div.style.bottom = -360 + "px"; fullSize = true; } // If div is already 40px...
};
Fiddle
Using classes (untested):
CSS:
.open {
height: 400px;
}
.closed {
height: 40px;
}
Javascript:
var button = document.getElementById("button"); // Get button
var div = document.getElementsByClassName("footer-sidebar container")[0]; // Get div
button.onclick = function() {
if(div.className = "closed") { div.className = "open" }
else if(div.className = "open") { div.className = "closed" }
else { div.className = "open" }
}
Hope this helps.
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;
});