I am creating a CV website that includes my info about my research papers. And I wanted to create an animation where when you click on the button that says "Paper 1" an abstract info box pops-up and tells you the information for the paper.
Likewise when you click on "Paper 2" the abstract info box for that paper pops-up. I am sharing pictures below of what it would look like. I know this type of animation requires either CSS/Javascript. I am using a template of a sample website to create. Any ideas on how to actually do it? I appreciate your help.
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1">
<i class="fas fa-edit nav-icon"></i>
Paper 1
</a>
</li>
<figure class="effect-honey tm-gallery-item research1">
<p > This is a paragraph about my first research paper. Quisque tincidunt, sem rutrum euismod ornare, tortor arcu tempus lorem, accumsan suscipit mauris lorem at lorem. Praesent feugiat mi at tortor tincidunt, ac consequat ante cursus.</p>
</figure>
Clicking on Paper 1
Clicking on Paper 2
You could try the following - I've implemented it in pure JavaScript so you don't have to worry about external libraries (you'll have to add your own styling though, but hopefully the mechanism will suffice):
CSS:
.hidden {
display: none
}
HTML
<!-- control -->
<div>
<div class="research-paper" id="paper-1">Paper 1</div>
<div class="research-paper" id="paper-2">Paper 2</div>
<div class="research-paper" id="paper-3">Paper 3</div>
</div>
<!-- what gets displayed -->
<div class="" id="paper-content-1">Lorem ipsum</div>
<div class="hidden" id="paper-content-2">Lorem ipsum 2</div>
<div class="hidden" id="paper-content-3">Lorem ipsum 3</div>
JavaScript:
let tracker = 1; // initially it's the first
// get every occurrence of "research-paper" class and add a 'click' eventListener to it
let researchPaperClass = document.getElementsByClassName('research-paper');
for(var j = 0; j < researchPaperClass.length; j++){
researchPaperClass[j].addEventListener("click", function(){
var currentId = this.id.replace("paper-", "");
// first, add 'hidden' to the previous class
document.getElementById("paper-content-" + tracker).className += " hidden";
// finally, remove 'hidden' from the current clicked one to show it
document.getElementById("paper-content-" + currentId).className = document.getElementById("paper-content-" + currentId).className.replace(/hidden/gm, "");
// update the tracker
tracker = currentId;
});
}
[Details here][1]
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div onclick="myFunction()">
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1">
<i class="fas fa-edit nav-icon"></i>
Paper 1
</a>
</li>
</div>
<div style="display:none; background-color:yellow" id="myDIV">
<figure class="effect-honey tm-gallery-item research1">
<p > This is a paragraph about my first research paper. Quisque tincidunt, sem rutrum euismod ornare, tortor arcu tempus lorem, accumsan suscipit mauris lorem at lorem. Praesent feugiat mi at tortor tincidunt, ac consequat ante cursus.</p>
</figure>
</div>
This should solve it for you..
[1]: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
include jquery to your project and this will do the job
$(document).on("click",".tab", function(e){
//prevent default behaviour of a tag
e.preventDefault()
//element clicked on
var clickedTab = $(this);
//id of the target content
var tabContentId = $(this).attr('href')
//remove the active class from all tabs and tab content elements
$('.tab').removeClass('active')
$('.tab-content').removeClass('active')
//add the active class to clicked tab and corresponding tab content element
clickedTab.addClass('active');
$(tabContentId).addClass('active');
})
.tab{
color:#aaa;
display:inline-block;
padding:5pt 15pt;
}
.tab.active{
color:#fff;
background-color:#839499;
font-weight:bold
}
.tab-content{
display:none
}
.tab-content.active{
display:block
}
<!--include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- first tab active by default -->
<a class="tab active" href="#paper1">paper 1<a>
<a class="tab" href="#paper2">paper 2<a>
<a class="tab" href="#paper3">paper 3<a>
<!-- first content active by default -->
<div class="tab-content active" id="paper1">
content for paper 1
</div>
<div class="tab-content" id="paper2">
content for paper 2
</div>
<div class="tab-content" id="paper3">
content for paper 3
</div>
You could use divs. In this example I use buttons but it should be very easy to make it work with the code you have. Example:
<html>
<head>
<style>
.page1 {
display: none;
}
.page2 {
display: none;
}
.page1.add {
display: contents;
}
.page2.add {
display: contents;
}
</style>
</head>
<body>
<button onclick="page1()">Page1</button>
<button onclick="page2()">Page2</button>
<div class="page1">
<p>info about page 1...</p>
</div>
<div class="page2">
<p>info about page 2...</p>
</div>
<script>
function page1() {
document.querySelector('.page1').classList.add('add');
document.querySelector('.page2').classList.remove('add');
}
function page2() {
document.querySelector('.page2').classList.add('add');
document.querySelector('.page1').classList.remove('add');
}
</script>
</div>
</body>
</html>
I hope this solves your problem, anything that you put in the div will disappear and reappear. I have used this simple solution before.
You can do something like this (this is really a simple and general example you can modified as you want):
document.querySelectorAll('.paperTrig').forEach((element) => { element.addEventListener('click', function() { if (document.querySelector('.paper.show')) {document.querySelector('.paper.show').classList.remove('show');} this.nextElementSibling.classList.add('show');});});
ul { padding:0; list-style-type: none; display: flex; flex-flow: row nowrap }
.paper { transform: scale(0); transition: transform 0.5s ease-in-out; }
.show { transform: scale(1); }
<ul>
<li>
<button class="paperTrig">Paper 1</button>
<div class="paper">
<h1>Paper 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<button class="paperTrig">Paper 2</button>
<div class="paper">
<h1>Paper 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<button class="paperTrig">Paper 3</button>
<div class="paper">
<h1>Paper 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<button class="paperTrig">Paper 4</button>
<div class="paper">
<h1>Paper 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
</ul>
The above code listen to click event on a button with class .paperTrig.
When user click on this button a function execute that removes .show from an active element (if it exist), and shows the wanted content.
Basically it looks for the next element sibling of the clicked button and put on it the show class.
The CSS animation achieved with the use of transform and transition.
For this CSS and Javascript are needed. The easiest way and supported by almost all browsers is given below.
Step 1: Edit Your HTML
Add 'onClick' attribute to the links, ie onClick="showContent(1);"
and 'id' attribute to the contents, ie id="research1"
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_1" onClick="showContent(1);">
<i class="fas fa-edit nav-icon"></i>
Paper 1
</a>
</li>
<li>
<a href="javascript:void(0);" class="tm-gallery-link" data-filter="research_2" onClick="showContent(2);">
<i class="fas fa-edit nav-icon"></i>
Paper 2
</a>
</li>
<figure class="effect-honey tm-gallery-item research1" id="research1">
<p > This is a paragraph about my first research paper.</p>
</figure>
<figure class="effect-honey tm-gallery-item research2" id="research2">
<p > This is a paragraph about my second research paper.</p>
</figure>
A numeric value is used in the onClick="showContent(1);" function to identify the clicked link.
Step 2: Add CSS to hide the second content on initial page load
<style type="text/css">
#research1 {display:block; }
#research2 {display:none; }
</style>
Step 3: Add the Javascript function
<script type="text/javascript">
function showContent(x) {
var r1 = document.getElementById("research1");
var r2 = document.getElementById("research2");
if(x == 2){
r1.style.display = "none";
r2.style.display = "block";
} else {
r1.style.display = "block";
r2.style.display = "none";
}
}
</script>
Related
I'm using the following code to show more/show less on a page.
CSS
#more {display: none;}
.read-more-less{padding-bottom: 20px;text-align: center;display: block !important;margin:auto;width: 200px;height: 40px;font-size: 16px;margin-top: 15px;}
JS
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Show more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Show less";
moreText.style.display = "inline";
}
}
HTML
<div class="show-more">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p><span id="dots"></span><span id="more">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</span><a class="read-more-less btn" href="#"><span onclick="myFunction()" id="myBtn">Show more</span></a>
</div>
This the jsfiddle
Now if the html block is placed within another div (like an include) where "class="change"
<div class="change">
<div class="show-more">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p><span id="dots"></span><span id="more">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</span><a class="read-more-less btn" href="#"><span onclick="myFunction()" id="myBtn">Show more</span></a>
</div>
</div>
Is there a way of changing the child div class class="show-more" to class="show-none"
How could this be done?
You can use CSS to do this.
It is easiest if you always print the span tag and then only display it when necessary. Also, instead of using 'show-button', it would be easier to use 'hide-button':
<div class="hide-button"><!-- content is hidden -->
<span id="dots"></span><span id="more">
</div>
<div class=""><!-- content is displayed -->
<span id="dots"></span><span id="more">
</div>
<style>
.hide-button {
display: none;
}
</style>
EDIT (in response to edited question):
There are a couple of ways to get the element that you want to change the class for. You can use either of the following lines of code:
// Get an element using its class name
var elem = document.getElementsByClassName('show-more')[0];
// OR
// Get an element using its CSS selector
var elem = document.querySelector('.show-more');
Once you have the element that you want to adjust the classes for, you can make the adjustments using code similar to the following:
// 'show-more' class is present
if (elem.classList.contains('show-more')) {
elem.classList.remove('show-more');
elem.classList.add('show-none');
// 'show-more' class is NOT present
} else {
elem.classList.remove('show-none');
elem.classList.add('show-more');
}
I have been trying to develop a web blog app, where people can come and upload different blogs and can read blogs uploaded by others too. I was able to successfully upload the data on the firebase real-time database, but I am facing an issue while trying to retrieve data from firebase. I have a card from google material library and I want the title and desc to be displayed there below. But whenever I am trying to retrieve the data only data from the last node is getting displayed. Below is my code for html and javascript.
HTML code:
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="post.html">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
Javascript code:
var rootRef = firebase.database().ref().child("posts");
rootRef.on("child_added",snap =>{
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
$("#titlePost").text(title);
$("#descPost").text(desc);
});
Below is the pic of my database.
and here's what my retrieved data looks like
enter image description here
Only one node is retrieved
Put your posts in a list so that a new child won't replace your old child, if it is in a list it will just extend the list. Your parent in this case is the
"ul" which is callled "blog-posts", and you are going to append childs to this list like in the example below. Your children will expand this list and not overwrite each other
<body>
<div>
<ul class="blog-posts">
<li>
<!--Your Posts are here-->
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="titlePost">Welcome</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</li>
</ul>
</div>
parent.append(`
<li>
<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="${key}">${title}</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
${desc}
</div>
</div>
<li/>`
);
Only one node is retrieved
That seems unlikely. You can easily check this, by adding some simple logging and then checking the developer console of your browser:
rootRef.on("child_added",snap =>{
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
console.log(title);
$("#titlePost").text(title);
$("#descPost").text(desc);
});
My expectation is that you'll see each title being logged. But since you always call $("#titlePost").text(title);, you only see the title of the last post in the HTML.
A simple fix is to just append the titles in the HTML:
$("#titlePost").append(title);
Now with this, you'll see all titles concatenated together. That's the correct content, but it probably looks horrible.
So the proper solution is to generate a bit of HTML around each title and description. As far as I can see, this is what you use:
rootRef.on("child_added",snap =>{
var key = snap.key;
var title = snap.child("Title").val();
var desc = snap.child("desc").val();
var parent = $("#titlePost").parent().parent().parent();
parent.append(`<div class="w">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text" id="${key}">${title}</h2>
</div>
<div class="mdl-card__supporting-text" id="descPost">
${desc}
</div>
</div>`
);
});
I am pretty new to javascript, I have learned some of the basics but don't completely grasp it yet. I am trying to get the color of my nav on the right to change by adding an active class to it depending on what section I am at. I don't quite understand how I would implement appending the class to my nav item when it passes the specific div. Any help would be greatly appreciated. I just placed some random code below just so I can link the codepen. It's alot easier than me posting my entire html/css code here.
HTML
div class="global-container">
<div class="logo">
<div class="layer2">
</div>
</div>
<div class="copy">
<p>© text</p>
</div>
<div class="links">
<a href="#">
<img src="">
</a>
<br>
<a href="#">
<img src="">
</a>
</div>
<!-- End of Logo !-->
<ul class="sidebar">
<a href="#section1">
<div class="item">
</div>
</a>
<a href="#section2" >
<div class="item">
</div>
</a>
<a href="#section3">
<div class="item">
</div>
</a>
<a href="#section4" >
<div class="item" >
</div>
</a>
<a href="#section5" >
<div class="item">
</div>
</a>
</ul>
<!-- Sidebar!-->
<div class="content-container">
<div id="section1">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section1</h1>
<h2>
text
</h2>
<p>text</p>
<div class="button">
text
text
</div>
<h6 class="change">text</h6>
</div>
</div>
<div id="section2">
<div class="about-message">
<div class="left">
<h1>
Section 1</h1>
<p> text
<br>
<br>
text</p>
</div>
</div>
</div>
<div id="section3">
<div class="inner-container">
<div class="education-message ">
<h1 >
section3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div id="section4">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
Section4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div id="section5">
<div class="inner-container">
<div class="intro-message center">
<h1 class="headline-big center">
section 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
CSS - I want to add to .item class
.active {
background-color: red;
}
https://codepen.io/anon/pen/BZzbGz
Heres an example:
https://bonhomme.lol/
The nav-lines on the right change color as you scroll. I want to achieve this effect but the color changes depending on which section div I've reached.
First, I get the scroll position of the items in the navigation. Then add/remove the class based on the current scroll position. Check this out:
Your modified Codepen
$(document).ready(function() {
$(document).on("scroll", onScroll);
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$(".sidebar a").each(function() {
var currDiv = $(this).find("div");;
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if(refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos)
{
$(".sidebar a div").removeClass("active");
currDiv.addClass("active");
} else {
currDiv.removeClass("active");
}
});
}
});
Edit: Here's the explanation you requested of the items we're using in the IF
refElement.position().top returns how many pixels from the top of the page of that element is.
refElement.height() is returns the pixels representing the height of the element.
scrollPos returns in pixels how far down on the page we currently are.
For changing class of an element on scroll - jquery:
<script>
if($(document).scrollTop>10){
$("#myDiv).addClass("active");
}
else{
$("#myDiv").removeClass("active");
}
You have different options to do this: use a library or write the code yourself. If you chose the latter, you can try the following approaches.
1) Compare offsets
window.scrollY gives your the scroll amount of the page. element.offsetTop gives you the (fixed) offset of an element on the page. You can compare these values to determine, which element is currently in view.
2) get screen coordinates
element.getBoundingClientRect() gives you the screen coordinates of an element. You can use these to check if it is at the top of the page.
Now you just use a hook on the scroll event to check the positions and know where you are at. My code snippet only accounts for scrolling down, I leave the "scroll up" case for you to implement as an exercise.
var headings = [document.querySelector("h1"),document.querySelector("h2"),document.querySelector("h3"),document.querySelector("h4")];
var nav = document.querySelector("nav span");
var currentIndex=0;
document.addEventListener("scroll",function(){
// get the current position of the element
let currentElPos = headings[currentIndex].getBoundingClientRect().top;
// if it's near the top border update the navigation
if (currentElPos < 100){
// in your case, you would update the class
nav.innerHTML = headings[currentIndex].innerHTML;
if (currentIndex+1<headings.length) currentIndex++;
}
});
h1,h2,h3{
margin-bottom:20em;
}
h4{
margin-bottom:30em;
}
nav{
position:fixed;right:20px;top:20px;
border:2px solid red;padding:5px;
}
<nav>You are viewing:<br><span>First heading!</span></nav>
<h1>First heading!</h1>
<h2>Second heading!</h2>
<h3>Third heading!</h3>
<h4>Fourth heading!</h4>
I am facing a very weird problem that never experienced in past!! I have a html link in my website as follows:
<div>
Facebook
</div>
Unfortunately it is showing as plain text "Facebook", not as clickable link text!
What can be the possible reasons behind this kind of weird behavior?? Expecting help from the expert guys!!
Here is the Complete Code:
#{
ViewBag.Title = "News";
}
<link rel="stylesheet" type="text/css" href="~/Content/css/pixeden-icons.css">
<link rel="stylesheet" href="~/Content/css/main.css">
<div id="banner-area">
<img src="~/Content/images/banner/banner2.jpg" alt="" style="width: 100%; height: 350px;" />
<div class="parallax-overlay"></div>
<!-- Subpage title start -->
<div class="banner-title-content">
<div class="text-center">
<h2>News and Events</h2>
<ul class="breadcrumb">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("News and Events", "News", "NewsAndEvents")</li>
</ul>
</div>
</div><!-- Subpage title end -->
</div><!-- Banner area end -->
<div>
FaceBook
</div>
<div class="container archive">
<div class="pageContentArea archive-content">
<div class="timeline-wrap">
<article>
<time datetime="2015-01-31 08:30:45.687">26 jan,2015</time>
<div class="article_inner">
<h1>The Lego Movie” snubbed at the Oscars</h1>
<img src="~/Content/images/News/img1.jpg" alt="" />
<p>
Pellentesque quis sapien eleifend aliquet, morbi ideru dictum finibus blandit. Phasellus a iaculis hiri habitase platea dictumst neque, tincinq mangas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- <a class="readMore" href="#">Read More..</a> -->
</div>
</article>
</div><!--timeline-wrap-->
</div><!--pageContentArea-->
</div><!--container-->
#section scripts {
<script src="~/Scripts/js/jquery.dlmenu.js"></script>
<script src="~/Scripts/js/jquery.sticky.js"></script>
<script src="~/Scripts/js/main.js"></script>
}
Thanks!!
The problem isn't in your html syntax. Everything is okay with FaceBook. Maybe it's overridden by some styles (text-decoration: none) in your css file, which is included in <head> section. To debug the problem, try to set text-decoration:underline(default value) to your anchor tag, make it from browser inspect to be sure, that it won't be overridden by the other styles or script.
Need some help with JQuery tasks please. You can find the task requirements outlined in the html below, but also here:
Taks one:
When one of the "li"'s is clicked:
Update the background color of all li's to the color value of the clicked "li"
Make only the clicked item bold and uppercase
Task two:
Add the jQuery so that when a nav item is clicked:
It becomes the active nav item (the light gray color)
The content below switches to show the correct section
NOTE: the page should not try and anchor link down to the target section.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project 18</title>
<style>
html {margin:2em; font-family:Helvetica, Arial, sans-serif;}
h1 {margin:0;}
h2 {color:#369;}
hr {margin:2em 0;}
.color-list {margin:0; padding:0; list-style:none;}
.color-list li {margin:0.5em 0; padding:0.5em; color:#fff; border:1px solid #000; background-color:#000;}
.color-list li:hover {cursor:pointer;}
nav ul {margin:0; padding:0; list-style:none;}
nav li {display:inline-block;}
nav li a {display:block; padding:1em; color:#ccc; text-decoration:none; background-color:gray;}
.tabs-sections {padding:0 1em; border:1px solid gray;}
.active a {color:#000; background-color:lightgray;}
.s2, .s3 {display:none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<header><h1>Project 18</h1></header>
<p><b>REMINDER:</b> Write only javascript. DO NOT modify the HTML or CSS.</p>
<h2>Task One: Colorize Siblings</h2>
<p>When one of the "li"'s is clicked:</p>
<ol>
<li>Update the background color of all li's to the color value of the clicked "li"</li>
<li>Make only the clicked item bold and uppercase</li>
</ol>
<ul id="colors" class="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>violet</li>
</ul>
<script>
// Task One code
</script>
<hr>
<h2>Task Two: Tab Switching</h2>
<p>Add the jQuery so that when a nav item is clicked:</p>
<ol>
<li>It becomes the active nav item (the light gray color)</li>
<li>The content below switches to show the correct section</li>
</ol>
<p><b>NOTE:</b> the page should not try and anchor link down to the target section.</p>
<div class="tabs">
<nav>
<ul>
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
<div class="tabs-sections">
<section id="one" class="s s1">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="two" class="s s2">
<h2>Section Two</h2>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="three" class="s s3">
<h2>Section Three</h2>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</div>
<script>
// Task Two code
</script>
</body>
</html>
this is actually pretty simple to do as you are using jQuery as you see in the following snippet. Nothing in the HTML / CSS was changed. How it is done is explained in the code.
And it is great, that you try coding, but on stackoverflow, you don't do Task 1, Task 2 etc. and copy the whole project code. Instead you just provide the code snippets needed and explain what your problem is that we can get the current situation. And yes, you explain a problem and don't just say "hi, do this and that". Share your thoughts and attempts for a specific problem.
Anyway, I hope I could help you. Have a nice day :)
// Task One
$(".color-list li").click(function() { // When a li is clicked
var el = $(this); // Get the clicked Element
var color = el.text(); // Get the Text of the li Element
// Now set the Background of all Elements
$(".color-list li").css("background-color", color);
// And reset the font-weight and the uppercase
$(".color-list li").css("font-weight", "normal");
$(".color-list li").css("text-transform", "none");
// Make the clicked element bold & uppercase
el.css("font-weight", "bold");
el.css("text-transform", "uppercase");
});
// Task Two
$(".tabs nav a").click(function() { // When a nav item is clicked
var el = $(this); // Get the clicked Element
var tab = el.attr("href"); // Get the ID from href
// Reset all tab links
$(".tabs nav li").removeClass("active");
// And set the new one as active
el.parent().addClass("active");
// Hide all tabs
$(".tabs-sections section").hide();
// Show the current Tab
$(tab).show();
});
html {margin:2em; font-family:Helvetica, Arial, sans-serif;}
h1 {margin:0;}
h2 {color:#369;}
hr {margin:2em 0;}
.color-list {margin:0; padding:0; list-style:none;}
.color-list li {margin:0.5em 0; padding:0.5em; color:#fff; border:1px solid #000; background-color:#000;}
.color-list li:hover {cursor:pointer;}
nav ul {margin:0; padding:0; list-style:none;}
nav li {display:inline-block;}
nav li a {display:block; padding:1em; color:#ccc; text-decoration:none; background-color:gray;}
.tabs-sections {padding:0 1em; border:1px solid gray;}
.active a {color:#000; background-color:lightgray;}
.s2, .s3 {display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header><h1>Project 18</h1></header>
<p><b>REMINDER:</b> Write only javascript. DO NOT modify the HTML or CSS.</p>
<h2>Task One: Colorize Siblings</h2>
<p>When one of the "li"'s is clicked:</p>
<ol>
<li>Update the background color of all li's to the color value of the clicked "li"</li>
<li>Make only the clicked item bold and uppercase</li>
</ol>
<ul id="colors" class="color-list">
<li>red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>indigo</li>
<li>violet</li>
</ul>
<script>
// Task One code
</script>
<hr>
<h2>Task Two: Tab Switching</h2>
<p>Add the jQuery so that when a nav item is clicked:</p>
<ol>
<li>It becomes the active nav item (the light gray color)</li>
<li>The content below switches to show the correct section</li>
</ol>
<p><b>NOTE:</b> the page should not try and anchor link down to the target section.</p>
<div class="tabs">
<nav>
<ul>
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
<div class="tabs-sections">
<section id="one" class="s s1">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="two" class="s s2">
<h2>Section Two</h2>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="three" class="s s3">
<h2>Section Three</h2>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <i>quis nostrud exercitation ullamco</i> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</div>