input Text box move to new line - javascript

I seem to have a problem with regards to moving my textbox back to its original division. Every time I put the search bar back into that area. I'm trying to make the BBC news website but it seems to not work.
When I try to place a search bar in the correct area, it moves it into a new line.
I want it to look like the bar on the BBC News website.
body {
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
}
#nav-bar {
width: 1000px;
margin: 0 auto;
height: 40px;
background-color: inherit;
/* NOTE: Temporary color untill logo is adjusted. */
}
#logo {
margin: 10px 8px 10px 10px;
width: 100px;
float: left;
}
#signin-image {
width: 25px;
margin: 13px 10px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 16px;
padding-right: 50px;
}
#divider-alt {
float: left;
height: 40px;
}
#bell-div {
float: left;
}
#bell {
height: 25px;
margin: 10px 10px;
}
.topbar-section {
float: left;
border-left: 1px #cccccc solid;
height: 100%;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0px 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 15px;
}
#search-box {
background-color: #e4e4e4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 27px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Technology - BBC News</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav-bar">
<img id="logo" src="img/bbc-logo.png">
<div id="sign-in" class="topbar-section">
<img id="signin-image" src="img/signin-icon.png" alt="">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="divider-alt" src="img/divider-alt.png" alt="">
<img id="bell" src="img/bell.png" alt="">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
Radio
</div>
<div class="topbar-section topbar-menu">
<span>More</span>
<img src="img/more-arrow.png" id="more-arrow">
</div>
<div class="topbar-section topbar-menu">
<input id="search-box" type="text" value="Search">
<img id="magnifying-glass" src="img/search.png" alt="">
</div>
</div>
<div id="mid-bar">
</div>
<div id="news-anchor">
</div>
</body>
</html>

You need to put some more width in the nav-bar, so all the div's can fit it. Try put 1040px.

