So I'm a graphic designer with next to no coding knowledge, and want to learn. My friend and partner who is a web developer is away.
I am trying to replace a logo on our responsive site when the dimensions are under a certain amount of pixels or when a mobile view is displayed.
Got half of it working, on scroll down but then when adding this bit to try and have resize of browser which changes the navigation bar, the nav bar misbehaves and becomes a big static block.
Tried firebug and got stuck.
$(window).resize(function()
{ if($( window ).width()<750){ img.src = img.dataset.scroll; // set the scroll image
}
else
{ img.src = img.dataset.orig; // set the original image back
}
});
don't use javascript for this, but css #media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Related
I have looked over examples online, yet I believe I am overlooking something. I have two similar images that need to be rendered when the screen is at a different size. One image at 1440px screen size and one at 375px screen size. Right now with my code I have set the initial source to render the "mobile view" of the image, and with the srcset of the desktop view image at 1440w. When I load up live server it shows the desktop image, and not the initial source of the mobile view. So it seems to be working but missing a step.. any tips are greatly appreciated!
<img
class="future__container--img"
src="./images/illustration-editor-mobile.svg"
srcset="./images/illustration-editor-desktop.svg 1440w"
alt="illustration-editor-mobile"
/>
So when the browser first loads it is showing the desktop.svg, but when I set the browser to 375px it still displays the desktop.svg. I first had this written in javascript ..
const resizeEditiorImg = () => {
const reswidth = screen.width;
let image = document.querySelector(".future__container--img");
if (reswidth >= 1440) {
image.src = "../images/illustration-editor-desktop.svg";
} else {
image.src = "../images/illustration-editor-mobile.svg";
}
};
window.addEventListener("resize", resizeEditiorImg);
But the issue here is that when the browser first loads on desktop view, it is displaying the mobile image unless the user manually resizes the browser, which is what I believed at first. I hope this post makes sense!
This only work in resize browser because this code resizeEditiorImg
you need run this command resizeEditiorImg in your load page.
example
<body onload="resizeEditiorImg()">
I would like to achieve the following:
On a mobile device, when someone starts scrolling from the top, a text starts to shrink down, and after a given amount, it takes its final size and stays like so for the rest of the page. The idea is that I have a Company name in the middle of the screen, and on scroll, it shrinks to the top left corner of the screen, and a menu bar appears behind it, and the Company name becomes the logo on the menu bar. The menu bar's background is the Hero image of the page. Here is my code:
window.onscroll = scrolled
function scrolled(){
let fromTop = window.scrollY
if (fromTop < 300) {
heroText.style.fontSize = `${2 - fromTop/160}em`
hero.classList.remove('hero-fixed')
heroNav.classList.remove('hero-nav-fixed')
heroText.classList.remove('h1-fixed')
heroImg.classList.remove('hero-img-fixed')
} else {
hero.classList.add('hero-fixed')
heroNav.classList.add('hero-nav-fixed')
heroText.classList.add('h1-fixed')
heroImg.classList.add('hero-img-fixed')
}
if (fromTop > 360) {
heroNav.classList.add('nav-mobile', 'hidden')
intro.classList.add('intro-fixed')
hamburger.classList.remove('hidden')
} else {
hamburger.classList.add('hidden')
heroNav.classList.remove('nav-mobile','hidden')
intro.classList.remove('intro-fixed')
}
}
}
It works, but I have to adjust for every screen size I want to support, and it is extremely laggy! It is probably a very wrong way to do it, so could someone help me make it more efficient and less laggy on mobile devices?
My guess is that the constant resizing of the text is one of the problems, as well as the height change of the hero image. I play with position fixed, and padding-top changes in the CSS to compensate the disappearing (becoming fixed positioned) elements.
Could some library, like RxJS help, or is there a VanillaJS elegant solution as well?
To make this more efficient in the Javascript side, you could use something like lodash's debounce.
Changing layout can be a very resource intensive operation so you might want to try leaving the element fixed position all the time and only adjusting its size (and/or the size of its parents) with the CSS transform property. scale() would work quite nicely here.
So I am using the slick image slider and everything was working great until I considered what would happen if images of different heights were put in. I then wrote a short piece of js to check which image is the tallest and set the heights of all of them to that height.
window.onload = imageSlideChange;
$(window).resize(imageSlideChange);
function imageSlideChange(){
var tallestImage = $('.slick-slide').first().height();
$('.slick-slide').each(function(){ //.slick-slide is the class of each image
if($(this).height() > tallestImage){
tallestImage = $(this).height();
}
});
$('.slick-slide').each(function(){
$(this).height(tallestImage);
});
}
The weird thing though is the code only runs correctly when the slider is in the browser window. If I scroll to the bottom or top of the page and reload it will only load the images as 1px height. I thought maybe it was the images not being loaded and set the function to only run on window.loadbut beyond that I don't know what could cause this kind of behavior.
When you go to inspect the images they are the correct height. The 1px must be coming from their default height, which means that when the code runs it must be reading their heights as 0. Why???
If it helps this is all happening as drupal serves up the images, so could that be the problem?
I'm trying to build a slideshow script will work with images of any width. Not too surprisingly, I'm having some centering issues that cause the portrait mode images to start off on the left when they initially display and then immediately move to the center after a short delay (giving it a bit of a "shooting ducks at a carnival" feel) .
I think that the solution is to get the image width right before it displays and then use that to center it, but I've been having some trouble finding reliable code that does that correctly. I've seen some examples that get the dimensions on load, but since the page (obviously) only loads once before the slideshow starts, that doesn't help much. I put it into CodePen for anyone to view that is kind enough to try and assist me:
http://codepen.io/Realto619/pen/fhdwK
I'm also having a problem with the getPrev() and getNext() functions not working on the first click, They work fine after that, and they seem to be firing on those first clicks, but they don't do what they're designed to until the second click.
Thanks in advance...
As I suspected, the problem was due to the image dimensions / image container not changing for each slide, so the css couldn't center it without having an accurate width for margin:0 auto; to work properly.
I created the following function and then called it in each of the other functions:
function getDim() {
iW = $(window).innerWidth();
iH = $(window).innerHeight();
natW = $(".fadein img").get(0).naturalWidth;
natH = $(".fadein img").get(0).naturalHeight;
natR = natW/natH;
adjH = iH*0.98;
adjW = adjH * natR;
$(".fadein").css('width',adjW);
$(".fadein img").css('width',adjW);
$(".fadein img").css('height',adjH);
}
Hopefully this will help someone else with a similar issue that comes here.
I have a personal website I'm working on where the background image moves with the time of day.
At the bottom of the page, I have jQuery UI tabs going for my menu.
The background image moves up and down, this is my function I wrote:
// Move background based on current time
function backgroundMove() {
var windowHeight = $(window).height();
var imageHeight = 1200; // Background image height
//CODE
$('body').attr("style", "background-position: 0px " + movement + 'px');
}
Now on my local machine, this method works flawlessly, the background moves as it should. But when I put it online, sometimes a solid white bar shows up at the bottom. The background image is where it should be, position-wise, but it gets cut off with this bar and thus you can't see my menu anymore (it is all-white tabs).
Since it doesn't happen consistently I've had trouble identifying the problem. Does anyone have any ideas as to what it might be, how I might fix it so it doesn't happen again?
Try adding this:
height:100%; overflow:hidden;