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>
Related
I am using Material Design Lite on a project and I have some mdl-tab tabs in my settings page. However, some of the settings are only useful if certain conditions are met. I would like to have a tab which is disabled unless the conditions are met.
This is what I'm doing now, which doesn't work:
<div class="mdl-tabs__tab-bar">
Display
Device
Measurement
</div>
Is there any way to do this? If so, how?
The project is in Cordova. So HTML, CSS, Javascript and JQuery answers are all welcome.
I just solved similar problem in my project. I know i am a bit late but I hope that this will maybe help someone in the future.
Render your page without classes or text.
<div class="mdl-tabs__tab-bar">
Display
<a id=deviceTab href="#deviceSettings"></a>
<a id=measurementTab href="#measSettings"></a>
</div>
You should add listener on input(needed for your conditions) and when the conditions are met just add class (mdl-tabs__tab) and text (Device, Measurement).
You can do that with jQuery
$("#deviceTab").addClass("mdl-tabs__tab").text("Device");
$("#measTab").addClass("mdl-tabs__tab").text("Measurement");
If user deletes information needed you can just remove text and class again and he wont be able to click on tab.
<div class="mdl-tabs__tab-bar">
Display
<a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
<a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>
You can achieve this by removing the href attribute from the tag while still leaving the classes and link text. This will keep the tab looking like a tab and when you want to enable it just add the href with the id of the tab panel you want to activate.
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 am working with a page featuring a Bootstrap accordion. It works correctly, but I was asked to implement a feature whereby a specific collapsible element is "open" when linked from various other pages - so "www.whatever.tld#e2" would take you to the second element already opened. There was no problem getting something to behave like this, it's adequately covered by various other pages on StackOverflow and elsewhere. The implementation I tried was as follows:
$(window.location.hash + '.collapse').collapse('toggle');
This functions as desired, it opens the correct section of the accordion. However, after navigating to the page like this, it "locks" the page in that form - it no-longer responds to any clicks on accordion elements and you cannot close the opened element or open others. Nobody else seems to have been experiencing this problem or did not mention it if they did e.g. here:
Bootstrap Collapse - open the given id fragment
bootstrap-collapse.js hide and show events
I have attempted variations on this code, e.g.
var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');
This behaves unexpectedly - all elements are forced open, and cannot close. Removing the second line fixes this issue, but then otherwise behaves as the original code I specified does - it opens the targeted element, but freezes the accordion.
The following is an excerpt of the structure of the accordion I am working with. I would prefer not to have to modify this unless I can't avoid it, since I'm trying to stick with organisational style guides and this accordion code is a standard accordion that people use on our CMS:
<div id="accordion-asset-listing" class="accordion" id="accordion" role="tabpanel">
<section class="accordion-group" role="tab" aria-selected="false">
<header class="accordion-heading">
<h3><a aria-controls="pharmacy" href="#pharmacy" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-asset-listing">Pharmacy</a></h3>
</header>
<div id="pharmacy" class="accordion-body collapse" aria-hidden="true" role="tabpanel">
<div class="accordion-inner">
<p><!-- content here --></p>
</div>
</div>
</section>
I am not amazing at JS or its use so any pointers people had to put me on the right track would be greatly appreciated.
Got it sorted in the end although I still don't understand why it originally broke. After jumping into the .js files that the site called upon, I ended up manually reconstructing the couple that I wanted and calling them in code. This is not a good solution but it has worked, at least.
Since the site (a university web-site managed on Squiz Matrix CMS) uses a sort of "customised version" of Bootstrap, Jquery and such that seems to strip out some elements of those things, there may have been some bugs introduced specific to our version of these things.
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.
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.