This is more of a best practices/ease of upkeep question.
I have several webpages where I would like to make browsing easier. So, to do that I am going to use Fragment identifiers (internal links). Here is an example of some of my HTML:
<article>
<h1>Name of WebPage</h1>
<h2>Section One</h2>
Here is the content of my Section one.
<h2>Section Two</h2>
Here is the content of my Section two.
<h2>Section Three</h2>
Here is the content of my Section three.
....(may have additional h2 sections)
</article>
These webpages can be hard to navigate if there are dozens of h2 tags. I hope to use a side menu bar that utilizes Fragment Identifiers to link to 'Section One', 'Section Two', 'Section Three', etc.
Now, I need to convert this html code to use Fragment Identifiers, but before I go about changing this code, I wanted to get some additional thoughts on how I should do this.
I have a couple options:
1) Manual change the
<h2> NameOfH2 </h2>
to
<h2 id='NameOfH2'> NameOfH2 </h2>
Then, add the Fragment Identifier links in the side menu manually.
2) Manual change the
<h2> NameOfH2 </h2>
to
<h2 id='NameOfH2'> NameOfH2 </h2>
Then, use Javascript to build the side menu bar's Fragment Identifier links every time the page loads.
I would like to use method 2, so that as I add more content to my pages, it will automatically show up in the side menu bar, but I wanted to see if there was any reason I should not do this.
Also, I have a ton of tags to edit, and was wondering if you guys had any thoughts on how I should add the id's to the html. Right now, I am considering writing a program to go through each page and edit each tag, but I wanted to see if a solution already exists out there.
Thanks for any help in advance!
If you don't mind the internal links only working when JavaScript is enabled, you could just generate both the TOC and the fragment identifiers using JavaScript.
PPK has a script that does just that: http://www.quirksmode.org/dom/toc.html
If you need it to work with JS turned off, you could generate both the TOC and IDs server side.
Related
I am trying to replicate a web page(https://climate-science.com/contact/) using CSS, HTML and JS. I'm quite new to those 3 languages and I am having trouble trying to replicate the FAQ section. I'm having difficulty trying to make the animation, any help?
So far I have this in the HTML file(for 1 question):
<div class="faq-container">
<div class="element-tab-title">
<h4>When do we get more content?</h4>
<p>We put quality over quantity. That said, we have over 50 people working on content. More courses will be coming out over 2020 and new projects will be announced too! Thank you for being patient – we hope it will be worth it.</p>
</div>
</div>
The "faq-container" class contains the style for the grey box and the "element-tab-title" only contains the padding for the text inside. This is the result I have so far: Photo of FAQ section
Any help on how to achieve the animation will be very appreciated.
Usually some simple Javascript would be used to toggle hide/show the 'body' content.
Your 'body' content is currently in your <p> tag, would normally be set to hidden with CSS by default, usually withdisplay:none.
Then with Javascript, you would set an event listener to 'watch' for hover or click action from a user, when you would then change the CSS on the 'content' to be visible again with a different display type - usually display:block.
Here's a starter link on Javascript event listeners: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
As user Geat suggested, you should have a look at Accordions in frontend frameworks. I would suggest looking at Bootstrap framework Accordions (such as https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example) where you can see some of the code and have a look at how it works.
Also, try to learn how to use your browser's developer tools/inspector to view the code as it's being rendered. This is especially helpful when you're trying to see how a live bit of code works as in your case.
If you want a really quick route, HTML5 supports accordions with no JS whatsoever. They're not animated, but they are easy to style and semantically easy to understand (so they're good for accessibility out of the box).
<details>
<summary>Section 1</summary>
<h3>This is section 1</h3>
</details>
<details>
<summary>Section 2</summary>
<h3>This is section 2</h3>
</details>
<details>
<summary>Section 3</summary>
<h3>This is section 3</h3>
</details>
I am looking into using a HTML WYSIWYG editor such as CKEditor but I am curious about what is to stop a user from submitting some HTML code that will change the layout of the page when I try to output their HTML.
Here is an example of two posts:
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
and
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
As you can see, the first post is nice and simple, I can display that and it wont look crazy. But the second post could alter my page layout completely (have not tested but you get the idea.
<html>
<head>...</head>
<body>
<div class='content'>
<div class='post'>
<p><b>This is my post</b></p>
<p>It has some nice HTML that does not break stuff</p>
</div>
<div class='post'>
</div>
<div style="height:10000px; width:10000px;">
<p>muhahaha</p>
</div>
</div>
</div>
</body>
</html>
I know I can use htmlentities but this would then display the first post without the bold and I do not want that.
The stackoverflow website must have something like this built in, and I am wondering if there is a simple way to stop users being able to submit layout-changing HTML via a WYSIWYG editor?
CKEditor has a feature called Advanced Content Filter that in its default, automatic mode filters incoming HTML content by transforming and deleting disallowed elements, attributes, classes and styles. CKEditor will only allow content that was defined as allowed by enabled editor features (buttons, plugins).
It is highly configurable, too, so it lets you fully control what your users can and cannot submit to your website.
Have a look at the following resources to figure it out:
Content Filtering
Advanced Content Filter
Allowed Content Rules
Advanced Content Filter – Automatic Mode sample
Advanced Content Filter – Custom Mode sample
I've searched around the web for a solution to my problem and im getting pretty close to my desired design with Accordion JQuery but..
I have some extension to the JQuery template which I dont know how to implement, so here it goes:
This is how my Div looks when you enter the webpage:
When you hover over either the picture or the title/text the text will be underlined and italic so that the user know the feature with cliking on it.
What I would like see if the visitor clicks the picture/text is this:
This is my HTML for that specific Div
<a href="#">
<div class="newsbox">
<img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
<br />
<p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
<div class="vertical_accordion_toggle">
<p></p>
</div>
</div>
</a>
Code:
http://jsfiddle.net/VCDe2/1/
Appreciate any hints/tips!
Here's a JSFiddle to show you what's happening.
jQuery:
$('h1').click(function(){
$(this).next('.hidden').slideToggle();
});
Simple enough! Adaam's fiddle in the post above certainly does work, but I'd recommend not using it as it will only work for one item - you'll need to add more code for every new section you create.
This solution, however, will look for any h1 item when it is clicked, and then find the next .hidden class item closest to it, allowing you to add as many different areas as you want.
For instance, with the same code above, you can scale everything up to work like this with no extra jQuery script.
All you have to do to incorperate it into your project is make sure your .hidden equivalent is nested inside of a container with the rest of the section, and change h1 and .hidden to fit your proper classnames. Make sure they're classnames, as IDs will not work.
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.
I wonder how it is possible to (more or less ) reliably clip the content from a random web site (using Ruby or JavaScript, doesn't really matter).
Much like Evernote and Flipboard do.
What is the best way to determine where the actual content is within a page?
The purpose: given a URL - retrieve the actual content of that page and ignore all the layout and other unrelated information.
For example:
given http://ninemsn.com/ => the HTML of the main news topic that is in the middle part of the content.
given the http://news.cnet.com/8301-1035_3-20104048-94/a-beginners-guide-to-telecom-jargon-part-7 => the HTML of the main article.
Just use Evernote's "clip full page" option to see exactly what I mean.
Thanks.
My initial thoughts would be to DOM parse the page, then traverse the DOM tree to the content of a specific div and show that (via XPath, etc). For pages without clearly-defined sections it's going to be difficult regardless of which method you use. The AutoPager plugin for Firefox and Chrome implements XPath parsing behaviour. Get the latest version and open up the .xpi to see how he does it. It's a JavaScript implementation.
Pick the div by letting someone enter, per URL/site scheme, what the id or class of the content div is. For your ninemsn example, the div containing the article's title, share buttons, the author's image, and the post content is
<div class="post">
and the actual body of the text is
<div class="postBody txtWrap" section="txt">
So someone would enter that you need to parse the first h1 from <div class="post"> and that's the article title, and then get all the text from <div class="postBody"> and make that the article content (you might need to parse the class in such a way that it can match both postBody and txtWrap).
Another example (for funsies): Stack Overflow. A question's title is contained in
<div id="question-header">
A question's text is trickier, because it's in a div with the same class as an answer's text, and no id. You need to match <div id="question"> and then traverse down to
<div class="post-text">
Similarly for answers, each <div id="answer-[UINTEGER]"> contains a <div class="post-text"> with its respective text.
In both situations, you can traverse those top-level question and answer- divs for <div class="user-details"> to fetch usernames, reputation and badge counts, etc.