Here is the code:
body{
background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header{
background-color:#F0F8FF;
text-align:center;
padding:3px;
opacity:0.2;
height:60px;
}
h1{
font-family:'Lucida Console';
font-weight:bold;
color:blue;
}
div.header ul {
font-style:none;
font-size:50%;
list-style-type:none;
position:relative;
right:700px;
bottom:50px;
}
ul{
list-style-type:none;
line-height:220%;
}
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:visited{
color:white;
font-size:150%;
text-decoration:none;
margin:10px;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
div.gallary img{
position:relative;
left:160px;
top:150px;
margin:5px;
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
border: 1px solid #ccc;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div class = "header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class +"nav" >
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>apply</li>
</ul>
</div>
<div class = "gallary">
<img src = "http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg"></img>
<img src = "http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg"></img>
<img src = "http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg"></img>
<img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA"></img>
<img src = "http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300"></img>
</div>
</body>
</html>
My questions is when I run this code and hover over the links or the images,
They all seem to be connected through some invisible box. For example when I hover over the "Home" link. Every link and every img moves downward. How do I fix this? Thank you.
They are not connected at all, they are just responding to the elements growth because your links are making your font bigger on hover and your images are getting border on hover.
The best way to avoid this behavior is setting the border-sizing property:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* { Box-sizing: Border-box } FTW by Paul Irish
https://jsfiddle.net/j9rxzc2n/
please check this one it's misbehaving because its size was being increased while hovering. so I fixed its size, now it's working fine without up and down.
I only added this one line: ul li{height:30px; }
I'm guessing this is what you wanted? https://jsfiddle.net/link2twenty/8ktphwyo/
body {
background-image: url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header {
background-color: #F0F8FF;
text-align: center;
padding: 3px;
opacity: 0.2;
height: 60px;
}
h1 {
font-family: 'Lucida Console';
font-weight: bold;
color: blue;
}
div.header ul {
font-style: none;
font-size: 50%;
list-style-type: none;
position: relative;
right: 700px;
bottom: 50px;
}
ul {
list-style-type: none;
line-height: 220%;
}
a:link {
display: inline-block;
color: white;
font-size: 150%;
text-decoration: none;
transform-origin: left;
}
a:visited {
color: white;
font-size: 150%;
text-decoration: none;
margin: 10px;
}
a:hover {
transform: scale(1.2, 1.2);
color: #7CB9E8;
}
div.gallary img {
position: relative;
left: 160px;
top: 150px;
margin: 5px;
width: 200px;
height: 200px;
border: 1px solid rgba(0, 0, 0, 0);
}
div.gallary img:hover {
z-index: 100;
transform: scale(1.1, 1.1);
border-color: #ccc;
}
<div class="header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>Apply</li>
</ul>
</div>
<div class="gallary">
<img src="http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg" />
<img src="http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg" />
<img src="http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg" />
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA" />
<img src="http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300" />
</div>
I've made it so none of the size changes effect the page flow. I've used css scaling rather than actually changing the size values and for borders I gave each image an invisible border that was coloured in rather than adding a border after.
You have:
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
This means when you move the mouse over a link (<a>), your font size becomes 220% instead of the regular 150% - that's what is causing the moving you describe - the size of any text will increase by approximately 50% (150/220).
EDIT / ADDED:
And the same with images (<img>tags) - you have:
div.gallary img{
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
}
which means: Your images in <div class="gallary">are 200x200px, but when you move the mouse over them, they become bigger: 220x220px, which also moves everything that comes after it...
Related
From this demo
https:// codepen.io/ducktectiveQuack/pen/mPGMRZ
I can't figure out the code block so I made cheating (just delete the space between the '/' and the 'c' lol)
I am trying to make it so that once you click on the hamburger menu, the drop-down appears but nothing more. The menu shifts to the right and then it shift again after you hover over the social tab. I just want it to remain stationary the entire time, even after it drops-down.
I am still pretty new to HTML/CSS and especially JavaScript (my prof helped me with this) so my apologies if this seems like a really basic question.
I thought that simply putting 'position:fixed' or 'position:absolute' would do the trick but it does not haha.
Thank you in advance
the dropdown appears but nothing more. as you can see, right now the
menu shifts to the right. it then shifts again after you hover over
the social tab. I just wan it to remain stationary the entire time,
even after it drops down.
Try setting #menu position to absolute , .nav li:hover ul position to absolute, top to 200px, left to 0px. Note, html is missing closing </header> tag.
#menu {
position:absolute;
}
.nav li:hover ul {
position:absolute;
top:200px;
left:0px;
}
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
body {
background-color: #a3d5d3;
}
#menu {
position:absolute;
}
.nav li:hover ul {
position:absolute;
top:200px;
left:0px;
}
<!doctype html>
<html lang="en">
<head>
<title>Banana | Home</title>
</head>
<style>
body {
padding: 0;
margin: 0;
background-image: url("img/vicmensa.jpg");
background-color: #515151;
}
header {
margin: 40px 0px 0px 60px;
position: fixed;
}
#container {
margin: 150px 0px 0px 400px;
text-align: left;
position: fixed;
color: white;
font-size: 24pt;
font-family: monospace;
}
.title-block {
margin: 20px 0px 0px 30px;
text-align: left;
color: #00b4ff;
font-family: monospace;
font-size: 24pt;
}
.text-block {
margin: 0px 0px 0px 30px;
width: 400px;
text-align: left;
color: white;
font-family: monospace;
font-size: 16pt;
}
.nav {
display: none;
text-align: left;
font-size: 14pt;
}
.nav a:hover {
color: white;
text-decoration: none;
}
.nav ul {
display: none;
background: none;
}
.nav li:hover ul {
display: block;
}
a {
text-decoration: none;
color: #00b4ff;
}
li {
list-style: none;
}
.burger-button {
background: none;
position: absolute;
border: 0;
color: white;
outline: none;
font-size: 20pt;
font-family: monospace;
}
.x-button {
background: none;
position: absolute;
border: 0;
color: white;
outline: none;
font-size: 20pt;
font-family: monospace;
}
</style>
<body>
<header>
<button class="burger-button" onclick="
if (document.getElementById('menu').style.display=='block')
{
document.getElementById('menu').style.display = 'none'
}
else
{
document.getElementById('menu').style.display = 'block'
/*make the hamburger icon an X and get it to stop moving positions*/
}
"><span style = "color: white;">☰</span>
</button>
<!-- nav -->
<ul class="nav" id="menu">
<li> Home
</li>
<li> About
</li>
<li> Contact
</li>
<li> Music
</li>
<li> Pictures
</li>
<li> Projects
</li>
<li> Resume
</li>
<li> Social +
<ul>
<li> Facebook
</li>
<li> Twitter
</li>
<li> Instagram
</li>
<li> LinkedIn
</li>
</ul>
</li>
</ul>
<!-- end nav -->
</header>
<div id="container">
<div class="title-block">
first middle last
<hr style="width: 100%; height: 2px; background-color: white; border-radius: 2px; margin: 0px 0px 5px 0px;">
</div>
<div class="text-block">
<span style="color: #00b4ff"><em> noun </em></span>
<br>city, state
<br>junior at university
<br>
</div>
</div>
</body>
</html>
codepen https://codepen.io/anon/pen/GZXvOR
I am attempting to build a demo site to help others learn to code. I am having a problem with evaluating a users input from code. I know that I can use the eval() function, but I am going to have a lot of examples and having many eval() functions doesn't seem very optimal or concise. If I were to use eval(), what would be the best way to implement this for best practices?
Or, is there a way that I can implement a simple compiler or a generic function and assign a button click to run said function that will evaluate the code in the editor and display it on the page somewhere.
I am currently using Ace for my editor. Maybe there is a function in their api that does this, but I couldn't find it. I also know that I can use code mirror, but unsure of their solutions also. Any help would be greatly appreciated.
Here is a link to the JSBIN (Note: the code editor doesn't show up here as I can't require the library.
Here is a link to the site that I have the functioning version on.
If you need to see the code I have posted it below:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Learn to Code with Codesmith</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400;300' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet'>
<style type="text/css" media="screen">
</style>
</head>
<body>
<!-- <div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Click Me!</a>
</div> -->
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<form class="" action="" method="post">
<input id="username" type="text" name="name" value="" placeholder="Username">
<input id="password" type="text" name="name" value="" placeholder="Password">
<button id="login-submit" type="button" name="button">LOGIN</button>
</form>
</div>
</div>
</div>
<div class="menu">
<!-- Menu icon -->
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<!-- Menu -->
<ul>
<li class="main-cat">FOUNDATIONS</li>
<ul>
<li class="sub-cat">Intro to Javascript</li>
<li class="sub-cat">Algorithms</li>
<li class="sub-cat">Data Structures</li>
<li class="sub-cat">Data Types</li>
<li class="sub-cat">Syntax</li>
<li class="sub-cat">Variables</li>
<li class="sub-cat">Strings</li>
<li class="sub-cat">Arrays</li>
<li class="sub-cat">Objects</li>
<li class="sub-cat">Functions</li>
<li class="sub-cat">Scope</li>
</ul>
<li class="main-cat">Intermediate</li>
<li class="main-cat">Advanced</li>
</ul>
</div>
<!-- Main body -->
<div class="nav">
<button class="sign-up" type="button" name="button" onclick="">SIGN UP</button>
<!-- <a class="btn trigger" href="javascript:;">Click Me!</a> -->
<!-- <button class="login trigger" type="button" name="button" onclick="">LOGIN</button> -->
<a class="login trigger" type="button" name="button" onclick="" href="javascript:;">LOGIN</a>
<div class="icon-menu">
<i class="fa fa-bars"></i>
Menu
</div>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JeyH_8pWVJ4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="code-snippet sandbox">
<pre id="editor"> // Write your code here and when finished, click the run button below...
<!-- function greeting() {
console.log("Hello, World!");
} -->
</pre>
<div id="run-code">
<button class="run-code" type="button" name="button" onclick="evaluate()" >RUN</button>
</div>
</div>
<!-- <textarea class="code-eval" name="output" rows="8" cols="40"></textarea> -->
<!-- <a class="jsbin-embed" href="http://jsbin.com/iwovaj/73/embed?html,output&height=315px&width=700px"></a>
<script src="http://static.jsbin.com/js/embed.js"></script> -->
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chaos");
editor.session.setMode("ace/mode/javascript");
editor.session.getLength(true);
document.getElementById('editor').style.fontSize='14px';
editor.getSession().setUseWrapMode(true);
editor.setHighlightActiveLine(true);
</script>
<script src="sandbox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script></script>
<script src="app.js"></script>
</body>
</html>
CSS
html, body{
width:100%;
height:100%;
margin:0;
}
body {
overflow: hidden;
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
#editor {
margin: 0;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 700px;
height: 315px;
}
.code-snippet {
margin:0 auto;
display: block;
float: right;
padding: 40px 40px;
}
.run-code {
background-color: #1fbad6;
border: 3px solid #1fbad6;
padding: 10px 20px;
margin-top: 40px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
float: right;
}
.video {
position: relative;
float: left;
padding: 40px 40px;
}
/*.jsbin-embed {
position: relative;
float: right;
width: 700px;
height: 315px;
padding: 40px 40px;
}*/
/* Initial menu */
.menu {
background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.nav {
/*background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');*/
background-color: #202020;
height: 75px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.main-cat {
border-bottom: 1px solid #636366;
color: #03A3EA;
}
.sub-cat li {
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #1fbad6;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
.login {
position: relative;
float: right;
margin-top: 18px;
margin-right: 20px;
padding: 5px 15px;
font-size: 18px;
color: #1fbad6;
background: none;
border: 3px solid #1fbad6;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
border-radius:5px;
}
.sign-up {
position: relative;
float: right;
margin-top: 18px;
margin-right: 20px;
padding: 5px 15px;
font-size: 18px;
color: #1fbad6;
background: none;
border: 3px solid #1fbad6;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
border-radius:5px;
}
/* ============ MODAL ========== */
.page-wrapper{
width:100%;
height: 100%;
/* //background:url(http://i.imgur.com/2ZgHKbQ.jpg) center no-repeat;
//background-size:cover;*/
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
a.btn{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:50%; left:50%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(64,64,64,1);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
z-index: 999;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
}
.modal{
width:600px;
height:400px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:50%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:#01bce5;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
}
#username {
width: 95%;
background: none;
border: 3px solid #1fbad6;
padding: 12px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-decoration:none;
border-radius:5px;
color: #202020;
}
#password {
width: 95%;
background: none;
border: 3px solid #1fbad6;
padding: 12px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-decoration:none;
border-radius:5px;
color: #202020;
}
#login-submit {
background-color: #1fbad6;
border: 3px solid #1fbad6;
padding: 10px 20px;
margin-bottom: 40px;
outline: none;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
border-radius:5px;
float: right;
}
JAVASCRIPT
var main = function() {
/* Push the body and the nav over by 285px over */
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 100);
$('body').animate({
left: "285px"
}, 100);
});
/* Then push them back */
$('.icon-close').click(function() {
$('.menu').animate({
left: "-285px"
}, 100);
$('body').animate({
left: "0px"
}, 100);
});
};
/* ========== Evaluate Code ========== */
var app = {};
// go through the application and find every single instance of a div
// with the class of 'sandbox'
app.bootstrap = function() {
var sandboxes = document.getElementsByClassName('sandbox');
// for each sandbox, run the createSandbox function
[].forEach.call(sandboxes, app.createSandbox);
};
// given a parent element, find the first textarea inside and
// create a sandbox around it
app.createSandbox = function(parent) {
var textarea = parent.getElementsByTagName('textarea')[0],
// create an instance of Sandbox using this textarea
sandbox = Sandbox(textarea);
parent.appendChild(sandbox.label);
};
// when the DOM loads bootstrap the application
window.addEventListener('load', app.bootstrap);
// Sandbox class
// This class is based around a textarea element, which will contain
// the code. However, it could just as easily be the DOM element for
// an Ace/Codemirror editor.
function Sandbox(textarea) {
var sandbox = {};
// create a label to show output
sandbox.label = document.createElement('label');
sandbox.label.setAttribute('class', 'output');
sandbox.label.addEventListener('click', evaluate);
// evaluate code whenever there is input into the textarea
textarea.addEventListener('input', evaluate);
sandbox.textarea = textarea;
// initial resize and evaluation
resize();
evaluate();
// resize to within the appropriate height for the textarea
function resize() {
var scrollHeight = textarea.scrollHeight;
if(scrollHeight > Sandbox.MAX_HEIGHT) {
height = Sandbox.MAX_HEIGHT;
} else if(scrollHeight < Sandbox.MIN_HEIGHT) {
height = Sandbox.MIN_HEIGHT;
} else {
height = scrollHeight;
}
textarea.style.height = height + 'px';
}
// evaluate the code within the textarea
function evaluate() {
// get the code
var src = textarea.value,
// create a console proxy (for logging to the label)
console = Sandbox.consoleProxy(sandbox.label);
// clear the output first
sandbox.label.innerText = '';
// try the eval and catch errors to send to the console
try {
/* jshint ignore:start */
eval(src);
/* jshint ignore:end */
} catch(err) {
console.error(err);
}
}
return sandbox;
}
// config
Sandbox.MAX_HEIGHT = 500;
Sandbox.MIN_HEIGHT = 50;
// A function which spoofs the native console object, by writing
// text to output elements, rather than the dev tools console.
Sandbox.consoleProxy = function(element) {
return {
log: function(message) {
message = [].join.call(arguments, ' ');
element.innerText += (message + '\n');
element.setAttribute('disabled', false);
// write to the original console too
console.log.apply(console, arguments);
},
error: function(message) {
element.setAttribute('disabled', true);
element.innerText = message;
}
};
};
/* ========== Modal ========== */
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$(document).ready(main);
eval is the defacto way to run code. It has a less than great reputation because of its affiliation with security vulnerabilities, however, if that's not a concern and users will be running their own code in a sandbox, that is exactly what eval is designed to do and it does it well.
Implementing a simple compiler for Javascript is no small undertaking, however if you were confident that this was the right approach, you can make use of open source projects such as esprima to do some of the heavy lifting for you, when it comes to parsing and evaluating code.
I developed a generic code evaluation widget for a project I worked on in the past, simply using <textarea> and eval. It supports sandboxing of the console for logs and errors. It might be helpful to look through the code.
this is my html and my script as well. i know this is all really messy code so i apologize for that as i'm still learning. I would really appreciate some help with this issue. Thanks in advance
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#home" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
$("#circle" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
});
</script>
</head>
<body>
<p class="header"></p>
<p id="yellow"></p>
<p id="circle"></p>
<p id="body"></p>
<p id="body2"></p>
<p id ="logo"></p>
<p id="wood"></p>
<p id ="body3"></p>
<p id ="getintouch"></p>
<div >
<p id ="home">HOME</p>
<p id ="about">ABOUT</p>
<p id="contact">CONTACT</p>
</div>
<p id="circle1" class="circle"></p>
<p id="circle2" class="circle"></p>
<p id="circle3" class="circle"></p>
</body>
</html>
and this is my css
* { margin: 0; padding: 0; }
#font-face { font-family: Basic; src: url('fonts/basictitlefont.ttf'); }
.header{
position:realtive;
display: block;
width:100%;
min-height: 100px;
padding:0px;
margin:0px;
margin-top: 0px;
background-image: url(images/creamconcrete.png);
}
#yellow{
position:realtive;
display: block;
width:100%;
min-height: 15px;
background-color: ffa407;
padding:0px;
margin:0px;
z-index: 11;
}
#circle{
background-image: url(images/Counter.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#body{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: white;
padding:0px;
margin:0px;
}
#body2{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: 494949;
padding:0px;
margin:0px;
}
#body3{
position:realtive;
display: block;
width:100%;
min-height: 200px;
background-color: white;
padding:0px;
margin:0px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#wood{
background-image: url(images/woodshop.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#getintouch{
width:500px;
height:200px;
top: 1760px;
position: absolute;
left: 50%;
transform: translatex(-50%);
border:solid 8px #6d6c6c;
}
#home{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#6d6c6c;
position: absolute;
top:40px;
left:10px;
}
#about{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:200px;
}
#contact{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:400px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#circle1{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left: 50%;
transform: translatex(-50%);
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle2{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left:70%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle3{
opacity:0.7;
width:250px;
height:250px;
top:225px;
left:10%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
.highlighted {
background-color:#556677;
}
.active{
background-color: red;
}
This is probably a simple issue, but why does my script only run in the section for the id of home and not in the id of circle. I'm applying the same code and class to both but when i hover over my circle it doesn't change. whyyyyy
Are you talking about #circle specifically, or the other circle elements? If you're expecting this to work on #circle1, 2, and 3, it won't. You've added a class to those circle elements, so you'll need use a class selector instead.
$(".circle" ).hover( ... );
You'll also need to be aware of CSS specificity. Your .active selector will need to be at least as specific, if not more specific, in order for it to take effect. For example:
.active, #circle1.active, #circle2.active, #circle3.active {
background-color: red;
}
This is a pretty poor solution, which is why many people recommend avoiding the use of IDs and just using classes. If you switch those IDs to classes, you won't have to modify your .active selector. For example:
<p class="circle circle1"></p>
<p class="circle circle2"></p>
<p class="circle circle3"></p>
Then the CSS:
.circle1 { background-color: #ded7c9; }
.circle2 { background-color: #ded7c9; }
.circle3 { background-color: #ded7c9; }
.active { background-color: red; }
You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, if you aren't performing any logic on hover, then you don't need javascript. Just use the :hover pseudoclass in your CSS.
your active class Should Be like This
.active{
background-color: red !important;
}
The Background color of #circle is already applied to the Circle object
so Giving An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has.
The issue seems to be that you are not overwriting the background image. So you simply can't see the background color if the background graphic doesn't have any transparent parts,
.active{
background-color: red !important;
background-image: none !important;
}
I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.
The images I am fetching from database. So that are varying in number.
The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:
For Desktop screen:
For small screen:
Below is the div structure
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.
jsfiddle
Is there any way to dynamically adjust the width of div depending on browser's screen size?
You can use the #media queries. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>
This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.
Here is simple solution using CSS and HTML, no #media queries no JavaScript,
I just modified some lines of HTML and CSS to your code those are below.
HTML
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div>
</div>
<div class="buton-controls">
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
</div>
css
/* I wanted to center my loader */
#cycle-loader {
height:32px;
left:50%;
margin:-8px 0 0 -8px;
position:absolute;
top:50%;
width:32px;
z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
display:none;/* Only use this if you fade it in again after the images load */
position:fixed !important;
}
#arrow_left, #arrow_right {
bottom:45%;
height:67px;
position:fixed;
right:3%;
width:36px;
z-index:1000;
}
#arrow_left {
left:3%;
}
#arrow_left:hover, #arrow_right:hover {
bottom:45%;
}
#arrow_left:active, #arrow_right:active {
bottom:45%;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
/*I want to style my pager*/
#cycle-nav {
/* float:left;*/
margin-top: 8px;
margin-left: 0;
text-align: center;
}
#cycle-nav ul {
list-style-type:none;
width: 100%
}
#cycle-nav ul li {
/* border:1px solid #FF8000;*/
display: inline-block;
margin:3px;
}
#cycle-nav ul li a {
/*background: #057c96;*/
background: #49BED8;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li a:hover {
background: #000;
opacity:0.6;
}
#cycle-nav ul li.activeSlide {
/* border:1px solid #000;*/
/* background: #075262;*/
}
#cycle-nav ul li.activeSlide > a {
background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
#controls { width: 50%; float: left; }
.buton-controls{
width: 50%;
float: left;
text-align: center;
}
.buton-controls > div{
display: inline-block;
}
.button2{
background-color: red;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
text-align: center;
width: 70px;
color:#FFFFFF;
}
.button2:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
}
.button2hoverBg{
background-color:#137087 !important;
cursor:pointer;
opacity:1;
}
.button3{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
position: relative;
text-align: center;
z-index: 10;
width: 70px;\
}
.button3:hover, a:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
text-decoration:none;
color:#FFFFFF;
}
.button3 a{
color:#FFFFFF;
text-decoration:none;
}
.button1{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
height: 20px;
text-align: center;
width: 70px;
z-index: 10;
opacity: 0.4;
}
.button1 a{
color:#FFFFFF;
text-decoration:none;
}
Yes, use the vw and vh CSS properties.
1vw = 1% of window width,
1vh = 1% of window height.
http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design
Im having trouble with my navigation bar hover effects specifically transitions(line 109/110). Essentially i want whichever link the mouse is hovering over to raise(margin increase of 2%) while the other links hold the margin of 0. The problem is that all the link margins increase by 2% whenever i hover on any of them. Its my first time posting so sorry for the messy code, if i broke any posting rules and/or if this question was unclear at all. I played around with it for abit and couldnt figure it out. Also if it is simpler i can figure out how to do it using javascript.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>
Atticus Products
</title>
<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>
/*
$(document).ready(function(){
$("a").hover(function(){
$("a").animate({up:'250px'});
});
});
*/
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-size:100%;
background-color:#6ec247;
font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
position: relative;
}
/*Header: Contains Logo and NavBar*/
#header {
border-bottom: 8px solid #f2f2f2;
overflow:hidden;
height: auto;
position:relative;
clear:both;
height:auto;
margin:0;
display:block;
}
#logoName {
max-width: 100%;
width:40%;
float:left;
height:150px;
}
#logoName a {
position:absolute;
bottom:0;
color:#FFFFFF;
text-decoration: none;
font-size:3em;
font-weight: bold;
}
/*NavBar*/
#nav {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
right:0;
width:60%;
float:right;
position:absolute;
bottom:0;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size:1em;
margin-bottom:0;
}
#nav li a:hover {
color: #c00;
background-color: #000000;
opacity:0.5;
transition-property: margin-bottom;
transition-duration:4s;
margin-bottom:2%
/*this is where the problem is*/
}
/*Content: Contains Container1, LogoWords and Logo1*/
#content {
height: 60%;
text-align: center;
/*background-color: #4d8e2f;*/
color:#FFFFFF;
margin:0;
top:0;
display:relative;
font-weight: bold;
}
#container1 {
display: block;
max-width: 100%;
position:relative;
height:40.5%;
width:100%;
margin:0;
background-color:#6ec247 ;
z-index:0;
border-bottom: 8px solid #f2f2f2;
}
#logoWords{
z-index:1;
display:block;
position:absolute;
width:auto;
height:auto;
top:18.5%;
right:0;
color:#FFFFFF;
text-decoration: none;
font-size:2.5em;
font-weight: bold;
text-align:left;
}
#logo1 {
display:block;
z-index:1;
position:absolute;
left:0;
top:18.5%;
width:auto;
height:auto;
}
#content{
background-color:#6ec247 ;
}
#content p {
margin:0;
}
#footer {
height:10%;
width: 100%;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>About</li>
<li>Our Approach</li>
<li>Careers</li>
<li>Contact</li>
</ul>
<div id="logoName">
Atticus <br>Products</br>
</div>
</div>
<div id="content">
<div id="container1">
</div>
<img id="logo1" src="image/justlogo.png" alt="logo" width="207"
height="214">
<div id="logoWords">
<p><br>We find the people</br> that make your company succeed</p>
</div>
<div id="content">
<p>
<br>Careers with Atticus</br>
</p>
</div>
</div>
<div id="footer">
<p>bam</p>
</div>
</div>
</body>
</html>
Your problem is in your jQuery.
Because you have $('a').animate it will effect every a element on the page.
You can get around this by changing 'a' to 'this' without quotation marks.
$(document).ready(function(){
$("a").hover(function(){
$(this).animate({up:'250px'});
});
});
This will only effect the element being hovered over.
Best of luck.