I am struggling making a basic image slider with jquery cycle 2 - html

I have been taking online courses at Udemy and have been struggling with a image slider lesson. I have followed all the steps to make a basic slider. The lesson had me make my banner to have overflow:hidden and then had me go to jquery cycle 2 in order to copy the script links and I did. Then I put my class as "banner cycle-slideshow" just as the lesson instructed me. However it did not make my image slider function. It only stays on the first image. Any help? Here are my codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/Users/owner/Desktop/HTML/css/style6.css">
</head>
<body>
<div class="container">
<header>
<div class=left>
<a href="/Users/owner/Desktop/HTML/pages/page-6.html">
<img src="" height="100" width="200" alt="logo"></a>
</div>
<div class="right">
<form>
<input type="search" placeholder="Search...">
<input type="submit" value=">">
</form>
</div>
<div>
</div>
<nav class="main-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Ways to help
<ul class="drop">
<li><a href="https://homeguides.sfgate.com/ecofriendly-mean-
78718.html" target="_blank">Option 1</a></li>
<li><a href="https://www.wheelsforwishes.org/news/live-a-more-
eco-friendly-lifestyle/" target="_blank">Option 2</a></li>
<li><a href="https://money.usnews.com/money/blogs/my-
money/slideshows/ways-to-live-green-on-a-budget" target="_blank">Option 3</a>
</li>
</ul>
</li>
<li>Tell a friend!</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="banner cycle-slideshow">
<img src="" alt="Banner 1">
<img src="" alt="Banner 2">
</section>
<section>
<article>
<main class="push">
<h1 style="color: green;">GO GREEN</h1>
<p>Save the planet by going green. Be eco friendly!
Eco-friendly items and materials are defined as being
not environmentally harmful. These products promote green
living or green manufacturing methods that lessen the amount
or types of resources used. In short, eco-friendly products
help the earth, not cause it harm.</p>
</main>
</article>
</section>
<aside class=beta>
<div>
<h3>Widget</h3>
<ul>
<li>2019</li>
<li><a href="#">2020</li>
<li>2021</li>
</ul>
</div>
</aside>
<hr>
<footer>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="final">
<address>
Written by <a href="mailto:raymondhernandez_4#msn.com">Raymond
Hernandez</a><br>
Visit us at:<br>
<a href="#".com>#.com</a><br>
100, Someplace, Somewhere far. 3495<br>
USA
</address>
</div>
</footer>
<div class="final">
<p><small>Copyright © 2021. All rights reserved.</small></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>


The CDN URL you're linking for Cycle2 is wrong.
The file you're linking to is a deleted file, so you can get it from Cloudfare instead:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

Related

Nav on top of background img

I am trying to put my navigation bar on top of my background image, and I would like to know what is the best and cleanest way to do so using the code below, here is my code:
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
<figure>
<img src="home_coffee_img.jpg" height="100%" width="100%" alt="Coffee Beans" style="height:100%;">
</figure>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8"><!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li><!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>

You can add your the image as a background image using css. Apply it to the element that is wrapping the header and the navigation elements, in this case that would be body.
body {
background-image: url(YOUR_IMAGE_PATH)
}
See the example in the code snippet.
body {
background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/04/15/16/china-coffee-cup.jpg?w968h681);
}
<body>
<header>
<div class="home_page">
<div class="header">
<h1 class="title">The Best Coffee Shop in Chicago</h1>
<h2 class="sub_title">Life Is Too Short For Bad Coffee</h2>
<h1 class="home_nav_line"></h1>
</div>
</div>
</header>
<!--Menu-->
<element class="zoom">
<ul class="col-sm-8">
<!--Screen size of menu-->
<li> <a class="active" href="index.html">HOME</a></li>
<!--The active class means it will tell the user what page they are on-->
<li> ABOUT</li>
<li> NEWS</li>
<li> CONTACT</li>
</ul>
</element>
</body>

Two sections on my website are being seen as one

