Working on a blog site, Here's the effect I want :
I use a forEach to loop through every post and create the same style for each post. This is my code :
<% blog.forEach(function(blog,index) { %> //loops through every post
<div class="col-md-6 col-sm-6">
<div class="thumbnail">
<img src="<%= blog.image %>"> //adds image
</div>
<div class="caption">
<h2><%= blog.title %></h2> //adds title
</div>
<span><%= blog.created.toDateString(); %></span> //adds date
<div class="relative">
<p><%- blog.body.substring(0,250); %></p> //adds body
<div class="absolute"></div>
</div>
</div>
<% }}) %>
It results in :
I have my blog post image in
<% blog.image %>
How can I use this image as background with title on it(just like the one in the 1st image)? Is it possible to pass this image as background with ejs template?
This should get you started:
.wrapper {
position: relative;
}
.overlay {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(50, 50, 50, 0.5);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-6 col-sm-6">
<a href="/blog/<%= blog._id %>">
<div class="wrapper">
<img class="img-responsive" src="http://pipsum.com/800x300.jpg">
<div class="overlay">
<h2> blog.title </h2>
<span>blog.created.toDateString();</span>
</div>
</div>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie commodo quam, in dapibus odio laoreet sed. Duis id mauris in ligula lacinia bibendum non nec urna. Praesent at est varius, rutrum massa sed, elementum velit.
</p>
</div>
I stripped out the EJS to focus on the HTML markup and CSS.
A brief overview of how this works:
The image and overlay is wrapped in .wrapper, which is set to position: relative;.
The .overlay is set to position: absolute; which takes the div out of normal content flow and absolutely positions it inside .wrapper.
bottom: 0; ensures it is at the bottom, and width: 100% expands it to fill .wrapper.
I added background: rgba(50, 50, 50, 0.5); to make the text a bit more readable (values need tweaked). rgba stands for Red, Green, Blue, Alpha. The Alpha digit allows you to adjust transparency. 1 is fully opaque, 0 is fully transparent.
Related
I have a web-page which contains two tabs. The first tab contains a drop down search bar which contains the list of branch codes and a default "select the branch code"(which btw is an disabled option) as options.
<select id="dropdown">
<option value="mech">101</option>
<option value="cse">201</option>
<option value="ece">4301</option>
<option value="Select" selected disabled="disabled">select the branch code</option>
</select>
When the user selects a branch code and leaves to the second tab of the same page and comes back to the first tab I want the first tab to show the default disabled option. (i.e "select the branch code") But instead it shows the previously selected branch code in the text area of that drop down bar.
I tried calling a JS function through onload() in the body tag. I planned to store the default selected value of the drop down bar as soon as the page loads and before the user can change it. And then when the user clicks on the next tab I thought I could use Onclick() function and store the value returned to default and set it to the textContent of document.getElementById("dropdown").value =defaultvalue; . But it didn't work fully. But all this command does is change the value of the search drop down bar but the actual letters remain same. (i.e the value part of the is restored to the original disabled ) but the text area displaying the search items in the bar still shows the latest search done by the user.( if the value the user selects is '101' and leaves the tab , when he comes back to the first tab and it should show 'select the branch code' in the text box area of the drop down. Instead even though the actual value of the element is changed, it still shows 101 in the text area.
I tried even .innerText and .textcontent in the place of .value() in javascript. But still the values in the back-end changes (when i put it in console.log, it correctly prints the stored default value). However the main text area of the drop down bar still shows the branch code which the the user searched previously.
The problem here is though the value of the element changes almost with all commands above, the text area in the drop down bar still displays the old , previously searched item. So is there a way where I can make the so that not only the value but also the actual text-content of that particular tag gets the default value. for those who have asked have given the detailed coding of the tabs and the function where I intend to do this. I have used Bootstrap for it
<nav class="nav nav-tabs">
<a data-toggle="tab" class="nav-item nav-link active" href="#GLP" style="font-size:12px" onclick=RemoveDataFromUpdate()>Generate POD</a> <!-- title of both the tabs, I use bootstrap to make this possible -->
<a data-toggle="tab" class="nav-item nav-link " href="#UBP" style="font-size:12px" onclick = RemoveDataFromGenerate()>Update POD</a>
</nav>
<div class="tab-content">
<!-- TAB 1 : GENERATE POD -->
<div class="GeneratePOD tab-pane fade show active" id="GLP" >
<span style="color:blue">Branch Code </span><span class="required">*</span>
<%
try {
Connection connection
= DriverManager.getConnection("jdbc:sqlserver://192.170.19.8:1533;databaseName=ash;user=ash;password=ash");
Statement statement = connection.createStatement();
resultset = statement.executeQuery("SELECT Branch_Code FROM tb_Branch;");
%>
<select class="js-example-basic-single" id="selement" name="search" style="font-size : 13px"> <!-- this is the select where I will be needing the display where the default value needs to be there -->
<option value="Select a Branch code" selected disabled="disabled"> Select a Branch code </option> <!-- the default value which needs to be present each time the user loads this first tab -->
<% while (resultset.next()) {%>
<option value="<%= resultset.getString(1)%>"><%= resultset.getString(1)%></option>
<% }%>
</select>
<%
} catch (Exception e) {
out.println("wrong entry" + e);
}
%>
<span class="button"><button class="btn btn-primary" id="search" onclick= "Search()">Search</button></span> <!-- search button -->
<br /><br /> <!-- line break -->
<div class='dispatch-info' id="tdiv" style="border:none">
</div>
<div id="del" style="visibility:hidden">
<span style="color:blue">Delivery Agent </span><span class="required">*</span>
<%
try {
Connection connection
= DriverManager.getConnection("jdbc:sqlserver:// 192.170.19.8:1533;databaseName=ash;user=ash;password=ash");
Statement statement = connection.createStatement();
resultset = statement.executeQuery("select Agent_name from delivery");
%>
<select class="form-control " id="del_agent" name="del">
<% while (resultset.next()) {%>
<option><%= resultset.getString(1)%></option>
<% }%>
</select>
<%
} catch (Exception e) {
out.println("wrong entry" + e);
}
%>
<span class="button"><button class="btn btn-primary" style="font-weight:bold" onclick="Generate_POD()">Generate Internal POD</button></span><!-- generate button-->
</div>
</div>
<!-- END TAB 1 : GENERATE POD -->
<!-- TAB 2 : UPDATE POD -->
<div class="GeneratePOD tab-pane fade" id="UBP"style="font-size:0.875em">
<div id="dropdown" style="border:none"></div>
</div> </div>
<script> <!-- this is place where I tend to do the function, each time the user clicks the Update tab it gets redirected here and here is where I plan to make the default value appear.-->
function RemoveDataFromGenerate()
{
$('#tdiv').empty(); //just a div for a tble
document.getElementById("del").style.visibility = "hidden";
let a=document.getElementById("selement").innerHTML=defaultvalue;
let b= document.getElementById("selement").textContent;
let c= document.getElementById("selement").innerText;
console.log("the value of that search bar is "+a+" while the actual text content of that text search bar is "+b);
console.log("the selected value is "+ document.getElementById("selement").value);
</script>```
juste selectedIndex ?
window.onload=_=>{ dropdown.selectedIndex = 3 }
SetDefault.onclick=_=>{ dropdown.selectedIndex = 3 }
<select id="dropdown">
<option value="mech">101</option>
<option value="cse">201</option>
<option value="ece">4301</option>
<option value="Select" selected disabled="disabled">select the branch code</option>
</select>
<button id="SetDefault"> Set Default</button>
sample with "TAB"...
window.onload=_=>{ dropdown.selectedIndex = 3 }
tab1.onclick=_=>{ dropdown.selectedIndex = 3; }
.tabset > input[type="radio"] {
position: absolute;
left: -200vw;
}
.tabset .tab-panel {
display: none;
}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
display: block;
}
/*
Styling
*/
body {
font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
color: #333;
font-weight: 300;
}
.tabset > label {
position: relative;
display: inline-block;
padding: 15px 15px 25px;
border: 1px solid transparent;
border-bottom: 0;
cursor: pointer;
font-weight: 600;
}
.tabset > label::after {
content: "";
position: absolute;
left: 15px;
bottom: 10px;
width: 22px;
height: 4px;
background: #8d8d8d;
}
.tabset > label:hover,
.tabset > input:focus + label {
color: #06c;
}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
background: #06c;
}
.tabset > input:checked + label {
border-color: #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.tab-panel {
padding: 30px 0;
border-top: 1px solid #ccc;
}
/*
Demo purposes only
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 30px;
}
.tabset {
max-width: 65em;
}
<div class="tabset">
<!-- Tab 1 -->
<input type="radio" name="tabset" id="tab1" checked>
<label for="tab1">Select</label>
<!-- Tab 2 -->
<input type="radio" name="tabset" id="tab2">
<label for="tab2">input text</label>
<!-- Tab 3 -->
<input type="radio" name="tabset" id="tab3">
<label for="tab3">something</label>
<div class="tab-panels">
<section id="foo_1" class="tab-panel">
<h2>Select</h2>
<p>
<select id="dropdown">
<option value="mech">101</option>
<option value="cse">201</option>
<option value="ece">4301</option>
<option value="Select" selected disabled="disabled">select the branch code</option>
</select>
</p>
</section>
<section id="foo_2" class="tab-panel">
<h2>input_text</h2>
<p>
<textarea name="bob" id="bob" cols="30" rows="10"></textarea>
</p>
</section>
<section id="foo_3" class="tab-panel">
<h2>something</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut congue felis ac porttitor elementum.
Vivamus auctor semper mollis. Etiam ac nibh nulla. Etiam cursus malesuada ante, et cursus risus pellentesque et.
Proin ligula orci, placerat eu lobortis eu, pretium nec ex. Phasellus rutrum mauris nisl, a placerat lacus
tempus a.
Morbi consequat, felis ut sodales mollis, ante elit mollis felis, vitae volutpat lorem erat at orci.
Etiam porta quam nec blandit faucibus. Quisque finibus enim a tincidunt posuere.
Nullam porta odio nec nibh volutpat, quis efficitur nulla iaculis. Phasellus dictum porttitor tellus eget
bibendum.
Donec faucibus, felis scelerisque tempus sagittis, ligula ligula pellentesque nisl, eu consectetur nisi sapien
sit amet enim.
Sed diam mi, tempus vel faucibus tempus, pulvinar quis neque. Cras vulputate lacus nibh.
</p>
<p>
tab system from : https://codepen.io/markcaron/pen/MvGRYV
</p>
</section>
</div>
</div>
Under the headings in the following code snippet, there is some whitespace that will not go away. There is no margin-bottom or any other padding on the surrounding elements and I am confused as to why it exists.
The Code: Note: You have to click full page to see the whitespace
$('#explanation').click(function () {
// Make show/hide explanation text change on click
if ($("#explanation").text() == "Show Explanation ▼") {
$("#explanation").text("Hide Explanation ▲");
$("#info").collapse("show");
} else if ($("#explanation").text() == "Hide Explanation ▲") {
$("#explanation").text("Show Explanation ▼");
$("#info").collapse("hide");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<br>
<br>
<div class="row hideWhenDone mx-auto" style="width: 80%;">
<div class="col-sm-12 col-md-12 col-lg-8" id="excontainer" style="border: 1px solid #d8d8d8;border-radius: 5px;padding: 10px;">
<h5 style="display: inline;" id="correctTxt">Correct!</h5>
<a style="color: #007bff; float: right;cursor: pointer;" id="explanation">Show Explanation ▼</a>
<h6 id="flag" style="padding-right: 175px;padding-top: 2px;float: right;cursor: pointer;">Flag Question ⚐</h6>
<div id="info" class="collapse">
<br id="seperator">
<p id="explanation-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed condimentum ante. Phasellus blandit, magna eu dignissim tristique, lectus sem scelerisque enim, ac sollicitudin mauris sem quis tortor. Aenean vel ornare massa. Aenean velit nisi, consectetur ut sollicitudin tempor, aliquam a nulla. Vestibulum condimentum posuere sapien sit amet tincidunt. Maecenas hendrerit condimentum venenatis. Sed lacinia lacinia vulputate.
</p>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-4" style="text-align: center;padding: 10px;">
<button id="nxtQ" class="btn btn-primary" style="float: right;"><h5 id="btnText" style="font-size: 20px;display: inline-block;width: 200px;padding-top: 0px;">Next Question</h5></button>
</div>
</div>
I appreciate any help.
Thank you for your time
The issue is caused by your flex display on the columns, so they're always an equal height. Notice if you change the padding: 10px to padding: 0 on the second column (the one that contains the button) the first column will shrink vertically, removing the "white space".
So you either need to reduce your button/button column size, or vertically center the flex items
Apply below style to your paragraph tag white space will removed,
p{
word-break: break-all;
}
I have a div that will show on click of a link, but I need the first element to be showing when the page loads. Right now, it is just a blank space.
Also, the page scrolls to the div and makes it be at the top of the page, how do i prevent that from happening?
Here is the html,
<a href="#expe1" class="fa fa fa-times closer" >Link1</a>
<div class="resume" id="expe1">Open Block 1</div>
<a href="#expe2" class="fa fa fa-times closer" >Link2</a>
<div class="resume" id="expe2">Open Block 2</div>
<a href="#expe3" class="fa fa fa-times closer" >Link3</a>
<div class="resume" id="expe3">Open Block 3</div> here
and here is the javascript
$('.resume') .hide()
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');
$('.resume'+target).toggle();
});
Add .show() in your JQuery like this
$('.resume') .hide()
$('#expe1').show();
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');
$('.resume'+target).toggle();
});
Sample fiddle..
For the first part of your question (showing the first div on load) you could do :
$(function() {
$('.resume').hide()
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
var target = $(this).attr('href');
$('.resume'+target).toggle();
});
$("#expe1").toggle();
});
Then I'm not sure what you mean by 'makes it be at the top of the page'. Keep in mind that using .hide() actually takes the element out of the flow of the page as far as I know, which means that from your browser's standpoint the hidden div simply do not exists (not rendered at all). So the browser only "sees" one div, and naturally puts it at the top of the page.
EDIT:
Jquery's .hide() is equivalent to the css {display: none}, which takes the element out of the page (thus the pretty strange layout with divs always being on top of the page). If you want to be able to toggle on/off your divs while keeping the original layout, you can instead use a css class of {visibility: hidden} and toggle it on/off when clicked.
css
.hidden {
visibility: hidden;
}
html
Link1
<div class="resume" id="expe1">Open Block 1</div>
Link2
<div class="resume hidden" id="expe2">Open Block 2</div>
Link3
<div class="resume hidden" id="expe3">Open Block 3</div>
javascript
$(function() {
$('a[href^="#"]').on('click', function(event) {
var target = $(this).attr('href');
if ($('.resume' + target).hasClass('hidden')) {
$('.resume' + target).removeClass('hidden');
} else {
$('.resume' + target).addClass('hidden');
}
});
});
=> Working fiddle <=
This is how I would do it. I would keep it simple.
1.Change the href links to spans. This will keep the page from flying around.
2. Use css to hide all .resume classes.
3. Make the target of the toggle the next closest .resume so you can get rid of some of the id in you code.
4. Before your click function show the first instance of .resume class.
5. I added a .container div just for house keeping. You dont need it.
$('.resume:first').show(); // show first occurance of the .resume
$('.closer').on('click', function() {
$('.resume').hide(); // clear all .resume classes
var target = $(this).next(".resume"); // get the next div nearest the link.
$(target).toggle(); // toggle the closest div
});
.resume {
display: none;
}
.closer {
cursor: pointer;
width: 100%;
background: #888888;
}
.container {
width: 500px;
background: #CCC;
margin: 4px;
}
<script src="https://use.fontawesome.com/1c5ea170a0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span class="fa fa fa-times closer">Link1</span>
<div class="resume">Open Block 1<br>
Lorem ipsum dolor sit amet, tortor amet dui vestibulum wisi pellentesque, ipsum fusce suspendisse sed. Donec elit dolor elit adipiscing nec ornare, convallis non non in rutrum pede, et etiam dignissim pellentesque etiam, leo phasellus metus. Id habitant ullamcorper, pede vehicula quisque maecenas pede, ultricies lectus.
</div>
</div>
<div class="container">
<span class="fa fa fa-times closer">Link2</span>
<div class="resume">Open Block 2</div>
</div>
<div class="container">
<span class="fa fa fa-times closer">Link3</span>
<div class="resume">Open Block 3<br>
Penatibus tellus non, volutpat lectus ac vitae, tempus expedita vitae nec, suspendisse nonummy eget tellus pretium penatibus. Neque a. Erat tellus eu sit, praesent donec per quis rutrum, placerat neque laoreet. Quisque nascetur est hymenaeos sagittis, mauris id, odio convallis sem amet, penatibus ligula natoque pede, nunc pellentesque in turpis quis leo mus.
</div>
</div>
I was designing a website using bootstrap and there is a jumbotron on my page.
The jumbotron has a background image. How can I fade in the current background image of the jumbotron on hover?
means if I take the cursor on the jumbotron, another background image fades in and when I take the cursor out of the jumbotron, the previous picture comes back.
Here is my Jumbotron html:
<div class="jumbotron">
<div class="container">
<h1>Life is an Art.</h1>
<p style="font-size: 150%"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar nunc urna, non cursus enim ultricies in.</small></p>
<button type="button" class="btn btn-primary btn-lg">Learn More »</button>
</div>
</div>
CSS:
.jumbotron { background-image: url("02.jpg"); }
.jumbotron:hover { background-image: url("01.jpg"); }
Using pure CSS you can use the transition property to animate it like below. This is probably not available in older browsers though.
.jumbotron {
background-image: url("http://www.placecage.com/200/300");
transition: 1000ms;
}
.jumbotron:hover {
background-image: url("http://www.placecage.com/300/200");
transition: 1000ms;
}
<div class="jumbotron">
<div class="container">
<h1>Life is an Art.</h1>
<p style="font-size: 150%"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar nunc urna, non cursus enim ultricies in.</small></p>
<button type="button" class="btn btn-primary btn-lg">Learn More »</button>
</div>
</div>
I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.
<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />
This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!
The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page.
Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?
OK, I've just put together a very quick and dirty example.
Here's the HTML:
<body>
Add content
<div id="outerContainer">
<div id="left" class="col">
<p>Static content</p>
<img src="images/innovation.gif" width="111px" height="20px">
</div>
<div id="right" class="col">
<p>Ajax content</p>
</div>
</div>
</body>
The jQuery used is here
jQuery(function($){
var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
$("#addContent").click(function(e){
$("#right").append(addedHTML);
var rightHeight = $("#right").height();
//Animate the left column to this height
$("#left").animate({
height: rightHeight
}, 1500);
});});
And CSS:
#outerContainer {
position: relative;
border: 1px solid red;
margin: 20px auto 0;
overflow: hidden;
width: 400px;}
.col {
width: 180px;
display: inline;
padding: 0 0 40px;}
#left {
float: left;
border: 1px solid cyan;
position: relative;}
#left img {
position: absolute;
bottom: 0;
left: 0;}
#right {
position: absolute;
top: 0;
left: 180px;
border: 1px solid green;}
#addContent {
text-align: center;
width: 100px;
margin: 20px auto 0;
display: block;}
I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.
I hope this helps.
Maybe you could use a container around the content divs (with overflow hidden) and resize that one according to the height of the contents, thus achieving what you're trying to do?
I agree with the answer above. You could apply the image as a background image to the container then animate the container. That way the background image will move down with the container (assuming you anchor it to the bottom that is!)