Below is the code for the displaying a number of items on a shopping cart image.
The background image is not displaying.
Style sheet:
div#cart{
background:url("Cart.gif") no-repeat;
display:inline-block;
height:35px;
width:35px;
}
#clickCount{
float:left;
right:-50px;
top:-15px;
position:relative;
background:lightblue;
border-radius:80px;
border:1px solid grey;
height:20px;
width:20px;
text-align:center;
}
This is the HTML code where I'm using 2 divs one for the display and other for the count:
<code>
<div><div id="cart"></div><p id="clickCount">0</p></div>
<div id="click">
<input type="submit" onclick="myFunc()" value="Cart">
</input>
</code>
Below is the javascript:
function myFunc(){
var val=document.getElementById("clickCount").innerHTML; document.getElementById("clickCount").innerHTML=Number.parseInt(val)+1;
}
This is part of my code. The URL works. My HTML is just a regular HTML document with a body etc...
Is there any particular dimensions which I need to consider while choosing an image for this?
In your CSS remove the div text infront of #cart code should then be #cart{
EDIT::
Also your Cart.gif must be 35px x 35px or smaller since you are setting that dimension in the Css. If its larger than this you could only be seeing the top left corner of the image which could be white space
Here is example using a placeholder image for cart
#cart{
background:url("https://placeholdit.imgix.net/~text?txtsize=8&txt=cart&w=35&h=35") no-repeat;
display:inline-block;
height:35px;
width:35px;
}
#clickCount{
float:left;
right:-50px;
top:-15px;
position:relative;
background:lightblue;
border-radius:80px;
border:1px solid grey;
height:20px;
width:20px;
text-align:center;
}
It could be because there is nothing in the div#cart. Try placing a whitespace character inside of it.
<div><div id="cart"> </div><p id="clickCount">0</p></div>
<div id="click">
<input type="submit" onclick="myFunc()" value="Cart" />
</div>
Side note: <input> tags do not need a closing tag.
I missed giving dimensions for the image.
#cart{
background-image: url("Cart.gif");
background-size: 35px 40px;
display:inline-block;
height:35px;
width:35px;
}
Please check your image if it has 35px*35px dimensions or not,
And if it larger then that of your DIV#cart div dimensions you have to add background positioning properties to CSS.
I have used your code only in below snippet with just google image sprite with positioning properties and it works perfectly fine.
function myFunc(){
var val=document.getElementById("clickCount").innerHTML; document.getElementById("clickCount").innerHTML=Number.parseInt(val)+1;
}
div#cart{
background:url("https://www.google.com/images/nav_logo225.png") no-repeat right -35px ;
display:inline-block;
height:35px;
width:35px;
}
#clickCount{
float:left;
right:-50px;
top:-15px;
position:relative;
background:lightblue;
border-radius:80px;
border:1px solid grey;
height:20px;
width:20px;
text-align:center;
}
<div><div id="cart"></div><p id="clickCount">0</p></div>
<div id="click">
<input type="submit" onclick="myFunc()" value="Cart">
</input>
Or can check this fiddle as well.
Thanks.
Related
I am trying make it as a name of table besides table name red color dashes is there i want to append this dashes dynamically based on screen size . on both sides of my text . sorry for my bad English. give me a Suggestion how to make it ?
.container{
width:100%;
height:30px;
background:blue;
text-align:center;
}
.container span{
color:#fff;
}
.container .dashes{
display:inline-block;
width:5px;
height:5px;
background:red;
vertical-align:middle;
}
<div class="container">
<div class="dashes"></div>
<span>Name</span>
<div class="dashes"></div>
</div>
Just set the .dashes width as per your screen size using media-query.
.container{
width:100%;
height:30px;
background:blue;
text-align:center;
padding-top: 10px;
}
.container span{
color:#fff;
}
.container .dashes{
display:inline-block;
width:200px;
height:0;
background:red;
vertical-align:middle;
border: 2px dashed blue;
}
<div class="container">
<div class="dashes"></div>
<span>Name</span>
<div class="dashes"></div>
</div>
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 made a menubar using a <div> tag. When it is clicked the <div> below it slides down, and another content below those two <div>'s should stay in its place, but it goes down too.
You can see picture here
As you see in this picture when I click to slide down <div> , the other <div> in bottom of that goes down too. How to fix it?
HTML
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
}
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
}
jQuery
$(document).ready(function(){
$('#slide').click(function(){
$('#panel').stop().slideToggle(570);
});
});
You can make a few position changes in your CSS, and place your second <div> inside your first. top:100% mean's that your second div will animate from the bottom of your first div:
HTML
<div id="slide">click to slide down
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
position:relative;
}
#panel{
position:absolute;
top:100%;
box-sizing:border-box;
text-align:center;
border:solid 1px #101010;
width:100%;
height:200px;
display:none;
background:#ff0000;
}
JSFiddle
Try this:
HTML
<div id="menu_container">
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#menu_container { position:relative; }
#panel { position:absolute; top:100%; left:0; }
Replace your code with this
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
z-index: 10;
position: absolute;
}
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