Background Image Carousel - javascript

I'm trying to create a simple website that only consists of background images inside a carousel that will move from left to right, with directional arrows. I have found one resources that provides a simple example however when I tried to reproduce their model, the script doesn't seem to define itself. Also, there is the second issue with actually making it full-screen since the demo is only 700x500.
Here is a link to the resource: Dynamic Drive.
Also, here is my HTML
<!DOCTYPE html>
<head>
<title>Hit Heavy</title>
<link rel="shortcut icon" href="favicon.ico" type="image/ico" />
<style type="text/css">
div.bgcarousel { /* CSS for main carousel container */
background: black center center no-repeat;
width: 100%;
}
img.navbutton { /* CSS for the nav buttons */
margin: 5px;
opacity: 0.7;
}
div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bgcarousel.js" script type="text/javascript"></script>
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['bg.jpg'], //["image_path", "optional description"]
['bg.jpg'],
['bg.jpg'],
['bg.jpg'] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.png', 'right.png'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
</head>
<body>
<div id="mybgcarousel" class="bgcarousel"></div>
</body>
</html>
As for the javascript that backs the scripting within the html, you can view it here

The problem is in the following line you have set the width to 100%
div.bgcarousel{ /* CSS for main carousel container */
background: black ;
width:700px; /* default dimensions of carousel */
height:500px;
}

#user2122160 Height is Important change the css like this
div.bgcarousel { /* CSS for main carousel container */
background: black center center no-repeat;
width: 100%;
height:100%;
}
i created Slider based Your Code its Working Well without Error Link below:
http://www.fileconvoy.com/dfl.php?id=g7d74fb2c3b904c6a99923428881a8f81443981afd

I think you need to add a $(document).ready() handler around that code, I think it's running BEFORE jquery and bgcarousel gets loaded, change the script to
<script type="text/javascript">
$(document).ready(function(){
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['bg.jpg'], //["image_path", "optional description"]
['bg.jpg'],
['bg.jpg'],
['bg.jpg'] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.png', 'right.png'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
})
</script>
the $(document).ready part makes your code wait for the document to be loaded before executing your script

Related

Play animation when content get into view

