<script id="canteen_card_row_template" type="text/html">
<div class="normal-box">
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}" id="mensa-image">
</div><span class="options-title" id="mensa-text">{{title.de_DE}}</span>
</div>
<div class="side-text-box">
<span class="side-text">{{price.student}}€</span>
</div>
<div class="small-text">
<span class="normal-text" id="mensa-text">{{content}}</span>
</div>
</div>
</script>
CSS
#mensa-image{
height: 13px;
width:13px;
border: none !important;}
I have the problem where img src="blabla" is... Using handlebars and a webservice that template is loaded 4 times.. The fourth "normal-box" does not have content therefore no image(thats ok).. the problem is, since it has no image the div where the image is placed should be blank, but there an unwanted border instead... Here is an image of how it looks like pic
Use 0 instead of none
border: 0;
not
border: none;
Also, if you are generating multiple "mensa-image" images then you should be using class instead of ID.
Try this CSS rule instead and remove the ID from the image:
.mensa-image img {
border: none;
}
and HTML (partly):
<div class="subtitle-box">
<div class="mensa-img">
<img src="{{type.[0].image}}">
</div>
<span class="options-title">{{title.de_DE}}</span>
</div>
As #Lowcase wrote, you should not use an ID several times (same for the text span, BTW). If you simply remove the ID, the above rule should work.
That's the work of the browser when no image is found. The easiest fix is just to add a transparent .png.
Related
I am trying to have these 3 input boxes inline on my webpage. "Leave Code" & "From" I was able to bring inline. However the "To" input box remains on the next row.
I believe this has to do with the tag I am giving "To". Not sure how to fix this
I have tried using some basic CSS. Attached is my code snipped
<div class="Dates" *ngFor="let dateline of dates">
<!--
<div class="ui-g">
<div class="ui-g-12"> -->
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-4">
<p-dropdown [options]="leaveCodes2" [(ngModel)]="selectedLeaveCode2" placeholder="Leave Code"
optionLabel="name"></p-dropdown>
<div style = "display: inline-block; padding: 2rem ">
<h3 >From</h3>
<p-calendar [(ngModel)]="date3" [showIcon]="true" showTime="true" hourFormat="12"></p-calendar></div>
<h3 style = "display: inline-block; padding: 2rem ">To</h3>
<p-calendar [(ngModel)]="date3" [showIcon]="true" showTime="true" hourFormat="12"></p-calendar> <br><br>
</div>
</div>
</div>
Here is the view:
Maybe you can force the situation with a little help of css:
<div class="ui-md form_inline">
<div class="ui-md-2">
<label>First Item label:</label>
</div>
<div class="ui-md-2">
First Value
</div>
...
<div>
<style>
.form_inline > .ui-md-2{-ms-flex: 0 0 16.6666%!important; flex: 0 0 16.6666%!important; max-width: 16.6666%!important; float:left!important;}
</style>
You can check how is the size of box adding:
<style>
.form_inline > .ui-md-2{border:1px solid red;}
</style>
If you have div.ui-md-2 at 100% width, probably you have a hack in css that change that. It's better fix this with a particular class and don't change this columns for whole project.
:D
Keep simple:
Use for labels,
Don't use h3 for subtitles:
If use div, h#, p, etc all this elements are display in block.
<div class="ui-md">
<div class="ui-md-2">
<label>First Item label:</label>
</div>
<div class="ui-md-2">
First Value
</div>
...
<div>
This question already has answers here:
CSS background image alt attribute
(11 answers)
Closed 6 years ago.
How can I display text instead of logo, if the logo graphic file isn't loaded or missing? I have div with background PNG image:
<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>
.iHaveBgImage { background-image: url('img.png') }
It doesn't have to be pure CSS, Javascript solution is allowed. I was thinking of onerror event, but it works with images, not elements that have image backgrounds.
EDIT:
I was told this has been answered before, but there is another situation. I didn't say one can alter DOM, only apply CSS and JS. Second, in that other solution is sugested I should use title attribute and I tried it and it doesn't display text, only hovers it.
Try it this way:
HTML
<div class="iHaveBgImage">
<p>this text should be displayed if bg image is not loaded</p>
</div>
CSS
.iHaveBgImage { background-image:
url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color:red;
}
.iHaveBgImage > p {
position: relative;
z-index: -1;
}
Works perfectly https://jsfiddle.net/s0gt2eng/
This is what I suggested in the duplicate tag:
.iHaveBgImage{
width:500px;
height:200px;
background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
}
<div class="iHaveBgImage" title="this text should be displayed if bg image is not loaded">
</div>
Alternative using span tags:
span.image:before{
content:" "; background:url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg');
display: block;
position:absolute;
width:500px;
height:200px;
}
<span class="image">alternate text</span>
One workaround to this would be to change
<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>
.iHaveBgImage { background-image: url('img.png') }
To :
<img src="img.png" alt="Seems like this image failed to load" />
Alternatively I am not sure if the following would work, but you can MAYBE do something along the lines of:
<img class="iHaveBgImage" alt="Seems like this image failed to load" />
.iHaveBgImage { background-image: url('img.png') }
EDIT: Something that just popped up in my head that could possibly also work would be to have:
<div class="iHaveBgImage">
<p class="bgText">this text should be displayed if bg image is not loaded</p>
</div>
.iHaveBgImage {
background-image: url('img.png')
}
.bgText {
z-index: -9999;
}
Try this
P.hidden {
visibility: hidden;
}
.iHaveBgImage {
background-image: url('https://s31.postimg.org/yqv51r5xn/6936671_hd_wallpapers_for_ipad.jpg');
color: red;
width:700px;
height:300px;
}
<div class="iHaveBgImage">
<p class="hidden> This text should be displayed if bg image is not loaded</p>
</div>
if you want to use text visible to text use <span></span> tag and create css span {display: block;} or
html
<p class="hidden> This text should be displayed if bg image is not loaded</p>
CSS
P.hidden {
visibility: hidden;
}
How can I write in jQuery this:
If .horse is visible, then add #cat to .dog (but only to .dog which is child of the visible .horse)?
<div id="tabs-1" class="horse" style=" margin-right: 20px; display: none;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>
<div id="tabs-2" class="horse" style=" margin-right: 20px; display: block;">
<div style = "width:70%; margin: 0 auto; margin-top:-20px">
<div class="rabbit">
<a class="dog" href="movie.mov"></a>
</div>
</div>
</div>
Use following, it will work
$('.horse:visible .dog').attr('id','cat')
If you want to add the ID cat to .dog, use this:
$(".horse:visible .dog").attr("id", "cat");
Here is an example.
Try,
$('.horse:visible .dog').append($('#cat'));
The above code would append #cat into .dog which is a descendant of visible .horse
If you want to add id to the particular element then do,
$('.horse:visible .dog').attr('id','cat');
We can combine jQuery's :visible selector with jQuery's attr() method to set the id:
$('.horse:visible .dog').attr('id', 'cat');
This will give the .dog element contained within your visible .horse element an id of "cat".
i am adding divs dynamically at the bottom of screen. My problem is i want to add a div to left side of 1st div as used in facebook chatting.
I have created a jsfiddle example for more clarification
http://jsfiddle.net/Jsu4t/
<div id="ctrId1" class="draggable chatRoom " rel="0" style="float: right; bottom: 0; position:fixed; right: 0px; z-index: 1000; padding: 5px; background-color:whitesmoke;">
<div class="header" style="background-color:#006dcc">
<div style="float:right;">
<img id="imgDelete" class="imgClose" data-control="ctrId1" style="cursor:pointer;" src="Images/x_icon_hover.png"/></div>
<span class="selText" rel="0">rashmi</span></div>
<div id="divMessage" class="messageArea"></div>
<div class="buttonBar" style="padding-top:10px;bottom:0px,position:absolute;"><input id="txtPrivateMessage" class="msgText" type="text" />
<input id="btnSendMessage" class="submitButton button" type="button" value="Send" /></div></div>
In my code i am appending all the dynamic divs to a parent div, but still same issue.
you can append multiple DIVs to first DIV, there are two way to keep all div in a single line starting from left.
You can use "display:inline" Or you can use "float:left" in DIV style.
This one works as expected I hope
jsfiddle.net/U2QDD/
I have a number of DIVs currently laid out in an oval shape. Each div represents a "service" and is ID'd accordingly, all are set with an absolute position.
What I am wanting to do is on mouseover of a div, I want to have a new DIV with relevant information appear in the middle. This should happen for each "service" so each "descriptive" div will be hidden until mouseover but all appear in the same space.
The website in question is the home page of www.faa.net.au.
How do I go about making this new descriptive DIV appear on mouseover and hide on mouseout?
What you can do is position all of those divs in that spot in the middle with CSS. They can stack and the z-index doesn't matter since all you'll only see one at a time. Then hide them with "display:none" in your CSS.
Then use jQuery's .hover() method to show those the appropriate div on mouseover
$("#idOftheDivYouHoverOn").hover(function (e) {
//This funciton defines what happens on mouse-in or hover.
$("#idOfTheDefaultCenterDiv").hide();
$("#idOfTheDivYouWantedToShow").show();
}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.
$("#idOfTheDefaultCenterDiv").show();
$("#idOfTheDivYouWantedToShow").hide();
});
You'll have to do this for each one you hover on. There is a "smarter" way but it would be a very long answer to explain it.
That is if you want to do this using JavaScript/jQuery instead of just plain CSS similar to the ones you see in other answers. With this method you can add fading effects - take a look at jQuery's hover - http://api.jquery.com/hover/
Edit: Here's a working example: http://jsfiddle.net/6dMDS/
Hope that helps.
A friend in another forum just posted another way of doing this. Be warned it's CSS3 only so some browsers (and definitely older IE's) won't support it.
<div class="container">
<img class="one" src="http://placehold.it/100x100" />
<img class="two" src="http://placehold.it/100x100" /><br>
<img class="three" src="http://placehold.it/100x100" />
<img class="four" src="http://placehold.it/100x100" /><br>
<img class="five" src="http://placehold.it/100x100" />
<img class="six" src="http://placehold.it/100x100" />
<div class="hidden-one">hidden-one</div>
<div class="hidden-two">hidden-two</div>
<div class="hidden-three">hidden-three</div>
<div class="hidden-four">hidden-four</div>
<div class="hidden-five">hidden-five</div>
<div class="hidden-six">hidden-six</div>
</div>
* {margin: 0; padding: 0;}
.container {width: 400px;}
.one:hover ~ .hidden-one,
.two:hover ~ .hidden-two,
.three:hover ~ .hidden-three,
.four:hover ~ .hidden-four,
.five:hover ~ .hidden-five,
.six:hover ~ .hidden-six
{display: block;}
.hidden-one,
.hidden-two,
.hidden-three,
.hidden-four,
.hidden-five,
.hidden-six
{
width: 200px;
height: 300px;
border: 1px solid red;
display:none;
float: right;
position: relative;
top:-305px;
left: 10px;
}
http://codepen.io/anon/pen/LbfCl
So if I got it right, you got a "service" DIV and a "descriptive" DIV. Try some CSS to make it happen.
HTML:
<div id="service"></div>
<div id="descriptive"></div>
And CSS:
#descriptive
{
visibility:hidden;
}
#service:hover #descriptive
{
visibility:visible;
}
Basically this will make the DIV with id="descriptive" be shown when id="service" is hovered.