I have a js animated div image which is repeated underneath. I've checked and edited the css a few times but it has not worked, i think it could be in this part of the js code I have supplied. Could someone please tell me how to apply no-repeat to the js?
{
class Slide {
constructor(el) {
this.DOM = {el: el};
this.DOM.slideImg = this.DOM.el.querySelector('.slide__img');
this.bgImage = this.DOM.slideImg.style.backgroundImage;
this.layout();
}
layout() {
this.DOM.slideImg.innerHTML = `<div class='glitch__img' style='background-image: ${this.DOM.slideImg.style.backgroundImage};'></div>`.repeat(5);
this.DOM.glitchImgs = Array.from(this.DOM.slideImg.querySelectorAll('.glitch__img'));
}
changeBGImage(bgimage, pos = 0, delay = 0) {
setTimeout(() => this.DOM.glitchImgs[pos].style.backgroundImage = bgimage, delay);
}
}
The JavaScript syntax to apply CSS background-repeat Property to an element is:
object.style.backgroundRepeat= "no-repeat";
in this case, object is the element to apply the property and value on.
If your ._slide_img needs a no-repeat, you can just put that in the CSS?
CSS file
.slide_img {
background-repeat:no-repeat;
}
If that doesn't work there's probably something else in your code that prevents it. In that case please include all your code so we can reproduce your problem.
Related
I am trying to resize the side bars whenever the image changes.
I have my javascript trying grab the height of the image after it changes
var imgHeight = $('#mainImg').height();
var currImg = 0;
var imagesSet = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
var imageLoc = "images/zalman/"
$('#bttnRight').click(function(){
nextImg();
imgHeight = $('#mainImg').height();
resizeBttn();
});
function nextImg(){
currImg++;
if(currImg>=imagesSet.length){
currImg=0;
}
$('#mainImg').attr("src",imageLoc + imagesSet[currImg]);
}
function resizeBttn() {
$(document).ready(function() {
$('#bttnLeft').css("height",imgHeight);
$('#bttnLeft').css("bottom",imgHeight/2-5);
});
$(document).ready(function() {
$('#bttnRight').css("height",imgHeight);
$('#bttnRight').css("bottom",imgHeight/2-5);
});
}
for some reason, it doesn't always grab the height at the correct time and the side bars will stay at the previous height.
Below I have a JSFiddle that should be working the way my setup is.
Please excuse any inconsistencies and inefficiencies, I am learning.
Just seems weird that it would sometimes grab the height and sometimes not.
I will also be attaching an image of what I see sometimes from the JSfiddle.
I will also attach an image of what I see on my site I am actually writing.
https://jsfiddle.net/6bewkuo5/6/
The issue is because your JavaScript accessing the height of the image before the image as actually been re-rendered in the DOM. Adding a slight delay after assigning the new image source may help things, but...
You actually don't need to use JavaScript to set the height of the buttons
You can achieve what you're after by placing the buttons and image inside of a container with css attribute display: flex.
Like this:
.container {
display: flex;
justify-content: center;
}
<div class="container">
<button class="prev"><</button>
<img src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif">
<button class="next">></button>
</div>
Elements within a flex container will automatically fill the height, this includes buttons. Because the images will automatically adjust the height of the container, the buttons will also automatically adjust their height to match.
Run the example below
const images = [
"https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif",
"https://images.sftcdn.net/images/t_app-logo-xl,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/1578981868/the-test-fun-for-friends-logo.png",
"https://hiveconnect.co.za/wp-content/uploads/2018/05/800x600.png",
"https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png"
]
const imageEl = document.querySelector('img')
let imageIndex = 0
document.querySelector('.prev').addEventListener('click', e => {
if (--imageIndex < 0) { imageIndex = images.length - 1 }
imageEl.src = images[imageIndex]
})
document.querySelector('.next').addEventListener('click', e => {
if (++imageIndex > images.length - 1) { imageIndex = 0 }
imageEl.src = images[imageIndex]
})
body {
background-color: #206a5d;
color: #ffffff;
text-align: center;
}
.container {
display: flex;
justify-content: center;
}
img {
max-width: 50%;
}
<h1>Zalman Build</h1>
<div class="container">
<button class="prev"><</button>
<img src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif">
<button class="next">></button>
</div>
The reason is because the resizeBttn code is firing before the image has actually finished downloading and loading into the DOM. I made these changes in your fiddle:
var imgHeight = $('#mainImg').height();
var currImg = 0;
var imagesSet = ["https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif","https://images.sftcdn.net/images/t_app-logo-xl,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/1578981868/the-test-fun-for-friends-logo.png", "https://hiveconnect.co.za/wp-content/uploads/2018/05/800x600.png", "https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png"];
var imageLoc = "images/zalman/"
$(document).ready(function() {
resizeBttn();
});
$( window ).resize(function() {
/* imgHeight = $('#mainImg').height() */; // commented out; we do this in resizeBttn now
resizeBttn();
});
$('#bttnLeft').click(function(){
prevImg();
/* imgHeight = $('#mainImg').height() */; // commented out; we do this in resizeBttn now
/* resizeBttn() */; // we do this as an `onload` to the image now
});
$('#bttnRight').click(function(){
nextImg();
/* imgHeight = $('#mainImg').height() */; // commented out; we do this in resizeBttn now
/* resizeBttn() */; // we do this as an `onload` to the image now
});
function nextImg(){
currImg++;
if(currImg>=imagesSet.length){
currImg=0;
}
$('#mainImg').attr("src",imagesSet[currImg]);
}
function prevImg(){
currImg--;
if(currImg<0){
currImg=imagesSet.length-1;
}
$('#mainImg').attr("src",imagesSet[currImg]);
}
function resizeBttn() {
imgHeight = $('#mainImg').height()
// removed superfluous doc.ready
$('#bttnLeft').css("height",imgHeight);
$('#bttnLeft').css("bottom",imgHeight/2-5);
$('#bttnRight').css("height",imgHeight);
$('#bttnRight').css("bottom",imgHeight/2-5);
}
And then rewrote your <img /> tag to call resizeBttn on onload:
<img id="mainImg" src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif" onload="resizeBttn()"/>
You can see this in action in this fiddle.
Also, a few additional notes on your code, at a glance:
You have some invalid HTML; you're going to want to run that through an HTML validator and fix it, because sometimes it is fine, but sometimes it can lead to all sorts of strange behavior.
You're playing fast and l0ose with global variables in your JS that get set in different functions; it might work OK while the script is small, but as things scale it can quickly become difficult to maintain
You should really avoid abusing the onclick to get link-like behavior from <li> elements; it can impact SEO as well as accessibility. I'd recommend simply using an anchor element inside or outside the <li>
I'd recommend taking a close look at this answer by user camaulay; he makes an excellent point that this may not require JS at all- if a more elegant solution exists w/ CSS it is probably going to be more performant and maintainable.
Im giving a border to a div, but if i set the border, it is removed automatically, why?
PD: I know if i set the border in the last call of the function it will work, but i want to know why this happen.
var padding = 0, e = document.getElementById("box");
function box(){
if(padding < 80) { padding ++;
e.setAttribute("style","padding:"+padding+"px");
setTimeout(()=>{box();},50);
}
if(padding%7 === 0) { //
e.style.border = "2px solid purple";
}
}
window.addEventListener("DOMContentLoaded",box);
#box {
width: 50px;height:50px;background-color:pink;
}
<div id="box">
e.setAttribute("style","...") overrides the style.border that you set elsewhere (since it resets style completely).
You should only use style.* = "...".
Or, better yet, use CSS animations instead.
It's really strange.
I'm making floating sidebar in the Vue component, so need to change the css position value between fixed and relative.
so what I did is giving an ID for the sidebar element, and on scroll event, check the position on the page and changed some css values.
Here is my code.
created() {
document.addEventListener('scroll', this.handleScroll);
},
destroyed() {
document.addEventListener('scroll', this.handleScroll);
}
/* ... */
handleScroll(e) {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var originWidth = $("#fields-to-move").width() + 2;
if(this.screen_no == 2){
if (280 <= top) {
document.getElementById("fields-to-move").style.position = "fixed";
document.getElementById("fields-to-move").style.top = 10 + 'px' ;
document.getElementById("fields-to-move").style.width = originWidth + 'px';
} else {
document.getElementById("fields-to-move").style.position = "relative";
document.getElementById("fields-to-move").style.top = 'auto' ;
document.getElementById("fields-to-move").style.width = originWidth + 'px';
}
}
}
"fields-to-move" is the ID of DOM element I'm going to change css.
It's working well.
But the problem is that above css ( position: fixed, top:10px and width) also applied on other element without the ID.
There's one thing more need to mention.
The element with the ID is a child element of another one which is mounted with v-if condition.
After the parent element dismounted, the css is applied to the wrong element that's mounted after it.
I'm not sure my explanation is enough. Please let me know if you have any questions above my problem.
Thanks in advance.
If you can provide separeted example in jsfiddle it would be easier to help...
But I belive that this behaviour can caused by some Vue optimizations described here: documentation
edit:
Try to execute entire logic of "handleScroll" in vues nextTick.
Pretty simple javascript issue that I am not sure how to do:
When scrolling down on the website:
http://cerebral-supplements.myshopify.com/ (use password "aiglog")
the header shifts up into a minimalistic design. As the logo is too big it sticks out.
What javascript code would be needed to change the logo's div properties to resize the image?
Thanks
If you can add custom CSS, add the following:
/* scale logo down to ~75% size when scrolled sidebar is activated (fadeInDown class) */
.fadeInDown .template-logo img {
width: 225px;
height: 61px;
}
modify the functions values to your needs.
function onScrollChange()
{
if ( document.body.scrollTop > 500 ) {
var divElement = document.getElementById('divID');
// either change style properties directly
divElement.style.width = '100px';
divElement.style.height = '100px';
// or change the div's css class
divElement.classname = 'smallLogoClass';
}
}
than register it, so it executes on each scroll.
document.addEventListener('scroll', onScrollChange);
I have some simple code to replace an image src. It is working correctly but everytime the image is updated, the browser skips right back to the top of the page.
I have several image tags in my page. All of which hidden, except for the first one. The script just iterates through them and uses the src attribute to update the first image.
Here is the code I am using:
var j = jQuery.noConflict();
var count = 1;
var img;
function update_main_image()
{
count++;
if (j('#main_image_picture_'+count).length > 0)
{
img = j('#main_image_picture_'+count).attr('src');
}
else
{
count = 1;
img = j('#main_image_picture_'+count).attr('src');
}
j(".main_image_picture_auto").fadeOut(1500, function() {
j(this).fadeIn();
j(this).attr("src", img);
});
}
j(document).ready(function()
{
setInterval(update_main_image, 6000);
});
Any ideas what might be causing it?
Any advice appreciated.
Thanks.
Try to add DIV around your IMG.main_image_picture_auto with width and height style properties setted to maximum posible image size, for example:
<div style='width:400px; height:400px; border: 0px; background: transparent; '>
<img class='main_image_picture_auto' src=''/>
</div>
<!-- Where width:400px and height:400px is maximum allowed image size -->
And I think, that is better to use setTimeout instead of setInterval
function update_main_image() {
// ....
setTimeout(update_main_image, 6000);
}
j(document).ready(function() {
setTimeout(update_main_image, 6000);
});
http://jsfiddle.net/UBEWS/