Am wondering if there is a way to ignore tags:
<!-- I can add code here -->
<!-- I cannot edit the following start -->
<style>
div, td {
color: #555555;
font-size: 10pt;
text-align: left;
}
</div>
<!-- I cannot edit the following end -->
<div id="myapp" style="color:red"><div>Test</div></div>
Am wondering if there is anything that I can add to skip these generic div/td styles. e.g. #myapp div { font-color: inherit; }
There is no straightforward CSS method to ignore later CSS rules.
The most reliable option is to use JavaScript to remove the tag.
Example: Remove the, say, first <style> tag after the <script> element:
<script id="unique-id-script">
setTimeout(function() {
var removeTheNthStyleElement = 1, found = 0,
script = document.getElementById('unique-id-script'), elem = script;
while (elem = elem.nextSibling) {
if (elem.nodeName.toUpperCase() === 'STYLE') {
if (++found === removeTheNthStyleElement) {
// Remove style element => disable styles
elem.parentNode.removeChild(elem);
// Remove temporary script element
script.parentNode.removeChild(script);
break;
}
}
}
}, 4);
</script>
... anything but a style element...
<style>
/* I want to prevent these rules from being used */
</style>
This will inherit red color
#myapp div{
color: inherit;
}
Related
I would like to set a base domain with all of my pictures in CSS file, here's what I tried:
global.css
:root
{
--bgd: #C0C0C0;
--picdomain: "https://somedomain.com/";
}
s1.css
#import url("global.css");
body
{
background-color: var(--bgd); //works if only it exist
background: url(var(--picdomain)"some/path/images/pic.png"); //no effect
}
And load s1.css in html
<link rel="stylesheet" type="text/css" href="s1.css">
The HTML's background-color did changed, but background didn't show up. So I tried other way:
global.css
#picdomain: "https://somedomain.com";
s1.css
background: url("#picdomain/some/path/images/pic.png"); //can't read variable from imported css
didn't help
Only works while I set full URL for an image, like below:
global.css
:root
{
--bgd: #C0C0C0;
--picdomain: url("https://somedomain.com/some/path/images/pic.png");
}
s1.css
#import url("global.css");
body
{
background-color: var(--bgd); //works if only it exist
background: var(--picdomain); //no effect
}
But this isn't what I want......Is that possible to use css variable in "background"?
<style type="text/css">
:root {
--slide-1: url("{{url('public/assets/images/logo-nfs.png')}}"); /*this is laravel*/
--slide-2: url("<?php echo 'images/logo-nfs.png';?>");
}`enter code here`
.header111 {
background-image : var(--slide-1); /*this is php*/
}
.header22 {
background-image : var(--slide-2);
}
</style>
<div class="header111">
test here
</div>
<div class="header22">
test here
</div>
<br>
I am working on a one-pager WordPress site, and I need to hide the logo of the page (#logo) on the first section (#home). The whole page is a one-pager, so the first section does not need the logo, in fact it should only appear for the other sections below the first one.
Can this be accomplished using CSS?
If it is, then I also want to change the color of the menu elements for the first section, and be something else for the others.
Short answer: No.
You will need to write some JavaScript or jQuery to determine when the first section (i.e. home section) is no longer in the view window.
The logo is typically within the <header>. It's one element within the HTML markup. It does not have a relationship to the sections. With styling, you position it where you want and then scroll the document to view the rest of the content sections.
I assume with this being a one-pager, you want the <header> to be fixed. It's a good assumption since you want to display the logo in the same spot for each section, except the first one.
How
There are many ways to accomplish this behavior. Essentially, you need to determine if the home section is in the browser window or not. When it is, the logo is hidden; else, it's displayed.
One strategy is:
Set the position where the logo will show by grabbing the 2nd section's position in the document (i.e. its offset().top position).
Then determine where the 1st section is within the window. If it's > showPosition, then it's out of view.
Here's some code to get you started. You'll need to adapt it for your specific needs.
(function ( $, window, document ) {
"use strict";
var sectionContainers,
showPosition = 400;
var init = function () {
initSection();
logoHandler();
}
function initSection() {
sectionContainers = $( '.section-container' );
showPosition = $( sectionContainers[1] ).offset().top;
}
function logoHandler() {
var $logo = $( '#logo' );
if ( $( sectionContainers[0] ).offset().top >= showPosition ) {
$logo.show();
}
$( window ).scroll( function () {
if ( $( this ).scrollTop() > showPosition ) {
$logo.show();
} else {
$logo.hide();
}
} );
}
$( document ).ready( function () {
init();
} );
}( jQuery, window, document ));
body {
color: #fff;
}
.site-header {
position: fixed;
}
.site-logo {
font-weight: bold;
border: 5px solid #fff;
padding: 10px;
}
.section-container {
width: 100%;
height: 400px;
text-align: center;
padding: 50px 5%;
background-color: #627f00;
}
.section-container:nth-child(odd) {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header" itemscope itemtype="http://schema.org/WPHeader">
<p id="logo" class="site-logo" itemprop="headline" style="display: none;">Logo</p>
</header>
<section id="home" class="section-container">
this is the home section
</section>
<section id="about" class="section-container">
this is the about section
</section>
<section id="about" class="section-container">
this is the portfolio section
</section>
JSFiddle
I am using HTML bridge window.print() to print range between 20-30.
The client says it is printing blank pages.
We can only reproduce it on their machine.
This is the code in xaml that combines all the pages in one page and prints it.
This code works and prints all pages for me. We need this only on IE
I am using windows 8 and IE 10. But for the client it prints one blank page with the header and footer url. It works correctly if he prints the current page or prints all the pages from start to end.
But if he tries to print range, 23-30, it only prints 23-27 or so.
Sometimes it prints just one blank page with the header and footer url. Unfortunately none of these happen on my machine. The client said that they tried it on IE 8, IE 9 and IE 11.
Can some suggest what are my options or what are the things I could look out for
Page.xaml.cs
Dictionary<int, List<string>> AllPages = new Dictionary<int, List<string>>();
--code to add to AllPages
// Load all pages onto page
for (int Page = startPage; Page <= endPage; Page++)
{
if (AllPages.ContainsKey(Page))
{
List<string> PageLines = AllPages[Page];
this.m_Div = this.m_HtmlDoc.CreateElement("DIV");
if (Page != AllPages.Count)
{
this.m_Div.SetAttribute("ID", "Page");
}
this.m_Table = this.m_HtmlDoc.CreateElement("TABLE");
this.m_Div.AppendChild(this.m_Table);
for (int Line = 0; Line < PageLines.Count; Line++)
{
this.m_TR = this.m_HtmlDoc.CreateElement("TR");
this.m_TD = this.m_HtmlDoc.CreateElement("TD");
this.m_TD.SetProperty("innerText", PageLines[Line]);
this.m_TR.AppendChild(this.m_TD);
this.m_Table.AppendChild(this.m_TR);
}
this.m_PrintReport.AppendChild(this.m_Div);
}
}
HtmlPage.Window.Invoke("printfunction", m_PrintReport);
CSS
body
{
background:#ffffff;
color:#000000;
font-family: rvConsolas;
margin: 0px; /* the margin on the content before printing */
width:100%;
height:100%;
background-color:#DDD;
min-height:100%;
}
html{
width:100%;
height:100%;
}
#font-face
{
font-family: rvConsolas;
font-style: normal;
font-weight: normal;
src: url(EmConsola.eot);
src: url('EmConsola.eot?#iefix') format('embedded-opentype')
}
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
#rptViewer
{
display: none;
visibility: hidden;
}
#printReport
{
visibility: visible;
font-family: rvConsolas;
overflow: hidden;
display:inline-block;
}
td
{
font-family: rvConsolas;
overflow:visible;
font-size: 52%;
display:block;
}
#Page
{
page-break-after: always;
}
ASPX Page
<link href="Style/style.css" rel="Stylesheet" media="screen" />
<link href="Style/print.css" type="text/css" rel="Stylesheet" media="print" />
<script src="Scripts/Silverlight.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
printReport.style.display = false;
}
function onSLLoad(plugIn, userContext, sender) {
alert("silverlight");
window.status +=
plugIn.id + " loaded into " + userContext + ". ";
}
function printfunction(arg) {
var contents = arg.innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head>');
frameDoc.document.write('</head><body>');
var path = "Style";
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/print.css';
frameDoc.document.getElementsByTagName('head')[0].appendChild(style);
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
frame1.contentWindow.focus();
frame1.contentWindow.print();
document.body.removeChild(frame1);
},1000);
}
</script>
</head>
<body>
<div id="printReport" style ="
white-space: nowrap; ">
</div>
</body>
There are a few things worth checking, as you have not provided enough CSS to reproduce the problem
Firstly, this is a HTML problem, and has nothing to do with Silverlight. You should be able to generate a raw HTML file that reproduces the problem on the client site.
Secondly, you should try printing to different paper sizes. US A4 size is slightly shorter than international A4.
You should explore using CSS page break directive:
div#PAGE {page-break-after: always;}
Update If you wish to support page orientation, then you can use media queries in your CSS.
#media print and (orientation: landscape) {
/* landscape styles */
}
#media print and (orientation: portrait) {
/* portrait styles */
div#PAGE {page-break-after: always;}
}
Since our poor developer still has to support (cough cough) IE8 - try out polyfills. They are javascript libraries that give IE8 media query support. See respond.js or modernizr.
In order to show up in Internet Explorer, tables created with Javascript should have a TBODY element (Can't dynamically add rows to a <TABLE> in IE?).
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
I am trying to detect focus on a child element of a contenteditable element, for the purposes of pure CSS styling. (I know I could detect this with JS, add an extra class and do it that way, but that is so long-winded.)
Basically, I have something along the lines of:
<div contenteditable="true">
Some text <span class="edit">that</span> goes here.
</div>
I tried CSS along the lines of:
.edit:focus {
color: #FF0000;
}
I want that span to change colour when the caret enters it, but apparently the focus is only applied to the div set to contenteditable, not to any child thereof. I have tried applying a second contenteditable to the span, but besides being a horribly sloppy approach, it doesn't work anyway.
Is there a solution to this?
Because of the limitation that elements within a contenteditable element can't generally receive focus, I suggest faking it by adding a class to your <span> element when the selection is contained within it, which you can do by monitoring the selection for changes (you'll have to use mouse and keyboard events and polling for thoroughness in Firefox until the selectionchange event is implemented in that browser).
var selectionContainer = null;
function updateSelectionContainer() {
var newSelectionContainer = null;
var sel;
if (window.getSelection && (sel = window.getSelection()).rangeCount) {
newSelectionContainer = sel.getRangeAt(0).commonAncestorContainer;
// Ensure we have an element rather than a text node
if (newSelectionContainer.nodeType != 1) {
newSelectionContainer = newSelectionContainer.parentNode;
}
}
if (newSelectionContainer != selectionContainer) {
if (selectionContainer) {
selectionContainer.className = selectionContainer.className.replace(/ ?containsSelection/, "");
}
if (newSelectionContainer) {
newSelectionContainer.className +=
(newSelectionContainer.className ? " containsSelection" : "containsSelection");
}
selectionContainer = newSelectionContainer;
}
}
if ("onselectionchange" in document) {
document.onselectionchange = updateSelectionContainer;
} else {
var el = document.getElementById("editor");
el.onmousedown = el.onmouseup = el.onkeydown = el.onkeyup = el.oninput = updateSelectionContainer;
window.setInterval(updateSelectionContainer, 100);
}
div {
font-size: 200%;
}
.edit.containsSelection {
color: red;
font-weight: bold;
}
<div contenteditable="true" id="editor">
Some text <span class="edit">that</span> goes here.
</div>
My understanding is that the type of elements that can receive focus (automatically) is limited.
See SO Question
One option is to add tabindex to the span.
body {
font-size: 3rem;
}
div[contenteditable=true] .edit:focus {
color: #FF0000;
}
<div contenteditable="true">Some text <span class="edit" tabindex="0">that</span> goes here.</div>
:focus > .edit { color: #cc0000; }
<div contenteditable="true">Some text <span class="edit">that</span> goes here.</div>
<div contenteditable="true">Some text that goes here.</div>
Just add this instead of :focus. Fiddle.
.edit {
color: #f00;
}