I have created a css class for like this:
.nav-right-EmployeeEmail {
content: url('../app_resources/nav-blue-email60.png');
padding-top:5px;
width:60px;
}
and using it in aspx file like this:
<img class="nav-right-EmployeeEmail" alt="FT Logo" /></a> <a target="_self" href="index.aspx" title="Help Desk">
I did this to make sure if the images/logos changes in future, then I only need to change it in css file and it will be reflected on every page.
The issue is that the images are not being shown in IE9. I can only see the image placeholders but not the actual image. Please note that the <img> is inside an <a> tag.
Any help will be highly appreciated!!
Yes, it makes sure that you need to change CSS only if the image is changed.
If what you're trying to do is define your logo left to some element, do it like this :
.nav-right-EmployeeEmail:before {
content: url(../app_resources/nav-blue-email60.png);
padding-top:5px;
width:60px;
}
And create your element like this for exemple :
<a class=nav-right-EmployeeEmail target="_self" href="index.aspx" title="Help Desk">some link</a>
DEMO : http://jsfiddle.net/UP88d/
Related
I have an issue with some components which using ng-template. If the component I'm using generates some elements which I don't want or contain a buggy thing, I seek for workarounds. Ideally I shouldn't do, but once there are some issues with these depending lib and I'm compelled to do so. Previously faced similar issue with popver, and now with ngx-datatable. I appreciate if you can tell me the better practice I need to follow.
i.e. here for ngx-datatabler-row-detail template I get an output with a div which has .datatable-row-detail class. If I don't override it with /deep/ (which is deprecated I heard), even !important doesn't work to override the width. How can I override these class styles for generated fields within angular component, since there is no way to give them an id ?
/deep/
.datatable-body-row{
border-bottom:1px solid #000;
}
/deep/
.datatable-row-detail{
width:600px !important;
}
<!-- Row Detail Template -->
<ngx-datatable-row-detail [rowHeight]="120" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template
...>
<div style="padding-left:35px" >
<div><strong>==== Details ===</strong></div>
<li *ngFor="let detail of row.details">
{{detail }}
</li>
</div>
</ng-template>
</ngx-datatable-row-detail>
<ngx-datatable-column>
<ng-template
...>
<a
(click)="toggleExpandRow(row)"> <i class="fa fa-cube btn-link" hover-class="active"></i>
</a>
</ng-template>
</ngx-datatable-column>
Please see this stackblits. Just remove the /deep/ from css and when you click on open you no longer see the background.
https://stackblitz.com/edit/ngx-datatable-row-detail-omuywi?file=app/app.component.css
I don't think it is possible to override the thirdparty component styles from an Angular component in a clean way. (There are options like using the deprecated deep or turning off ViewEncapsulation.)
However, overriding them is possible from the global styles.scss in the app root. If we put the following styles into it, it works:
.datatable-body-row {
border-bottom: 1px solid #000;
}
.datatable-row-detail {
background: rgb(134, 79, 79) !important;
}
Stackblitz:
https://stackblitz.com/edit/ngx-datatable-row-detail-mj3otr?file=styles.css
I have a situation where I need to access a div which is dynamically generated by jQuery mobile.
How can I access this using CSS ? I need to change UI of the inside div.
Following is the HTML structure.
<div id="myCreatedDiv">
<div class="jQueryMobileCreatedDiv">
/* I need to access this div */
</div>
</div>
Note: Above structure I found in chrome's element inspector
My original code is as follows
<div id="one" class="myDiv" ui-body-d ui-content">
<input name="anyName" id="jQueryTextBox"/>
</div>
It would be very helpful if anyone can help me for the same.
Thanks in advance!
You can acces div inside .jQueryMobileCreatedDiv is like this:
var divInside = $('.jQueryMobileCreatedDiv').children("div");
Use this CSS selector:
#myCreatedDiv > div { /* Your CSS here */ }
You can use it.
$('#myCreatedDiv').find('#one');
or
$('.jQueryMobileCreatedDiv').parents('#myCreatedDiv').find('#one');
You can use the class of the generated div
#myCreatedDiv > .jQueryMobileCreatedDiv {
}
I am working within bootstrap's core admin structure and have a main header at the top of the page and then a sub header beneath it. I am trying to allow that sub header to fix to the top of the page when the user scrolls down so they can always see that information, but I am having a bit of trouble.
The section I would like to stick to the top looks like this.
<div class="area-top clearfix" >
<div class="pull-left header">
<h3 class="title"><i class="icon-group"></i>Dashbord</h3>
</div><!--.header-->
<ul class="inline pull-right sparkline-box">
<li class="sparkline-row">
<h4 class="blue"><span> Cover Designs</span> 4</h5>
</li>
<li class="sparkline-row">
<h4 class="green"><span> Video Trailers</span> 5</h5>
</li>
<li class="sparkline-row">
<h4 class="purple"><span> Web Banners</span> 5</h5>
</li>
</ul>
</div><!--.area-top-->
and I have tried so far to wrap that in another div with the navbar navbar-fixed-top classes. But that shot it to the top right away and overlapped content that needs to be seen.
I have also tried using plain css by adding position:fixed; to the current div, but that messes up the breadcrubms I have laying underneath it because it takes it out of the flow.
Is there anyway to accomplish this with just css. I know I can do a hack with jquery, but in my team I am only in charge of the css.
you can use below css to the sub header navbar.
css:
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
Add 'sticky-top' class to sub header.
for eg: you can see the fiddle below which is similar to the question.Here second menu fixed to top when user scrolls.
https://jsfiddle.net/raj_mutant/awknd20r/6/
position:fixed is the way to go here. Can you apply a height to the div you want to be fixed and apply a margin to the breadcrumbs?
.area-top{ position:fixed; height:2em; }
.breadcrumbs { margin-top: 2.2em; }
My point of view is the following. When you ask for this :
to fix to the top of the page when the user scrolls down
It means that you need to detect when users are scrolling. Furthermore, there is no other way than js / jQuery to detect this kind of action. CSS can be a part of solution by creating a class for exemple which will stick your menu, but you'll always need a bit of js to detect when to put and to remove the class.
Here is an exemple on how to do this in jQuery :
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).scroll(function(){
var offset = $('.area-top').offset().top;
var top = $(document).scrollTop();
if(top >= offset){
// this is where you should fix you menu
$('.area-top').addClass('fixed'); // if you have a css class which fix the element.
$('.area-top').css('position', 'fixed'); // if you don't have css class
}else{
// this is where you should unfix your menu
$('.area-top').removeClass('fixed'); // if you have a css class which fix the element.
$('.area-top').css('position', 'inherit'); // if you don't have css class
}
});
</script>
Don't forget that every "advanced" action which need to detect a change in the DOM or which need an user interaction will require some JS or PHP to deal with it. By "advanced", i'm meaning all the things that can't be natively handle in HTML.
I have this link :
</td>
and I want to change the image when the user over the link I tested :
#planification:hover{
background-image:"images_cartographie/cartographie3_03.gif";
}
but the image doesn't change, it is ignored, (I tested background-color it works (then the problem isn't in url or ...))
when I use the background-image without hover like that :
it doesn't appear :
#planification{
background-image:"images_cartographie/cartographie3_03.gif";
}
NB : I generated the page with photoshop
do you have any idea
You can completely remove the img because you add the efect via CSS on the a tag.
HTML
CSS
.image_link{
display:block;
width:800px;
height:600px;
background:url('http://ferringtonpost.com/wp-content/uploads/2012/07/Responsibilities-of-Owning-a-New-Puppy-Photo-by-bestdogsforkids.jpg');
}
.image_link:hover {
display:block;
width:800px;
height:600px;
background:url('http://25.media.tumblr.com/tumblr_m4frqhdW0k1rwpusuo1_1280.jpg');
}
JSFiddle.
Note that you must add dispay:block/inline-block to the a
I'm a little confused about your question, but it sounds like you need to put in two different images. So, there's one image when you mouse over, and another image when you don't. You just put in a different path for the background-url on hover. Also, you should put in a plank gif in your img tag for backwards compatibility.
You should also use a self closing tag /> for your image. The tag is open the way that you posted it.
#planification
{
background: url(images_cartographie/cartographie3_03.gif)
}
#planification:hover
{
background: url(images_cartographie/new_image_goes_here.gif)
}
<a id="planification" href = "" ><img src="images_cartographie/blank.gif" width="207" height="47" alt=""/></a>
<a id = "missionclick" class = "moreinfo"> More Information</a>
Currently shows only the highlight pointer when hovered over "more information", i'm trying to make it show the hand pointer.
Here you go:
<a id="missionclick" class="moreinfo" style="cursor:pointer;">More Information</a>
The following CSS should apply a "pointer" cursor to all tags without an href attribute:
a:not([href]) {
cursor: pointer;
}
The "cursor" css property is what you are looking for.
https://www.w3schools.com/cssref/pr_class_cursor.asp
you can also try:
<a id="missionclick" class="moreinfo" style="cursor:pointer;"> More Information</a>
You can use this line as well.
Your link
try this...
<div onClick="location.href='your link'">