What i would want is to display, say, 10 job list, and then for the rest of them to have a "Load More" button or something like function.
Please see the script bellow:
<!-- Listings -->
<div class="title-bordered">
<h2>Our Professionals <small>Latest added</small></h2>
</div>
<div class="job_listings">
<ul class="job_listings">
<li class="job_listing">
<a href="#">
<div class="job_img">
<img src="images/samples/person1.jpg" alt="" class="company_logo">
</div>
<div class="position">
<h3>Debbie Bidart</h3>
<div class="company">
<strong>Paint Removal from Exterior or Interior Surfaces</strong>
</div>
</div>
<div class="location">
<i class="fa fa-location-arrow"></i> Melbourne, AU
</div>
<div class="rating">
<div class="rating-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="reviews-num">12 Reviews</div>
</div>
<ul class="meta">
<li class="job-type">Painting</li>
<li class="date">
Posted 1 month ago
</li>
</ul>
</a>
</li>
<div class="spacer"></div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<a class="btn btn-default btn-block" href="#">View All Professionals</a>
</div>
</div>
<!-- Listings / End -->
I need that functionality implemented there. I'm assuming it should not be hard to do, but, I'm not sure what i'm doing.
I Hope someone can help. Thankx.
Related
I hope your doing great. I want to add a switch that switches between "Monthly" and "Yearly". When Switched to yearly, I want the price shown to change from 9$ to 6$. I basically want a toggle switch to change text.
<!-- Pricing -->
<div class="v-line v-line-left"> <div class="container">
<div class="pricing-items row">
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Essentials </span>
</div>
<div class="icon"></div>
<div class="price">
<span>9</span><span>$</span>
<em>PM</em>
</div>
<br><br>
<label>
<input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
<span class="switch"></span>
</label>
<div class="lui-text">
<div>
<p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<em>H.W Answers & Explanations</em>
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="label">
<span> Popular </span>
</div>
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Power User </span>
</div>
<div class="icon"></div>
<div class="price">
<em><s>$12</s></em> <span> 8 <b>$</b>
</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i>H.W Answers & Explanations
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Ultimate </span>
</div>
<div class="icon"></div>
<div class="price">
<em><s>$17</s></em><span> 12 <b>$</b>
</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations
</li>
<li>
<i class="fas fa-check"></i>Weekly Revision Meetings
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
</div>
<div class="lui-bgtitle">
<span> Pricing </span>
</div>
</div>
</div>
<div class="container">
<div class="lui-heading">
<div class="container">
<div class="m-titles align-center">
<h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
<br>
<br>
<br>
<span> What are you waiting for? Join now and guarantee your A+ this year! </span>
</h2>
</div>
</div>
</section>
Thank you.
I have tried searching for a solution for hours but got no luck. I even tried chat gpt...
[UPDATED]
If i understand you right you just want to change the price by flipping a switch.
I created one and a basic JS function for it.
Greetings
[UPDATE]
Changed so it appends on all the prices and automatically divides 20% of the price down. Also changed the default "PM" to either PY or PM.
You can edit the switch I inserted as you want.
The only thing important is the function toggleyearmonth();
function toggleyearmonth() {
document.querySelectorAll(".price span").forEach(pricenum => {
if(pricenum.getAttribute("pm")){
if(pricenum.getAttribute("pm") == pricenum.innerText){
pricenum.innerText = (pricenum.getAttribute("pm") - pricenum.getAttribute("pm")/100*20).toFixed(0);
pricenum.parentNode.childNodes[4].innerText = "PY";
} else {
pricenum.innerText = pricenum.getAttribute("pm");
pricenum.parentNode.childNodes[4].innerText = "PM";
}
}
})
};
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.switch {
display: inline-block;
position: absolute;
width: 60px;
height: 34px;
margin: 0;
padding: 0;
background: #ddd;
border-radius: 20px;
position: relative;
vertical-align: middle;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
input[type="checkbox"]+.switch:before {
content: "";
width: 50px;
height: 50px;
background: #fff;
border-radius: 20px;
position: absolute;
top: -8px;
left: -5px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
input[type="checkbox"]:checked+.switch {
background: #4caf50;
}
input[type="checkbox"]:checked+.switch:before {
left: calc(100% - 30px);
}
<label>
<input type="checkbox" name="switch" value="on" onclick="toggleyearmonth()">
<span class="switch"></span>
</label>
<br><br>
<!-- Pricing -->
<div class="v-line v-line-left">
<div class="container">
<div class="pricing-items row">
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Essentials </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=9>9</span><span>$</span>
<em>PM</em>
</div>
<br><br>
<div class="lui-text">
<div>
<p>Get the essentials you need to succeed with our budget-friendly plan. Includes access to our library of study materials, email support from our team of experts, and summaries.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<em>H.W Answers & Explanations</em>
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/8wMg1bdvwc9Z9Gg003" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col center col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="label">
<span> Popular </span>
</div>
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Power User </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=12>12</span><span>$</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Take your academic success to the next level with our Power User plan. Includes access to all of H.W answers/expinations, and priority access to our team for one-on-one help.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i>Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i>H.W Answers & Explanations
</li>
<li>
<em>Weekly Revision Meetings</em>
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/cN2dT3ezA4Hx7y8bIM" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
<div class="pricing-col col-xs-12 col-sm-6 col-md-6 col-lg-4">
<div class="pricing-item scrolla-element-anim-1 scroll-animate" data-animate="active">
<div class="lui-subtitle">
<span> Ultimate </span>
</div>
<div class="icon"></div>
<div class="price">
<span pm=17>17</span><span>$</span>
<em>PM</em>
</div>
<div class="lui-text">
<div>
<p>Achieve ultimate success with our top-tier plan. Includes access to all of our study materials, priority access to our team for one-on-one help, and exclusive online meetings the day before any test to ensure you're fully prepared.</p>
</div>
</div>
<div class="list">
<div>
<ul>
<li>
<i class="fas fa-check"></i>Summaries
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Exclusive</span> Chromebook Tips/Tricks
</li>
<li>
<i class="fas fa-check"></i> <span style="font-weight: bold; color: #30a484;">Preformance Tasks</span> & H.W Answers/Explanations
</li>
<li>
<i class="fas fa-check"></i>Weekly Revision Meetings
</li>
</ul>
</div>
</div>
<a href="https://buy.stripe.com/dR69CN6342zp8Cc8wB" class="btn btn-solid">
<span>Join Now!</span>
</a>
<div class="bg-img" style="background-image: url(assets/images/pat-2.png);"></div>
</div>
</div>
</div>
<div class="lui-bgtitle">
<span> Pricing </span>
</div>
</div>
</div>
<div class="container">
<div class="lui-heading">
<div class="container">
<div class="m-titles align-center">
<h2 class="m-title splitting-text-anim-1 scroll-animate" data-splitting="words" data-animate="active">
<br>
<br>
<br>
<span> What are you waiting for? Join now and guarantee your A+ this year! </span>
</h2>
</div>
</div>
</section>
I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title"></h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.
$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
I think the problem is with your CSS selector in the Jquery.
$('.item .item-location p')
should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.
Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item, you've to use closest to reach the ancestor .item
$("#location-filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('.item .item-location p').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).closest('.item').hide();
} else {
$(this).closest('.item').show();
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="location-filter" type="text">
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>London</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<a href="">
<img class="img-fluid" src="">
<div class="item-badges"></div>
<div class="item-meta">
<div class="item-price">
<small></small>
</div>
</div>
</a>
</div>
<div class="item-info">
<h3 class="item-title">
</h3>
<div class="item-location">
<i class="fa fa-map-marker "></i>
<p>Canada</p>
</div>
<div class="item-details-i">
<span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
<span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
<span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
</div>
<div class="item-details">
<p>Read More</p>
</div>
</div>
</div>
I am using Bootstrap 4 in my project and I seem to be having a problem keeping a div with the class "sticky-top" just under a fixed navbar. I've tried using javascript to replace the css on scroll, but that doesnt seem to work. I know there is a way to set an id to the navbar and tell it not to scroll past that point, but I cant seem to Google well enough to find the solution. Any help is greatly appreciated.
Below is the code I am using.
<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
<div class="container">
<a class="navbar-brand sticky_logo" href="#"><img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"><img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="menu_toggle">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
<span class="hamburger-cross">
<span></span>
<span></span>
</span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav menu w_menu ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
How It Works
</a>
</li>
</ul>
</div>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-lock"></i> Login</a>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-user-plus"></i> Sign Up</a>
</div>
</nav>
<div class="row row-eq-height featured_item">
<div class="col-md-5 send-card order-md-last">
<div id="get-started" class="card sticky-top">
<div class="card-body">
<form>
<div class="row">
<div class="col-12 form-group">
<label for="exampleInputEmail1">I'm sending money from...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-us"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12 form-group mt-2 mb-0">
<label>I'm sending to...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-in"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12">
<hr>
</div>
<div class="col-12 mb-3 text-center conversion">
<span class="flag-icon flag-icon-us mr-2"></span>1 <span class="mr-2 ml-2">=</span> <span class="flag-icon flag-icon-in mr-2"></span>69.64
</div>
<div class="col-12 mt-2 index-form-btn">
<i class="fa fa-rocket"></i> Get Started Now!
</div>
<div class="col-12 text-center">
<p class="small">View Terms & Conditions for more details and fees</p>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7 d-flex order-md-first">
<div class="row">
</div>
</div>
</div>
.send-card{
top: -225px;
z-index: 4;
margin-bottom: -200px;}
The div you want under the navbar can get styled with top: ##px; (where ## is the pixel height of the navbar you want it to go under). And then also add either position: sticky; or position: fixed; depending whether you want the sticky behavior or the fixed behavior.
Here's a jsfiddle with the described sticky behaviour.
I have a fragment of HTML, representing a collapsible panel that expands/collapses as expected but when I use that same piece of markup within an Angular 2 Observable, *ngFor, the expand/collapse behaviour is lost. I can see the 'content' of the panel within the source but the panel starts and remains collapsed.
<app-tab>
<app-tab-item *ngFor="let query of queries$ | async" [title]="query.name">
<div>
<div class="ibox collapsed">
<div class="ibox-title">
<h5>Collapsed Panel within Observable</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content" style="display: none;">
<p>Collapsed panel within observable</p>
</div>
</div>
</div>
</app-tab-item>
<app-tab-item title="This Works!">
<div>
<div class="ibox collapsed">
<div class="ibox-title">
<h5>Collapsed Panel</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content" style="display: none;">
<p>Collapsed panel</p>
</div>
</div>
</div>
</app-tab-item>
</app-tab>
I tried using nth child selector but it did not work. maybe the way I wrong or something
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
example: https://jsfiddle.net/03koh1w4/
You need to make a few changes (HTML and CSS)
HTML -> Don´t close your order list on all item
CSS -> Give your (odd and even) to your list, and then to your class
CSS
.link-source {
display:inline;
color:#fff;
}
li:nth-child(odd) .link-source {
background: green;
}
li:nth-child(even) .link-source {
background: red;
}
HTML
<ul>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
<li class="media list-news">
<div class="row">
<div class="col-sm-8 col-md-10">
<div>
value.title
value.id
</div>
<div>
<div class="description-news"> value.description
<span class="link-date-news"> <i class="fa fa-calendar-o"></i> value.publishDate </span>
</div>
</div>
</div>
<div class="col-sm-4 col-md-2 child-selector">
<div class="link-source btn-xs btn-source" href="javascript:void(0);">
<i class="fa fa-globe"></i> value.portalName
</div>
</div>
</div>
</li>
</ul>
DEMO HERE