My two section #wrapper and #stats are both being see as the wrapper by google dev tools. Now this is affecting my development as any changes to the css gets mangled within the two sections.
In google dev tools when i hover over the wrapper content, it shows the div as stats.
I have looked and looked but I cant find anything.
<!DOCTYPE html>
<html>
<head
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/normalize.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/responsive.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header class="main-header">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</nav>
<span class="title">We offer garden building such as trellis and fencing, as well as outdoor lighting, water features and much more</span>
<h1> Garden Construction</h1>
<img class="arrow" src="img/arrow.svg" alt="arrow down">
</header>
<div id="wrapper">
<h2>Our Services</h2>
<section>
<ul id="gallery">
<li>
<a href="img/trellisandfence.jpg">
<p>Trellis and Fencing</p>
<img src="img/trellisandfence.jpg">
</a>
</li>
<li>
<a href="img/light.jpg">
<p>Outdoor garden lighting</p>
<img src="img/light.jpg">
</a>
</li>
<li>
<a href="img/gravelretention.jpg">
<p>Gravel renetion system</p>
<img src="img/gravelretention.jpg">
</a>
</li>
<li>
<a href="img/gardenbuilding.jpg">
<p>Outdoor building such as sheds and cabins</p>
<img src="img/gardenbuilding.jpg">
</a>
</li>
<li>
<a href="img/waterfeature.jpg">
<p>Water features - any size, any style</p>
<img src="img/waterfeature.jpg">
</a>
</li>
</ul>
</section>
</div>
<div id="stats">
<ul>
<li>
<h4>We can organise appointments at your convinence</h4>
<img src="img/appointments.png">
</li>
<li>
<h4>We offer free consulations and quotes</h4>
<img src="img/consultation.png">
</li>
<li>
<h4>We are fully licenced and qualifed with over 25 years experience.</h4>
<img src="img/licenced.png">
</li>
<li>
<h4>We have looked untaken multi-million euro projects</h4>
<img src="img/euro.png">
</li>
</ul>
</div>
</body>
</html>

Headings interfering with Navbars

I am currently working on a website, also I am new to website programming, so I apologize if I got a few things wrong.
The h1 is appearing before my Navbar leaving the navbar below the heading. Any suggestions? Thanks!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSGOCarry | Contact</title>
<link rel="stylesheet" type="text/css" href="contact.css">
</head>
<body>
<div class="container">
<div class="center">
<h1>How To Contact Us</h1>
</div>
</div>
<div class="navbar">
<ul>
<li>Home</li>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Roulette</li>
<ul style="float:right;list-style-type:none;">
<li>Contact</li>
<li>About</li>
<li>Sign In
</li>
</ul>
</ul>
</div>
</body>
</html>
JSFiddle w/HTML & CSS:
https://jsfiddle.net/fo0u1tcp/

You need to change the order that the nav and container appears in the document :
<div class="navbar">
<ul>
<li>Home</li>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Roulette</li>
<ul style="float:right;list-style-type:none;">
<li>Contact</li>
<li>About</li>
<li>Sign In</li>
</ul>
</ul>
</div>
<div class="container">
<div class="center">
<h1>How To Contact Us</h1>
</div>
</div>

Why doesn't my Bootstrap scrollspy work?

I'm new to the Bootstrap world and just tried to make a simple scrollspy.
<!DOCTYPE html>
<html>
<head>
<title>Team Avero | Home</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
<div class="container">
<ul class="nav nav-tabs pull-left" id="navbar">
<li class="active">Home</li>
<li>News</li>
<li>Team</li>
<li>Social Media</li>
</ul>
<ul class="nav nav-tabs pull-right">
<li>Avero Store</li>
<li>Forums</li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
<h1>Team Avero</h1>
<p>provides the best tools, services and more in the modding community. Guaranteed.</p>
</div>
</div>
<div class="news">
<div class="container">
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>
</div>
</body>
</html>
The layout is fine, however when I click on the "News" item in the navigation, it doesn't scroll to the div class news. What's wrong?

You have specified <div class="news"> It should be <div id="news"> because you have used #news for the anchor tag.
# refers to id and . refers to class

Try to replace
<ul id="navbar">
...
</ul>
to
<div id="navbar">
<ul>
...
</ul>
</div>

images in a CSS modal box

I have a modal box (CSS) and For some reason I cannot get images in the box to display horizontally, with out messing up the box? when I float the images in the gallery id they leave the modal box?
html
<head>
<title>Design and Development</title>
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Ubuntu+Condensed|Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>PERSON</h1>
<h2>Front-End Design + Development</h2>
</header>
<ul id="menu">
<li>ABOUT
</li>
<li>WORK
</li>
<li>CONTACT
</li>
</ul>
<div id="aboutModal" class="modalDialog">
<div> X
<h1>ABOUT</h1>
<img src="images/me.jpg">
<p><strong>Hello!</strong>
<br></p>
</div>
</div>
<div id="workModal" class="modalDialog">
<div> X
<h1>WORK</h1>
<ul id="gallery">
<li> <a href="images/yogasite.png">
<img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300">
</a>
</li>
<li> <a href="images/yogasite.png">
<img src="https://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">
</a>
</li>
<li> <a href="images/yogasite.png">
<img src="images/yogasite.pnghttps://lh3.ggpht.com/rIVPZ4wNQ1uWIWoFcnZ-KjjUHfTFskcgwzEoAEqDAb8LjPdtXWM5NLqCLx9BRpEF1Dc=w300" alt="">
</a>
</li>
</ul>
</div>
</div>
<div id="contactModal" class="modalDialog">
<div> X
<h1>CONTACT</h1>
<br>
<br>I am currently looking for work.</p>
<img src="images/06-magnify-icon-32.png">
</div>
</div>
</body>
heres the fiddle https://jsfiddle.net/cpxd63a1/1/