This is the code for my HTML page and I'm trying to create a photography site. I was planning to create a website in which when a person hovers over a button on the menu section the background will show the image related to that section, for eg. I've tried for animal button here. But the HTML page is not responsive.
I want the image to be displayed on the whole webpage in the background.
I'm a beginner in Javascript Html and CSS.
Kindly help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script type="text/javascript">
//
function animals()
{
$('#animals').hover(function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/05-wildlife-awards-audun-rikardsen---wildlife-photographer-of-the-year.jpg');
}, function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/11-wildlife-awards-max-waugh---wildlife-photographer-of-the-year.jpg');
});
}
//
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
</style>
Do you mean like this? When using jQuery, make sure you import the cdn or library to your html, and put all of your jQuery code within a document ready code like so:
$(document).ready(function(){ YOUR CODE HERE });
Another error in your code is that you shouldn't be using the "src" attribute with your jQuery. Remember that "this" is referring to "#animals", which is a link not an image. If you want to change the background image, you would want to change the css property "background-image" instead.
The image urls you were using weren't working so I used some stock images so you can see the code working. Make sure that your urls lead to an image, not a site. Your urls look like they are leading to a site.
In your CSS I also added
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
to all of your links (#animals, #travel and #food). The background-size property determines how your image covers its container. Using "cover" makes it so the image always fills the width of its container, and any excess height is not seen. Background-position determines what part of the image is displayed. By default, it would be the top left. I changed it to center so you can see the focus of the images. The "transition" property is completely optional, it makes it so that the images transition on hover within 0.3s. It just serves to make the background change smoother and not suddenly jump between images.
I don't know if you wanted the image when you are not hovering to show so I specifically declared the initial background image url in the '#animals' css as well. If you don't want it to show an image until after a user hovers, you can remove this line from the CSS. Otherwise, if you want it to show an initial image make sure you declare the background-image for each link separately.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script>
$(document).ready(function(){
$('#animals').hover(
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)');
},
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80)');
}
)
})
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
#animals, #travel, #food {
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
}
#animals {
background-image:url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80);
}
</style>
There are several issues with your code :
you declare a function but you never call it
you are using jQuery but I can't see any jquery import
your function is targetting your link and not a section
I suggest you use vanilla javascript and event delegation :
let page = document.querySelector('.page');
let menu = document.querySelector('.menu');
const changeBg = (event) => {
let target = event.target.closest('a');
if (target && target.dataset.image) {
page.style.backgroundImage = `url(${target.dataset.image})`;
}
}
menu.addEventListener('mouseover', event => changeBg(event));
menu.removeEventListener('mouseover', event => changeBg(event));
html,
body,
.container {
height: 100%;
width: 100%;
}
.menu {
position: fixed;
left: 0;
right: 0;
top: 0;
}
.menu ul {
display: flex;
justify-content: space-between;
}
.page {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
<div class="container">
<nav class="menu">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<section class="page" style="background-image: url('')">
PAGE
</section>
</div>
Related
Novice here.
I'm creating a button however when I upload it onto the webpage it affects every other button by changing the styling to match the new button.
I don't know how to make the styling specific to only that button and have it not affect anything else on the website. Thanks!
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
you can make specific id (using #) or class (using dot . can be used multiple times in html dom if you will use button many times)
<html>
<head>
<style>
a#someId:link,
a#someId:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a#someId:hover,
a#someId:active {
background-color: #810001;
}
</style>
</head>
<body>
<a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>
</html>
You can keep class or id to resolve this issue.
<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>
Add CSS to this particular id element.
Check this : http://jsfiddle.net/wzfs238L/
You can define the styling for a class, this snippet uses class name mybutton and shows one with the class added and one without.
<html>
<head>
<style>
a.mybutton:link,
a.mybutton:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a.mybutton:hover,
a.mybutton:active {
background-color: #810001;
}
</style>
</head>
<body>
<h2>With mybutton class</h2>
<a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
<h2>Without mybutton class</h2>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
This is what you use 'classes' or 'ids' for. They help class a type of element for your page or identify a specific one you want to target in CSS. As #Rana suggested, w3schools has a page for this which might be helpful
Use id on your HTML element, and add # on the style. An id must be unique. Further reading about id click here.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
#fabulous{
background-color: yellow;
color:maroon;
margin-top:1rem;
}
#fabulous:hover,
#fabulous:active {
background-color: #fcc726;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
<a id="fabulous" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">This one is fabulous</a>
</body>
</html>
it would seem this question has been asked many times over different websites with no real "ah-ha!" answer. I'm still very new and I understand there's a million different ways to code this but I'm hoping for a very simple solution that won't require me to rewrite my code.
It's my understanding this is the inherent nature of parallax, people either have had to crop the images to make them work or have had to do very large workarounds to solve the issue that parallax inherently zooms in or messes with the dimension of the original picture, no matter the orientation on the page (in my case, I'd like to keep it on the left side of the screen, with the text on the right being the scrolling element, haven't gotten around to it but having the nav bar on the top right-half of the page is my next project).
The dimensions of the picture are 1341x2063; I've heard to people setting max-height 2063px; min-height 1341px;. Tried that, didn't work.
I threw up an imgur link for the actual picture I'm working with inside my code, here's a screenshot of what it's looking like on my end: https://imgur.com/lVrQgrQ
My html has my parallax's css inline and I'd like to keep it that way as it's easy for me to understand without having to rework a ton of items.
#charset "UTF-8";
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
button {
transition-duration: 0.4s;
background-color: #800080; /* Purple */
border: none;
color: white;
padding: 6px 38px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
button:hover{
background-color: #4CAF50; /* Green */
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<!-- Adding "active" class/tag to index, for navbar -->
<link href="index.html" class=active>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="Learn about Tom Waters, English tutoring services in Seoul, resume and more.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Me | Home</title>
<!-- GOOGLE FONTS
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
-->
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1671.6">
<style>
.parallax {
/* Image to be used */
background-image: url("https://imgur.com/a/FHtZqm7");
min-height: 600px;
/*scrolling effect*/
background-attachment: fixed;
background-position: left;
/*troubleshooting image width */
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-size: auto;
}
/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed
#media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
*/
</style>
</head>
<body>
<div class="parallax"></div>
<div style="height:400px;background-color:lightgray;font-size:28px">
<center>
<nav>
<ul id="mainMenu">
<li>About Me</li>
<li>Tutoring Services</li>
<li>Resume</li>
<li>Photography Portfolio</li>
<li>Contact</li>
<li style="float:right"><a class="active" href="index.html">Home</a></li>
</ul>
</nav>
</center>
<br><br><br>
<p><center>
This is me,
<br><br>and this is a personal and professional website, designed solely by myself (as a personal project) with the aim of displaying my resume, contact information and other items in an accessible manner for interested parties to see.
</center></p>
</div>
</body>
</html>
When the background-attachment is set to fixed, it gets fixed relative to the viewport. This is to achieve the parallax effect. The browser does this while keeping the aspect ratio. So to prevent the looks of a stretched or zoomed image you can just crop your image or play around with the background-size css value.
.parallax {
background-size: 100% 65%;
}
The only setting you have to change is the second value, this will help you fix the stretchy or zoomed effect on the image, an other suggestion you might check is set background-size to cover.
Just to add, adding background-size: 'auto auto' worked for me. Having it set to 'cover' was causing a huge zoom effect. This fixed it.
I have a good enough knowledge of HTML, but I am just stuck with something related to my responsive design HTML CSS code. I was following the W3 Schools webpage showing how to create a Navbar for a website (Link).
Here is my current CSS file and index.html:
body {
background-color: #FAEBD7;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a black background color to the top navigation */
.top-navbar {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.top-navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.top-navbar a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.top-navbar a {
/* float: none; */
/* position: absolute; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
#media screen and (max-width: 600px) {
.top-navbar a {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FUBS</title>
<meta name="description" content="Elder Scrolls, Fallout, Information, Wiki">
<link rel="stylesheet" href="css/mystyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="top-navbar">
<a class="active link" href="index.html">Home</a>
<a class="link" href="scrolls/index-scrolls.html">The Elder Scrolls</a>
<a class="link" href="fallout/index-fallout.html">Fallout</a>
</div>
<div class="test-div">
</div>
<div style="padding:0 16px;">
<br />
etc. etc. etc.
</div>
</body>
</html>
If you run the above code snippet you will get an idea of what I want it to do (If you drag your window smaller you will see the change).
Basically, what I just want to do is to have the nav bar links to be centered (Along with the black bar that goes across the screen). I already have it so that when the screen size if below 600 pixels, it switches to that effect.
I narrowed down the part of the tutorial that was making my nav bar disappear. It has the above from the #media part of the CSS (You will see that it is commented out). In the tutorial, the centered part of the class topnav-centered had only one element, an a tag. Maybe because in my website it has more than one element in the class that it is refusing to work? That is just my guess though.
Any help with this would be appreciated.
The reason the items aren't centered is because the a tags are floated to the left, this will always force them to the left.
To fix this you just need to amend the 2 classes below, adding text-align: center; as well as removing the float and setting your links to display: inline-block; will allow you to control their position.
/* Add a black background color to the top navigation */
.top-navbar {
text-align: center;
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: none;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
I am having trouble adding an image to a div. I have both the file and the image in the same folder and the image is a jpg. I have also tried putting the online image link (http://www.aussieinfrance.com/wp-content/uploads/stockholm-4.jpg) in with no success. Here is my html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a class="active" href=“#home”>Sweden</a>
<a href=“government.html”>Government</a>
<a href=“borders.html”>Borders</a>
Iconography
</div>
<div class="overview" id="overview">
<p>Sweden is a northern country that specializes in trading machinery, paper products, and iron and steel products</p>
</div>
</body>
</html
and here is my css file:
/* Add a black background color to the top navigation */
.topnav {
background-color: #262228;
overflow: hidden;
margin: 0;
padding: 0;
}
/* Style the links inside the navigation bar */
.topnav a {
font-family: verdana;
float: left;
color: #f2f2f2;
text-align: center;
padding: 25px 27px;
text-decoration: none;
font-size: 19px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #FFCE00;
color: white;
}
body {
margin: 0;
padding: 0;
font-family: verdana;
}
.overview p {
font-size: 20px;
padding-top: 30px;
padding-right: 50px;
padding-left: 550px;
color: #262228;
text-align: right;
}
.overview {
background-image: url(“stockholm.jpg”);
}
Use plain quotes " instead of typographic quotes “” in the CSS url directive.
In CSS a path to an image is specified relative to the CSS file, not the HTML file. So make sure that the image is in the same folder with the CSS file.
Try to use ./stockholm.jpg instead of stockholm.jpg.
The Image Your Referenced Is It On The Same Directory Where the style.css file Located. If not then specify the path relative path of the image like background-image: url('./img/stockholm.jpg'); (if the file is on the img folder). See the relative and absolute file path declaration to understand. Hope it helps. Thank you.
I am designing my website and I'm trying to find a way to keep a header always in the screen.
For an example, take a look at this extra long page on Wikia.com. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.
This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.
I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.
Can someone please help me do this?
Thanks in advance.
~DragonXDoom
P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.
Always remember if you have to stick the header or footer { position : fixed; } can be used.
So apply CSS like this:
.header{
top:0;
width:100%;
height:50px;
position:fixed; // this is the key
}
HTML:
<div id="wrap">
<div id="header"> HEADER </div>
<div id="navigation"> NAVIGATION </div>
<div id="content"> CONTENT </div>
</div>
JavaScript:
( function () {
var nav = $( '#navigation' )[0],
top = $( nav ).offset().top,
left,
height = $( nav ).outerHeight(),
width = $( nav ).width(),
fixedClass = 'fixed';
function pageOffset() {
return window.pageYOffset || document.body.scrollTop;
}
$( window ).
resize( function () {
left = $( nav ).offset().left;
}).
scroll( function () {
$( nav ).toggleClass( fixedClass, pageOffset() > top );
if ( $( nav ).hasClass( fixedClass ) ) {
$( nav ).
css({ 'left': left, 'width': width }).
prev().css({ 'marginBottom': height });
} else {
$( nav ).
prev().andSelf().removeAttr( 'style' );
}
}).
trigger( 'resize' );
})();
Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/
If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
Or just to the of the the page:
.top-bar {
margin: 0;
width: 100%;
}
You could use CSS positioning to solve this. The following link has instructions on what you need I believe.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Edit: Sorry I misread, these should work for headers as well.
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://davidchambersdesign.com/css-fixed-position-headers/
Hope these help.
//header//
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
<meta name="Description" content="<?php echo $SITE_NAME;?>" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo SITE_NAME;?></h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<!--
<li>About</li>
<li>Services</li>
<li>Contact us</li>-->
</ul>
</div>
<div id="content">
//footer
</div>
<div id="footer">
Copyright © <?php echo SITE_NAME.' , '.date('Y');?>
</div>
</body>
</html>
//css
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
margin: 0 30px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 100%;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 20px;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}