I'm currently working on an image slider for my company's new homepage and just can't figure out the error that seems to lie in the javascript part ..
The slider contains 4 images and should, as soon as the last image is reached, begin at the first image again. The problem is that the images are displayed in that order "1-2-1-2-3-4-1-2-3-4..."
Here the code:
$('.slide').first().addClass('active');
$('.slide').hide();
$('.active').show();
$('#next').on('click', nextSlide);
$('#prev').on('click', prevSlide);
// Auto slider
if (options.autoswitch === true) {
setInterval(nextSlide, options.autoswitch_speed);
}
function nextSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':last-child')) {
$('.slide').first().addClass('active');
} else {
$('.prevActive').next().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
function prevSlide() {
$('.active').removeClass('active').addClass('prevActive');
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
} else {
$('.prevActive').prev().addClass('active');
}
$('.prevActive').removeClass('prevActive');
$('.slide').fadeOut(options.speed);
$('.active').fadeIn(options.speed);
}
});
and the corresponding CSS:
#slider-container {
height: 600px;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
position: relative;
width: 800px;
}
#sldier {
height: 100%;
width: 100%;
}
#slider .slide img {
height: 100%;
width: auto;
}
#prev, #next {
cursor: pointer;
max-width: 30px;
opacity: 1;
position: absolute;
top: 8%;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
z-index: 999;
}
#prev { left: 12px; }
#next { right: 3px; }
#slider-container:hover #prev, #slider-container:hover #next { opacity: .7; }
.slide {
position: absolute;
width: 100%;
}
.slide-copy {
background: #777;
background: rgba(0, 0, 0, .5);
bottom: 0;
color: #fff;
left: 0;
padding: 20px;
position: absolute;
}
#media (min-width: 600px) {
#prev, #next {
top: 45%;
}
}
and the HTML
<div id="slider-container">
<img src="img/arrowprev" id="prev" alt="prev">
<ul id="slider">
<li class="slide">
<div class="slide-copy">
<h2>Placeholder</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
<li class="slide">
<div class="slide-copy">
<h2>Placeholder4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
<img src="img/placeholder" alt="placeholder">
</li>
</ul>
<img src="img/arrownext" id="next" alt="next">
</div>
Maybe it has something to do with
if ($('.prevActive').is(':first-child')) {
$('.slide').last().addClass('active');
I just can't figure out the problem and would appreciate any help.
Thank you in advance :)
This is the page I took as source:
https://www.jqueryscript.net/slider/Tiny-jQuery-Image-Slider-Slideshow-With-Caption-Support.html
I found the fail, the unique thing it wasn't working, is the apply of visibility on each prevActive and active elements on each next/prev actions, so I've added this lines to both functions:
$('.prevActive').hide();
$('.active').show();
(Also I've commented the lines referencing to options variable, as is not defined in the description).
You can see the fiddle working here:
https://jsfiddle.net/a4bssrf5/8/
Related
I coded this:
$("#scroll-to-left-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x - 10);
});
$("#scroll-to-right-button").on("mousedown", function() {
var x = $("#scroll-area").scrollLeft();
$("#scroll-area").scrollLeft(x + 10);
});
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button id="scroll-to-left-button">Scroll to left</button>
<button id="scroll-to-right-button">Scroll to right</button>
You need to click the buttons pretty often to navigate through this container. Is there a way to let it based on the duration of the mouse press? Like if you keep the mouse pressed, it continues constantly scrolling? And if you stop, it stops.
Would be happy if someone could help me.
Here's a working solution. Also your code was a bit wet, so I refactored it a bit. You only need one mousedown event listener.
let interval;
$('.scroll-btn').on('mousedown', ({ target }) => {
const type = $(target).attr('id');
interval = setInterval(() => {
var x = $('#scroll-area').scrollLeft();
$('#scroll-area').scrollLeft(type === 'left' ? x - 10 : x + 10);
}, 50);
});
$('.scroll-btn').on('mouseout mouseup', () => clearInterval(interval));
#container {
width: 50%;
height: 100px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.
</div>
</div>
</div>
<button id="left" class="scroll-btn">Scroll Left</button>
<button id="right" class="scroll-btn">Scroll Right</button>
Well, the mousedown and mouseup make a good pair, although you have used only mousedown :)
Here's a sample how it could be done.
Note that there're couple other things that could be done to this code for it to look nicer:
.on(... is not probably needed, you could just write it as .mousedown(...
the code for the right and left buttons look really similar, you could unite these blocks in one and distinguish by an additional attrubute (let's say like move="10" for the right button and move="-10" for the left one, and then just getting this value in order to add it to scrollLeft)
var tmr;
$(".scroll-button").mousedown(function() {
//let's setup the timer here...
move = +$(this).attr("move");
tmr = setInterval(function(){
$("#scroll-area")[0].scrollLeft+=move;
}, 250)
});
$(".scroll-button").mouseup(function() {
// and destroy the timer here
clearInterval(tmr);
});
#container {
width: 50%;
height: 300px;
background-color: grey;
position: relative;
}
#scroll-area {
white-space: nowrap;
overflow-x: auto;
height: 100%;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="container">
<div id="scroll-area">
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</div>
<button class="scroll-button" move="-10">Scroll to left</button>
<button class="scroll-button" move="10">Scroll to right</button>
So, I have 3 flexbox containers of the same dimension. When I click on one of them, it should stretch to become bigger then the others, and then back to normal if I click on it again.
I've made it using JS, and it works.
The problem is that when I already have one the boxes stretched and I try to stretch another one, the transition duration increases. And I can't figure out why. I thought the different transitions would start simultaneously.
This is the code:
/* HTML */
<div class="flexbox">
<div class="box-1" onclick="box1();">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box-2" onclick="box2();">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box-3" onclick="box3();">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
</div>
/* CSS */
.flexbox {
display: flex;
width: auto;
justify-content: center;
}
.flexbox div {
border: 1px #ccc solid;
border-radius: 10px;
width: 250px;
height: 250px;
padding: 10px;
margin: 2px 10px;
transition: flex-grow 1s linear 0s;
}
.box-1{
flex-grow: 0;
}
.box-2 {
flex-grow: 0;
}
.box-3 {
flex-grow: 0;
}
/* JS */
function box1(){
const box1 = document.getElementsByClassName('box-1')[0];
if(box1.style.flexGrow != '4'){
box1.style.flexGrow = '4';
} else {
box1.style.flexGrow = '0';
}
const box2 = document.getElementsByClassName('box-2')[0];
box2.style.flexGrow = '0';
const box3 = document.getElementsByClassName('box-3')[0];
box3.style.flexGrow = '0';
}
function box2(){
const box2 = document.getElementsByClassName('box-2')[0];
if(box2.style.flexGrow != '4'){
box2.style.flexGrow = '4';
} else {
box2.style.flexGrow = '0';
}
const box1 = document.getElementsByClassName('box-1')[0];
box1.style.flexGrow = '0';
const box3 = document.getElementsByClassName('box-3')[0];
box3.style.flexGrow = '0';
}
function box3(){
const box3 = document.getElementsByClassName('box-3')[0];
if(box3.style.flexGrow != '4'){
box3.style.flexGrow = '4';
} else {
box3.style.flexGrow = '0';
}
const box1 = document.getElementsByClassName('box-1')[0];
box1.style.flexGrow = '0';
const box2 = document.getElementsByClassName('box-2')[0];
box2.style.flexGrow = '0';
}
How can I have the transition duration to be always the same (1s in this example)?
There are a number of improvements that can be made to your code that will reduce duplication, avoid complications of interacting with the live HTMLCollection that getElementsByClassName returns, allow you to avoid using inline onclick assignments, and will cause the transition to only take 1 second.
The example below implements a single grow() function which is called by listeners attached to each box. The listeners are added by iterating over the NodeList returned by querying the DOM with .querySelectorAll('.box') and calling addEventListener() on each element.
In the CSS we declare classes for each state we want our boxes to be able to have - in this case flex-grow: 0 and flex-grow:4. Then in our grow() function we simply add or remove these styles as necessary based on which box was clicked.
function grow(e){
// if the clicked box already has class 'flexgrow4' return
if (e.currentTarget.classList.contains('flexgrow4')) return;
// otherwise find the element in the flexbox container that has
// class 'flexgrow4' and replace it with 'flexgrow0'
const lastActive = flexbox.querySelector('.flexgrow4');
if (lastActive) lastActive.classList.replace('flexgrow4', 'flexgrow0');
// finally, replace 'flexgrow0' with 'flexgrow4' on the clicked box
e.currentTarget.classList.replace('flexgrow0', 'flexgrow4');
}
const flexbox = document.querySelector('.flexbox');
const boxes = document.querySelectorAll('.box')
boxes.forEach(box => box.addEventListener("click", grow, false));
.flexbox {
display: flex;
width: 100vw;
justify-content: center;
}
.flexbox div {
border: 1px #ccc solid;
border-radius: 10px;
width: 100px;
height: 250px;
padding: 10px;
margin: 2px 10px;
transition: all 1s linear 0s;
}
.flexgrow0 {
flex-grow: 1;
}
.flexgrow4 {
flex-grow: 4;
background-color:tomato;
}
<div class="flexbox">
<div class="box flexgrow0">
<h3>Box 1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box flexgrow0">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
<div class="box flexgrow0">
<h3>Box 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
</div>
</div>
I have an unordered list of over 10 list items which I need to add mouse events to. The onMouseover and onMouseout works just with the first list item but does not work with all the other list item. I need the mouse events to work on all the lists
const showSlideElement = (myID) => {
document.querySelector(myID).style.display = 'block';
document.querySelector('.services-box').style.height = '110px';
}
const hideElement = (myID) => {
document.querySelector(myID).style.display = 'none';
document.querySelector('.services-box').style.height = '26px';
}
.slideList {
width: 100%;
}
.slideList li {
position: relative;
}
.slideList .service-highlight {
background-color: #0088ff;
position: absolute;
color: white;
bottom: 0;
left: 0;
right: 0;
}
.slideList .service-highlight p {
display: inline-block;
color: white;
font-size: 18px;
font-weight: bold;
}
.slideList .service-highlight .services-box {
text-align: center;
background-color: #003768;
width: 270px;
font-weight: bold;
float: left;
}
.slideList .service-highlight .services-detail {
width: calc(100% - 270px);
float: left;
padding-left: 5px;
}
.slideList .hide-description {
display: none;
font-weight: normal;
}
.slideList .hide-description p {
font-weight: normal;
padding-top: 10px 5px 10px;
}
<ul class="slideList">
<li data-transition="fade">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="" width="1920" height="630">
<div class="service-highlight" onMouseover='showSlideElement(`.hide-description`)' onMouseout='hideElement(`.hide-description`)'>
<p class="services-box">SOME SERVICES:</p>
<div class="services-detail">
<p>The service headline</p>
<div class="hide-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
</li>
<li data-transition="fade">
<img src="https://cdn.pixabay.com/photo/2018/01/12/10/19/fantasy-3077928_960_720.jpg" alt="" width="1920" height="630">
<div class="service-highlight" onMouseover='showSlideElement(`.hide-description`)' onMouseout='hideElement(`.hide-description`)'>
<p class="services-box">SOME SERVICES:</p>
<div class="services-detail">
<p>The service headline</p>
<div class="hide-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
</li>
</ul>
This can all be achieved using simple CSS:
.hide-description {
display: none;
}
.services-box {
height: 26px;
background: #0bf;
transition: 0.4s;
}
.service-highlight:hover .hide-description {
display: block;
}
.service-highlight:hover .services-box {
height: 110px;
}
<div class="service-highlight">
<p class="services-box">SOME SERVICES:</p>
<div class="services-detail">
<p>The service headline</p>
<div class="hide-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
</div>
I am applying for a job and need a resume. Because I really hate working with Word and it drives me nuts using it for such a purpose I just did it with HTML and CSS, thinking it would be fairly easy to export it to pdf later.
But well, it turned out to be harder than expected. I have tried using jsPDF and pretty much every method decribed in posts on stackoverflow regarding this subject, but it somehow was always distorted or did not work at all.
Either there was no css included or there was only a part of my resume in the pdf.
I have attached the files and need the .page to be exported as pdf, the format should be A4 already.
Is there a way to achieve what I need using JavaScript/jQuery ?
In the worst case scenario it would also be possible for me to use php, but that would make things way more complicated for me.
I know it probably would be easiest to just do it in Word or something like that regarding time consumption. But just from personal interest how would I have to do it ?
Thank you guys very much in advance
*{
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
body {
background:#aaa;
}
.dash {
content: '';
width: 100%;
height: 1px;
background: #676767;
display: block;
clear:both;
}
.page {
width: 1000px;
height: 1414.2135px;
background: white;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.page .overlay #left_rect {
width: 200%;
height: 500px;
background: #676767;
position: absolute;
z-index: 1;
transform: rotate(-45deg);
left: -100%;
top: -50px;
}
.page .overlay #right_rect {
width: 200%;
height: 500px;
background: #26556d;
position: absolute;
transform: rotate(16.18deg);
z-index: 2;
left: -100px;
top: -249px;
}
.page .left,
.page .right {
float: left;
}
.page .left {
width: calc(38.1966% - 50px);
height: 100%;
background: #eee;
padding: 565px 25px 0;
}
.page .left img {
width: 250px;
position: absolute;
left: 60px;
top: 190px;
z-index: 2;
}
.page .left .section {
margin-bottom: 25px;
}
.page .left .section.contact {
position: absolute;
left: 25px;
bottom: 0;
}
.page .right {
width: calc( 61.8034% - 50px);
height: 100%;
margin-top: 200px;
padding: 25px;
}
.page .right .top h1 {
color: #255571;
font-size: 35px;
float:left;
}
.page .right .top h2 {
color: #666;
font-size: 20px;
float: left;
margin-top: 15px;
margin-left: 10px;
font-weight: 400;
}
.page .right .top:after {
content:'';
display: block;
clear: both;
height: 25px;
}
.page .right .section:after {
content:'';
display: block;
clear: both;
height: 25px;
}
.page .section h1 {
color: #26556d;
font-size: 25px;
text-transform: uppercase;
}
.page .right .section .sub {
padding: 5px 0 10px;
}
.page .right .section .sub.half {
width: 50%;
float: left;
}
.page .right .section .sub h2 {
color: #676767;
font-size: 18px;
}
.page .right .section .sub h3 {
color: #676767;
font-size: 18px;
font-weight: 400;
margin-bottom: 5px;
}
.page .right .section .sub h4,
.page .left .section p {
color: #777;
font-size: 17px;
font-weight: 400;
}
.page .right .section .sub ul {
margin-left: 30px;
color: #777;
font-size: 17px;
font-weight: 400;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
</head>
<body>
<section class="page">
<div class="overlay">
<div id="left_rect"></div>
<div id="right_rect"></div>
</div>
<div class="left">
<img src="https://cdn.pixabay.com/photo/2015/12/22/04/00/photo-1103597_1280.png">
<div class="section about">
<h1>About Me</h1>
<p>
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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="section contact">
<h1>Contact</h1>
<p>
John Doe<br>
Some Street 123<br>
1234 City<br><br>
<b>T:</b> 01234 5678910<br>
<b>M:</b> john.doe#mail.com
</p>
</div>
</div>
<div class="right">
<div class="top">
<h1>John Doe</h1>
<h2>01.01.1990</h2>
</div>
<div class="section">
<h1>Lorem Ipsum</h1>
<div class="sub half">
<h2>School (2,0)</h2>
<h3>Sep 2000 - Aug 2015</h3>
<h4>Some School</h4>
</div>
<div class="sub half">
<h2>B.Sc. Business</h2>
<h3>Sep 2016 - Mar 2019</h3>
<h4>Some University</h4>
</div>
</div>
<div class="section">
<h1>Lorem Ipsum</h1>
<div class="sub">
<h2>Softwaredeveloper at some company</h2>
<h3>Aug 2015 - Mar 2016</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
</ul>
</div>
<span class="dash"></span>
<div class="sub">
<h2>Softwaredeveloper at some company</h2>
<h3>Apr 2016 - Feb 2017</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
</ul>
</div>
<span class="dash"></span>
<div class="sub">
<h2>Softwaredeveloper at some company</h2>
<h3>Mar 2017 - Mar 2018</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</li>
</ul>
</div>
</div>
<div class="section">
<h1>Lorem Ipsum</h1>
<div class="sub half">
<h2>IT-Knowledge</h2>
<ul>
<li>PHP, Java, JavaScript</li>
<li>HTML, CSS, jQuery, MySQL</li>
<li>Operating Systems: Windows, MacOS</li>
</ul>
</div>
<div class="sub half">
<h2>Languages</h2>
<ul>
<li>German</li>
<li>English</li>
<li>French</li>
<li>Spanish</li>
</ul>
</div>
<span class="dash"></span>
<div class="sub">
<h2>Interests</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr:</li>
<ul>
<li>Sed diam nonumy eirmod tempor invidunt</li>
<li>Sed diam nonumy eirmod tempor invidunt</li>
<li>Sed diam nonumy eirmod tempor invidunt</li>
</ul>
<li>
Sed diam nonumy eirmod tempor invidunt
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
Everything is working as expected.
For redability, html to pdf ignores background images and defaults the text color to system color (which is usually black). Why? Because in most cases it does more good than harm. Web graphics can use a wide array of graphic techniques and not all are compatible with print (in the sense it might come out looking bad, being hard to read and it might also be heavier on ink cartridges). Most people printing a web page are interested in the text and its readability, not in the fancy graphics.
So, when trying to Print (Ctrl + P) your CV directly from the SO snippet you placed in your question, by default, Chrome ignored background graphics. After I opened advanced settings and checked "Background graphics" it looked as you want it to:
I have no idea how to enable background graphics in whatever library you're trying to use, but I can assure you most (if not all) have a setting for it that's turned off by default.
All you need to do is find the setting in your library's docs and turn it on.
As I understand you are looking a pdf file with CSS. we can do it using xeponlineformatter
please refer below link.
http://www.cloudformatter.com/CSS2Pdf
here you can see a download button, under this button you can save page as pdf.
it will saving your page with appropriate css.
hope this will work for you.
I don't know how to do this with JavaScript/jQuery, but you could try using a software like doPDF which installs you a virtual printer driver, then you print as you would do exactly to a regular printer, just the result will be a PDF file.
If you go for the PHP way, i recommend you Dompdf
I have 3 identical divs and I want to add a class to one of those divs every 5 seconds one a rotating carousel type thing.
The following JSFiddle is what I have atm and I want the :hover styles to to be added to one of those divs every 5 seconds in a rotating sequence but still work as an on hover; JSFiddle
.action {
padding: 10px 50px 10px 10px;
background-color: #eaeaea;
color: #525454;
}
.action:hover {
background-color: #b5b5b5;
color: #000;
}
.action h3 {
margin: 0 0 10px 0;
}
.action .corner {
position: absolute;
width: 0;
height: 0;
border-bottom: 50px solid #db7575;
border-left: 50px solid transparent;
bottom: 0;
right: 0;
}
.action:hover .corner {
border-bottom: 50px solid #CC0000;
}
.action i {
position: absolute;
margin-left: -20px;
margin-top: 27px;
color: #fff;
}
<div class="row">
<a href="#">
<div class="col-md-4 action">
<h3> Title 1 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="col-md-4 action">
<h3> Title 2 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
<a href="#">
<div class="col-md-4 action">
<h3> Title 3 </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> <span class="corner "><i class="fa fa-arrow-right"></i></span>
</div>
</a>
</div>
Something like this ?
http://jsfiddle.net/15od56d3/
CSS
.action:hover,.my_turn { background-color: #b5b5b5; color: #000;}
Javascript
var myTurn = 0;
setInterval(function(){
var i = 0;
$(".action").each(function(){
if(i==myTurn)
$(this).addClass("my_turn");
else
$(this).removeClass("my_turn");
i++;
});
myTurn = (myTurn + 1)%3 ;
},5000);
What I don't get in the accepted answer is that the carousel doesn't pause when the mouse hovers over an item. This is very confusing, especially since the same style is applied. I would create a jQuery object of the rows and use the available jQuery functions to walk over/select them and apply the a class for the hover instead of using the css property.
See the JSFiddle for a demo
var $rows = $('.action');
var $start= $rows.first(); // select one to start with (can be any of the elements in the set)
var $current = $start;
var interval;
var hover = function() {
$current.removeClass('hover');
$current = $rows.eq($rows.index($current)+1);
if (!$current.length) {
$current = $rows.eq($rows.index($start));
}
$current.addClass('hover');
};
The carousel should keep the expected direction and move on from where the hover-style was last applied; from the hovered element (as this is the most natural behavior imho):
$('.action').mouseover(function() {
window.clearInterval(interval);
$current.removeClass('hover');
$current = $(this).addClass('hover');
}).mouseout(function() {
interval = window.setInterval(hover, 2000);
});
$start.addClass('hover').mouseout(); // apply the class immediately to the first row