either you can increase width
#nav-bar {
width: 1020px;
........
or (if you don't want to increase width)
.topbar-menu {
.........
padding:15px 13px 0px 13px
.........}
Try these

Related

How to open en close menu using javascript?

Building my first website and cant open en close the menu using javascript ( first time javascript so be gentle ). This is my code in the following order. HTML/CSS/Java.I know that i have to point to id instead of class in CSS, i thought i did it right but can't get it working`.
So this is my HTML code i use visual studio code.
<!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>Project R-K</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo" herf=#> R&K<span>Productions</span></a>
<img id="mobile-open" class="mobile-menu" src="images/icons8-menu.svg" alt="open navigation">
<nav>
<img id="mobile-close" class="mobile-menu-exit" src="images/icons8-delete.svg" alt="Close navigation">
<ul class="primary-nav">
<li class="current">Home</li>
<li> About us</li>
<li> Sign up</li>
</ul>
<ul class="secundary-nav">
<li> Buy R&K dollars</li>
<li class= "Make-account"> Make account</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Funny & making you money!</p>
<h1>A gamer website, by gamers for gamers</h1>
<div class="hero-cta">
Try for free
<a href="#" class="video-action">
<img src="images/icons8-binoculars.svg" alt="Watch a gamer">Watch a gamer
</a>
</div>
</section>
<img src="images/PSImage.jpg" class="hero-image" alt="Ps-image">
</div>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Awesome community</li>
<li>Maximale adrenaline</li>
<li>Easy to use</li>
<li>All possible games</li>
<img class="oldskool" src="images/Oldskool.jpg" alt="arcade">
</ul>
</div>
</section>
<section class="explanation-in-short">
<div class="container">
We are Richard and Kick and we are gamers since the early stages of our lifes and very dear friends so we have created something that has been missing in the gamer community.
This is a website where you can subscribe and make money playing your favorite game! Try it and find out just how awesome we are!
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" class="send-message-cta" value="send message">
</form>
</div>
</div>
</section>
</div>
</section>
</div>
</script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;500&display=swap');
:root{
--primary-color: rgb(252, 8, 142);
}
body {
background: rgb(245, 243, 243);
margin: 0;
font-family: 'poppins';
}
.navbar {
background:rgb(245, 243, 243);
padding: 1em;
.logo {
text-decoration: none;
font-weight: bold;
color: var(--primary-color);
font-size: 1.2em;
}
span {
color: black;
}
nav {
display: none;
}
.container {
display: flex;
place-content: space-between;
}
.mobile-menu {
cursor: crosshair;
}
}
a {
color: rgb(83, 83, 83);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero {
text-align: center;
}
.left-col{
.subhead {
text-transform: uppercase;
font-weight: bold;
color: var(--primary-color);
}
h1 {
font-size: 2.5em;
line-height: 1.5em;
margin-top: .2em;
}
.primairy-action {
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
cursor: crosshair;
}
.video-action {
display: block;
margin-top: 1em;
img{
margin-right: .5em;
}
}
}
.hero-image{
width: 50%;
height: 50%;
margin-top: .5em;
margin-left: 7em;
}
.features-section {
background: rgb(83, 83, 83);
color: white;
}
.feature-list {
margin: 0;
padding-left: .1em;
display: grid;
li {
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before {
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../Images/icons8-checked.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.oldskool{
display: none;
}
.explanation-in-short{
background: var(--primary-color);
text-align: center;
color: white;
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border: 1px solid gray;
box-sizing: border-box;
}
.send-message-cta {
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 2em;
width: unset;
cursor: crosshair;
}
nav{
position: fixed;
z-index: 999;
width: 50%;
right: 0;
top: 0;
background:rgb(83, 83, 83) ;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li {
a {
color: white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover {
font-weight: bold;
color: var(--primary-color)
}
}
}
}
.mobile-menu-exit {
float: right;
margin: .5em;
cursor: crosshair;
}
<script>
const mobileBtn = document.getElementById('mobile-open')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () =>
{nav.classList.add('mobile-open')
});
</script>
You can do it with CSS :focus-within pseudo class. If you want to do it with JS, first of all you should write the true semantic. In your markup, the menu which you want to open should be written equilavent as your button and you can set this menu's opacity to 0, visibility hidden and display none, then you have to listen for click events coming from your buttons, when the click event fires, you should determine which button was clicked then you can select the menu which you want to open, and make it visible. I still advise to use :focus-within.

How can I arrange my divs in 2 columns so it looks like a grid/photo gallery?

I am new to coding and web design. Right now, I am constructing a portfolio website which showcases the other websites I've created. I am trying to create a layout where my Divs on the site are in two columns (under 'my work'). I am trying to figure out what to use but I'm unsure if I'm being honest. I've played around with display flex and display grid but I did not get the result I wanted. Here is my below... I will also link another persons' site to give you a visual of what I'm trying to achieve. Any help or tips would be greatly appreciated... Thank you!
Also, I will include my code.
My page and work so far
What I'm trying to create
* {
margin: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
padding-top: 370px;
padding-bottom: 370px;
background-color: rgb(38,61,66);
color: white;
font-family: 'Courier New', monospace;
font-weight: normal;
}
h2 {
text-align: center;
padding-top: 100px;
padding-bottom: 30px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
.main-body {
background-color: rgb(244,132,95);
width: 100%;
overflow-x: hidden;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 25%;
}
#tribute {
width: 100%;
}
#product {
width: 100%;
}
#survey {
width: 100%;
}
#technical {
width: 100%;
}
.work {
border: 1px solid #ccc;
}
.work:hover {
border: 1px solid rgb(38,61,66);
}
.desc {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-family: 'Courier New', monospace;
font-weight: normal;
}
</div><!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<h1>Welcome To My Portfolio</h1>
<main>
<div class="main-body">
<h2>Some of my work</h2>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/poEOXVz">
<img src="https://lh3.googleusercontent.com/P8cbTC4Y-l-4nwkjTh3S67d5qHCvRMX7XyE6cXAsbTg4IX1AvB9-xEHexWDOK1q5YidvZtxXLo4TzjqLd3n21kJM8j_3xr_a5aZM3UyX3GrCg_0C--3zujKK-AL7TEyJxbmyJaRv16NvcTR6-B1y-P03TcvNtp11zB3tHYEtvf5TrwZJtInwwE0l_BkhUR-0OKuQO4O2RZZY0zeoo0Mrq7fd4i5rjf3HWb0yJ4WAC3TQP8w1vW0XdarfZZeBtfvnZny9BAEfYqIoUw9Rp9hcXp5Se4zkRs4TaJmJmRwOiWb44RjvNCJ4-oYTGfJZ9R2vL21eUEO28G0TexVTkhHxeB4c4APGteu-iNAB6jx-xUZa37WATiDPylYTtUS4vBU5tbFgvxu9Lvfb4mwVJN8gG6CzuKHou80TJS0yEgxQI6tOZrunP1DtIOAKgXgbGtGqLe6bK8YxYc5yYBH9a5mbp3eA2k50Rrh3Uh7YXpl02GmaPI05fak2wGJ0o0lyWgo0rNd6H0w3bpC91Anqvv_hTVnI1drISA5n8bCfY1m8UNM827qozZQh9Q7CUXOjf_Vkh2NunlyGiKtksT94gtCk59_HfDeBiNb-FPFlKjcRnxS9OyGAQdHFGWgrs5i40KOUKqsEyxY-2zujyECMZidTp4Vvi7mRRsiUMVPAdEkWyLO462xkFUiYVN5_hKOXlQ=s571-no?authuser=0" alt="Tribute Page" id="tribute">
</a>
<div class="desc">Tribute Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/VwKgmBg">
<img src="https://lh3.googleusercontent.com/IJaG-M-uOIMWYyrEv1yOZRtlRmTV8diJY-d6DmFxyVJt2BE2-iXsRwFH1G21cOJgDBJCbjAZdvEG01gOTixgkZGmxaRbdlRqvaaVUI0wggikKtB8sGXa6irKIe3B3VB2apWyNghvYGEC0IoCCJgCskOP9x1Bs6wJAUSPONZa1maJrkOBYL_T3PPlfj5Jym_mj9hiuCAKYTMM_rV3ErLk94DJk3bSj2_ppQfo0meoZ_abrk7M81bB171SdDEKQ-q4MKf5SNQkZpZ4Xt-DWYINMbKe6ify9a_9jnAytdJxtcsDGzymzCAfTsW9Oo1QKuRVcp_fZmlKuL8ddJ2TPoYjW4UgwdU6Zt2Qya4Q2NvWcjUSsuScgChbtrqPFUDRuKAwkKD3YAdjAozXQxgGWHqKIR9Uvfd50NYGJRspzXm9t4HNmTHnknO3Alq80HUPVvXuxM3v6rtbfmj8k5__o5YXh7yAUBhO2WYRJxx3255laQXIPxXzXt9013nUp35bKsHGHxL56m6fdADPtxAm1grkEcICHlIoOyNayX2c34pMpXwaJFajEODZ4Le7ng0K7_ORv0CnfFM4Z4tEuw5B1DSK17UpPsRn2NFjPLSkI9BqCA-7ZL_DSlYZYwba7A4PyDbIXHstNzHjKuFPhmb3seCfVYkzMj4mOeGGzHwtL-P9ABTK9ImvZ4l4ILFgGMomXw=w567-h568-no?authuser=0" id="survey">
</a>
<div class="desc">Survey Form</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/oNzrYQZ">
<img src="https://lh3.googleusercontent.com/QkjpqBlrvlMgUdoK6qSnXAcaqSFAdsZEDwrEsl96CGa-QXQrSUOiuf87cQlnYw6ciaelPWkk6hffKoyys4rcWb24DzGId2g2mHUFE52N0toZ6RzIQlXogtYDyWk2YVdnKshfyU_uEmIZJXED_qQ-M4bJ-l22us9yhDOSOSprhEp1oQoB4tICP-d8VPetANQihYa018aa87ixwKu9IA1vRgeS1QEPNcs9MXl0mPaEYx7br_jZuT-DJ2Ae_revIXieopvH_s7Iw-p9kEbb0OzB8lbqThiwCXmDaF6RcfhEDhI_A-sRlnscG6sqCOMn2bPGkNoWbKLkd3KpFnknwFwGpyMX-E3Q4jiBAcbaiROV70WlzkkypOSRwHAZuwWDRwf9qlnAOx-hJ46kMryfuH4ONqh6pe2UMe5lzaEnBaKMYpFuzupAelufIxl2maSraO7LFVEhixhAPJF7ldSMbaFNhXjNEk93DnvxOQuTqLAsWYCBfmFxVCFzWF2hfOHmK2YW7kTI4wTdt66QaI_fbfKeBrKOdAQ3qozVbnpBWymdgXc0rPmn2NrJFoLt327yX0XlIhOdvN-u31koYN3ThSUmJpKI15Pid8ScF7JifzAat4mEJQxk_bDZvCSTQnTCYQQagTVOHfixcQZ-OHfUp5korzvdg4L9sjLVK66meA19KXNNeWDYc3iadl1LscknFQ=w572-h571-no?authuser=0" id="product">
</a>
<div class="desc">Product Landing Page</div>
</div>
</div>
<div class="main-body2">
<div class="work">
<a target="_blank" href="https://codepen.io/dechirila19/full/RworweN"><img src="https://lh3.googleusercontent.com/_K_RWpOCQKs5GZYhQkoupmelGzWqrZmhnOJ9zcRpSMZfDDGF8Z9x6KzCA-DpZdYKoh-sXB4B8wjzGXKiOseSkreQwa-rLboJmonxq1Ea2OdNYTIx5Ztdx4ZdHBliSKlEVPDej1yp1VqT80FYpcpao4TOpaS2doyBPFHg-KSkHID-Rr1tPHc8waaA44DiCvDpFI8zbT2E1qP9KprXOl5Zl9oKyOFOTr102ZqWvnWi4PnxgsnNSwQ34qDvYJmVX1C1XdcC1Yf7GNHbNjJ_Elh612G3tC2Ool7ynQ9TWnttk5T9Ah0HKks1BctQolk8NFHNnOKXAu0i2qVrz7Bq7GbYMH2h96v_btud-dGaV05E8rKQ2bMDLIhZeSq4cTPyBvhkHru5L0FgRUNuajR45suoZgbNVtkllKv5PM7pKfXbpgxDtTikii6-y6OhpoAZC3sFkyX0tWQP93PbJIJdXBPLjE1zoUNgxLqE0J2TDmU0mTYl1QcumbP2_C1biY9Q4fRj6MYgwiULgcsgb1EICpUVnsPIRVlc_jeMa81zTfoF-GJ_cIChtE0jTQt6IrDWjW55FU8rICtOUyRRyVhfy81_tkXdObtmzlJ8w9ZJL7RCXjbeCbl4YW0lTBoEqygUZJwRDAYuJTBOm4FWJIBIhC__lI1OKrVEwelyWyugOPVjSiyEt_IXk-V78vb2KkiJ7g=w570-h571-no?authuser=0" id="technical">
</a>
<div class="desc">Technical Documentation Page</div>
</div>
</div>
</div>
</main>
</body>
</html>
use display : flex :
warp the four divs in a big div with class flex-main.
and this is the css:(only the parts with changes)
.main-body {
background-color: rgb(244,132,95);
width: 100%;
}
.flex-main{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
}
.main-body2 {
padding-top: 150px;
padding-bottom: 150px;
float: left;
width: 35%;
margin-right: auto;
margin-left: auto;
}
that would work as you want.good luck!

How do I stop the button wiggle and center them in the div?

I have been trying to get this simple menu example going but I have two problems.
The buttons wiggle when hovered.
The image/text inside of the hover box is not centered.
Any help that you would be willing to provide is really appreciated. I am really trying to learn what I am doing wrong, so any explanation you can provide would be very awesome.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html>
<head>
<title>Cool Button Menu Example</title>
</head>
<style>
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
}
#coolButtonTtopMenu .divButtons img {
margin-top: -15px;
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
float: left;
margin: auto;
margin: 2px;
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
padding: 3px;
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
border: 3px dotted #F59595;
}
</style>
<script>
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
</script>
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</a>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Thing</p>
</a>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>
</html>
The problem that you are facing when hovering over the buttons is that a border takes up space and that border is applied when you hover, creating the "wiggle". To resolve this, you may consider moving away from a border and instead use an outline, which does not increase the size.
As far as centering the content goes, you need to be applying text-align: center; to the parent element for which you would like the child elements centered. In your case, you would apply this rule to #coolButtonTopMenu .divButtons.
// Functions to do work
function doSomething() {
alert('Button was clicked .....');
}
#coolButtonTopMenu .divButtons {
float: left;
padding: 3px;
margin: 2px;
border: 3px solid white;
height: 65px;
text-align: center;
}
#coolButtonTtopMenu .divButtons img {
/*margin-top: -15px;*/
}
#coolButtonTopMenu .btnSmall {
padding: 3px;
/*float: left;*/
margin: auto;
/*margin: 2px;*/
}
#coolButtonTopMenu .btnSmallText {
font-family: "verdana" sans-serif serif;
font-size: x-small;
/*padding: 3px;*/
width: 45px;
text-align: center;
}
#coolButtonTopMenu .divButtons:hover {
/*border: 3px dotted #F59595;*/
padding: 3px;
margin: 2px;
/*background-color: #F59595;*/
height: 65px;
}
#coolButtonTopMenu .divButtons a {
text-decoration: none;
color: black;
display: block;
}
#coolButtonTopMenu .divButtons a:active {
border-top: 0px solid orange;
text-decoration: none;
}
#coolButtonTopMenu .mnuWorkQueueMain {
float: left;
margin: 3px;
}
#coolButtonTopMenu .mnuWorkQueueMain:hover {
outline: 3px dotted #F59595;
}
<!-- Menu Test -->
<div id='coolButtonTopMenu'>
<!-- Menu Item 1 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
<p class="btnSmallText">New Request</p>
</div>
</div>
<!-- Menu Item 2 -->
<div class="mnuWorkQueueMain">
<div id="mnuBtnSave" class="divButtons">
<a href="#" alt="Add" onclick='doSomething()'>
<img src="images/AddIcon.png" class="btnSmall" />
</a>
<p class="btnSmallText">New Thing</p>
</div>
</div>
<!-- Menu Item 3 -->
<div class="mnuWorkQueueMain" ">
<div id="mnuBtnSave " class="divButtons ">
<a href="# " alt="Add " onclick='doSomething()'>
<img src="images/AddIcon.png " class="btnSmall " /><p class="btnSmallText ">Request More</p></a>
</div>
</div>
</div>

