I'm working on a blogger theme and I'm trying to add a class to a div in case the blog is seen via mobile. To be specific: my two classes are: presentation and presentation-mobile.Since blogger doesn't allow to use a structure like:
if()
<div class="a">
else
<div class="b">
Because it requests to close the div element inside the if (... for real?)
I was forced to use this string of code which seems not to work... can somebody point out where I'm wrong or suggest the right way?
expr:class='"container-fluid presentation" + (data:blog.isMobile? "-mobile":"")'
the error output is:
The expression '"container-fluid presentation" + (data:blog.isMobile? "-mobile":"")' is not valid.
Try using the newly introduced b:class operator. It is used for adding class to the parent element (including appending class names if class already exists). The code will look like -
<div>
<b:class name='presentation' cond='!data:blog.isMobileRequest'/>
<b:class name='presentation-mobile' cond='data:blog.isMobileRequest'/>
</div>
Also, the reason why data:blog.isMobileRequest is preferred over data:blog.isMobile is because it will function even if the mobile version of the blog is disabled via Settings
Leave a space around ternary operator ? : and use data:blog.isMobileRequest instead of data:blog.isMobile
expr:class='"container-fluid presentation" + data:blog.isMobileRequest ? "-mobile" : ""'
Related
I would like to start using Attribute Selectors in my css. I am seeing div tags that contain a reference WITHOUT any attribute statement like:
<div class="container" data-footer>
All my searches (for the last hour) to find out how "data-footer" can be listed without the use of an attribute= (e.g., id= or class= or etc.) have resulted in no information. Dozens of SO and Google links without a single example of a reference inside a div tag without the use of an attribute. Because I do not know what this is (or what to call it) I'm probably not searching with the right keywords. Is this a short-form way to pass an id or ???
Data- attributes without a value can be used as Boolean. For example:
if(div.hasAttribute('data-footer')) {
// then do something
}
In css you can access it like:
div[data-footer] {
}
Is there any way to prevent me from clicking on an anchor to take me to the top of the page?
this is my code:
<div class="slider">
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
1
2
3
4
5
A) If I understood you well, you can do it with pure CSS.
a[href*="#slide"] {
pointer-events: none;
}
B) After reading what you wrote in the comments, you can use what PHPglue suggested.
document.querySelectorAll('a[href*="#slide"]')
.forEach($a => $a.onclick = e => {
e.preventDefault() // don't go
console.log('but do your things')
})
Hope this help :)
As far i know you cannot avoid it its connected to the fact that when you get to page its need to be rendered.
Before that, this id just do not exist.
So no way to remove it.
You can only try to speed this up a bit.
Just try to ensure that your page is loading fast.
You have your syntax confused, but it's easy to understand how that happened... You can do internal page links that will allow you to jump from one spot (or section) to another inside the same page, or even to a specific paragraph inside another page. The problem with your sample code is that you are using HTML syntax to link to CSS.
<div id="slide-1">1</div>
...
1
It's true that you use a # (hash tag) in your <a> tag. So, using 1 should, theoretically, work. And yes, you can use an id of the same name to identify where the link should take you. However - you can not use the name for anything else on the page. It must be unique and specific to avoid any confusion. Since your <div> tag(s) have the same identifier as your anchor tags, and since you are using the CSS selector id, the browser is ignoring your <div id= statement because it cannot find the #slide-1 style in your CSS file.
The easiest way to fix this is to change your code to:
<div id="css_style" name="slide-1">1</div>
...
1
Doing so will allow the <div> to retain the intended styles and connect the link to the anchor on the page. Just don't give your CSS style the same name, use something else.
W3C Links Documentation
I'm reading some code and there is a piece of html that reads:
<div id="uniqueId1234" data-target=".uniqueId1234">
...
</div>
and then earlier on in the same html file there is a span element that seems to use this div as a class:
<span class="uniqueId1234">
...
</span>
Can someone explain how this works? I thought that a class was something created in a css file. Sorry if this is a dumb question.
This is likely part of some piece of Javascript code or a library that listens for some type of change or event on your element with the data-target attribute.
When this event is triggered, it can then use the value of that attribute as a selector for performing some other logic as seen in this basic jQuery-based example below:
// When an element containing your data-target attribute is clicked
$('[data-target]').click(function(){
// Find the appropriate target (i.e. ".uniqueId1234")
var target = $(this).data('target');
// Then use it as a selector for some type of operation
$(target).toggle();
});
Classes are very common within CSS to style multiple elements, but they can also commonly be used as a mechanism in Javascript as well, which is likely the case in your scenario here.
What does it mean to set data-target attribute of a div to the id of that div?
Nothing standard. data-* attributes are designed to hold custom data for custom code (typically client side JS) to process.
I thought that a class was something created in a css file.
Classes are an HTML feature used to put elements into arbitrary groups. They are commonly used when writing CSS, but also client side JS and other code.
I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.
Let me give a simple example:
Employee
<div ng-show="canSeeSalary">
{{salary}}
</div>
Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.
I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.
My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.
Thanks in advance.
Try ng-if directive:
<div ng-if="canSeeSalary">
{{salary}}
</div>
Corresponding div element will be removed from the DOM. From the official documentation:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Use
Employee
<div ng-if="canSeeSalary">
{{salary}}
</div>
ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property
I would recommend using ngCloak rather than ngIf.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
example:
<div ng-cloak> {{::test}} </div>
ngCloak # Official Angular Docs
I have a HTML file in the below format :-
<div class="container">
<div class="hello"><p>1</p></div>
<div class="goodbye">2</div>
<div class="hello"><p>3</p></div>
<div class="goodbye">4</div>
</div>
Please recommend me a program which could remove a particular div tag by its class name and save the output file as below :-
<div class="container">
<div class="goodbye">2</div>
<div class="goodbye">4</div>
</div>
The whole division along with its internal tags should be removed. I have used jQuery, but it does not affect the source code.
Thanks in advance.
You can use .remove():
Remove the set of matched elements from the DOM.
$('.container .hello').remove();
Side note: You can use .find() to speed up above selector:
$('.container').find('.hello').remove();
You can get the element having class hello within container and call .remove()
Live Demo
$('.container .hello').remove();
Similar to .empty(), the .remove() method takes elements out of the
DOM. Use .remove() when you want to remove the element itself, as well
as everything inside it. In addition to the elements themselves, all
bound events and jQuery data associated with the elements are removed.
To remove the elements without removing data and events, use .detach(), jQuery docs
So, nobody actually seemed to read what OP asked for.
Here's an answer for a JavaScript Regular Expression, very dirty and unflexible, but matching your needs.
<div class=.(\w*)?.><(.*)</div>
Still you may run into problems, because I don't know any editor actually using JavaScript RegEx.
Basically, everything about problems you might run into has been already said in this famous thread: RegEx match open tags except XHTML self-contained tags