I'm looking for a way to create toolbar buttons uisng jquery ui.
I tried to create button using
<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>
and using
$('#menubar_home').button({
icons: { primary: "ui-icon-home" }
});
But image in button is not centered:
How to center image in button ?
#menubar_home {
display:table-cell;
vertical-align: middle;
text-align: center;
}
I assume there isn't transparent sides in the image.
Adds a border to img to work on positioning: border: 1px solid red;
Then check the image has a display: block; property.
Try to add margin: 0 auto; property, which aims to center a block (your image).
You will perhaps need to add !important to force the property: margin: 0 auto !important;
Hoping to help you (not sure, not easy without manipulating the code myself).
Add a padding:8px; to the button/input style to allow the icon to be properly aligned.
You could also place a span within the div like so:
<div id="menu-bar-home">
<span class="ui-icon ui-icon-home"></span>
</div>
reference it in css and change the position:
div#menu-bar-home {
position:relative;
}
div#menu-bar-home > span {
position: absolute;
left: +or-(n)px; /* so just adjust the position
}
also note you may have to adjust the z-index of the span.
best o' luck, bro.
EDIT: you may still achieve the results you want in this manner, but I though you were creating the button with the div.
As the gentleman below suggests, I would set the css for menu bar as such:
div#menu-bar-home
{
display: table-cell;
vertical-align: middle;
text-align:center;
}
I ended up doing the following in CSS:
#menubar_home {
font-size: 0;
width: 23px; top: 5;
height: 23px;
}
Related
I'm not very good at CSS, I guess that will we easy to one of you.
Look at image below, i'm trying to center my text but center it with the div parent's width, as if there was no button, but I don't know how to proceed.
<div class="parent" style="width:500px;">
<div class="container" style="width:400px;"> My text here </div>
<button style="width:100px;">My Button</button>
</div>
I tried :
.parent { text-align: center; }
but that center the text with the .container width (so at 200px) but i'm looking for a way to center it a 250px here (.parent width)
I think about doing that with a padding-left but that's not a "clean" method in my case because button is not always displayed.
If someone knows how can I do that please :)
image:
One option would be to use absolute positioning on the button!
.parent {
position: relative; // position the button within the parent div
}
button {
position: absolute;
right: 0;
top: 0; // or whatever, position it where you want it
}
.container {
padding-right: 100px; // so the text doesn't overlap with the button
padding-left: 100px; // so the text is balanced
text-align: center;
}
EDIT:
And when the button isn't needed, you could use a conditional on the parent --
.container--with-button {
padding-right: 100px;
padding-left: 100px;
}
.container--without-button {
padding: 0;
}
If I understand you right then all you'll need to do is add a text-align property to your div.
.div { text-align: center }
I made a quick example that matches your diagram here, hope it helps.
https://jsbin.com/qubeqezama/7/edit?html,css
From what I see you only need to add display: block; to the .parent element. That way they'll be both displayed as a block and then all the text will be centered. ;)
I am looking for some direction pointing as I am a bit lost.
I have a container div with a :before style I am using to add some information on a page. This works well as I found an example using SO at How can I add a large faded text background via css?. What I want is that when the "main" div is expanded, that it covers up the :before pseudo element's content.
I have tried various combinations of div structuring (containers) and palyed with the z-index of the pseudo element and the main div. NOTE that I can not put a "z-index" of -1 on the "title" text ... as that actually hides it behind content I actually want to see in my actual application.
HTML
<div class="show-title" data-div-title="Div Title">
<div class="center-me">
This is my box!
</div
<div>
<button id="set500">500px</button>
<button id="set1000">1000px</button>
<button id="set1500">1500px</button>
CSS
.show-title::before {
color: dimgrey;
content: attr(data-div-title);
display: block;
font-size: 1.2em;
line-height: 1;
position: absolute;
top: 10px;
left: 10px;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;
text-orientation: upright;
padding: 3px;
background-color: gainsboro;
border: 1px solid darkgray;
border-radius: 3px;
z-index:1;
}
.center-me {
color: dimgrey;
padding:10px;
background-color: gainsboro;
border: 1px solid maroon;
width: 500px;
height: 300px;
margin-left: auto ;
margin-right: auto ;
overflow: auto;
z-index:10;
}
JavaScript (just for enlarging the main content div, not apart of the actual question!)
(function($){
$("#set500").on("click", function() {
$(".center-me").width("500px");
})
$("#set1000").on("click", function() {
$(".center-me").width("1000px");
})
$("#set1500").on("click", function() {
$(".center-me").width("1500px");
})
})(jQuery);
I created a little jsFiddle to show what I am referring to. When the "box" is expanded, I would like it to go "over" (basically hiding) any of the "Title" text. (Any little bit left over showing is fine!)
http://jsfiddle.net/uLohn3e4/3/
Any direction pointing would be useful as I just could not find what I was trying to accomplish. Even if that is to try a new layout altogether (that achieves something similar). If I am missing any useful information, please ask ... thanks in advance.
Simply add position:relative; to your .center-me element
in order for your z-index to apply z-index#MDN.
http://jsfiddle.net/uLohn3e4/5/
I am trying to show a tool tip box on hover an image. I won't be able to use jquery or any other plugin. I have to use pure css. I have seen a demo working here.
http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html
My code:
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Jsfiddle :
http://jsfiddle.net/txeF2/
For some reason I can't get the tooltip box.
UPDATED : http://jsfiddle.net/Md5E6/4/
Here is one solution: EXAMPLE HERE
Change .tooltip from inline to inline-block:
.tooltip {
display: inline-block;
position: relative;
}
Then remove the absolute positioning from the child img element. This was causing the main problem; as the element was removed from the flow of the document, thus causing the parent element to have no dimensions and collapse upon itself.
use like this to show tooltip
<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
If you want to view complete code with demo here is a full tutorial Create CSS3 Tooltip
For me the reason was my parent div had an attribute "pointer-events: none". Removing this fixed my tooltip not showing issue for the child div.
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
I have a popup that displays some results, and I want a scroll bar to be display since the results are being cutt off (and I don't want the popup to be too long).
You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical).
If you only want a scrollbar when needed, just do overflow-y:auto;
Css class to have a nice Div with scroll
.DivToScroll{
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #3B3C3E;
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 10px 7px 5px;
}
.DivWithScroll{
height:120px;
overflow:scroll;
overflow-x:hidden;
}
to add scroll u need to define max-height of your div and then add overflow-y
so do something like this
.my_scroll_div{
overflow-y: auto;
max-height: 100px;
}
If you want to add a scroll bar using jquery the following will work. If your div had a id of 'mydiv' you could us the following jquery id selector with css property:
jQuery('#mydiv').css("overflow-y", "scroll");
<div class="scrollingDiv">foo</div>
div.scrollingDiv
{
overflow:scroll;
}
<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:40%;
height:200PX;
FLOAT: left;
margin-left: 5%;
padding: 1%;
overflow:scroll;
}
</style>
</head>
<body>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better control of the layout. The default value is visible.better </div>
</body>
</html>
If you have a CSS file, you can define a call for the <div> element and assign the overflow: auto CSS property.
In the HTML file: <div class="container">
In the CSS file you put:
.container{
overflow: "auto";
}
There are multiple ways to achieve a scroller on a div, here find a simple easy way one with an easy explanation.
.my_scroll_div {
overflow-y: auto;
max-height: 100px;
}
Here is a bit explanation of the above code.
overflow-y: auto;
The overflow-y property of CSS adds a scroller when needed, If we want to add the scroller after a specific height (e.g 100px in our case)
Then,
max-height: 100px;
We add the max-height property of CSS so for example to add a scroller after 100px of height then max-height: 100px; is used.
I hope this explanation is helpful in clearing the concepts as well.