Sorry for vague title, I am not able to describe my question in one line. question is regarding page titles, which are generated from common backend template, which is
<h2 class='page-title'> {title} </h2>
where {title} is dynamically generated by application. so I will have one on each page of my site generated from that same template.
About page: <h2 class='page-title'>About</h2>
Services page: <h2 class='page-title'>Service</h2>
Home Page: <h2 class='page-title'>Home</h2>
What I want to do is, to hide that from 3. Home page, but let it display on all other pages using CSS or Javascript. I stupidly tried h1 {display:none} but that just hides everything, I only want to hide <h2 class='page-title'>Home</h2>
Any idea on how to do that?
Either use backend code to give your home page title a specific id, or use in-page css on the home page itself:
h2.page-title {
display:none;
}
You will need to add a style to just the home-page, or have a class that indicates that you're currently viewing the homepage:
h2.page-title is the very specific way of selecting the element, but it will affect all pages.
.page-title could work if you know the class is only going to ever happen on an h2 element.
If you're using a class on the body you could do the following:
body.frontpage h2.page-title
or body.frontpage .page-title depending on how specific you want to be.
I recommend being as generic as possible to avoid specificity issues.
I would give your <html> element an id (unique for each page):
<html id='{pageid}'>
...
<h2 class='page-title'> {title} </h2>
...
</html>
Then use the selector
#home .page-title { display: none }
If you have a CMS or something similiar, dumping content into a single template, then I think you're better off with javascript for this. I don't know of a selector in css for innerText of an element.
I commonly use the jquery library - I would recommend something like:
$(document).ready(function() {
$("h2.page-title:contains('Home')").css('display', 'none');
}
This is best done by the very same server-side language which is used to dynamically generate this, you simply add a condition that if page is 'Home' nothing is outputted.
If this is not an option for you, I'd suggest Mel's way as it will simply work, and there's no need for javascript.
Also I think Mel's code should be above the h2 you want to hide, and wrapped into <style></style> tags.
Related
I am using a Content Management System that places a title on the top of all our webpages. If you click on this title, it takes you to the main homepage. This part of the page is something I cannot change, but fortunately I can add CSS and/or Javascript to these webpages.
Is there a way to make it so that clicking on that title, it takes me to a different URL? I cannot edit the HTML that is used to display that title (Posted below)
I have honestly not been able to think up of a solution for this. I can only imagine that it's possible through Javascript, but I'm not sure.
<h1 class="page-title">
<span><a data-home-link="" href="/sites/ww/MyWebPage">My Web Page</a></span>
</h1>
I would like to be able to click on the "H1" element and have it take me to a different webpage, different from "MyWebPage".
If you cannot change the html to add an id you could use document.querySelector or document.querySelectorAll
For example, if it's the only 'a' element with that link address on the page you can use:
document.querySelector('a[href="/sites/ww/MyWebPage"]').setAttribute('href', '/elsewhere/page');
Or if it's the 1st of >1 you can use:
document.querySelectorAll('a[href="/sites/ww/MyWebPage"]')[0].setAttribute('href', '/elsewhere/page');
You can simply give your element a unique id and then edit its attributes with javascript. So you will have:
<a data-home-link="" href="/sites/ww/MyWebPage" id = "someId">
And then with javascript, you can change its attributes like so:
document.getElementById('someId').setAttribute('href',
'/sites/someOtherFolder/..');
Should you want to not display the enforced title at all, just use JavaScript or jQuery to hide class "page-title"
Eg with jQuery
$(document).ready(function () {
$(".page-title").hide();
});
<script>
function myFunction() {
if (/menu/.test(window.location.href)) {
document.getElementById('searchfield').display = 'none';
}
}
</script>
I would like to do this with JavaScript or JQuery -- thus far my attempts are not working. I have a div that is to be present on all pages but 1 page; in which I would like to hide it with JavaScript if that page.
Note: This is a Wordpress website; the above was inserted in the header.php head of the document. Same location of repetitive div.
This is easier with CSS.
HTML (make sure all of your pages have some unique identifier, generally on the body tag):
<body id="page-1">
<div id="menu">
[ ... ]
CSS
#page-1 #menu{
display:none;
}
Edit
I see you're working in WordPress. WP automatically adds unique classes to the body tag. Generally you can use something like this for your CSS:
.page.page-id-34{
/*
34 should be swapped with the page id.
You can customize the classes,
so just Inspect Element and see what it is for your page
*/
display:none;
}
myFunction is never called. You'll need to explicitly call it when the page is ready $(myFunction);, or if you want, call it in the footer (or close to it) directly with myFunction();.
An alternative, since this is a WordPress site, is to add PHP code to not show that div (or even send it to client!) based on a filter.
Another alternative is using CSS to block out that specific div on the page that's loaded.
I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!
with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes
Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}
I need to provide information for various clients when they log in to build a profile. I will be using HTML and Javascript for this purpose. What I would like is a concise set of instructions followed by an option to show more detailed instructions. If the client chooses to see the more detailed instructions, the field (ideally) expands to show more content.
Other ideas that achieve a similar result are also welcome, as are comments that simply point me in the right direction. Preliminary research hasn't turned up much for me; I imagine this is largely due to being a novice and not knowing what to look for. Is this a conditional visibility issue, or is that something else entirely?
Many thanks for any help.
Place the hidden content in a separate container element with its display initially set to none. Then, add an onclick handler to a link that shows the content. That handler should set the display value to block or inline. Here is one way to do it (there are many). Set up your HTML something like this:
<p>
[Instruction text here]
more ...<span class="more">
[Additional content here]</span>
</p>
Some CSS to initially hide the additional content:
.more
{
display: none;
}
Create your expandContent() function:
function expandContent(link)
{
link.nextSibling.style.display = "inline";
}
I don't know anything about programming, so I'm trying to find out where to start learning + how difficult my problem is. Since I don't have any programming knowledge, I'll try to describe my problem in natural language, hope that is OK.
I have the html file of the penal code (a type of law). It contains many different rules, that are in numbered paragraphs (§ 1, § 4, etc).
Now I want to look at the source code and manually “tag” the paragraphs according to specific criteria. For example all the paragraphs that concern the use of a weapon get the “weapon” tag, or that have a minimum sentencing of 1 year and higher get a “crime” tag, etc.
At the end I want to view an interactive html file in Firefox/Chrome, where I could for example click on a “crime” button, and all §§§ that were tagged with “crime” would appear in bold red, keeping the rest of the document intact. Ideally I would also be able to click on “weapon” and would only see the §§§ tagged with “weapon”, making the rest of the document disappear.
The function it's just for me, so it would only need to work on a Xubuntu 11.04 desktop with Firefox or Chrome. The original source file would be http://bundesrecht.juris.de/stgb/BJNR001270871.html. The code looks strange to me, is there a way to convert it into something more easily manually editable?
Any help would be greatly appreciated. Primarily I don't know where to start learning. Do I need to know HTML, jQuery, or a programming language like Python? Do I need to set up an Apache server on my PC? Perhaps because of my ignorance of programming, this seems like a not too complex function. Am I mistaken in the belief that an amateur could build something like thins maybe one month?
I think this is not very difficult to make, although the tagging process can be quite labour-intensive.
You don't need much programming skills, especially when you want to tag stuff manually. You probably only need basic HTML and CSS and some Javascript to pull this off.
What I would do is the following
Create a local copy of the HTML file (use Save As in your browser)
Manually tag each § by giving it the appropriate tag as a classname
Create a list of all available tags and let javascript filter out the § you'd like to see
Now Step 1 is pretty easy I guess, so I'll go right to Step 2. The paragraphs in the HTML file are formatted according to a certain pattern, e.g.:
<div class="jnnorm" id="BJNR001270871BJNE009802307" title="Einzelnorm">
<div class="jnheader">
<a name="BJNR001270871BJNE009802307"/>Nichtamtliches Inhaltsverzeichnis
<h3><span class="jnenbez">§ 31</span> <span class="jnentitel">Rücktritt vom Versuch der Beteiligung</span></h3>
</div>
<div class="jnhtml">
<div>
<div class="jurAbsatz">
(1) Nach § 30 wird nicht bestraft, wer freiwillig etc.
</div>
</div>
</div>
</div>
What you want to do now is add your tag to the <div> element with the class jnnorm. So the above example would become (if the tag weapon would be appropriate):
<div class="jnnorm weapon" id="BJNR001270871BJNE009802307" title="Einzelnorm">
You do that for each paragraph in the HTML. This will be pretty boring, but okay.
Now Step 3. First create a list of links of all the tags you've just created. How you create lists in html is explained here. Put this at the top of the HTML document. What you want to do with javascript is when you click on one of the links in your list that only the paragraphs with the given class are shown. This is most easily done with jQuery's click event and the show and hide methods.
Updated with jQuery example
Make a menu like this
<ul id="menu">
<li id="weapon">Weapons</li>
<li id="crime">Crime</li>
</ul>
And then use the following jQuery
<script>
$(document).ready(function(){
// When a <li> element inside an <ul> with the id "menu" is clicked, do the following
$('ul#menu li').click(function(){
// Get the id of the <li> element and append a '.' so we get the right name for the tag (class) we want to show
var tag = '.' + $(this).attr('id');
// Hide all elements of class 'jnnorm'
$('.jnnorm').hide();
// Show all elements with the class name of tag we want
$(tag).show();
});
});
</script>
Note: HTML classes are denoted as .classname in jQuery whereas HTML id's are denoted as #idname.
Good luck!
This could be done using purely HTML/CSS and Javascript, so not server would be needed. JQuery would make the javascript side easier.
Basic idea of how to do it:
Use CSS style classes for your "tags"
Have a button for each tag with an onclick handler that uses JQuery to highlight everything with that tag (or make everything else invisible)
The HTML source code actually looks nicely structured, though it could use a few more linebreaks for sub-paragraphs. Any good HTML/XML editor has an autoformat feature that handles this, though you could get any specific format you want using a programming language with convenient text-manipulation facilities, such as Perl, awk or Python.