My observation is, float elements overlap on its previous elements, but in the below code, div element did not over lap body element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>All selector</title>
<style type="text/css">
h3{
margin: 0;
heigth: 10px;
}
div, span, p{
width: 80px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js">
</script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P<button>BUTTON</button></p>
<script type="text/javascript">
var elementCount = $('*').css("border", "3px solid red").length;
$('body').prepend("<h3>" + elementCount + " elements found</h3>");
</script>
</body>
</html>
Actual output is:
As per my understanding on float:left,
Expected output is,
Why 3 float elements div, span & p are not overlapping on body element?
Floating element is shown floating against the content that follows it. There is no content after the div / span / p tags. Note: you are prepending the h3 tag to body. Try appending and see what output you get.
Related
I am using a "find and replace" type javascript function, and replacing all the backticks in the HTML with <code> tags, and all the pound signs with </code> tags. For some reason my styles are not working unless I code them in on the JS file with the .css() method.
Ideally, the combo should output the code between backticks and pound signs as blocked <code> content, (the <code> tags are generated from JavaScript) with a soft gray background. However, for some reason the styles just don't show up.
If any one can help, I'd greatly appreciate it.
This is my html file test.html:
<!DOCTYPE html>
<head>
<title>Script Test</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="styles/code/style.css" type="text/css">
</head>
<body>
<p>This is some code:
`var p = 10; #
`var a = 5; #
`var x; #
`x = a * p; #
`console.log(x); #
All I want is for this to work!
</p>
<script src="codeStyle.js"></script>
</body>
My CSS file (compiled from SASS) style.css:
body {
color: #121212;
font-family: 'Helvetica Neue', serif;
font-weight: 300;
letter-spacing: .25px; }
body div.container {
padding: 10px; }
body div.container code.styled {
font-family: arial, serif;
background-color: #f9f9f9; /* soft gray bg color */
display: block; /* block display style */
margin: 2px 0 2px 2.5%;
padding: 3px;
width: auto;
background-color: #fafafa;
border: 1px solid #f5f5f5; }
/*# sourceMappingURL=style.css.map */
And my js file codeStyle.js:
$('p').each(function() {
var text = $(this).html(); // Grab HTML from each <p>
text = text.replace(/`/gi,"<code class='styled'>"); // Replaces every ` with <code>
text = text.replace(/#/gi,"</code>"); // Replaces every # with </code>
$(this).html(text); // Set <p> html as replaced code
});
To put Partick's answer up: Your CSS is trying to target an element that doesn't exist.
The problem is in this bit of CSS:
body div.container code.styled { }
There is no content that matches this selector, as there is no <div class="container">
To get around this, you can either remove the offending selector from the CSS:
body code.styled {}
or add the requied selector to your HTML:
<div class="container">
<p>Some text <code class="styled">some code</code>.</p>
</div>
Here's a Fiddle of it working.
I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;
I'm using snap.svg
I have index.html
<!Doctype>
<html>
<head>
<title>MAP_TEST</title>
<meta charset="utf-8">
<script type = "text/javascript" src = "JS/jquery.js"></script>
<script type = "text/javascript" src = "JS/init.js"></script>
<script type = "text/javascript" src = "JS/snap.svg.js"></script>
</head>
<body>
<div class="comm_cont">
<div id = "svgborder">
<svg id = 'svgmain'></svg>
</div>
</div>
</body>
</html>
And init.js
$( document ).ready(function() {
var s = Snap("#svgmain");
var g = s.group();
Snap.load("SVGFILES/3k1e-test.svg",function(lf)
{
g.append(lf);
//trying to load picture... Scale button in future
$('<img />', {
src: 'PNG/plus.png',
width: '30px',
height: '30px',
id: 'buttoninrk'
}).appendTo($('.comm_cont'));
//this button must be on picture
//but in front of the picture svg element
//And i can't click the button
});
});
I played with z-indexes of #svgborder and #buttoninkr but it didn't help me.
How to put button in front of svg element?
#buttoninkr, #svgborder
{
position: absolute;
}
#svgborder
{
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninkr
{
z-index: 1;
}
Added css code with z-indexes.
There is a reason why i'm not using svg buttons instead jquery image button.
Ok, as you can see #svgmain in front of plus.png
http://jsfiddle.net/3wcq9aad/1/
Any ideas?
Solved
#svgborders
{
position: absolute;
background-color: #535364;
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninrk, #buttondekr, #home_btn
{
position: inherit;
top:0;
margin:10px;
z-index: 1;
}
#buttoninrk
{
right:0px;
}
#buttondekr
{
right:60px
}
EDIT: It wasn't the position of the div that made the difference, but simply adding a width and height. So the original HTML works fine as long as you add a width and height to svgborder in the CSS:
http://jsfiddle.net/3wcq9aad/4/
(Note that sometimes, the position of an element within a document can make a difference to how z-index works.)
If you put the svgborder div before the svg, then z-index will work, but you'll need to know the width and height of your SVG and set it on the svgborder div.
<body>
<div class="comm_cont">
<div id="svgborder"></div>
<svg id='svgmain'></svg>
</div>
</body>
#svgborder
{
z-index: 2;
width:330px;
height:150px;
...
}
Fiddle: http://jsfiddle.net/3wcq9aad/3/
svg does not support z-index
Use element position instead:
$('element').css('position', 'absolute');
Is there a way in jQuery to bring a div to front?
I am trying to position the JQuery animation nicely (lower, centered) on this page:
http://www.edoardocroce.com/
I am using snippets of code that I found here and there. You can find the code that I am using here below.
Anybody can tell me if this is possible without much work?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js">
</script>
<script type="text/javascript">
var myName = "Edo's Blog";
var letterColors=[black,black,black];
if(10 < 9) {
bubbleShape = "circle";
}
else {
bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles();
</script>
</body>
</html>
Just add styling to #myCanvas, or add a element above it with the styling, like:
<div id="header"><canvas id="myCanvas"></canvas></div>
and on your css:
#header { text-align: center; width: 100% }
#myCanvas { margin-top: 100px }
This will center the canvas and lower the header by 100px.
add css to center and lower your canvas... for example:
#myCanvas {
margin: 0 auto; /*to center*/
margin-top: 80px; /*to lower*/
}
In case you don't know, css goes in the head, like this
<head>
<style>
#myCanvas {
margin: 0 auto; /*to center*/
margin-top: 80px; /*to lower*/
}
</style>
.....
</head>
Or you can link to an external css sheet, the 'proper' way to do things.
Ok, so I have this html file (sec1_2.html).
<body>
<div id="nameContainer">
<input id="sect1Name">
</div>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div#nameContainer {
background: none repeat scroll 0% 0% #000;
height: 50px;
padding: 0;
margin: 0;
}
input#sect1Name {
width: 330px;
margin: 0;
height: 50px;
padding: 0;
}
</style>
Is a simple div with an input in it.
As you can see, the height on the div and on the input are the same (50px).
So when you display this page you get the input inside the div at the exact same height.
But, now I have this other html (index.html):
<!DOCTYPE html>
<html>
<body>
<div id="section1">
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$("#section1").load("sec1_2.html");
</script>
</body>
Now, here, I have an empty div where I load the external html (sec1_2.html).
When I do it like this, the (visible) height on the input increases!
I don't know why the input changes, if a let the input without height, both versions display the same height (default), but if I set a defined height, it will show a different height when loaded with jQuery.
Anyone knows why is this happening?
Hi for some reason your input is been rendered without one default property with the Jquery call, you can add this to your CSS:
input#sect1Name {
box-sizing:border-box;
}
This property is assigned for default in the html but not with Jquery.
http://plnkr.co/edit/6h8U9AQgFaNUb2plPbh6?p=preview