I have code like this :
HTML:
<div id="myDiv" class="container">
....
</div>
CSS:
div.container {
width: 300px;
height: 400px;
border: solid 1px black;
overflow: hidden;
background: #efefef;
}
JS:
var myDiv = document.getElementById("myDiv");
var pageWidth = parseInt(myDiv.style.width);
I want to read css property and I can change value using js.
I have tried search with google, and my js code from link of google.
After I check the problem with safari's web inspector, there is problem in that I give sign for js code.
Why is that wrong?
var width = parseInt($('#myDiv').width(), 10);
You probably want to use css:
$("#myDiv").css("width","yourWidthhere");
To get the width of an element, just use:
$("#yourElementId").width();
try this
alert($('yourdiv').width());
live demo here
You may try this :
$("#myDiv").css("width","100%");
You can't get the class property using this code.
var myDiv = document.getElementById("myDiv"); var pageWidth =
parseInt(myDiv.style.width);
I am going with a jquery way, here is the sample code:
<html>
<head>
<style>
div.container { width: 300px; height: 400px; border: solid 1px black; overflow: hidden; background: #efefef;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
</head>
<body><div id="myDiv" class="container"> hi...</div></body>
</html>
Then you should able to get and set the width using the jquery methods:
$("#myDiv").width(); //Get
$("#myDiv").width(500); //Set
Related
I've been sitting with this problem for like 2 hours. What I'm trying to make is a website where you push a button and it changes color. I know this can be done with CSS, but I'm not interested in that.
The main problem is that when I push the button, nothing happens.. However, if I remove the ' #sug from the css' everything works perfectly... So what I want to do, is to make the layout very basic at the beginning, so there's nothing to it, except like the black background, and when I push the buttons it should switch..
Also, I know you can implement onclick in the button tag, but that's not what I'm going for either. I want to know WHY this happens and how I can resolve this problem.
Here's my javascript, CSS and HTML code:
window.onload = setUp;
function setUp() {
document.getElementById("normal").onclick = setNormalStyle;
document.getElementById("crazy").onclick = setCoolStyle;
document.getElementById("insane").onclick = setInsaneStyle;
}
function setNormalStyle() {
var messageBox = document.getElementById("sug");
messageBox.className = "normal";
}
function setCoolStyle() {
var savingTheSecondVar = document.getElementById("sug");
savingTheSecondVar.className = "cool";
}
function setInsaneStyle() {
var savingTheThirdVar = document.getElementById("sug");
savingTheThirdVar.className = "insane";
}
#sug {
background-color: black;
}
.normal {
height: 500px;
background-color: blue;
color: white;
padding: 30px;
margin: auto;
width: 500px;
}
.insane {
height: 500px;
background-color: green;
padding: 30px;
margin: auto;
width: 500px;
color: white;
}
.cool {
height: 500px;
background-color: red;
padding: 30px;
margin: auto;
width: 500px;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="Struktur.css" />
<script type="text/javascript" src="struktur.js"></script>
<title>My first Javascript project</title>
</head>
<body>
<div id="sug" class="cool insane normal">
<header>
<h1> Welcome to this Javascript site! </h1>
</header>
<section>
<p>
text
</p>
</section>
<button type="button" id="normal">First style</button>
<button type="button" id="crazy">Second style</button>
<button type="button" id="insane">Third style</button>
</div>
</body>
</html>
The problem is your CSS.
#sug{
background-color: black;
}
Overrides the background-color of your classes because it is a more specific selector (i.e. an id selector).
change the rest of your classes in the css to include the id like
#sug.normal, #sug.insane, #sug.cool etc.
Here is a nice article on CSS specificity to help you understand more: https://css-tricks.com/specifics-on-css-specificity/
That's because an id has preference over a class. You will need to specify it like this:
#sug.cool { background: red; }
etc.
You are not removing the background-color provided by the #sug id in CSS onClick() events of the buttons.
Id has more preference over classes
It is a good habit to use below code as classes has spaces between them and it can be used if you want to add more than one class.
messageBox.className += " " + "normal";
So I'm trying to use bPopup as a modal window, but I can't see to get the actual modal window to pop up. I followed the instructions on the documentation (see http://dinbror.dk/bpopup/), but I can't seem to get it appear. Am I missing something?
<html>
<script type = "text/javascript" src = "jquery-1.11.3.min.js"></script>
<script type = "text/javascript" src = "jquery.bpopup.min.js"></script>
<p> Some text </p>
<div style="display:none" id='popup'>
Why is there no modal body???
</div>
<script type = "text/javascript">
$(document).ready(
function(){
$('p').click(function(){
$('#popup').bPopup();
})
})
</script>
</html>
The resulting script looks like this:
After clicking, the result is this:
However, on the documentation, the modal is as follows:
I'm really not sure what I'm missing. I'm probably just blind to something really obvious, any ideas?
Have you read this?
What is bPopup? bPopup is a lightweight jQuery modal popup plugin
(only 1.49KB gzipped). It doesn't create or style your popup but
provides you with all the logic like centering, modal overlay, events
and more. It gives you a lot of opportunities to customize so it will
fit your needs.
So you need to write your own styles for the modal window.
Do not give inline style style="display:none". Inline style will have highest priority and hence bpopup does not/cannot change that property.
Style it in css instead like this
#popup {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
$(document).ready(function() {
$('p').click(function() {
$('#popup').bPopup();
});
});
#popup {
background-color: #fff;
border-radius: 15px;
color: #000;
display: none;
padding: 20px;
min-width: 400px;
min-height: 180px;
}
.bClose {
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>
<p>Some text</p>
<div id='popup'>Why is there no modal body???
<span class="bClose">x</span>
</div>
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've been trying to achieve 100% [window] height on a DIV for a project that I am working on. It works great in the desktop but when I try to load it using an iPhone 4 or an Android phone, the first div appears to be 100%; however each subsequent DIV appears to be about 50 pixels (just an estimate) short.
I tried setting it through css by doing the following:
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
div#container {
width: 100%;
height: 100%;
}
div#section1 {
width: 100%;
height: 100%;
background-color: blue;
}
div#section2 {
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="container>
<div id="section1">
. . .
</div>
<div id="section2">
. . .
</div>
</div>
</body>
</html>
I also tried setting it through javascript with jQuery using something similar to:
var browser_width = $(window).width();
var browser_height = $(window).height();
$(document).ready(function(){
$("#section1, #section2").css("width", browser_width, "height", browser_height);
});
but it behaves the same way as the CSS. Can anyone point me in the right direction?
you have to set the right format to the .css() method in your script
$(document).ready(function(){
$("#section1, #section2").css({
"width" : browser_width,
"height" : browser_height
}); //css
});
UPDATE : also I noticed you forgot to close your first css declaration
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
... the closing bracket } is missing.
Side note : I wouldn't set dimension properties to the html and/or body tags to avoid unexpected results ... unless you know what you are doing
I'm trying to create some draggable boxes in javascript. I decided to make an empty class "draggable" in CSS and a "box" class. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.draggable
{
}
.box
{
position: absolute;
width: 80px; height: 60px;
padding-top: 10px;
text-align: center;
font-size: 40px;
background-color: #222;
color: #CCC;
}
</style>
</head>
<body>
<div class="draggable box">1</div>
<div class="draggable box">2</div>
<div class="draggable box">3</div>
<script>
var draggableStuff = document.querySelectorAll('draggable');
var tabLength = draggableStuff.length;
alert(tabLength);
</script>
</body>
The problem is that tabLength is always zero. I want to get an array filled with all draggable stuff. I'm new to javascript. What have I missed here?
You want to select elements by class, so don't forget about the dot:
var draggableStuff = document.querySelectorAll('.draggable');
Another option is to use document.getElementsByClassName:
var draggableStuff = document.getElementsByClassName('draggable');
I came across this situation. Although it is too old post I would like to help people with my answer:
To select all the elements (no matter what it is, it may be div, span, h1, etc...) with particular attribute
Without value?:
var dragables = document.querySelectorAll('[draggable]');
With value?:
var dragables = document.querySelectorAll('[draggable="true"]');