What CSS can I use to delete elements only for AMP posts on the website? AMP is an open-source framework, which reduces page size and eliminates javascript, so that website loading times could are less than 1 second.
I know how to hide an element is with display: none .
But I don't know how to implement that only on AMP posts.
This is the class of elements I want to remove only from the AMP post: lwptoc_toggle_label .
Class: lwptoc_toggle_label .
I have written the CSS .lwptoc_toggle_label {display: none} so that the element is removed, but the problem is I don't know how to apply that CSS only to AMP posts.
Can I use this: #media screen and (max-width:480px) {.lwptoc_toggle_label {display: none!important}} ?
Does anyone have an answer?
CSS is an adjective-like language, it is not functional.
JavaScript is the event-driven verb-like language. You need to put script elements inside of the head element if you plan to code professionally or you can just dump it at the bottom of the body element if you don't care about professionalism.
<script defer="true" type="application/javascript">
//<![CDATA[
// Put JavaScript code here, like the code below.
//]]>
</script>
Use Examples
You can then use the unique id attribute to reference an element you want to delete or use other methods of selecting an element. That reference becomes a parameter when calling the element_del function.
element_del('test12');//Instead of document.getElementById('test12')
element_del(document.getElementById('test15'));
element_del(document.getElementsByTagName('div')[4]);
Function
This is the function we use for an entire web platform. We don't use frameworks or libraries because you don't get paid for maintaining poor code.
function element_del(id)
{
if (typeof id=='string' && document.getElementById((id) && document.getElementById((id).parentNode.removeChild)
{
document.getElementById((id).parentNode.removeChild(document.getElementById((id));
}
else if (typeof id=='object' && typeof id.parentNode=='object')
{
id.parentNode.removeChild(id);
}
}
Related
I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
I'm working on a site for one of my in-laws, who insisted on using Joomla so that he could update the content himself in the future. That being said, one of the things that I developed for him was a character generator for a game that he and his brothers created. That is working fine. The issue is that they want a way to print the final sheets off when finished, and to do so without all of the menus, banners, etc. I was told that the simplest way to handle that was to pass ?tmpl=component in the URL to strip everything out, which is also working.
The problem that I am running into is that the CSS in the Joomla template is causing the tables to behave in a way that I cannot figure out how to correct. The page consists of nested tables, with widths defined in terms of % (currently), but it seems that the specifically defined widths are being ignored in favor of the widths hugging the largest cell. To see what I'm talking about:
The trouble page: http://www.basementgames.com/tools/character-generator.html?s=36&tmpl=component
What the page should look like: http://www.basementgames.com/char_gen.php?s=36
This is the exact same code in both places, with the first being inside Joomla, and thus subject to the CSS of the template. I don't know much about CSS, and I'm driving myself crazy trying to figure out what to override to make the first example look like the second. Any thoughts?
You can run this script on the page and it will remove the offending print.css file on page load:
<script>
if (window.location.href.indexOf('/character-generator.html') > 0 &&
window.location.href.indexOf('tmpl=component') > 0) {
(function(){
var links = document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++) {
if (links[i].href.indexOf('/print.css') > 0) {
links[i].href = '';
}
}
})();
}
</script>
http://jfcoder.com/test/character-generator.html?tmpl=component
Note, it only runs on the character-generator.html page with a tmpl=component in the query string. It also has to run after the link elements, as well, so it should be inserted into the body tag or at the very bottom of the head tag. Since you have MooTools available, you could also use DOMReady().
Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:
#myphoto { frame-style: fancy }
Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?
EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.
Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/
You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.
You can't. Browsers interpret CSS based on how their layout engines are coded to do so.
Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.
Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.
Or you could look at Jordan's answer.
If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.
HTML
<div id="foo">hello</div>
CSS
#foo {
background: url('images/spacer.gif?bar=411');
}
JavaScript
getCustomCSSProperty('foo', 'bar');
Supporting JavaScript Functions
function getCustomCSSProperty(elId, propName)
{
var obj = document.getElementById(elId);
var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
return getParameterByName(propName, biurl[1]);
}
function getParameterByName(name, qs) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
Demo:
http://jsfiddle.net/t2DYk/1/
Explanation:
http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html
I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.
There is a portion of my website where I am using a country's flag as an icon for a list element.
For instance, I have:
<ul>
<li id="at">Austria</li>
<li id="de">Germany</li>
</ul>
The accompanying CSS looks like this:
#at {
list-style-image: url('at.png');
}
#de {
list-style-image: url('de.png');
}
Is it possible to replace this with a macro so that I don't need to redefine the CSS for each country? Something like a C-style macro would be awesome, but I'm not sure if CSS supports this sort of thing.
ie
#_country {
list-style_image: url('_country.png');
}
CSS itself doesn't do this, but you can always serve the CSS from a PHP script or similar, doing the macro processing server-side to generate the separate rules from a list of countries.
Since CSS itself does not have itself a macro system, you always have to write all the rules explicitly. Hence you may choose the server side solution (which adds an extra overhead to the loading), or using your text editor's macro or snippet facilities, you can easily generate the rules by yourself.
An interesting thing would be, if CSS had support for string concatenation and the attr() function to be used outside the content property, so someone could write:
.languages {
background-image: attr(id) ".jpg";
}
Short answer: No.
Longer Answer:
You should not rely on JavaScript for such a feature, since not everyone has JavaScript enabled and it would be like breaking a fly on a wheel...
Except for generating it via PHP, Perl, Python (live on serverside, or just once on your PC and save the file as *.css) or something there isn't anything you can do to save you the hassle of copy / pasting this 3 lines and changing them for each country.
So, just do it the annoying way ;)
If it's only those three lines i think you'll have your list put together very fast.
One of the possible solutions:
<!-- our lovely list-style-image function -->
<script>
function set_list_country(list, country) {
list.style.list-style-image = 'url("'+country+'.png")';
}
</script>
<!-- country list -->
<ul>
<li id="at">Austria</li>
<li id="de">Germany</li>
</ul>
<!-- country list styling -->
<!-- note: this goes below your list, or else create onload function -->
<script>
set_list_country(document.getElementById('at'), 'at');
set_list_country(document.getElementById('de'), 'de');
</script>
Regards.
No, you can't do this in plain CSS because the CSS language hasn't control structures or anything like that wich will allow you to dinamically generate CSS code.
Instead, you can use a javascript solution as Andrejs pointed or a solution based on CSS variables coded in PHP.
Whilst generating the CSS server side in script is an option. I prefer simple javascript here.
Some commenters have pointed out that if JS is not available then users wont see the flags....but what else wont work if js is disabled - just about every '2.0' web site!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function initFlags() {
var flagListItems = document.getElementsByTagName("li");
for (var i = 0; i < flagListItems.length; i++ )
{
var li = flagListItems[i];
// use any prop you want to build the url - i used an expando one
// just because i thought it made the code more readable.
var f = li.getAttribute("flag");
if (f == "" || f == null) continue;
li.style.listStyleImage = 'url(' + f + '.png)';
}
</script>
</head>
<body onload="initFlags()">
<ul>
<li id="at" flag="au">Austria</li>
<li id="de" flag="de">Germany</li>
</ul>
</body>
</html>
You can use CSS for simple macros. Here's the CSS coding for "version" that is referenced several times in one of my documents...
.version::after {
content: "42";
}
...then, anywhere in the document I want to use the current version, this...
<span class="version"></span>
...which results in 42.
Here's one where I set up the "lock" emoji. This might be usable for the country flag, inasmuch as they are mostly available as emojis. CSS requires hex coding of a unicode code-point here, sadly, but still, it's doable...
.lockicon::after {
content: "\01F512";
}
...same kind of invocation...
<span class="lockicon"></span>
...which results in 🔒.
Because the text within the content: ""; is straight unicode, not HTML, things like character entities and HTML tags don't work.
In many cases, however, you can use the unicode code-point for a character entity. For instance, while you can't put — in there, you can put the unicode code-point for it, as in "\0000A0". Be sure to use all six HEX digits, otherwise interpretation by CSS may be incorrect, depending on what else you have in the "content" value.
You can use images, too, but to scale them, you have to use transform: scale(n);
div::before {
content: url(image.jpg);
transform: scale(0.75);
}