I've built a basic image slider using HTML, CSS, and JS (Jquery). There are 5 images in total and users can switch between them using arrows, everything works fine so far but I want the right arrow to disappear if it reaches the last image and that's where I get stuck. The problem is that the right arrow disappears right after I reach the second image. Any idea on how to fix that? Thanks in advance!
IMG of the slider
IMG of my problem (the right arrow disappears immediately when I reach the second image, that's supposed to happen only with the last image.)
Here is the code
$(document).ready(function() {
$('.next').on('click',function(event) {
var images = $('.slider-inner').find('img');
var currentImg = $('.active')
var nextImg = currentImg.next();
var lastImg = images.last();
var rightArrow = $('.next');
images.not(':first').hide();
if (nextImg.length) {
currentImg.removeClass('active');
nextImg.addClass('active');
nextImg.fadeIn();
}
if (lastImg.length) {
rightArrow.hide();
}
event.preventDefault();
});
$('.prev').on('click',function() {
var currentImg = $('.active')
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active');
prevImg.addClass('active');
}
});
});
*,*::before,*::after {box-sizing: border-box;}
body {
background-image: url("../images/bg.png");
background-size: 100%;
font-size: 100%;
font-family: "Roboto",sans-serif;
color: white;
}
.container {
max-width: 1250px;
margin: 0 auto;
overflow: auto;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #fff;
text-decoration: none;
}
.slider-inner {
margin: 0 auto;
max-width: 1200px;
max-height: 675px;
position: relative;
overflow: hidden;
float: left;
padding: 0.1875em;
border: black solid 7px;
}
.slider-inner img {
display: none;
}
.slider-inner img.active {
display: inline-block;
}
.prev, .next {
margin-top: 18.75em;
float: left;
cursor: pointer;
}
.prev {
z-index: 100;
margin-right: -2.8125em;
position: relative;
}
.next {
margin-left: -2.8125em;
z-index: 100;
position: relative;
}
.nadpis {
font-weight: 400;
text-align: center;
}
.podnadpis {
text-align: center;
font-weight: 100;
font-size: 3em;
margin-top: 2em;
}
.img-slider {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vlastna responzivna stranka</title>
<link rel="stylesheet" href="css/styles2.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
<h2 class="podnadpis">Image Slider</h2>
<div class="slider-outer">
<img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
<div class="slider-inner">
<img src="img-slider/john-jpg.jpg" class="active" alt="A game character witha quote saying Dont you kids watch horror movies?, you never, ever, split up.">
<img src="img-slider/butterflies-jpg.jpg" alt="A game character looking at an enthogy">
<img src="img-slider/andrew-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past">
<img src="img-slider/taylor-jpg.jpg" alt="Three characters, one from the future, one from the present and one from the past"">
<img src="img-slider/vince-.jpg.jpg" alt="A bar with a guy sitting there">
<img src="img-slider/conrad.jpg" alt="Conrad">
</div>
<img src="img-slider/arrow-right.png" alt="next arrow" class="next">
</div>
</div>
<script src="javascript/jquery.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
if (lastImg.hasClass("active")) {
rightArrow.hide();
}
Related
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
I am working on a project and i am facing a problem with the navigation section. I am making a navigation bar in which i need an image in the background and in front I want to add div containing links & buttons on that image.
Here is the HTML & CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
font-size: 62.5%;
}
body {
font-family: "Roboto", Courier, monospace;
}
.page-content {
width: 120rem;
margin: 0 auto;
}
.nav-section {
position: relative;
}
.banner-img {
width: 100%;
}
.nav-link-container {
background-color: wheat;
display: flex;
justify-content: space-between;
padding: 1.6rem;
position: absolute;
top: 76%;
left: 10.9%;
}
.nav-link-container ul {
font-size: 1.6rem;
list-style: none;
display: flex;
gap: 4.8rem;
}
.nav-link-container ul a {
text-decoration: none;
}
.nav-btn-container {
display: flex;
gap: 4.8rem;
}
.header-section {
background-color: bisque;
}
.header-section h4 {
font-size: 1.6rem;
padding: 1.6rem;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>document</title>
</head>
<body>
<nav class="nav-section">
<img class="banner-img" src="https://lehndorff.com/music/wp-content/uploads/2013/10/1600x230-banner.jpg" alt="" />
<div class="nav-link-container page-content">
<ul>
<li><a class="nav-links" href="#">Home</a></li>
<li><a class="nav-links" href="#">About us</a></li>
<li><a class="nav-links" href="#">Services</a></li>
<li><a class="nav-links" href="#">Servers</a></li>
<li><a class="nav-links" href="#">Forum</a></li>
</ul>
<div class="nav-btn-container">
<button class="nav-btn">Login</button>
<button class="nav-btn">Sign up</button>
</div>
</div>
</nav>
<header>
<div class="header-section page-content">
<h4>Hello World!!</h4>
</div>
</header>
</body>
</html>
Now I have two questions (watch the code snippet in full screen please):
When you will zoom in/out, you will see header-section stays in the middle without caring how much we zoom in/out while nav-link-container stays to the left side while zooming out/in. I think this is because of position:absolute;. So how do I fix it? Why is this happening?
I have set margin:0; & padding:0;in * but still if you see there is small pixel of gap between header-section and image. Why is it happening?
We have come up with a solution, Hope it will work for you.
Please refer to this link: https://jsfiddle.net/yudizsolutions/yk8ftdgn/
Here we have taken the image as a background image, instead of taking it in the img tag, and also made modifications in your CSS styles to achieve your desired output.
I am working on a menu for my HTML class, at school, and I was trying to figure out how I could make it so my h1 and h2 text change to the color white when they reach the top of the page, which with the background image, is dark at the top. Below is my code. The h1 and h2 tags are the only ones I want to have change.
/*
$(document).ready(function() {
$(window).scroll(function() {
var light_pos = $('#white_div').offset().top;
var light_height = $('#white_div').height();
var menu_pos = $('.NavigationButton').offset().top;
var menu_height = $('.NavigationButton').height();
var scroll = $(window).scrollTop();
console.log('light', light_pos);
console.log('menu', menu_pos);
console.log('scroll', scroll);
if (menu_pos > light_pos && menu_pos < (light_pos + light_height)) {
$('.NavigationButton').addClass('menu_black');
$('.NavigationButton').removeClass('menu_white');
} else {
$('.NavigationButton').removeClass('menu_black');
$('.NavigationButton').addClass('menu_white');
}
})
})
*/
h1 {
font-family: 'Caveat', cursive;
margin-bottom: 100px;
border: 4px;
margin: 100px;
padding: 50px;
width: 300px;
}
b {
font-family: 'Nothing You Could Do', cursive;
}
h2 {
font-family: 'Nothing You Could Do', cursive;
font-size: 40px;
}
h3 {
font-family: 'Homemade Apple', cursive;
}
div {
border: 4px solid black;
margin: 100px;
padding: 50px;
width: 300px;
background: rgba(255, 255, 255, 0.3)
}
sup {
font-family: Verderna, Helvetica, sans-serif;
}
.NavigationButton {
position: fixed;
top: 5%;
right: 5%;
z-index: 99999;
font-weight: 700;
color: inherit;
}
.menu_white {
color: #fff;
}
.menu_black {
color: #000;
}
body {
background-image: url('https://bestanimations.com/media/beverages/405618319drink-animated-gif-16.gif');
/*Image sorce*/
background-repeat: no-repeat;
/*If changed to "repeat", image will repeat*/
background-attachment: fixed;
/*Does your image stay in one spot, or does it move as you scroll?*/
background-size: cover;
/*The resolution of the image*/
}
<title>Big Surf Island: Beverages Menu</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<!--Below is all the code for the fonts that I've used. All custom fonts used came from Google Fonts. [fonts.google.com]-->
<link rel="shortcut icon" type="image/png" href="2021_04_06_0fb_Kleki.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght#500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
<!--Background image for website -->
<h2 style='color:white'>Pick a drink, any drink!</h2>
<h1>Non-Alchoholic drinks</h1>
<!--1st Menu Item-->
<div>
<h3>Fountain Drinks--------------------1.99</h3>
<b>Choose any of our fountain drink, in any flavor you want!
<img height=132px; width=320px; src="https://img1.mashed.com/img/gallery/why-fountain-drinks-taste-different/intro-1588447053.jpg"></b>
</div>
<!--2nd Menu Item-->
<div>
<h3>Iced Tea, Tea, & Coffee 2.95</h3>
<b>Pick your choice of cold or hot tea, any flavor, or coffee, made just the way you like it.
<img height=140.625px; width=250px; src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F12%2F2020%2F05%2F11%2Fcoffee-tea-GettyImages-930798200.jpg&q=85"></b>
</div>
<!--3rd Menu Item-->
<h1>Drinks only for Mom and Dad<br> (Valid ID must be presented to<br> waitor / waitress to show you<br> are older than 21)</h1>
<div>
<h3>Beer and Wine---------------5.99</h3>
<b>Choose your poison, but don't overdo it.
<!--Look I just copied the image link.-->
<img height=208px; width=282px; src="data:image/jpeg;base64,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"></b>
</div>
<!--Link back to menu homepage-->
</body>
</html>
Here are 2 images of my HTML work and CSS as well. I don't know what I'm doing wrong but the google fonts will not load. I've tried using a different browser but that didn't help either. The browser that I've been mainly using is Google Chrome and I've also tried out Safari. I've also tried using different fonts but that hasn't made any difference either. I've added the code down below.
:HTML Work
:CSS Work
Html Code:
<!DOCTYPE html>
<head>
<title>Ray's site</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans|Montserrat|Sacramento&display=swap" rel="stylesheet" type="text/css">
<link rel="icon" href="favicon.ico" />
</head>
<body>
<div class="topContainer">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Ray.</h1>
<p>a <span class="pro">pro</span>grammer.</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middleContainer">
</div>
<div class="bottomContainer">
</div>
</body>
</html>
CSS:
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans', ;
}
h1 {
margin-top: 0;
font-family: 'Sacramento', ;
}
h2 {
font-family: 'Montserrat', ;
}
h3 {
font-family: 'Montserrat', ;
}
.topContainer {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middleContainer {
width: 200px;
height: 200px;
background-color: red;
}
.bottomContainer {
width: 200px;
height: 200px;
background-color: blue;
}
.pro {
text-decoration: underline;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
Remove the trailing commas after your font names and it'll work (not sure why it doesn't work anyway, but I tried your code with and without the trailing commas and the latter works):
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans'; /* <- removed comma */
}
h1 {
margin-top: 0;
font-family: 'Sacramento'; /* <- removed comma */
}
h2 {
font-family: 'Montserrat'; /* <- removed comma */
}
h3 {
font-family: 'Montserrat'; /* <- removed comma */
}
Btw, I went to Google Fonts and they're giving you that code (with the trailing comma), which is likely a bug on their end - normally what's after that comma in the code Google Fonts give you to paste is a fallback generic font (like "sans-serif" or whatever) - you should use one of those too. But the code above will work for you.
EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/