I'm trying to get bootstrap tabs to work, but I'm having trouble. When I click on the tab, it doesn't show the right content. Here's my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
before the
<ul class="nav nav-tabs MentorProfile_Tabs">
<li class="active nav-link"><a data-toggle="tab" href="#experience">Experience</a></li>
<li class="nav-link"><a data-toggle="tab" href="#reviews">Reviews {{numReviews}}</a></li>
</ul>
<div class="tab-content">
<div id="experience" class="tab-pane fade in active" role="tabpanel">
{{#experience}}
<div class="row MentorProfile_ExperienceItem">
<div class="col-md-2"></div>
<div class="col-md-7">
<p class="MentorProfile_ExperienceItemTitle">{{title}}</p>
<p class="MentorProfile_ExperienceItemCompany">{{company}}</p>
</div>
<div class="col-md-3">
<p class="MentorProfile_ExperienceItemDate">{{dateString}}</p>
</div>
</div>
{{/experience}}
</div>
<div id="reviews" class="tab-pane fade" role="tabpanel">
<div class="row MentorProfile_Reviews">
{{#reviews}}
<div class="row MentorProfile_Review">
<div class="row">
<div class="col-sm-8 MentorProfile_Reviews_UserName">{{firstName}} {{lastName}}</div>
<div class="col-md-4">{{{ratingHtml}}}</div>
</div>
<div class="row MentorProfile_Reviews_UserReview">
{{review}}
</div>
</div>
{{/reviews}}
{{^reviews}}
<div class="row MentorProfile_Review">There are no reviews for this mentor at this time.</div>
{{/reviews}}
</div>
</div>
</div>
The way bootstrap 5 tabs works little bit different.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
Related
I am having the problem where my hx-target doesn't seem to be replacing the content where the target I point to. I'm using a a base html file that has a div with an id of requestcontent in it. All of my links, form actions and hx actions that I'm using point to this div for replacement.
My initial access from an item on the menu sidebar works fine and gives results as shown here:
Even when I click on the "Add bill" button the page renders correctly:
However if I press close or save on this page when I return to the original page the top of the add page is still present:
This is true from both my add and delete pages.
The initial page that starts out the entire process is in billlist.html
<div class="container shadow min-vh-100 py-2">
{% include 'acctsite/partials/messages.html' %}
<h2>Accounts Payable / Bills Listing</h2>
<div class="row" align="right">
<div class="col-10"></div>
<div class="col-2 pb-1">
<button class="btn btn-primary btn-sm"
hx-trigger="click" hx-get="{% url 'expadd' %}" hx-target="#requestcontent">
Add bill
</button>
</div>
</div>
<div class="row">
<div class="col h5">Date</div>
<div class="col h5">Vendor</div>
<div class="col h5">Description</div>
<div class="col h5">Amount</div>
<div class="col h5">Paid Info</div>
<div class="col-1"></div>
<div class="col-1"></div>
<div class="col-1"></div>
</div>
<div class="row">
<hr>
</div>
{% for bill in bills %}
<div class="row ">
<div class="col">
{{bill.date}}
{% if bill.due_date is not None %}
<br>{{ bill.due_date }}
{% endif %}
</div>
<div class="col">{{bill.vendor.name}}</div>
<div class="col">{{bill.description}}</div>
<div class="col" align="right">${{bill.amount|floatformat:2}}</div>
<div class="col">
{% if bill.paid_date is not None %}
{{ bill.paid_date }} <br>
{{ bill.check_number}}
{% endif %}
</div>
<div class="col-1">
<button class="btn btn-primary btn-sm" hx-trigger="click">Edit</button>
</div>
<div class="col-1">
{% if bill.paid_date is None %}
<button class="btn btn-primary btn-sm" hx-trigger="click" >Pay</button>
{% endif %}
</div>
<div class="col-1">
<button class="btn btn-danger btn-sm" hx-trigger="click" hx-get="{% url 'expdel' bill.transactionID %}" hx-target="#requestcontent" >Delete</button>
</div>
</div>
<div class="row">
<hr>
</div>
{% endfor %}
</div>
The add and delete page are very similar in the way they are written. Add uses a form to gather the information to perform the add:
expadd.html
<div class="container shadow min-vh-100 py-2">
{% include 'acctsite/partials/messages.html' %}
<h2>Add Expense/Bill</h2>
<form hx-post="{% url 'expadd' %}" hx-targe="#requestcontent" method="POST">
{% csrf_token %}
<div class="row">
<div class="col-2">
<strong>Vendor</strong>
</div>
<div class="col-5">
<select class="form-control" name="vendor">
{% for vendor in vendors %}
<option value="{{vendor.id}}">{{vendor.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Date</strong>
</div>
<div class="col-2">
<input class="form-control" type="date" name="date">
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Due Date</strong>
</div>
<div class="col-2">
<input class="form-control" type="date" name="duedate">
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Description</strong>
</div>
<div class="col-5">
<input class="form-control" type="text" name="description">
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Amount</strong>
</div>
<div class="col-2">
<input class="form-control" type="number" step=".01" name="amount">
</div>
</div>
<div class="row">
<div class="col-5">
</div>
<div class="col-1">
<input class="form-control btn btn-secondary" type="submit" name="action" value="Close">
</div>
<div class="col-1">
<input class="form-control btn btn-primary" type="submit" name="action" value="Save">
</div>
</div>
</form>
</div>
expdel.html
<div class="container shadow min-vh-100 py-2">
{% include 'acctsite/partials/messages.html' %}
<h2>Confirm Expense Delete</h2>
<form hx-post="{% url 'expdel' %}" hx-targe="#requestcontent" hx-swap="outerHTML" method="POST">
{% csrf_token %}
<input type="hidden" name="tranID" value="{{ bill.transactionID}}">
<div class="row">
<div class="col-2">
<strong>Vendor</strong>
</div>
<div class="col-5">
{{ bill.vendor.name }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Date</strong>
</div>
<div class="col-2">
{{ bill.date }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Due Date</strong>
</div>
<div class="col-2">
{{ bill.due_date }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Description</strong>
</div>
<div class="col-5">
{{ bill.description }}
</div>
</div>
<div class="row">
<div class="col-2">
<strong>Amount</strong>
</div>
<div class="col-2">
${{ bill.amount | floatformat:2 }}
</div>
</div>
<div class="row">
<div class="col-5">
</div>
<div class="col-1">
<input class="form-control btn btn-secondary" type="submit" name="action" value="Close">
</div>
<div class="col-1">
<input class="form-control btn btn-primary" type="submit" name="action" value="Delete">
</div>
</div>
</form>
</div>
The base template contains the definition of the page that contains the div id=requestcontent.
base.html
{% load static %}
{% load humanize %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}RJD Crew Accounting{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<style>
.hoverDiv {background: #fff;}
.hoverDiv:hover {background: #f5f5f5;}
</style>
{% block head %}
{% endblock %}
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary navbar-expand-lg ">
<div class="container-fluid">
<div class="p-3 mb-2 bg-primary text-white">
<a class="navbar-brand text-white" href="{% url 'home' %}"><img src="{% static 'rjdcrew-logo.png' %}" height="50" ><br>Accounting</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" >
<a class="nav-link {% if '/' == request.get_full_path %}active{% endif %}" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Expenses
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item {% if 'expenses' in request.get_full_path %}active{% endif %}" href="{% url 'expenses'%}">Reimbursements</a></li>
<li><a class="dropdown-item" href="#">Bills</a></li>
</ul>
</li>
</ul>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{%url 'logout' %}">logout</a>
</li>
{% else %}
<li class="nav-item">Register</li>
<li class="nav-item">
<a class="nav-link" href="{%url 'login' %}">Login</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container p-10">
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
<div class="container-fluid overflow-hidden">
<div class="row vh-100 overflow-auto">
<div class="col-12 col-sm-3 col-xl-2 px-sm-2 px-0 bg-light d-flex sticky-top">
<div class="d-flex flex-sm-column flex-row flex-grow-1 align-items-center align-items-sm-start px-3 pt-2 text-white">
<ul class="nav nav-pills flex-sm-column flex-row flex-nowrap flex-shrink-1 flex-sm-grow-0 flex-grow-1 mb-sm-auto mb-0 justify-content-center align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="{% url 'home' %}" class="nav-link px-sm-0 px-2">
<i class="fs-5 bi-house"></i><span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="{% url 'reports' %}" class="nav-link px-sm-0 px-2">
<i class="fs-5 bi-speedometer2"></i><span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle px-sm-0 px-2" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-credit-card"></i><span class="ms-1 d-none d-sm-inline">Expense Reimburse</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" hx-get="{% url 'approve' %}" hx-target="#requestcontent">Approve</a></li>
<li><a class="dropdown-item" hx-get="{% url 'pay' %}" hx-target="#requestcontent">Pay</a></li>
<li><a class="dropdown-item" hx-get="{% url 'explist' %}" hx-target="#requestcontent">List</a></li>
<li>
<hr class="dropdown-divider">
</li>
</ul>
</li>
<li >
<a href="#" class="nav-link px-sm-0 px-2" hx-get="{% url 'billlist' %}" hx-target="#requestcontent" hx-swap="outerHTML" >
<i class="fs-5 bi-receipt"></i><span class="ms-1 d-none d-sm-inline">Expense Bills</span>
</a>
</li>
<li >
<a href="#" class="nav-link px-sm-0 px-2" hx-get="{% url 'payments' %}" hx-target="#requestcontent" >
<i class="fs-5 bi-journal-minus"></i><span class="ms-1 d-none d-sm-inline">Payments</span>
</a>
</li>
<li >
<a href="#" class="nav-link px-sm-0 px-2" hx-get="{% url 'journal' %}" hx-target="#requestcontent" >
<i class="fs-5 bi-currency-dollar"></i><span class="ms-1 d-none d-sm-inline">Journal</span>
</a>
</li>
<li class="dropdown">
<a href="#" class="nav-link dropdown-toggle px-sm-0 px-2" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-printer"></i><span class="ms-1 d-none d-sm-inline">Reports</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" hx-get="{% url 'checkreg' %}" hx-target="#requestcontent">Check Register</a></li>
<li><a class="dropdown-item" hx-get="{% url 'journalrep' %}" hx-target="#requestcontent">Journal</a></li>
<li><a class="dropdown-item" hx-get="{% url 'accountrep' %}" hx-target="#requestcontent">Accounts</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-sm-0 px-2">
<i class="fs-5 bi-people"></i><span class="ms-1 d-none d-sm-inline">Users</span> </a>
</li>
<li>
<a href="#" class="nav-link dropdown-toggle px-sm-0 px-2" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-gear"></i><span class="ms-1 d-none d-sm-inline">Settings</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdown">
<li><a class="dropdown-item" hx-get="{% url 'adduser' %}" hx-target="#requestcontent">Add User</a></li>
<li><a class="dropdown-item" hx-get="{% url 'addvendor' %}" hx-target="#requestcontent">Add Vendor</a></li>
</ul>
</li>
<li><i class="fs-5 bi-sign-stop"></i><span class="ms-1 d-none d-sm-inline">Sign out</span></li>
</ul>
</div>
</div>
<div class="col d-flex flex-column h-100">
<main class="row">
<div class="col pt-4" id="requestcontent">
{% block content %}
Content goes here
{% endblock %}
</div>
</main>
<footer class="row bg-light py-4 mt-auto">
<div class="col"> Copyright 2022 Skyout Services</div>
</footer>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org#1.8.2" integrity="sha384-+8ISc/waZcRdXCLxVgbsLzay31nCdyZXQxnsUy++HJzJliTzxKWr0m1cIEMyUzQu" crossorigin="anonymous"></script>
<script src="{% static "dialog.js" %}"></script>
</body>
</html>
I have created a layout page which has a top menu and a side navbar. My problem is when I've created a new razor view (content page). It seems to be centering from the whole page not taking into account the sidebar. Also my div container in my content page does not user all the screen. Am I missing something. I thought if I create my layout page with a side bar the content page would use the remaining page.
Thanks for any help,
Layout Code:-
<body>
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
</ul>
<ul class="navbar-nav ml-auto">
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
#*Sidebar*#
<div id="sidebar-wrapper">
</div>
<div class="container mt-3 mb-3">
#RenderBody()
</div>
#RenderSection("Styles", required: false)
#RenderSection("scripts", required: false)
</body>
I've added an image of the layout I am trying to achieve.
You can try this code below:
<div class="row">
<div class="col-md-3">
<nav id="menuBar" class="navbar navbar-expand-sm">
<a class="navbar-brand" href="#" style="color:white;">Building ********</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-pills flex-column">
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListUsers">Users</a>
<a class="dropdown-item" asp-controller="Administration"
asp-action="ListRoles">Roles</a>
</div>
</li>
}
#if (signInManager.IsSignedIn(User))
{
<li class="nav-item">
<form method="post" asp-controller="account" asp-action="logout">
<button type="submit" class="nav-link btn btn-link py-0" style="width:auto;">
Logout #User.Identity.Name
</button>
</form>
</li>
}
else
{
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a asp-controller="account" asp-action="register" class="nav-link">Register</a>
</li>
}
<li class="nav-item">
<a asp-controller="account" asp-action="login" class="nav-link">Login</a>
</li>
}
</ul>
</div>
</nav>
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
Result:
i am building an express app with mongodb in nodejs, When i make a get request to the show posts route , then all posts are rendered correctly when i pass them in ejs file but after the show page is displayed it gives an error on the terminal
events.js:291 throw er; // Unhandled 'error' event ^ TypeError: Cannot read property 'title' of null
this is my get route in router/posts.js
router.get("/commerce", (req,res)=>{
if(req.query.search){
var noMatch;
// gives search results on author name, content and title of the post
const regex = new RegExp(escapeRegex(req.query.search), 'gi')
Post.find({$or: [{title:regex} , {content:regex}, {'author.username':regex}], subject: "commerce"}, function(err,allposts){
if(err) console.log(err)
else{
if(allposts.length<1){
noMatch = "No posts matched the search results , please try again"
}
console.log("searched", allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch, message: req.flash('success')});
}
})
} else{
Post.find({subject: "commerce"}, function(err,allposts){
if(err) {
console.log(err);
res.statusCode = 500;
res.end('error');
}
else{
console.log("actually all posts",allposts)
res.render("commerce", {posts: allposts, noMatch: noMatch , message: req.flash('success')});
}
})
}
})
commerce.ejs
<%- include("./partials/header1.ejs") %>
<link rel="stylesheet" href="/stylesheets/commerce.css">
<%- include("./partials/header2.ejs") %>
<div class="top-horiz-bar">
<div class="logo-section-in-bar">
<img class="top-img-logo" src="./finallogopic.png" alt="logo-pic" height="60px" width="60px">
<!-- <img class="top-name-logo" src="./zoomed-brand-name.png" alt="logo-name" height="80px" width="130px"> -->
<h2 class="top-name-logo">Backbanchers</h2>
</div>
<div class="other-icons">
<div class="search-box">
<input id="search-font" class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="person-account">
<a class="account-info" href="#">
<i class="far fa-user-circle fa-2x"></i>
<span>Sign-in/up</span>
</a>
</div>
</div>
</div>
<div class="vertical-nav-bar">
Home<span><i class="fas fa-home"></i></span>
<a class="blog-section-left" href="#">Blogs<span><i class="fas fa-user-graduate"></i></span>
<!-- <ul class="sections-blog">
<a class="option-blog" href="#"><li>Business & Economics</li></a>
<a class="option-blog" href="#"><li>Commerce</li></a>
<a class="option-blog" href="#"><li>Personality Devlopment</li></a>
</ul> -->
</a>
Authors<span><i class="fas fa-pencil-alt"></i></span>
Newsletter<span><i class="fas fa-newspaper"></i></span>
Contact US<span><i class="fas fa-phone-alt"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
About Us<span><i class="fas fa-users"></i></span>
<!-- Services<span><i class="fas fa-question"></i></span> -->
</div>
<div class="all-engineering-articles">
<div class="side-box">
<div class="one-of-3-heading">
<h2 class="side-box-heading-one">Trending</h2>
<div class="sub-part-section">
<h2 class="title-side-box">How 3D cameras with integrated data processing reduce the load on network and host PC</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Indy Cars Get a Little Safer—Thanks to a 200+ mph Windshield</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="two-of-3-heading">
<h2 class="side-box-heading-two">Recommended</h2>
<div class="sub-part-section">
<h2 class="title-side-box">Autonomous Mobile Robots and Cobots Improve Worker Safety and Retention</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Sustainable Control Panel Design</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">The Difference Between: Push-In Terminals versus Other Types of Connections</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
<div class="three-of-3-heading">
<h2 class="side-box-heading-three">Popular</h2>
<div class="sub-part-section">
<h2 class="title-side-box">
Why Using IIoT for Pneumatics is Simple, Yet Critical</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">
IR Camera Captures Defects in 3D Printing</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
<div class="sub-part-section">
<h2 class="title-side-box">Additive Manufacturing Qualification & Certification During Crises</h2>
<div class="date-side-box">
<span>15 August 2020</span>
</div>
</div>
</div>
</div>
<% posts.forEach(function(post){ %>
<div class="blog-post">
<div class="blog-post__img">
<img src="https://image.freepik.com/free-photo/cyborg-hand-pressing-keyboard-laptop-3d-rendering_117023-946.jpg" alt="article-pic" class="blog-post__article-img">
</div>
<div class="blog-post__info">
<div class="blog-post__date">
<span><%= post.publishDay%></span>
<span><%= post.publish_date %></span>
</div>
<div class="author-name">
<ul class="author-content">
<li class="name-aut"><%= post.author.username %>></li>
<li class="save-to-later"><i class="fas fa-plus "></i></li>
</ul>
</div>
console.log(<%= post.title %>)
<h1 class="blog-post__title"><%= post.title %></h1>
<p class="blog-post__text"><%= post.content.substring(0,120) %></p>
Read more
<ul class="btns-on-blogcard">
<!-- <li class="btns-blog"><i class="far fa-eye fa-2x "></i></li> -->
<li class="btns-blog"><i class="far fa-hand-peace fa-2x "></i></li>
<li class="btns-blog"><i class="fas fa-share fa-2x "></i></li>
</ul>
</div>
</div>
<% }) %>
<div class="page-end">
</div>
<div class="next-page">
<h2 class="new-page-blogs">-Page 1 of 1- <span class="next-page-btn">Next page</span></h2>
</div>
</div>
<section class="footer" >
<footer id="foo">
<div class="overall-footer">
<div class="first-part">
<h2 class="our-name">Backbenchers</h2>
<img id="logo-of-learners" src="finallogopic.png" alt="our-logo" height="40%" width="14%">
</div>
<div class="bordering-right">
</div>
<div class="second-part">
<h2 class="second-links">Quick Links</h2>
<ul class="ul-class-footer">
<li class="quick-buttons">Home</li>
<li class="quick-buttons">Buisness & Economics</li>
<li class="quick-buttons">Commerce</li>
<li class="quick-buttons">Engineering</li>
<li class="quick-buttons">Personality Devlopment</li>
</ul>
</div>
<div class="third-party">
<div class="name-social-footer">
<li class="quick-buttons-2">Facebook</li>
<li class="quick-buttons-2">Instagram</li>
<li class="quick-buttons-2">LinkedIn</li>
</div>
<style>
a{
text-decoration: none;
color: white;
}
</style>
<div class="media-buttons-footer">
<a class="btns-footer-class-1" href="#"><i id="facebook-1" class="fab fa-facebook-f "></i></a>
<a class="btns-footer-class-2" href="#"><i id="instagram-1" class="fab fa-instagram "></i></a>
<a class="btns-footer-class-3" href="#"><i id="linkedin-1" class="fab fa-linkedin-in "></i></a>
</div>
</div>
<div class="fourth-party">
<h2 class="fourth-links">Social</h2>
<a href="mailto:ritishgupta45#gmail.com">
<span id="envolope-footer" class="fas fa-envelope fa-2x"></span>
<span id="email-footer" class="text">Backbenchers#gmail.com</span>
</a>
<input id="name-id-id" type="email" placeholder="Name">
<input id="email-id-id" type="email" placeholder="Email-id" required>
<input id="leave-msg-id-id" type="text" placeholder="leave a message">
<div class="send-button-footer">
<button id="send-id-id" type="submit">Send</button>
</div>
</div>
<div class="fifth-party">
<h2 class="fifth-links">Connect with Us</h2>
<h2 class="heading-of-news-footer">Newsletter subscription</h2>
<p class="para-of-news-footer">Subscribe to our fortnightly newsletter <br> to gain great knowledge exposure. <br> Also, stand a chance to participate <br> in brainstorming competitions <br> and win exciting prizes.</p>
<div class="suscribe-footer">
<input id="footer-suscribe-btns" type="email" placeholder="enter your email id" required>
<div class="red-btn-suscribe">
<button id="suscribing" type="button">Subscribe</button>
</div>
</div>
</div>
<div class="final-part">
<div class="box-copy">
<div class="btns-margin">
<h2 class="bottom-copy-footer">About Us</h2>
<h2 class="bottom-copy-footer">Privacy Policy</h2></a>
<h2 class="bottom-copy-footer">Terms and conditions</h2>
</div>
<h2 class="final-copywrite">copyright © All Rights Reserved | Backbenchers</h2>
</div>
</div>
</footer>
</section>
<%- include("./partials/footer.ejs") %>
output ss 1 of console.log("actually all posts",allposts)
output ss 2 of console.log("actually all posts",allposts)
in these output ss
i have added console.log("actually all posts",allposts) before res.render() and got the output whrere all posts are printed and at last null is also printed where is that null coming from? , and after this null , error is printed on the console as visible in the scrrenshots above
I am working with ASP.net MVC 5, I have created a bootstrap carousel/slideshow with 4 images, I want to get the id of the active slide on this carousel. Then, when an user is clicking on an submit button, I can redirect him to another page recording the active slide id in the URL.
<form method="post">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class=""></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<a class="carousel-buttonleft" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-buttonright" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-inner" role="listbox" style="height:300px">
<div class="item active" align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>NORMAL SKIN</p>
</div>
</a>
</div>
<div class="item ">
<div align="center" class="carousel-image">
<img src="../images/saumon.png" alt="saumon1" />
</div>
<div class="carousel-caption">
<p>SILVER SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>DEEP SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>WITH SKIN</p>
</div>
</div>
</div>
</div>
Thanks.
sorry i'm currently using my phone. You must select by className.
In css :
.carousel-inner .item .active
In jQuery :
$('.carousel-inner .item .active')
then... .attr('id') and for the value .val() or .text()
In C#, I found this topic to show you how to iterate inside your page controls depending a specific className target :
StackOverflow
how to make the toolbar remains at the bottom, do not go up on top after the keyboard appears ??
what's wrong with my code or less some plugins for cordova or framework7! maybe someone can help me to solve this problem.
<div class="views">
<div class="view">
<div class="pages">
<div data-page="viewprofil" class="page navbar-fixed toolbar-fixed">
<div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);">
<div class="navbar-inner" >
<div id="kembali" class="left sliding button">
<i class="icon icon-back"></i>
</div>
<div class="left sliding">Akun</div>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a id="kembali">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</a>
<a href="{{pathFor 'history'}}" >
<i class="fa fa-clock-o fa-2x"></i>
</a>
<a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif">
<i class="fa fa-user fa-2x"></i>
</a>
</div>
</div>
<div class="page-content" style="background-color: #ecf0f1;color: #444444;">
<div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div>
<div class="list-block">
<ul class="box-data">
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">person</i></div>
<div class="item-inner">
<div class="item-input">
<input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">email</i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" value="{{email}}" disabled>
</div>
</div>
</div>
</li>
<li>
<li class="accordion-item">
<a class="item-content item-link">
<div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div>
<div class="item-inner">
<div class="item-title">Kata Sandi</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Kata Sandi baru">
</div>
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Ulangi Kata Sandi">
</div>
</div>
</li>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">call</i></div>
<div class="item-inner">
<div class="item-input">
<input type="tel" placeholder="No. Handphone" value="{{notelp}}">
</div>
</div>
</div>
</li>
</ul>
<div class="content-block">
<div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i> Keluar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After
Before
I never came out of an idea to keep it in the bottom, but here is a quick fix:
var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main', {
});
$$ = Dom7;
$$('#my-input').on('focus', function() {
mainView.hideToolbar();
});
$$('#my-input').on('blur', function() {
mainView.showToolbar();
});
Simply show and hide the toolbar on input focus and blur events.
Live Example: https://jsfiddle.net/wowq3n64/