I have created box with image, title, link and few data which is here:
Fiddle Example
I want to create the replica of div box which should be little larger then actually. Actually I want to show it highlighted with little larger size on hover.
I create second copy in fiddle with item2 class by increased height but no effect.
can some one tell me how to do this?
I found this while googling
$('#theDiv').clone().css('-webkit-transform', 'scale(.125, .125)');
and
var w = $("#thediv").width();
var clone = $('#thediv').clone().css("width", w/8);
But I could not figure out with it.
You're duplicating IDs. IDs must be unique in HTML, and JavaScript will only search for the first ID it finds and no more:
var w = $("#thediv").width();
var clone = $('#thediv').clone().attr('id', 'newId').css("width", w/8);
You can use CSS hover to d this
Fiddle: Example
.item:hover h6 {
margin-top: 20px;
font-size: 14px;
}
.item:hover .moreBtn img {
margin-top: 4px;
}
.item:hover .moreBtn {
position: relative;
font-size: 16px;
margin-right: 10px;
margin-top: 40px;
color: red;
text-shadow: 0px 1px 0px;
font-family: Helvetica;
font-weight:bold;
text-style:italic;
}
.item:hover .pillBtn {
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background:#7CDD97;
padding: 21px 70px 21.0px 70px;
color: #FFF;
font-weight: bold;
font-size: 20px;
text-decoration: none;
}
.item:hover {
background:#F3F3F3;
height: 70px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.item:hover .media-object {
height: 70px;
width: 140px;
}
Related
I'm creating a Chrome extension that injects some HTML to display a popup overlay at the location of user highlighted text. It works as intended on most websites, but on some websites (notably ESPN) the overlay CSS I've written is getting overridden by the default website CSS.
I've created id tags for each of my elements to have more specific CSS selectors but visually nothing has changed. I've also tried using !important, despite being bad practice, but that also has not affected anything.
Here's my code for creating the overlay:
function setupOverlay() {
overlayDOM = document.createElement("div");
overlayDOM.setAttribute("id", "selection_overlay");
statsTable = document.createElement("table");
statsTable.setAttribute("id", "selection_table");
overlayDOM.appendChild(statsTable);
document.body.appendChild(overlayDOM);
}
Here's a portion of the CSS for the overlay:
#selection_overlay {
visibility: hidden;
position: absolute;
z-index: 2147483647;
top: 0;
left: 0;
border: solid 2px;
border-color: #808080;
border-radius: 5px;
box-shadow: 0px 0px 2px 2px #404040;
padding: 5px 0px 5px 0px;
background-color: rgba(75, 75, 75, 0.95);
}
#selection_table {
border-collapse: collapse;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
color: #FFFFFF;
}
It looks like ESPN uses some styles that affect table elements:
table td:first-child {
text-align: left;
}
table td {
color: #48494a;
font-size: 12px;
font-weight: 400;
height: 28px;
line-height: 1.2;
padding: 1px 4px 0 4px;
margin: 0;
text-transform: none;
white-space: nowrap;
}
table th, table td {
text-align: right;
}
Since your Table children elements aren't explicitly called out, this may be what's overriding your settings. I suggest specifically styling all elements such as:
#selection_table td {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
color: #FFFFFF;
}
I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute:
$('.item-title').hover(function() {
$(this).parent().addClass('hover');
}, function() {
$(this).parent().removeClass('hover');
});
$('.item-title').on('click', function() {
alert('test this')
});
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="item-button"><span class="item-title">File Title</span></button>
However I can't seem to get the label that's now floating outside the control to react at all to any mouse events. How can I get it to be clickable and pass its hover state back to its parent?
Edit: Seems this is a browser specific issue to firefox, works correctly in Chrome and IE.
Have you tried to write "e.stoppropagation()" in the click event of the label. this will stop the label to push events to its parents.
Update: I tried binding a click event to your label and it works without an issue,
$('.item-title').on('click',function(){
alert('test this')});
Edit your Css code :
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
z-index : 888;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
I have a input tag with this css.
#myInput {
position: relative;
border: 1px solid #95B8E7;
background-color: #fff;
height: 30px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
I wanted my Input field value should be underline and ';' at the end. How should I write CSS for that.
Here is I am setting my input Value.
function selectItem(input, value) {
input.value += " "+value+";";
}
Add text-decoration: underline; to your CSS, and just call your function by selecting your HTML element, like so: selectItem(document.getElementById('myInput'),'foo').
Working Jsfiddle: https://jsfiddle.net/tacj0eeq/2/
I'm trying to achieve the below result by ONLY using the "labels" class (eg. I don't want the "arrow" class/html). Is this possible with pseudo elements only? Like ".labels:tesing{}" etc.
.labels{
position: relative;
display: inline-block;
vertical-align: top;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
padding: 5px;
color: #fff;
border-radius: 5px;
background-color: red;
}
.labels:before{
display: inline-block;
vertical-align: top;
font-size: 12px;
content: '$';
}
.labels:after{
display: inline-block;
vertical-align: top;
margin-left: 1px;
font-size: 12px;
content: 'USD';
}
.arrow{
position: absolute;
bottom: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid blue;
}
HTML:
<div class="labels">199
<div class="arrow"></div>
</div>
JS Fiddle:
http://jsfiddle.net/edcxsw1/w9z7vvxw/
This is not possible with CSS only, but pretty simple with jQuery. Just that way:
$('.labels').append('<div class="arrow"></div>');
FIDDLE: https://jsfiddle.net/lmgonzalves/w9z7vvxw/3/
I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.
Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN
try this, use clearfix class
<p class="clearfix"></p>
Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}
Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}