save/download html div as image/pdf - javascript

I am trying to save divs like the following one either as PDF or image file. The problem so far with solutions I found online are the clip-path attributes...
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="m-2">
<div class="border border-5 d-flex" style="width: 1000px; height: 500px;">
<div class="position-relative w-100 h-100">
<div class="position-absolute start-0 bottom-0" style="width: 0;height: 0;border-style: solid;border-width: 400px 0 0 250px; border-color: transparent transparent transparent #ffa447;"></div>
<div class="position-absolute start-0 top-0 h-100" style="background-color:blueviolet; width: 350px; clip-path: polygon(0 0, 100% 0, 40% 100%, 0% 100%); background-image: url('https://images.pexels.com/photos/842571/pexels-photo-842571.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'); background-repeat: no-repeat; background-size: cover;"></div>
<div class="m-4 position-absolute start-0" style="height: 200px; width: 200px; background-color: black; color: white; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/QR_deWP.svg/1200px-QR_deWP.svg.png'); background-repeat: no-repeat; background-size: cover;">
QR
</div>
<div class="position-absolute top-50 start-50 translate-middle">
<div class="d-flex justify-content-center text-center">
<h1 class="mb-0 text-uppercase" style="font-size: 40pt;">Lorem ipsum</h1>
</div>
<div class="d-flex justify-content-center text-center">
<div class="" style="width: 300px;">
<h1>Lorem ipsum</h1>
</div>
</div>
<div class="d-flex justify-content-center text-center">
<div class="row" style="width: 350px;">
<div class="col-2">
<h4>Lorem</h4>
</div>
<div class="col-10">
<h4>ipsum</h4>
</div>
<div class="col-2">
<h4>Lorem</h4>
</div>
<div class="col-10">
<h4>ipsum</h4>
</div>
</div>
</div>
<div class="d-flex justify-content-center text-center">
<p class="text-justify" style="width: 400px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="d-flex justify-content-center text-center mt-3">
<p class="mb-0 text-justify small" style="width: 450px; padding-right: 110px;color: grey;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
<div class="position-absolute end-0 bottom-0 h-100" style="background-color:blueviolet; width: 350px; clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%); background-image: url('https://images.pexels.com/photos/3338497/pexels-photo-3338497.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260'); background-repeat: no-repeat; background-size: cover;">
<div class="mb-4 p-2 position-absolute bottom-0 start-50 translate-middle-x small" style="width: auto; max-width: 200px; background-color: rgba(255, 255, 255, 0.6);">
<p class="mb-0">Lorem ipsum</p>
<p class="mb-0">dolor sit</p>
<div class="d-flex">
<p class="mb-0 me-1">amet, </p><p class="mb-0">consetetur</p>
</div>
<p class="mb-0">sadipscing</p>
<p class="mb-0">elitr</p>
</div>
</div>
<div class="position-absolute end-0 top-0" style="width: 0;height: 0;border-style: solid;border-width: 0 250px 400px 0;border-color: transparent #ffa447 transparent transparent;"></div>
<div class="m-3 position-absolute end-0 top-0" style="height: 125px; width: 125px; background-color: black; color: white; background-image: url('https://png.pngtree.com/png-clipart/20190515/original/pngtree-coffee-time-png-image_3626459.jpg'); background-repeat: no-repeat; background-size: cover;">
logo
</div>
</div>
</div>
</div>
I tried different approaches with PHP or JS like html2canvas or jsPDF so far, but nothing saved the div the way it is displayed inside the browser.

The simplest method for HTML to PDF is to use the browser output e.g. Chrome
And this can be run as a headless print, here I use Windows Edge but you can of course use Edge or Chrome on other platforms. On Windows you may need to run that as Admin, it should be less than one blink, so fast I did not think it was done.
NOTE recently the switch --disable-gpu was removed from the options so may not be needed.
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --disable-gpu --run-all-compositor-stages-before-draw --print-to-pdf="C:\Users\WDAGUtilityAccount\Desktop\SandBox\division.pdf" --print-to-pdf-no-header "C:\Users\WDAGUtilityAccount\Desktop\SandBox\division.html"
However note that due to cross site security some images are missing so we need to ensure they are local and simply remove the remote part of url
Add this at the end just for a tidy approach </body></html> and use this as your heading
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=https://stackoverflow.com/questions/71998862 -->
<html><head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Lorum Ipsum</title>
<meta name="GENERATOR" content="KJs Template Builder V 2022-04">
<meta http-equiv="Content-Style-Type" content="text/css"><style>
#media print {
#page {
/* For different margins – use the standard CSS margin property: north, east, south, west, here it is one value */
margin: 0;
/* Browser default, customisable by the user if using the print dialogue. */
size: auto;
/* Different width and height. here using stated width="1000" height="500" can be px or pt or cm. For square, just use one value or use name like A6 landscape; note this is over-riding any above size: but we need to bump up for browser rounding*/
size: 1020px 520px;
}
body { margin: 0; }
}
</style></head><body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