Text input won't work

I have this form in which if this one option is selected, then a specific text input will pop up. I don't know why, but when I select Phone, the text input that pops up won't let me write anything on it.
Here's the code:
function checkType() {
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var emailType = document.getElementById('emailType');
var phoneType = document.getElementById('phoneType');
if (email.checked) {
emailType.style.opacity = "1";
emailType.style.height = "3em";
phoneType.style.opacity = "0";
phoneType.style.height = "0";
} else if (phone.checked) {
emailType.style.opacity = "0";
emailType.style.height = "0";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}
}
function showMessage(event) {
event.preventDefault();
var myForm = event.target;
myForm.style.opacity = "0";
myForm.style.height = "0";
myForm.style.transition = ".5s";
document.getElementById('submitted').style.opacity = "1";
document.getElementById('submitted').style.transition = "2s";
}
document.getElementById('myForm').addEventListener("submit", showMessage);
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
#import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*Navigation Styles*/
nav {
background-color: #AC3931;
text-align: right;
margin-top: -100px;
}
nav a {
color: #f6f7eb;
line-height: 2em;
text-decoration: none;
}
/*I made the links' font size in the nav bar bigger. I thought it was too small. I hope that's okay*/
nav li {
font-size: 1.5em;
list-style-type: none;
font-family: 'Bitter', serif;
display: inline-block;
padding: 10px;
font-weight: bold;
}
nav a:hover {
color: black;
}
/*Navigation Styles end*/
/*Header Styles*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: #E18335;
line-height: .2em;
padding-top: 1em;
}
/*Header styles end*/
.pgh {
color: black;
}
/*Images Styles*/
.logo-image {
position: relative;
left: 20px;
top: 0px;
background-color: white;
border: solid 2px #beb7a4;
height: 111px;
width: 115px;
}
.banner-image {
width: 960px;
height: 250px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img3 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
box-shadow: 10px 10px 5px #ccc;
}
.img4 {
width: 450px;
height: 350px;
border-radius: 15px 50px;
}
.socialIcon {
width: 40px;
height: 40px;
}
.contactImage {
height: 350px;
width: 450px;
}
/*Images Styles end*/
#content {
width: 960px;
margin: 0 auto;
border-right: 1px solid gray;
border-left: 1px solid gray;
padding-left: 20px;
padding-right: 20px;
background-color: white;
}
#sec1 {
padding: 10px;
}
#sec2 {
background-color: #FBFFB9;
padding: 10px;
}
#sec3 {
text-align: center;
padding: 50px;
}
#calmFont {
font-family: 'Indie Flower', cursive;
}
#intenseFont {
font-family: 'Permanent Marker', cursive;
}
.leftcol {
width: 45%;
float: left;
padding: 10px;
}
.rightcol {
width: 45%;
float: right;
padding: 10px;
}
.nameClassCopy {
float: left;
}
.socialIcons {
float: right;
}
footer {
background-color: #AC3931;
}
body {
background-color: #FFBC42;
}
#emailType {
opacity: 0;
height: 0;
transition: .5s;
}
#phoneType {
opacity: 0;
height: 0;
transition: .5s;
}
#contactPgh {
font-size: 20px;
}
p {
font-family: 'Josefin Sans', sans-serif;
}
#normalFont {
font-family: 'Josefin Sans', sans-serif;
}
#submit {
background-color: #AC3931;
border-radius: 15px 10px;
padding: 10px;
color: white;
box-shadow: 5px 5px 1px #ccc;
}
#submit:hover {
background-color: #FFBC42;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dry Oar | Contact Us</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- import the webpage's javascript file -->
</head>
<body>
<div id="content">
<header>
<img class="logo-image" alt="Logo Picture" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fdryoarlogo%20copy%202.png?1526759445079">
<br>
<nav>
<ul>
<li> | Home</li>
<li>| Rivers</li>
<li>| Contact Us |</li>
</ul>
</nav>
<br>
<img class="banner-image" alt="Banner" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FredContactBanner.jpg?1531435849381">
<br>
</header>
<div id="normalFont">
<br>
<section id="sec3" class="clearfix">
<h1 style="font-family: 'Josefin Sans', sans-serif;">
Need more information?
</h1>
<p id="contactPgh">
Questions about pricing, location, equipment rental, scheduling or anything else?! Let us know!
</p>
</section>
<!-- Section Two -->
<section id="sec1" class="clearfix">
<!-- Left column -->
<div class="leftcol" style="border-right: 1px solid gray;">
<form id="myForm">
First Name:
<input type="text" placeholder="Arthur" required>
<br>
<br> Last Name:
<input type="text" placeholder="Figueiredo" required>
<br>
<br> Do you prefer to be contacted by e-mail or phone?
<br>
<input type="radio" name="contactType" id="email" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Femail-icon.png?1531433209873"> E-Mail
<br>
<input type="radio" name="contactType" id="phone" onclick="checkType()"> <img style="width: 20px; height: 20px;" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2Fphone-icon.png?1531433375571"> Phone
<br>
<div id="emailType">
E-Mail:
<input type="text" placeholder="example#email.com">
</div>
<div id="phoneType">
Phone number:
<input type="text" placeholder="(111)222-3333">
</div>
Your Message:
<br>
<br>
<textarea rows="10" cols="40" id="message" placeholder="Your message here . . ." required></textarea>
<br>
<br>
<input type="submit" id="submit">
</form>
<div id="submitted" style="opacity: 0">
<h2>Thank you for contacting us</h2>
<p>We will get back to you shortly.</p>
</div>
</div>
<!-- Right column -->
<div class="rightcol">
<img class="contactImage" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FcontactLast.png?1531436124712">
</div>
</section>
<br>
</div>
<footer class="clearfix">
<hr>
<div class="NameClassCopy">
© Dry Oar 2018 || Arthur Figueiredo WDD 100‐02
</div>
<div class="socialIcons">
<img class="socialIcon" alt="Facebook Page" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FFacebookYellow.png?1531436293112">
<img class="socialIcon" alt="Youtube Channel" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FyoutubeYellow.png?1531436475201">
<img class="socialIcon" alt="WhatsApp" src="https://cdn.glitch.com/3ee5b53d-8bb9-4b30-876e-0162812b3a1e%2FwppYellow.png?1531436410371">
</div>
</footer>
</div>
</body>
</html>
Also, when I select phone and just type something, it won't go into the phone text input box, but when I click on the Email option, whatever I typed will be on its text input box.
I've tried making the email text input disabled if the phone option is selected, but it didn't work. Any suggestions?
Changing the from opacity to display:none still doesn't solve his actual problem. From the code above, he is trying to access a DOM object which is not defined. This would cause Javascript to return an error of undefined. Simply define the emailType and phoneType within your script and see it done bro.
What i mean is this:
var emailType = document.getElementById('emailType');
and
var phoneType = document.getElementById('phoneType');
just add these two lines before the if( conditions.
You can now choose whether or not to use opacity or not......
I think this kind of codes can solve this problems:
if (email.checked) {
document.getElementById("phoneType").style.display = "none";
document.getElementById("emailType").style.display = "";
emailType.style.opacity = "1";
emailType.style.height = "3em";
} else if (phone.checked) {
document.getElementById("emailType").style.display = "none";
document.getElementById("phoneType").style.display = "";
phoneType.style.opacity = "1";
phoneType.style.height = "3em";
}

How do I get the thumbnail hover to change the image above?

I am trying to get the thumbnails on my page to change the image above them when you hover over it with the mouse.
I'm very new to javascript, and can't seem to get my head around what to do here.
I have already used fancybox so that when you click on the larger image it opens a gallery.
I have included the html and css below. If anyone could help me with the javascript I would really appreciate it.
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="Collectables and memorabilia from the TV show LOST. Screen used props, action figures, trading cards, costumes and much much more">
<meta name="keywords" content="autographs, props, trading cards, Mcfarlane, Bif Bang Pow, ABC, LOST, RITTENHOUSE, Inkworks, Damon Lindelof, Carlton Cuse, Oceanic 815, Ajira 316, 4815162342
authentic, screen used, dharma initiative, kahana, hawaii, beach, jungle,the others, french science expedition, Jack, Charlie, Kate, Hurley, Jacob, MIB">
<meta charset="UTF-8"></script>
<div class= <title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<div class="pagecontent">
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<nav>
<ul>
<li>Home</li>
<li>About LOST Collector</li>
<li>Contact</li>
</ul>
</nav>
</header>
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs </li>
<li>Badges and Pins</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<div class="noline">
<li>Wish list</li>
</div>
</ul>
<div class="itemdetails">
<div class="itemtext">
<h1>Inkworks: Season One</h1>
<h2>AR-1 unused Redemption Card</h2>
<h3>For Maggie Grace autograph card A-3</h3>
<p>Inkworks included redemption cards for the first 3 autograph cards in the packs because they didn't receive the signed cards back in time to include them in the boxes. So the redemption cards were issued instead. The idea was when you found the card you filled it out and sent it to Inkworks who would then send you back the punched redemption card and the autograph card in question.
</p>
</div>
<div class="itemdetails_aside">
<a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/AR1big.jpg"><img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
</div>
<div class="thumbnails">
<img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" /></a>
<img src="images/tradingcards/season1inkworks/thumbnails/ar1mgb.jpg" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" /></a>
</div>
</div>
</body>
body {
background-color: #5D6D7E;
display: inline;
}
/*Styles body background colour, text colour and font syle and size*/
div.pagecontent {
margin: 10px;
border: 1px solid #000000;
border-radius: 20px;
width: 1300px;
height: auto;
margin: 0 auto;
background-color: #ffffff;
color: #000000;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 90%;
}
/*Styles the header*/
header {
width: 1300px;
height: 200px;
background: #ffffff;
position: static;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: 0;
}
/*finds all img tags as links inside header*/
header a img {
padding-bottom: 10px;
margin: 25px 10px 10px 20px;
display: inline;
height: 150px;
width: 150px;
}
nav {
display: inline;
float: right;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #000000;
padding: 40px 10px 30px;
margin-top: 25px;
margin-right: 25px;
}
nav li a {
display: inline-block;
padding: 60px 10px 30px 10px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ffffff;
background-color: #000000;
}
/*selects the navigation_layout id, styles the whole nav layout*/
#navigation_layout {
position: absolute;
width: 1300px;
top: 188px;
float: left;
list-style: none;
background-color: #ffffff;
border-top: #ffffff;
padding: 0;
}
/*makes the nav list items display from the left*/
#navigation_layout li {
float: left;
background-color: #000000;
margin: 1px;
padding-right: 2.65px;
list-style: none;
}
/*styles the list a tags*/
#navigation_layout li a {
display: block;
padding: 4px 9px 4px 8px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
}
/*styles link colour when mouse hovers over it only**/
#navigation_layout li a:hover {
color: #ff0000;
background-color: #ffffff;
}
div.pic img{ padding:2px;
border: 1px solid #000000;
}
div.itemdetails {
display: inline-block;
position: relative;
width:1250px;
height: auto;
margin: 25px;
border: 1px solid #000000;
background-color: #d3d3d3;
}
/**div.itemtext is all of the text on the page, with separate rules**/
div.itemtext {
float: right;
width: 600px;
height: auto;
text-align: center;
padding: 25px 25px 25px 25px;
}
div.itemtext h1 {
float:right;
width:600px;
text-align: center;
margin-bottom: 0;
font-size: 300%;
}
div.itemtext h2 {
float: right;
width: 600px;
text-align: center;
text-decoration: underline;
font-size: 200%;
}
div.itemtext h3{
font-size: 200%;
}
div.itemtext p{
float: right;
width: 600px;
text-align: center;
font-size: 200%;
margin-top: 0;
}
div.itemdetails_aside {
display: block;
float: left;
padding: 25px 25px 25px 25px;
margin: 25px;
}
div.itemdetails_aside img {
border: 1px solid #000000;
padding: 25px 25px 25px 25px;
background-color: #ffffff
}
div.itemdetails_content {
float: right;
width: 550px;
height: auto;
padding: 25px 25px 25px 25px;
margin:25px;
}
div.thumbnails {
display: inline;
float:left;
padding: 25px 25px 25px;
}
div.thumbnails img{
display: inline-block;
border: 1px solid #000000;
background-color: #ffffff;
padding: 20px 20px 20px 20px;
margin: 10px;
}
div.related_items{
display: inline;
padding: 25px 25px 25px 25px;
margin-right: 100px;
margin-left: 100px;
}
div.box {
margin: auto;
width:1150px;
height: 400px;
}
div.gallery {
width: 1100px;
height: 900px;
margin: auto;
}
div.cardcontent {
display: inline;
float: left;
border: 1px solid #000000;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
background-color: #ffffff;
text-align: center;
font-weight: bold;
width: 200px;
height: 150px;
}
div.cardcontent img{
border: 1px solid #000000;
}
You need to add ID and Classes for img elements like this :
<div class="itemdetails_aside">
<a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/AR1big.jpg">
<img id="imgBigThumb" src="1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308" />
</div>
<div class="thumbnails">
<img class="imgSmallThumb" src="1.jpg" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" /></a>
<img class="imgSmallThumb" src="2.jpg" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" /></a>
</div>
Then javascript code is not very difficult :
var BigThumb = document.getElementById("imgBigThumb"),
SmallThumbs = document.getElementsByClassName("imgSmallThumb");
for(var i=0; i<SmallThumbs.length;i++) {
(function(i){
SmallThumbs[i].addEventListener("mouseover",function(){
BigThumb.setAttribute("src",SmallThumbs[i].getAttribute("src"));
});
}(i));
}
Assuming your images follow this pattern of naming..
ar1.jpg (thumbnail)
ar1big.jpg (full size)
Either add a new attribute to the thumbnail tags, say rn="" (rootname) or make sure the alt="" have the root image name (excluding .jpg) then you can just add the word big to the root to link to the large, full size images when moused over.
jquery
$(function() { // document ready
$('.thumbnails img').mouseover(function() { // when thumb hovered do..
var fullImagePath = 'images/tradingcards/season1inkworks/'; // root path to full size image
var imageRootName = $(this).attr('rn'); // get root image name
var bigImageNameAndPath = fullImagePath + imageRootName + 'big' + '.jpg'; // put it all together
$('.fancybox img').attr('src', bigImageNameAndPath); // replace src="" with path to full image corresponding to thumb hovered
});
});
The above is untested, let me know if you have problems with it.
html
<div class="itemdetails_aside">
<a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/ar1big.jpg">
<img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
</a>
</div>
<div class="thumbnails">
<img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" rn="ar1" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" />
<img src="images/tradingcards/season1inkworks/thumbnails/ar1mgb.jpg" rn="ar1mgb" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" />
</div>
CSS Image Sprites may be what you are looking for. See Hover Effect at the bottom of the linked page. No Javascript needed.

Categories

Resources