Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am not sure why the last image 6.png is selected, when all the images are direct descendants of the div shape. Thanks for your help its much appreciated.
From what I understand it should select all the divs because they are all direct descendants of the div #shape.
<!DOCTYPE html>
<html>
<head>
<title>3D image</title>
<style>
body,html{
width:100%;
height:100%;
overflow:hidden;
}
body{
background:-webkit-gradient(radial,800
64,950, 500, 400, 40, from(#1F1F1F), to(#FFFFFF));
}
#container{
width:100%;
}
#shape{
position:relative;
top:160px;
margin: 0 auto;
width:200px;
height:200px;
}
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="shape">
<div class="one"><img src="images/2.png"></div>
<div class="two"><img src="images/3.png"></div>
<div class="three"><img src="images/4.png"></div>
<div class="four"><img src="images/1.png"></div>
<div class="five"><img src="images/5.png"></div>
<div class="six"><img src="images/6.png"></div>
</div>
</div>
</body>
</html>
All of them are selected.
They are overlapping eachother, as in they all have the same position.
Replace
#shape > div{
position:absolute;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
for
#shape > div{
position:relative;
float: left;
height:200px;
width:200px;
border:1px solid #e3e3e3;
-webkit-border-radius:10px;
}
And you should see the difference.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
I have had the desired effects, but have updated the HTML/CSS since, and JS has gone back to zilch.
The fiddle is here -
jsfiddle.net.
$( "#allies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
});
$( "#enemies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
});
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});
/*css*/
#bg{
background-image:url('https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png');
}
#wrap_main{display:block;
width:80%;
margin-left:auto;
margin-right:auto;
}
#fam{
display:block;
margin:auto;
border:double white 30pt;
width:100%-30pt;
float:center;
background-color: black;
font-family:fantasy, impact;
font-size:30pt;
text-align:center;
padding-bottom:2em;
}
#fam img{display:inline-block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-bottom:40px;
}
#fam a{text-decoration:none;
color:white;}
#fam a:hover{color:gold;}
#ae_seg{display:block;margin-left:auto;margin-right:auto;
}
#allies{
display:inline-block;
border:double 30pt;
background-color:white;
top:20%;
width:34%;
font-family:fantasy, impact;
font-size:30pt;
}
#allies ul li a{text-decoration:none;
color:black;}
#allies ul li a:hover{color:gold;}
#enemies{
display:inline-block;
border:double rgb(179,33,7) 30pt;
background-color:white;
float:right;
width:34%;
color:rgb(179,33,7);
font-family:fantasy, impact;
font-size:30pt;
}
#enemies ul li a{text-decoration:none;
color:black;}
#enemies ul li a:hover{color:gold;}
div img{
width:120px;
height:70px;
display:block;
margin-left:auto;
margin-right:auto;
padding-top:10px;
padding-bottom:5px;
}
#footer{
display:block;
margin:auto;
border:double white 30pt;
width:100%-30pt;
float:center;
background-color:rgb(179,33,7);
}
#footer img{height:120px;
}
#footer img:hover{
transform: rotate(-10deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="bg">
<div style="padding-bottom:10px;" id="fam">
<img style="display:block; margin-left:auto; margin-right:auto; pagging-top:10px;padding-bottom:40px;" src="http://fontmeme.com/permalink/170208/c2e98ece9088b3589606aa5f59e629f2.png">
BBTG_VENG<span style="font-size:24pt;color:white;"> & BBTG tags</span>
</div>
<div id="wrap_main">
<div style="padding:4em;">
</div>
<div id="ae_seg">
<div id="allies">
<img src="http://fontmeme.com/permalink/170203/949c0c2c2c0c34c044b9b45585717a70.png">
<ul>
<li>ON HOLIDAY</li>
<li>AKD_FLGSHP<span style="font-size:24pt;"> & AKD tags</span></li>
<li>MOOzing<span style="font-size:24pt;"> & Cow related tags</span></li>
<li>S N G</li>
<li>CRIME CITY</li>
<li>BOUTIQUEOG</li>
<li>RKNHVK 1<span style="font-size:24pt;"> & RKN tags</span></li>
</ul>
</div>
<div id="enemies">
<img src="http://fontmeme.com/permalink/170203/e8d4db59e876e5c94bd8f072137e33e2.png">
<ul>
<li>PHOENIX<span style="font-size:24pt;"> & PHX/PX tags</span></li>
<li>THEFALLEN</li>
<li>FALLENONES</li>
<li>CAULDRON</li>
<li>BC TA</li>
<li>DIMINISHED2</li>
<li>CLF WMD<span style="font-size:24pt;"> & WMD tags</span></li>
</ul>
</div>
</div>
<div style="padding:5.3em;">
</div>
</div>
<div style="padding-bottom:10px;" id="footer">
<a href="index.htm">
<img src="http://www.iconsdb.com/icons/preview/black/home-5-xxl.png">
</a>
</div>
</body>
</html>
I can't see anything wrong with it, but then I'm really not that experienced.
$( "#allies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/odj1bt6pf/allies_bg.jpg");
});
$( "#enemies" ).hover(function() {
$('body').css("background", "url(https://s24.postimg.org/rzouogd2r/enemies_bg.jpg");
});
$( "#fam" ).hover(function() {
$('body').css("background", "url(https://s29.postimg.org/46lataf5x/arch_neutral_cropped.png");
});
It is working now please add jquery in your project.
fiddle here
Others already explained it in the comments, your using jQuery and not plain JavaScript.
You need to attach the jQuery library into your project.
CDN
If you want to use jQuery via CDN use following code:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
See jQuery CDN
Download
If you want your own copy of the jQuery library in your project download it here and implement it like this:
<script src="jquery-3.1.1.min.js"></script>
Keep in mind, if your using another version of jQuery, you need to change the version number in this snippet.
I want to show a textbox next to another div, but it it appears below instead. The position of the textbox must be absolute. This demo demonstrates the issue. Thank you.
css
#show{
border:1px solid gray;
cursor:pointer;
float:left;
}
#textBox{
display:none;
position:absolute;
border:1px solid gray;
width:100px;
height:100px;
float:left;
background-color:pink;
}
#hide{
clear:left;
cursor:pointer;
text-align:center;
}
html
<div id = "show">click me to show test box</div>
<div id = "textBox">text</div>
<div id = "hide">hide text box</div>
js
$('#show').click(function(){
$('#textBox').show();
});
$('#hide').click(function(){
$('#textBox').hide();
});
Most easiest way out would be to replace your css with the below code:
#show{
border:1px solid gray;
cursor:pointer;
float:left;
}
#textBox{
display:none;
position:absolute;
border:1px solid gray;
width:100px;
height:100px;
margin-left:165px;
background-color:pink;
}
#hide{
clear:left;
cursor:pointer;
text-align:center;
margin-left:76px;
}
Check the fiddle:http://jsfiddle.net/6gk0hybj/4/
Another method as mentioned is the comments can be found at:http://jsfiddle.net/6gk0hybj/5/
If you want it more dynamic , we need to change a bit of javascript. Let me know if you want it to be more dynamic
Hi im a beginner in javascript/jquery. I am making an application that takes batteries (drawn in CSS) and allows the user to connect the + and - terminals by clicking and then displays an overall voltage and Amp hour output based on how the batteries are wired.
How would I allow the user to click the positive or negative squares (which are just div tags within the battery class) and then relay to javascript that the user has clicked certain boxes, THEN somehow a wire (just a line) would appear between where the user clicked. I really don't know how I would go about coding this. THANKS
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="batterypagestylesheet.css">
<script>
</script>
</head>
</body>
<div id="batterysection">
<div id="pterminal">+ terminal</div>
<div id="nterminal">- terminal</div>
</div>
<div class="battery">
<div id="pos">+</div>
<div id="neg">-</div>
</div>
<div class="battery2">
<div id="pos">+</div>
<div id="neg">-</div>
</div>
</body>
</html>
CSS:
#batterysection{
background-color:purple;
margin-left:auto;
margin-right:auto;
width:1100px;
height:800px;
}
#pterminal{
position:absolute;
left:500px;
top:50px;
width:200px;
height:100px;
background-color:red;
color:white;
text-align:center;
font-size:40px;
}
#nterminal{
position:absolute;
left:700px;
top:50px;
width:200px;
height:100px;
background-color:black;
color:white;
text-align:center;
font-size:40px;
}
.battery{
position:absolute;
top:200px;
left:600px;
width:100px;
height:75px;
background-color:grey;
border:solid 2px;
}
.battery2{
position:absolute;
top:200px;
left:700px;
width:100px;
height:75px;
background-color:grey;
border:solid 2px;
}
#pos{
position:relative;
height:25px;
width:25px;
background-color:red;
color:white;
margin-left:40px;
text-align:center;
}
#neg{
position:relative;
height:25px;
width:25px;
background-color:black;
color:white;
margin-left:40px;
top:20px;
text-align:center;
}
With a very basic
$('#pterminal').click(function() {
// pterminal clicked
});
you have a click-event handler with jQuery.
Drawing a line sounds something you would do on a HTML5 canvas-element these days. Seeing you're a beginner, you might invest some time in a course like http://www.codecademy.com/courses/web-beginner-en-SWM11/0/1.
Also watch out with what is an id and what a class. Id's (#) are unique, there is only one - Classes (.) are a bit like tags: use them when you have similar stuff. Thus, it makes more sense to make #battery1 and #battery2 id's and .pos and .neg classes.
I have the following layout (Parent div, two child divs)
wanted to make this layout responsive for browser's width, so anytime the user changes the browser's width this layout should occupies the same area of screen
also, I wanted to middle-text the content, I've tried vertical-align: middle;, display: table-cell;
any suggestions?
Markup here
this is your solution html with css
<html>
<head>
<title>test</title>
<style>
.main{
width:97%;
border:1px solid #000;
height:100px;
padding:1%;
}
.subone{
width:30%;
border:1px solid #000;
float:left;
height:100px;
margin-right:2%;
}
.subtwo{
width:67%;
border:1px solid #000;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="main">
<div class="subone">
</div>
<div class="subtwo">
</div>
</div>
</body>
</html>
I have created you a fluid layout, with your divs. You do not need to use media queries.
And also to use
vertical-align:middle;
you must put
display:table;
on the parent div and you must not float the divs inside.
You can check this example
will it be helpful???
use diplay:table; for parent and display:table-cell for childs..decalare parents width in percentage with overflow:hidden;
HTML::
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
CSS ::
.parent{
display:table;
width:80%;
border-spacing:4px;
border:2px solid black;
overflow:hidden;
}
.first{
text-align:center;
display:table-cell;
border:2px solid black;
width:100px;
height:200px;
}
.second{
text-align:center;
display:table-cell;
border:2px solid black;
height:200px;
}
FIDDLE
I am trying to implement a javascript pop-up box, but I am not sure how to fix the position of the pop-up window. Please check the below fiddle. When I click on the button, the box somehow appears in the middle of the page. Is there a way to make it appears right under my button?
http://jsfiddle.net/kf9mS/
<html lang="en" dir="ltr">
<head>
<style type="text/css">
.popup{
position:relative;
top:0px;
left:0px;
margin:0px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
.cancel{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
.cancel:hover{
background:rgb(255,50,50);
}
</style>
</head>
<body>
<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
</body>
</html>
and
function openPopup() {
document.getElementById('test').style.display = 'block';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
(forked from javascript onclick create(element) div viz popup box)
Thanks!
Remove margin: 0 auto property. Because It is enforcing the element to be in center.
Working Fiddle
In your CSS popup make position: absolute; and remove top and left property
so your popup would become
.popup{
position:absolute;
margin:0px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
Rest all is fine