Related

Trying to make the bootstrap navbar sticky with jQuery

I was trying to make my navbar sticky with jqueries the style of the className ".sticky" is in the css/styles.css folder
i am unable to achieve the sticky nav function... I don't know what I am doing wrong in my main.jss file
//html file ------->
<body>
<!-- HEAD SECTION WITH BG-IMAGE AND NAVBAR -->
<header class="masthead head" style="background-image: url('./images/back.jpg ');">
<!-- <div class="container-fluid p-0"> -->
<!-- NAVIGATION BAR WITH NAVBRAND AND TICKET -->
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="#"><img src="images/brand.png" alt="brand"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-regular fa-align-right"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- <div class="mx-auto"></div> -->
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- <div class="container">
<button type="button" class="btn btn-outline-dark btn-lg ticket">
<i class="fa-solid fa-ticket"></i>
<span>Tickets</span></button>
</div> -->
<div class="container ticket"><img src="images/ticket.png" alt="ticket"></div>
</div>
</nav>
<!-- </div> -->
<div class="container text-center">
<!-- BACKGROUND IMAGE WITH LOGO IMAGE AND CAPTION TEXT -->
<div class="row">
<!-- CAPTION TEXT -->
<div class="col-md-6 col-sm-12">
<span class="top">Experience</span>
<h1>The Ada Calypso</h1>
<span>'Dec 16<sup>th</sup>-17<sup>th</sup></span>
</div>
<!-- LOGO IMAGE -->
<div class="col-md-6 col-sm-12 h-25">
<img src="images/banner.png" alt="logo image">
</div>
</div>
</div>
</header>
<!-- MAIN PAGE WITH SECTIONS -->
<main>
<!-- EXPERIENCE SECTION WITH IMAGES AND CAPTION -->
<section class="experience">
<div class="container align-center">
<h2>The Experience</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="images/fireside.jpg" alt="fireside at treasure island">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/relax.jpg" alt="couples enjoying a drink">
</div>
</div>
<h2>The Culture</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bubble">
<div class="col-md-6 col-sm-12">
<img src="images/samba.jpg" alt="samba dancers">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/masqu.jpg" alt="masqueraders paroding the streets">
</div>
</div>
<h2>The Arts</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/art.jpg" alt="arts">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/creativity.jpg" alt="arts">
</div>
</div>
<h2>The River</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/ada_port.jpg" alt="yatch on ada">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/ada_beach.jpg" alt="ada beach">
</div>
</div>
</div>
</section>
<!-- THE MEDIA PARTNERSHIP SECTION -->
<section id="sponsor">
<div class="container">
<h2>Media Partners</h2>
<img class="sponsor_logo" src="images/ghone.png" alt="Gh one Tv">
<img class="sponsor_logo" src="images/4syte.png" alt="4syte tv">
<img class="sponsor_logo" src="images/gbafrica.png" alt="Gb Africa">
<img class="sponsor_logo" src="images/kobby.png" alt="kobby kyei">
<img class="sponsor_logo" src="images/sheldon.png" alt="Kwadwo sheldon">
<img class="sponsor_logo" src="images/ronnie.png" alt="Ronnie is everywhere">
<img class="sponsor_logo" src="images/sammykay.jpg" alt="sammy kay">
<img class="sponsor_logo" src="images/starr.png" alt="Starr fm">
</div>
</section>
<!-- EMBED GOOGLE MAP -->
<section id="map">
<div class="container">
<h3>Locate Us</h3>
<div class="gmap_canvas">
<iframe width="100%" height="468"
src="https://maps.google.com/maps?q=Camp%20tsatse%20resort&t=&z=15&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
<div class="container text-center">
<!-- ABOUT CONTENT -->
<div class="about-content text-right">
<h2>About RiverFest</h2>
<p class="pt-4">RiverFest22” is an annual festival curated to celebrate and propagate the
socioeconomic and cultural affairs of Ghana. It aims at creating a networking and
entertaining environment for all our revelers. Our target is the energetic individual
who wants to experience nature whiles having fun.This maiden edition will be organized
in Ada Foah at the Camp Tsatse Resort. The Resort is located on the amazing banks of the
Volta River.</p>
<p class="pt-4">#RiverFest22, which is also themed “The Ada Calypso”, is a 3-day fun-packed
event, which is scheduled to take place from Friday, 16 to Sunday, 18 December 2022. The
festival is designed to have an action-packed programme of activities with exciting
exhibitions of talents and products from vendors.</p>
<p class="pt-4">
The event promises patrons with an amazing experience of art and creativity from the
local creative and art industry and a taste of calypso in the Ghanaian environment.
There will be a street carnival with samba dancers and masquerades from the town to the
event venue. There will also be a special canoe boat race on the river to help promote
the need to protect the water bodies as well as create an ecological awareness of the
place.
</p>
<p class="pt-4">
The festival is set for both residential and non-residential participation. Residential
patrons arrive on Friday and leave on Sunday. All non-residential revelers will be
welcome on Saturday for the full day event.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER SECTION WITH CONTACTS AND COPYRIGHT -->
<footer>
<div class="container-fluid p-0">
<div class="row text-left">
<!-- FIRST COLUMN -->
<div class="col-md-5 col-md-5">
<h2 class="text-light">Presented By</h2>
<img class="footer_image" src="images/riverfest.png" alt="RiverFest logo">
<p class="pt-4 text-muted">
All rights reserved © Copyright 2022 Developed by <span>WolfeTech Devs Inc.</span> | Powered by
<span>Lono Concepts</span>
</p>
</div>
<!-- SECOND COLUMN -->
<div class="col-md-5">
<h4 class="text-light">Tickets Available On sale</h4>
<a class="ticket-image" href="#"><img src="images/ticket.png" alt="Ticket"></a>
</div>
<!-- THIRD COLUMN -->
<div class="col-md-2">
<h4 class="text-light">Follow Us</h4>
<p class="text-muted">Let's go social</p>
<div class="column">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fa-brands fa-tiktok"></i>
<i class="social-icon fa-brands fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP JAVASCRIPT PLUGIN -->
<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>
<!-- JQUERY PLUGIN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Personal JAVASCRIPT -->
<script src="js/main.js"></script>
</body>
//CSS FILE --------------->
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header,
section {
overflow-x: hidden;
}
:root {
--Slackey: 'Slackey', cursive;
--Rock-Salt: 'Rock Salt', cursive;
--light-black: #2e2c2caf;
--bggradient: linear-gradient(to bottom, #FEB101, #FE7435);
--light-gray: rgba(255, 255, 255, 0.877);
}
header {
opacity: rgba(0, 0, 0, 0.2);
}
/* NAVBAR STYLES */
header .navbar a {
font-family: var(--Slackey);
font-size: 0.9em;
color: black;
}
.masthead {
background-size: cover;
min-height: 100vh;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
header .nav-item:last-child {
padding-right: 5.5em;
}
header .nav-item {
padding: 1.5em;
}
header .navbar-brand {
padding-left: 3rem;
}
header .navbar .navbar-brand img {
width: 40%;
}
.ticket img{
width: 30%;
}
.ticket i {
padding-right: 0.1rem;
}
header .nav-link:hover {
color: whitesmoke;
}
header .nav-link {
transition: all 0.3s ease-in-out;
}
.ticket span {
font-family: var(--Slackey);
}
header .row .col-md-5 {
padding: 4.2vmin 1vmin;
}
header .row .col-md-6 {
padding: 22vmin 1vmin;
padding-bottom: 35vmin;
font-family: var(--Rock-Salt);
}
header .row .col-md-5 img {
width: 90%;
}
header .container .col-md-6 span {
padding: 1vmin;
letter-spacing: 4px;
font-size: 3.5vmin;
}
header .container .col-md-6 h1 {
font-size: 8vmin;
font-weight: bold;
padding: 0.1em 0em;
}
/*/*//*/*//* MAINPAGE SECTIONS *//*/*//*/*/
/* EXPERIENCE SECTION */
.experience{
background: linear-gradient(to bottom
white, #FE7435
);
}
.experience .container {
padding: 3% 0%;
}
.experience .col-md-6 img {
opacity: 0.8;
width: 100%;
border-radius: 0.2em;
border: 1px solid #000000;
}
.experience .container h2 {
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 3.5em 0em .5em;
}
/* MEDIA PARTNERS */
#sponsor h2 {
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
.sponsor_logo {
width: 9%;
margin: 30px 20px 50px;
}
#sponsor .container {
padding: 7% 0%;
}
/* ABOUT SECTION */
.about{
padding: 8vmin 0;
}
.about .container .about-content{
background: white;
border-radius: 3px;
text-align: left;
padding: 13vmin 5vmin 20vmin 10vmin;
box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.about .container .about-content h2{
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 1.5em 0em 1.2em;
text-align: center;
}
.about.about-content p{
font-size: 0.9em;
color: rgba(0, 0, 0, 0.5);
}
/* MAP */
.gmap_canvas {
overflow: hidden;
background: none !important;
}
#map .container h3{
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
/* FOOTER */
footer{
background: rgba(0, 0, 0, 0.815);
overflow-x: hidden;
padding: 14vmin 18vmin;
}
footer h2, h4{
font-family: var(--Slackey);
padding: 20px;
font-weight: bold;
font-size: 1.5rem;
}
footer .column i{
color: #dd2476
}
footer .column i+i{
padding: 0 0.5em;
}
footer p>span a{
text-decoration: none;
}
footer p>span a{
color: #FE7435;
}
/* STICKY CLASS */
.sticky{
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.815);
z-index: 9999;
transition: all 1.5s ease;
}
//MAIN.JS FILE --------------------------->
let navigationbar = $(".navbar");
$(window).scroll(function () {
let topOfSect = $(".experience").offset().top - window.innerHeight;
if ($(window).scrollTop() > topOfSect) {
navigationbar.addClass("sticky")
}
else {
navigationbar.removeClass("sticky")
}
});
Maybe you can try with position: sticky;

how to add background image in behind slider?

I made a slider which when clicked will change the background. At the beginning of opening the page the background is white. How do I add a background image at the beginning of the page?
I want the first page to have a background image. If one of the features is clicked the background image will change:
after clicking the icon, the image that should have been replaced is not replaced, because I want the first time I open this page there is a background image and after clicking the icon the background image is replaced.
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden {
display: none;
}
.sg-feature img {
width: 100px;
height: 100px;
}
/* html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body{
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 625px;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.center .slick-center h3 {
-moz-transform: scale(1.08);
-ms-transform: scale(1.08);
-o-transform: scale(1.08);
-webkit-transform: scale(1.08);
color: #e67e22;
opacity: 1;
transform: scale(1.08);
}
.center h3 {
opacity: 0.8;
transition: all 300ms ease;
}
.hidden{
display : none;
}
.hidden1{
display : none;
}
.hidden2{
display : none;
}
.hidden3{
display : none;
}
.hidden4{
display : none;
}
.hidden5{
display : none;
}
.hidden6{
display : none;
}
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/tes.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick-theme.css">
<title>Title</title>
</head>
<body>
<div>
<img src="image/b1.jpg" style="z-index: -1;">
<section class="background center slider variable-width variable-height ">
<div class="text-center sg-feature" data-bg="image/b1.jpg">
<img class="rounded mx-auto d-block" src="image/eat.png" />
<h3>Eat and Come</h3>
<br />
<div class="sg-feature-desc hidden">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b2.jpg">
<img class="rounded mx-auto d-block" src="image/grab.png" />
<h3>Grab</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b3.jpg">
<img class="rounded mx-auto d-block" src="image/experience.png" />
<h3>Experience</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b4.jpg">
<img class="rounded mx-auto d-block" src="image/Secret sale.png" />
<h3>Secret Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b5.jpg">
<img class="rounded mx-auto d-block" src="image/sale.png" />
<h3>Hashtag Sale</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b6.jpg">
<img class="rounded mx-auto d-block" src="image/loyalty.png" />
<h3>Loyalty</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="text-center sg-feature" data-bg="image/b7.jpg">
<img class="rounded mx-auto d-block" src="image/auction.png" />
<h3>Auction</h3>
<br />
<div class="hidden sg-feature-desc">
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick-master/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 6,
speed: 300,
focusOnSelect: true,
variableWidth: true,
variableHeight: true,
adaptiveHeight: true,
arrows: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}]
});
let $slidesDescriptions = $('.sg-feature-desc');
$(document).on('click', '.sg-feature', function() {
$slidesDescriptions.addClass('hidden');
let $slide = $(this);
$slide.find('.sg-feature-desc').removeClass('hidden');
$('body').css('background-image', `url('${$slide.data('bg')}')`);
});
</script>
</body>
</html>
background-repeat: no-repeat; Might be the problem here, as the size of the selected image might be too small and so your replaceable background image is hiding it.

divs height and width are not fixed in carousel slider

Visit this link for code snippet https://codepen.io/arunkayathi/pen/dRPYzz
html
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<body>
css
#projects {
background-color: #f65d52;
/* background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
js
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
Hello all,
I am having a problem with arranging divs in a carousel slider. As you can see from the above link the position of project title in each slid is changing.So can somebody help me in fixing the width and height of each divs, so that text and images will not overflow and in every slide all divs starts at same position instead of going up or down.
Your images need a fixed height otherwise things will get pushed down or up.
if you can't set a fixed height on the images then I suggest just a fixed position of the project title and description div. Maybe make it absolute of its parent.
Just simply use a fixed height for images:
.project-image img {
width: 100%;
max-width: 480px;
height: 480px;
margin: 0 auto;
}
Try this, set fixed height to your images.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true
});
});
#projects {
background-color: #f65d52;
/*background-color: #2098D1;*/
}
#projects .content-title h3 {
color: #fff;
}
.project-info {
padding: 25px 0 25px 0;
color: #fff;
}
.project-info h5 {
font-size: 25px;
font-weight: 700;
}
.project-image img {
max-width: 480px !important;
max-height: 480px !important;
margin: 0 auto;
object-fit: contain;
height: 340px;
}
.project-info-text {
line-height: 170%;
letter-spacing: 1px;
color: #fff !important;
font-weight: 500;
width: 70%;
margin: 0 auto;
}
.project-btn {
padding-top: 30px;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>
<body>
<section id="projects">
<div class="content-box">
<div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
<h3>My Projects</h3>
<div class="content-title-underline"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="my-projects" class="owl-carousel owl-theme">
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis, </p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
</div>
</div>
</div>
<div class="project-list">
<div class="project-image">
<img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
</div>
<div class="project-info text-center">
<h5>Project Title</h5>
<p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
<div class="project-btn">
<a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
Add responsiveClass for set all slide responsive.
$(document).ready(function () {
$("#my-projects").owlCarousel({
items: 1,
autoplay: true,
smartSpeed: 700,
loop: true,
autoplayHoverPause: true,
responsiveClass:true
});
});

Css Hover Selector should select complete row

I want that the complete row is selected and not just an element in that row. Also the selection should not care about paddings and margins and just take the full width and the size of the biggest element for all elements.
JSFiddle: https://jsfiddle.net/t3uz2r52/1/
HTML:
<div class="container">
<div class="row">
<div class="col-xs-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Disc_Plain_red.svg/460px-Disc_Plain_red.svg.png" class="img-responsive status">
</div>
<div class="col-xs-4 myimg">
<img src="https://i.ytimg.com/vi/KlULoQj3nao/maxresdefault.jpg" class="img-responsive">
</div>
<div class="col-xs-6 description">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat,
</p>
</div>
</div>
</div>
Css:
.row :hover {
background-color: green;
}
Just change your CSS to
.row:hover {
background-color: green;
}
Thereby you can assign :hover selector to entire row. Read more about Pseudo-class selectors.
Here is you updated your jsfiddle.
It is because you have a space before :hover that it applies to child elements instead of the .row element.
.row:hover { // There should be no space before :hover
background-color: green;
}

jquery fade toggle div over another div when click?

This is my test page and I want when the page is loaded everything is hidden. When I click on "About" text is fade in using fadeToggle(); but when I click on "My work" another text is fade in but under the previous one. I want fade it over the previous one. Can u help me?
My code:
<script>
$(document).ready(function(){
$(".thumbnail").hide();
$(".work").click(function(){
$(".thumbnail").fadeToggle('slow');
});
});
$(document).ready(function(){
$(".person").hide();
$(".about").click(function(){
$(".person").fadeToggle('slow');
});
});
</script>
Try this.
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").hide();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
$(".thumbnail").hide();
$(".person").fadeToggle('slow');
});
});
Updated based on Matthew's comment
Demo here
This is a common problem:
multiple items to display but one of them showing at a time
simple solution is:
hide all elements
show what you want to see
in this way, you cover all possible solutions, even display nothing, where you skip second phase
in your case:
function hideAll(){
$(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}
$(document).ready(function(){
$(".work").click(function(){
hideAll();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
hideAll();
$(".person").fadeToggle('slow');
});
hideAll();
});
This is something very easy to complete, its best to use the same click event names with the divs you want to open so it can be modular.
There are some slight amendments to your HTML as well as a big change in the JS but it will work with as many sections as you like now without having to continuously add new click() functions.
$(document).ready(function() {
$('section').hide();
$(".btn").click(function() {
$('section').fadeOut('1000');
$('section#'+$(this).attr('id')).delay('1000').fadeIn();
});
});
/* CSS Document
html {
background: url(green.jpg) no-repeat center center fixed;
background-size: cover;
}
*/
body {
font-family: 'Candara', 'Open Sans', 'sans-serif';
}
/* css for the shiny buttons */
.btn {
cursor: pointer;
margin: 10px;
text-decoration: none;
padding: 10px;
font-size: 14px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
}
.btn:hover {
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.contact {
color: #000;
}
.contact:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.about {
color: #000;
}
.about:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.work {
color: #000;
}
.work:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
}
.buttons {
padding-top: 30px;
text-align: center;
position: absolute;
top: 50px;
left: 100px;
}
.title,
.subtitle {
font-family: 'Wire one';
font-weight: normal;
font-size: 5em;
margin-bottom: 15px;
text-align: center;
}
.subtitle {
line-height: .9em;
font-size: 5.5em;
margin-top: 0;
margin-bottom: 40px;
}
.tagline {
font-size: 1.4em;
line-height: 1.3em;
font-weight: normal;
text-align: center;
}
.thumbnail {
background-color: rgba(255, 255, 255, .2);
border: 0 none;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.thumbnail .caption {
color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="btn" id="about">About</a>
<a class="btn" id="work">My Work</a>
<a class="btn" id="contact">Contact</a>
</div>
<!-- Main (Home) section -->
<section class="section" id="about">
<div class="container">
<div class="person" style="display: block;">
<div class="row">
<div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">
<!-- Site Title, your name, HELLO msg, etc. -->
<h1 class="title">Welcome!</h1>
<h2 class="subtitle">My name is Daniel Adamek</h2>
<!-- Short introductory (optional) -->
<h3 class="tagline">
I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br>
Currently, I am looking for any kind of job in IT field.<br>
Please, check out my work and feel free to contact me :)
</h3>
<!-- Nice place to describe your site in a sentence or two -->
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
</section>
<!-- Third (Works) section -->
<section class="section" id="work">
<div class="container">
<div class="thumbnail" style="display: block;">
<h2 class="text-center title">More Themes</h2>
<p class="lead text-center">
Huge thank you to all people who publish
<br>their photos at Unsplash, thank you guys!
</p>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
</div>
</div>
</section>
If you do want to keep your HTML the exact same, try this out
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").fadeOut('500');
$(".thumbnail").delay('500').fadeIn('slow');
});
$(".about").click(function(){
$(".thumbnail").fadeOut('500');
$(".person").delay('500').fadeIn('slow');
});
});
function hideAll()
{
$(".hideable").hide();
}
$(document).ready(function(){
hideAll(); // great idea. First hide all then show the correct one.
$(".button").click(function(){
hideAll();
if ($(this).hasClass("work"))
{
$(".thumbnail").fadeToggle('slow');
}
else if ($(this).hasClass("about"))
{
$(".person").fadeToggle('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail hideable">thumbnail</div>
<div class="person hideable">person</div>
<button class="work button">Work</button>
<button class="about button">About</button>
This example should you give you a start. It attaches a click event to the buttons using the .button class selector. Then it checks if the button has another class and performs the appropiate action.
Your question is not reliant upon jQuery - it is reliant upon CSS and styling those two texts on top of each other. Then you can fade in/out.
What I would suggest trying is wrapping both text inside one div and working with position properties.
ie
HTML
<div class="wrapper">
<div class="thubmnail">Some Thumbnail</div>
<div class="person">Some Person</div>
</div>
CSS
.wrapper {
position: relative;
}
.wrapper div {
position: absolute; //This will position both divs one on top of the other
}

Categories