I've been searching on many posts but almost all of them are confusing.
I'm working with animate.css into a which is at the middle of my page.
For default the animation is played when the page is loaded, but i want that it play when i reach the (when i'm scrolling).
Please, don't say about JS Reveal, i'd like to use the animation from animate.css
What i was trying:
HTML
<!-- Others div above -->
<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->
JS
function Animar() {
setTimeout(function(){
document.getElementById("sf-medida").style.visibility = "visible";
$("#titulo-general").addClass("animated fadeInLeft");
$(".sub-titulo").addClass("animated bounceInRight");
$(".titulo-izquierda").addClass("animated swing");
$(".texto-1").addClass("animated fadeIn");
$(".texto-2").addClass("animated fadeIn");
},1000)
}
But it doesn't work, however, i've tried adding
window.addEventListener("scroll", Animar);
But what it does is that the animation is played whenever i scroll on the page,
This can be very easily done using little jquery. All you need to do is listen to the scroll event, then check if user have scrolled to the target element. If the user did, then add animation class from your animate.css. Adjust your if condition according to your desires. Check the below code and fiddle https://jsfiddle.net/15z6x5ko/ for reference
$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
if( v1 > v2 ){
console.log('in');
$('.box').addClass('animated flip')
}
});
});
So as per your request, let me try to explain the code line by line
$(document).ready(function(){
This is easy to understand. It just waits for browser to load all HTML & CSS first and when everything is loaded, the javascript code inside this function will run.
$(document).scroll(function(evt){
This is an event handler, our callback function will run whenever user scrolls on document. Remember change $(document) according whatever the parent is of your target element. So if your target div is inside another div whose class is .parent then use $('.parent').scroll . As for my code I am listening the event on document. When my document scrolls, my event will trigger.
var v1 = $(this).scrollTop();
This code will get the amount of scrolling user had done in pixels.
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
This is a simple math that checks the position of my target div from its parent element subtracting the half of the size of window from it. This will return the pixel positing of your target div. So when user reaches this pixel positing while scrolling, your animation will start.
$('.box').addClass('animated flip')
Now this code simply adds the animation css classes into the target div as soon as user scrolls to the target div.
I'm using "WoW.js" for my scroll reveal library. It's pretty easy to use, like for real. One line of code
<div class="wow fadeIn">content</div>
Here, take a look: http://mynameismatthieu.com/WOW/docs.html
Here's an example using Jquery.
In it we use .scrollTop and .height to measure the videos container from the top of the page so that we know when it comes into view when scrolling. (it's actually set to load when it reaches 100px below the bottom of the viewable area, a sort of preload. you can adjust it to whatever you like.)
The video load is done by copying the url from data-src= into src= when the video container is at the desired spot on the page. (in this case, 100px below the viewable area)
fiddle
note, the video won't load on stack so be sure to view the fiddle
https://jsfiddle.net/Hastig/xszu6b1p/
I scraped it together from these two answers..
Youtube Autoplay
Ladyload Images
$(window).scroll(function() {
$.each($('iframe'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
body {
margin: 0;
}
.filler {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
/* css tricks - responsive iframe video */
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
display: flex;
justify-content: center;
background-color: red;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
<iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>

Change adjust the height in bxSlider

I'm trying to change the bxslider height adjustment for percentage rather than pixel, but I'm a bit lost about it.
I found in the code line that makes this adjustment:
slider.viewport.css('height', getViewportHeight());
and here, set the viewport height
slider.viewport.height(getViewportHeight());
accurate results in css percentage because used responsive layout
thanks.
When I was encountering problems with bxSlider's height being cutoff at loading, I wrote a quick patch that basically removes the height property and attribute of .bx-viewport which allowed my CSS rule to override the height to whatever I wanted. That script is the last block. I commented it out because you may not need it.
I didn't know if you wanted a carousel of multiple slides or whether you wanted it to slide horizontally or vertically since the demo wasn't functioning. So I made it a 1 slide vertical carousel.
I enabled adaptiveHeight to show you it's dynamic capabilities with height, by default bxSlider just stays at the size of the tallest slide.
All of these features are options and as they are options that makes them optional...optionally.
There's 2 styles included but disabled. The first one is used if you want to use that height fix script. The second rule id to move the control arrows to the top. If you like the slider in vertical mode then you'll most likely want have your arrow controls at the top. If set at the default position in the middle, it'll jump every time there's a change in height.
Fiddle
Snippet
$(document).ready(function() {
var bx = $('.bxslider').bxSlider({
mode: 'vertical',
adaptiveHeight: true,
adaptiveHeightSpeed: 750,
slideWidth: 400,
minSlides: 1,
maxSlides: 1,
moveSlides: 1
});
});
/*
document.documentElement.addEventListener('DOMContentLoaded', function(event) {
event.stopPropagation();
var tgt = document.querySelector('.bx-viewport');
//tgt.removeProperty('height');
//tgt.removeAttribute('height');
//tgt.setAttribute('height', '100%');
}, false);
*/
img {
display: block;
margin: 0 auto
}
/*
.bx-viewport {
height:90vh !important;
}
*/
/*
.bx-controls a {
top:.05% !important;
}
*/
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe>
</div>
<div>
<img src="http://placehold.it/350x666?text=350x666.png" id="image2">
</div>
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe>
</div>
<div>
<img src="http://placehold.it/350x350?text=350x350.png" id="image4">
</div>
</div>

Text/font size in Div different in print mode in Firefox than in "normal" mode

Situation is as follows: I made a tool allowing a user to create flashcards (stored in a mysql-library). Now if you want to print the flashcards, the script generates a table in which the td's have a fixed width (in px), inside is a div containing the user-entered text for the front or backside of the flashcard. Since the amount of text can vary, the standard font-size is reduced if necessary. Looks like that:
HTML:
<table class="cardtable">
<tr>
<td class="cardtd wrap"><div class="adjustsize">
Shorter Text here in the first td
</div></td>
<td class="cardtd wrap"><div class="adjustsize">
Might be a loooooooooooooooong text here in the second td
</div></td>
</tr>
</table>
CSS:
table.cardtable {
table-layout:fixed;
border-collapse:collapse;
page-break-before:always;
}
td.cardtd {
width: 470px;
max-width: 470px;
height:300px;
max-height:300px;
font-size:11px;
padding-top:20px;
padding-bottom:20px;
padding-left:22px;
padding-right:22px;
}
td.wrap { /*if a word is too long -> break it */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
div.adjustsize {
display:block;
max-width:inherit;
max-height:inherit;
font-size:100%;
overflow:hidden;
vertical-align:middle;
text-align:center;
}
Js:
<script type='text/javascript'>
$(function() {
$('div.adjustsize').each(function() {
var fontSize = 100;
while (this.scrollHeight > $(this).height() && fontSize > 0) {
fontSize -= 0.2;
$(this).css('font-size', fontSize + '%');
}
});
});
</script>
So now my big problem is: When I let the script render the table in Firefox, the JS adjusts the size of the font correctly, meaning that if a text is too long at first, the JS reduces the font size until it fits the div. But if I want to print the page afterwards, in the print-mode of firefox the text suddenly exceeds the div, meaning that a part of it is not visible anymore (scaling 100%)!
PS: I chose the width and height of the td to fit it more or less on a A4 sheet of paper.
EDIT:
Thanks for the suggestions. I tried using the #media css styles and I checked every css value I could imagine with the window.onbeforeprint and window.onafterprint function to see if anything somehow changed but nothing. Every value including padding, margin, letter-spacing, etc. is exactly the same as before, yet when I press "print" in Firefox, the preview somewhat compresses/narrows some elements causing the text to take up more lines. Strangely, when using some plugins in Firefox that allows you to edit code in print mode that plugin displays the rendered elements correctly.
Concluding, the problem seems somehow only to occur in print preview (and the actual printing later) but I cannot find a corresponding "error" or mismatch in the code.
I read a couple of articles about dpi, is it possible that the print preview uses a different dpi from my browser because it is trying to imitate/preview a printer (which have a different dpi than screens) ?
check this link link
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
console.log('onbeforeprint equivalent');
} else {
console.log('onafterprint equivalent');
}
});
or
var beforePrint = function() {
//your code
};
var afterPrint = function() {
//your code
};
You can use a print css
<link rel="stylesheet" type="text/css" href="your file css here .css" media="print" />

change background image on click with jquery and html5

How can I do to change background image onClick with jquery or java script?
For Example: I have Six(6) images and I want change to NEXT background image when i click on ">" (next arrow) and change to previous background image when I click on "<" (back arrow).
I'm developing this website with responsive html5 and css3.
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> //jquery inside the folder ok
<script type="text/javascript">
var images = ['url("../images/1366x768/image-_0107.jpg")', 'url("../images/1366x768/image-_0012.jpg")'], curIndex = 0; // here I set the images inside the desired folder
// Left arrow selector
$('.backarrow').click(function () { //here I set the back arrow "<"
if (curIndex > 0) {
// Container selector
$('backgrounds').css('../images/1366x768/image-0061.jpg', images[--curIndex]); // here I set my file backgrounds.css and the default image configured there
}
});
// Right arrow selector
$('.nextarrow').click(function () {
if (curIndex < images.length - 1) {
// Container selector
$('backgrounds').css('../images/1366x768/image-0061.jpg', images[++curIndex]);
}
});
</script>
<!--HTML 5 -->
<div id="square">> <!-- here I call my jquery -->
</div>
<div id="square">< <!-- here I call my jquery -->
</div>
/* CSS3 */
/* backgrounds.css */
body {
background: #dcd8d5 url(../images/1366x768/image-_0061.jpg) no-repeat center center fixed; -webkit-background-size: cover;
-moz-background-size: cover; -o-background-size: cover; background-size: cover }
/* default.css */
.nextarrow {
font-size:20px; color:#666; font-style:normal
}
.backarrow {
font-size:20px; color:#666; font-style:normal
}
WHAT I'M DOING WRONG?
The jQuery approach for this is below:
$("#background").css("background-image","url(img_url_here)");
I'm not entirely sure what you are trying to select so I made a jsfiddle which will hopefully make it easier for you to figure out:
JSFiddle
The error seems to be in this line:
$('backgrounds')
What exactly are you trying to select with this? If is an object with id = "backgrounds" you should use $('#backgrounds'), if it's a class you can select it by using $('.backgrounds'). The way you are using, jQuery is trying to search for an element (i.e. tag) named "backgrounds". (Which I'm pretty sure is not what you are trying to do)
Any way, in case you want to change the background-image from, let's say, your body element you should use something like:
$(document).ready(function() {
$(".nextarrow").click(function(){
{
$('body').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path to your image
}
}
Alternatively, you can change the background-image from an element which id happens to be "backgrounds" using:
$('#backgrounds').css("background-image","url(../images/1366x768/image-0061.jpg)"); // Correct the path relative to the html document this script is running.
I hope it helped. Cheers

Custom styles for multiple instances of Fancybox

I am using Fancybox 2.0.6 to display both images and video. When rolling over the image/video (when there are multiple images in a gallery), Fancybox displays the previous and next icons and links. The clickable area takes up 40% of the left and right side of the image/video, as it should according to jquery.fancybox.css. This is great for images, however for video, it blocks the play button so that the user goes to the next/prev video rather than being able to play or pause the video. I would like to change the width of the clickable area, but only for videos - I would like it to stay the same for images. I have researched Fancybox to find that I can use wrapCSS to create custom styles for multiple instances of Fancybox, but I cannot get it to work.
Here are my js calls
<script type="text/javascript">
$(document).ready(function() {
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video'
});
});
</script>
<script>
$(document).ready(function()
{
$('.fancybox').fancybox(
{
padding : 0,
openEffect : 'elastic'
}
);
$(".fancybox").fancybox(
{
wrapCSS : 'fancybox-nav',
closeClick : true,
helpers : {
overlay : {
css : {
'background-color' : '#000'
}
},
thumbs : {
width : 50,
height : 50
}
}
}
);
}
);
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
</script>
And here is how I have images and video displayed within my HTML:
<a class="fancybox" rel="gallery1" href="image1.jpg">
<a class="fancybox" rel="gallery1" href="image2.jpg">
<a class="vimeo" rel="gallery2" href="videoplayerlink1">
<a class="vimeo" rel="gallery2" href="videoplayerlink2">
Do I need to add something or change anything within the .js file? What am I missing?
First you need to understand that when you use the wrapCSS option, a new class selector will be added to the fancybox wrap (.fancybox-wrap) so adding the option wrapCSS:'fancybox-nav-video' means that when you open fancybox you will get
<div class="fancybox-wrap fancybox-nav-video ....etc." ....
Second, you need to declare your specific fancybox buttons CSS properties for such new selector (an inline CSS declaration after you loaded the fancybox css file):
.fancybox-nav-video .fancybox-nav {
width: 60px;
}
.fancybox-nav-video .fancybox-nav span {
visibility: visible; /* arrows will be permanently visible */
}
.fancybox-nav-video .fancybox-next {
right: -60px; /* move right outside fancybox area */
}
.fancybox-nav-video .fancybox-prev {
left: -60px; /* move left outside fancybox area */
}
Notice that these new css properties will be applied only to the fancybox wrap with class fancybox-nav-video (where we used the wrapCSS option). These css will place the buttons as well as the clickable area outside the fancybox, clearing out the vimeos's play button. Because that, we made the navigation arrows permanently visible, otherwise the visitor won't know where to hover.
Third, you just need to wrap all your fancybox custom scripts within a single .ready() method like:
<script type="text/javascript">
$(document).ready(function() {
// fancybox for vimeo
$(".vimeo").fancybox({
width: 781,
height: 440,
type: 'iframe',
fitToView : false,
wrapCSS : 'fancybox-nav-video' // add a class selector to the fancybox wrap
});
// fancybox for images
$(".fancybox").fancybox({
// options for images here
});
}); // ready
</script>

Categories