I just started learning HTML/CSS/JS 2 days ago and today I made a little tool for personal use.
I made it on computer with a 1980 x 1080 resolution but on other resolutions it doesn't look right.
What I made is a little tool which basically allows me to put a band and the band's genre into an input field and then add it to a list.
Everything looks fine on different resolutions except for when I add a band to the list.
The text that's supposed to go into the border goes all the way to the right side of the screen and the border becomes just a tiny square.
Another question I had, which I might aswell ask in here:
I would like to add a function where I can click one of the bands I added to the list, then highlight the band I clicked, and remove it by clicking a remove button.
But I have no clue where to start.
Html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Bands I Like</h2>
<form name="checkListForm">
<input type="text" id = "Item" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<ol class = "Header">
<li>Band // Genre</li>
</ol>
<br/>
<ol class ="Bands">
</ol>
</body>
</html>
Css:
.Header {
list-style-type: none;
position: relative;
}
.Header {
background: black;
border-radius: 5px;
border: 1px solid white;
margin: 4px 20px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
color:white;
text-align:center;
}
.Bands li {
list-style-type: none;
position: relative;
}
.Bands li {
background: #eeeeee;
border-radius: 5px;
border: 1px solid black;
margin: 4px 750px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
//text-align:center;
}
h2 {
font-family:arial;
color:white;
}
form {
display: inline-block;
}
#button{
display: inline-block;
height:20px;
width:70px;
background-color:grey;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
body {
background-image: url("http://fc04.deviantart.net/fs71/f/2011/027/d/e/sphere_of_doom_by_crackoala-d386se9.png");
JS/jQuery:
$(document).ready(function(){
$("#button").click(function(){
$('.Bands').append('<li>'+$('#Item').val()+'</li>');
$('#Item').val("");
});
$('.Bands').sortable();
});
You can find all my code here:
http://jsfiddle.net/mLkcr501/
Any help would be appreciated!
This line in your CSS was bumping it to the right.
margin: 4px 750px;
Then just needed to float the links left so the border thingy covered them:
.bands{
float:left;
}
http://jsfiddle.net/mLkcr501/1/
-Cheers,
you must use mediaquery to ajust the size on diferent resolutions.
#media (max-width: 640px){
'here contains the class or ids'{width:100%; float: left;}
.greyBox2{display:none;}
.text{width: 100%; text-align: left; font-size: 17px;}
}
Related
Im having trouble with transitioning between two html pages. When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for.
Ive tried this code with my own code however it doesn't seem to be working the way it should. Anyone know how I can fix this? or properly implement this? Below is my code, Any help would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}
#font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}
p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}
#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}
#enter:hover {background-color:#04A12B;}
.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}
}
</style>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div class = "green">
<h1>Welcome to Elemental!</h1>
<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>
<button id = "enter">Enter</button>
</div>
<script>
function transitionPage() {
// Hide to left / show from left
$("#enter").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#enter').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</body>
</html>
What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. Your button
<button id = "enter">Enter</button>
is a button link to the new page. basically this opens the link before the javascript is run. for the javascript to be run on the same page, your first step, would be to remove the a href
<button id = "enter">Enter</button>
now this would run the code without loading the new page.
here is something close to what you want to do from my understanding
- the "landing page" or view the github repo
this code only works for me within the jsfiddle, below is just the javascript portion.
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. below would be your landingpage.html
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="Scripts/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
.nodisplay {
display: none;
}
#about {
position: relative;
width: 100%;
height: 100%;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>
<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div id="about">
<div id="about-1" class="page">
<p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to
discover and explore design elements inspired by nature throughout the
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</div>
</body>
</html>
then you just need your second page
<html>
<head>
<title>
Page 2
</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</body>
I am trying to get an image to show up behind the text as a hover effect.
It is just a simple splash page for now, but I can't seem to figure out how to get this to work.
Here is the current page. The words below the logo are links.
https://gyazo.com/8fac5b310ed8febd80032cc19b57d76e
Here is the image I want behind the text when a user hovers.
https://gyazo.com/67852dd57789458942952b1dd3b3cb55
It is like a scribble effect in different colors. They wouldn't all show up at one, but just the different one behind each word as you hover.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Lira.net</title>
<link rel="stylesheet" href="css/style.css">
<script src="script.js"></script>
</head>
<body>
<div id="middlegroup">
<div id="topimage">
<img src="images/LiraLogo325.png">
</div>
<div id="links">
<p>
Liquidation -
<a href="#">Monetization<a> -
Brokerage
</p>
</div>
</div>
</body>
<footer>
<p>© 2016 Lira.net </p>
</footer>
</html>
and here is the CSS:
h1 {
font-family: "Open Sans" , serif;
color: #FFFFFF;
text-shadow: 2px 2px 3px #4d4d4d;
font-size: 5vw;
text-align: center;
}
body {
margin: 0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topimage{
width: 100%;
text-align:center;
size: 1vw;
}
#links{
width: 100%;
list-style-type:circle;
}
#middlegroup{
width:600px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-125px 0 0 -300px;
}
a:link{
color:#01197d;
text-decoration: none;
}
a:visited{
color:#01197d;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
a:active{
color:#01197d;
text-decoration: none;
}
p {
font-family: "Open Sans" , serif;
font-weight: 600;
font-size:15px;
text-align:center;
}
ul {
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:20px;
text-align:center;
list-style-type:circle;
}
footer p{
font-family: "Open Sans" , serif;
font-weight: 400;
font-size:14px;
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
}
Any help would be greatly appreciated!
The easiest way to get this done is to use background images
You can try something like this:
.class1:hover {
background-image: url("paper.gif");
}
.class2:hover {
background-image: url("paper.gif");
}
.class3:hover {
background-image: url("paper.gif");
}
Just replace the class names for the ones that suits your links, and obviously play with sizing, something like display inline-block to the links will be enough. Here you have everything you will need for this task
You'll just have to add a background image on hover. Here's a fiddle : https://jsfiddle.net/rd7zbytc/
and here's the code:
#links p a:hover {
background-image:url("https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
background-size:100px;
}
Is this what you are talking about?
http://codepen.io/xkurohatox/pen/qbPXOb
HTML changes:
<div id="links">
<p>
<a id="a1" href="#">Liquidation</a> -
<a id="a2" href="#">Monetization<a> -
<a id="a3" href="#">Brokerage</a>
</p>
</div>
CSS changes:
#a1:hover {
background-image:url("http://previews.123rf.com/images/pzaxe/pzaxe1104/pzaxe110400016/9242659-Seamless-monochrome-square-texture-scribble--Stock-Vector-pattern- scribble-background.jpg");
background-size:100%;
}
#a2:hover {
background-image:url("http://st.depositphotos.com/1466799/1121/v/950/dep_11211843-Full-color-abstract-scribble-background.jpg");
background-size:100%;
}
#a3:hover {
background-image:url("http://thumbs.dreamstime.com/z/child-scribble-12020973.jpg");
background-size:100%;
}
/* images above are not my own and only being used for demo purposes */
Hope this helps!
I know this must be an easy fix but I've spent the better part of the morning trying to find a solution (before posting here) to no avail.
I have a very simple jQuery "slideToggle" script that, when clicked, slides a div to the bottom of the button to the height I want it to display. It fits to the width I want(400px), starting at the left of the top div size(130px) and stretching to the right. problem is, I need it to stretch to the left (The top "button" is set to the far right of the page and it stretches off the page).
Here's the code I have:
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
#cartBox {
width: 110px;
height: 90px;
position: absolute;
margin-left: 90%;
top: 28px;
border: 3px solid #800000;
background-color: #800000;
border-radius: 12px;
z-index: 999;
}
#cartDropMenu {
position:absolute;
z-index:999;
width: 130px; /* width of top items (img + text (Cart Items) */
float:right;
top: 0px;
right: 0px;
color: white;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
text-align: left;
}
#cartDropMenu p {
margin:0;
padding-left:24px; /* moves text to the left of img */
cursor:pointer;
background-image:url('../img/open.png');
background-position:left; /* positions image to the left or right 300px(cartDropMenu width parameter) */
background-repeat:no-repeat;
text-align: left;
}
#cartDropMenu p.close {
background-image:url('../img/close.png');
}
#DropMenu {
position:absolute;
z-index:999;
background-color:#fff;
border:solid 1px rgb(220,220,220);
padding:12px;
width:400px; /* width of drop down box */
box-shadow:1px 1px 4px rgb(220,220,220);
top:90px; /* position of start point for drop down box */
left:8000; /* ??? */
display:none;
color: black;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
}
</style>
<script>
$(document).ready(function() {
$('#cartDropMenu p').click(function() {
$('#DropMenu').slideToggle(300);
$(this).toggleClass('close');
});
}); // end ready
</script>
</head>
<body>
<div id="cartBox">
<div id="cartDropMenu">
<p>      Display Cart</p>
<div id="DropMenu">
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
</div>
</div>
</div>
</body>
</html>
Here's the link to jfiddle:
enter link description here
Try adding right: 0; to #DropMenu
Add right:0; to #DropMenu. This will make the dropdown to start from the right end of the
Display cart p tag.
I would like to implement a tree menu like the link bellow using HTML5 and CSS3 or jquery menu or somehow using ordinary html, css and javascript .
http://www.crystal.ch/abb/power_systems_landscape/
You may notice that there is following issues involved,
Nice hover effect (I badly need this)
Rotation of menu item arrow icon
Also here you see sliding up and down smoothly that is not problem to me.
Any idea or reference would be appreciated. thanks
To start we need the HTML
<p class="menu_head">first</p>
<div class="menu_body">
1
2
3
4
</div>
<p class="menu_head1">Second</p>
<div class="menu_body">
1
</div>
Jquery for the effect
$("#firstpane p.menu_head").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head1").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
});
$("#firstpane p.menu_head").mouseover(function()
{
$(this).css("text-indent","35px");
$(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33);
});
$("#firstpane p.menu_head").mouseout(function()
{
$(this).css("text-indent","10px");
$(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);
});
I added the mouseover and mouseout for your glass effect. just create a background with white color or any color or just erase the .css can make it this way.
$(this).fadeTo("slow",0.33);
CSS
.menu_head {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_head1 {
font-family: arial;font-weight: bold;
font-size:10px;
color: black;
left:3%;
height:7px;
text-indent:10px;
padding: 10px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
vertical-align: middle;
}
.menu_body {
display:none;
}
.menu_body a{
font-family: arial;font-weight: bold;
left:3%;
width: 220px;
height:7px;
text-indent:10px;
position:relative;
padding: 10px 15px;
display:block;
color:#006699;
padding-left:10px;
font-weight:bold;
font-size:10px;
text-decoration:none;
vertical-align: middle;
}
See Example
try to edit the css for it was made to adapt to my site.
Gudluck
But it doesn't work. You can see I'm trying to change the class of the div containing season.png onmousedown and revert it onmouseup.
What am I missing?
Thanks.
Mike
It's working just fine. There is nothing wrong with the code that you posted, so if you can't see it there has to be something wrong with your css.
I used this to test the code:
<html>
<head>
<title>Test</title>
<style>
.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }
</style>
</head>
<body>
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
</body>
</html>
It works for me so I guess you need to run some checks on your code. Make sure your css is included.
Post the complete code you are using so we can look for errors.
This is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onmouseevents on div</title>
<style type="text/css">
body
{
background-color: #FFF;
color: #000;
}
.page
{
margin: 10px auto;
width: 640px;
}
.winter
{
background-color: cyan;
}
.spring
{
color: magenta;
}
.summer
{
color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
Cats!
</div>
</div>
</body>
</html>
As an alternative - I have used the hover pseudoselector for this.
Here's a personal example:
.sidebar ul.sidebuttons li a
{
font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
display: block; /* effect should be in a new box not inline */
text-decoration: none; /* turn off link underlining */
color: yellow;
background: black url(sidebar_off.png) no-repeat center;
padding: 10px 10px 10px 5px;
margin: 0px 0px 20px 0px;
border: white outset;
border-width: 2px 2px 2px 0px;
text-align: right;
text-transform: lowercase;
}
.sidebar ul.sidebuttons li a:hover
{
background: yellow url(sidebar_on.png) no-repeat center;
color: black;
border: black inset;
text-decoration: none;
border-width: 2px 2px 2px 0px;
}
The HTML looks like:
<div class="sidebar">
<ul class="sidebuttons">
<li>Go Somewhere</li>
If you're having trouble, try Firefox Web Developer add-on or something similar to check the style information on that part of the page. It might not be triggering what you think it should be triggering.
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>
I test this code, it works well.
I think, not javascript problem. Try to check css, or other things.
Maybe put js code and css code on the img is what you need.
It's very easy with jQuery:
$(".winter").mouseup(function() {
$(this).addClass("spring");
$(this).removeClass("summer");
},function(){
$(this).addClass("summer");
$(this).removeClass("spring");
});
The Javascript file I was using was a very inflexible library. I solved the problem a different way.