I'm new to development so please go easy on me. Everything I code is from scratch and my own.
I've began creating a body background image slider for one single page of my eCommerce platform and I'm a bit stuck on where to go next with it.
Please see here:
https://zoeyplayground-com.zoeysite.com/lookbook
Currently it is able to fade the body background when clicking the next and previous buttons, but I can't work out a way that this can be converted to handle more than one image per button. I will need the slider to be able to cycle through multiple body background images.
Please see the code below:
HTML
<!-- Remove header from lookbook page and add background1 -->
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/lookbook')
{
jQuery("body").addClass("background1");
jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
}
});
</script>
<!-- Toggle background2 when 'next' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".next").click(function() {
jQuery("body").removeClass("background1");
jQuery("body").addClass("background2");
});
});
</script>
<!-- Toggle background1 when 'back' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".back").click(function() {
jQuery("body").removeClass("background2");
jQuery("body").addClass("background1");
});
});
</script>
<!-- Container and images -->
<div id="toggle" width="100%">
<img src="/media/import/back.png" class="back">
<img src="/media/import/next.png" class="next">
</div>
CSS
/* Min-height due to hard-coded height issue */
.root-body {
min-height: 0 !important;
}
/* Transition for background image changes */
body {
transition: all 0.5s ease-out !important;
}
/* Hide footer on all pages */
.root-footer {
display: none;
}
/* Removeheader class for the lookbook page */
.removeheader {
display: none;
}
/* Body background options */
.background1 {
background: url('/media/import/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background2 {
background: url('/media/import/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
/* Toggle Buttons */
#toggle .next {
float: right;
}
#toggle img {
margin-top: 400px;
display: inline;
}
#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}
Any advice or guidance on what I should do next is greatly appreciated. Thank you for your time.
try this:
jQuery(document).ready(function() {
var current = 1; // current background index
var max_backgrounds = 2; // number of backgrounds it will work with any number
jQuery(".next").click(function() {
jQuery("body").removeClass("background" + current);
// next background index or first one if it's the last one
current++;
if (current > max_backgrounds) {
current = 1;
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
jQuery(".back").click(function() {
jQuery("body").removeClass("background" + current);
// previous background index or last one if current is the first one
current--;
if (current < 1) {
current = max_backgrounds
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
});
Related
I am trying to make a header for a website where the header changes to different colors at different positions on the page.
Trying to get blue color background for header if the page is scrolled down with less than 40 pixels. And then red color background for header if the page is scrolled down between 40 pixels and 100 pixels. And then when the page is moved completely up, the header background is a yellow color.
Edit 1:
In short, Trying to make a sticky header change colors at different positions of the scroll on a page.
Edit 2:
Tried a new way of putting conditions. Updated the below code with latest working sticky header.
My problem is, when the header goes to the top position, it doesn't change back to orange color
So far I have got this code.
JS Fiddle
jQuery(document).ready(function($){
var mywindow = $(window);
var transoffset = $('#stickyheaders').offset().top;
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
}
else
{
if(mywindow.scrollTop() < 155) {
$('#stickyheaders').addClass('headertranspup');
} else {
//$('#stickyheaders').removeClass('headerup');
$('#stickyheaders').addClass('headerstyleup');
}
}
}
mypos = mywindow.scrollTop();
});
});
body { margin: 0; }
section {
height: 2000px;
padding-top: 100px; }
#stickyheaders{
background: orange;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
position: fixed;
top:0; left:0;
width: 100%;
background: orange !important;
//transform: translateY(-110px);
//adjust this value to the height of your header
}
.headerstyleup{
background-color: blue !important;
}
.headertranspup{
background-color: red !important;
}
.headertranpup{
background-color: yellow !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<section>
<div id="stickyheaders">This div will stick to the top</div>
</section>
The easiest solution for a problem like this is by assigning background-colour to the header directly in the element property using jquery rather than adding a new class with the same css property like background-colour in this case.
jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
//$('#stickyheaders').addClass('headertranpup');
$('#stickyheaders').css("background-color","orange");
}
else
{
if(mywindow.scrollTop() < 75) {
$('#stickyheaders').removeClass('headerup');
$('#stickyheaders').css("background-color","transparent");
}
else
{
$('#stickyheaders').css("background-color","blue");
}
}
}
mypos = mywindow.scrollTop();
});
});
body { margin: 0; }
section {
height: 2000px;
padding-top: 100px; }
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
position: fixed;
top:0; left:0;
width: 100%;
adjust this value to the heigt of your header*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
<div id="stickyheaders">This div will stick to the top</div>
</section>
I am trying to achieve below image type of slider using Superslides and Bxslider.
Slider Explanation:
Black boxes are points/stops.
Blue box is car.
Whenever car crosses the half way stop,I need to change the red slider to next one.
User can use mouse scroll or arrow keys to move car forward or backward & on mobile using swipe forward or backward.
What I have done using Superslides and Bxslider
Using callback functions of bxslider to animate the car, but stuck.
Help: I need ideas how to achieve such result.What kind of slider I can use to acheieve something like this.
Reference link but with jQuery
(function($) {
var elem = $.jInvertScroll(['.scroll'], // an array containing the selector(s) for the elements you want to animate
{
height: 6000, // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
onScroll: function(percent) { //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
console.log(percent);
}
});
$(window).resize(function() {
if ($(window).width() <= 768) {
elem.destroy();
}
else {
elem.reinitialize();
}
});
}(jQuery));
html,
body
{
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
overflow-x: hidden;
background: url('../images/bg.jpg') repeat top left;
}
h1
{
font-size: 20px;
font-weight: normal;
color: #2e6e80;
}
/**
* important: keep position fixed, you can however use top:0 instead of bottom:0
* if you want to make it stick to the top of the browser
*/
.scroll
{
position: fixed;
bottom: 0;
left: 0;
}
/**
* z-index ordering of the different layers, do this for your layers,
* also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
*/
.horizon
{
z-index: 1;
width: 3000px;
}
.middle
{
z-index: 500;
width: 4000px;
}
.front
{
z-index: 1000;
width: 6000px;
}
<h1>jInvertScroll Example</h1>
<div class="horizon scroll">
<img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/horizon.png" alt="" />
</div>
<div class="middle scroll">
<img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/middle.png" alt="" />
</div>
<div class="front scroll">
<img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/front.png" alt="" />
</div>
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.min.js"></script>
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
I am trying to add background color to the overall image slider located at http://192.241.239.235 so that it looks like
.
I have tried adding the style attribute
background-color: rgba(0,0,0,0.6);
overflow: auto;
to the
<div id='content'>
but the background color just does not show.
You already have an overlay on your slides that you can change here: .tp-banner ul li:after. And I see that you need to give it a higher ´z-index´ to make it appear above the video in the slideshow.
/* The fullscreen video */
.tp-caption.fullscreenvideo {
z-index: 0;
}
/* The covering black */
.tp-banner ul li:after {
background: rgba(0,0,0,.6);
z-index: 1;
}
/* All slideshow content */
.tp-caption {
z-index: 2;
}
I am trying to have text appear over each image as the user hovers over that specific image. I don't want all of the text for every image to appear when a user hovers over one image. I have it where only the one photo becomes opaque but right now the text shows up for every image when hovering over any image.
HTML:
<div class="image">
<img class="projectImage" src="images/peralta.png" alt="">
<h3 class="hiddenH3">This is a test!</h3>
</div>
SCSS:
.image {
position: relative;
width: 100%;
.projectImage {
width: 100%;
transition: all 0.5s ease-in;
}
.hiddenH3 {
display: none;
position: absolute;
top: 45%;
width: 100%;
}
}
JS:
$('.projectImage').on("mouseover", function() {
$(this).closest('.projectImage').addClass("coolEffect");
$('.hiddenH3').fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).closest('.projectImage').removeClass("coolEffect");
$('.hiddenH3').fadeOut(1000);
});
Use .next along with this
$('.projectImage').on("mouseover", function() {
$(this).addClass("coolEffect");
$(this).next(".hiddenH3").fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).removeClass("coolEffect");
$(this).next(".hiddenH3").fadeOut(1000);
});
You can also remove .closest(".projectImage") as this refers to that image.
Why don't you do this with CSS? Since the selectors needed are very old and entrenched, you can do something like this:
.projectImage + h3 {
transition: opacity 1000ms;
opacity: 0;
}
.projectImage:hover + h3 {
opacity: 1;
}
This will fade in your h3 when you hover over the project image, as long as you structure it in that way (i.e., ing, then h3). You can also remove the classes cooLEffect and hiddenh3 as we have defined that by only targeting the h3 that comes after a project image.
The fancy transition effect will only work on modern browser, but older browsers gracefully degrade.
Edit: SASS / LESS
.image {
.projectImage {
& + h3 {
transition: opacity 1000ms;
opacity: 0;
}
&:hover + h3 {
opacity: 1;
}
}
}
The source code is here: JSfiddle
$(document).ready(function () {
$("#slide-link").click(function ()
{
$("#slider").hide("slide", { direction:"down" }, 1000);
});
});
The problem is:
How to make "Click here" link to fall down with that green block and stayed on the very bottom (green block disappeares, "click here" link stays on the bottom)?
Once "Click here" pressed the second time (on the very bottom), everything goes up (the second click on the link eliminates the first click). As result, there are no changes on the page after two clicks.
First of all; your problem start when height value became to decrease, you should change your css structure. Second you need to use an external class to understand that object is active or not.
Here is jsFiddle example.
jQuery:
$("#slide-link").click(function (){
if (!$(this).hasClass('active')) {//if clicked object has not got class active
$("#slider").stop().animate({'bottom':'-401px'}, 1000);
$(this).addClass('active');
}else{
$("#slider").stop().animate({'bottom':'0px'}, 1000);//added stop to prevent
$(this).removeClass('active'); //create an animate conflict
}
});
css:
#global-container {
background-image : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
height : 400px;
overflow:hidden;
}
Edit:
If you want to slide down click text too, inspect this jsFiddle example.
Try the following code.
jQuery:
$("#slide-link").click(function () {
if($("#slider").is(":visible")){
$("#slider").hide("slide", { direction:"down" }, 1000);
$("#slide-link").animate({top: '380px'}, 1050)
} else if($("#slider").is(":hidden")) {
$("#slider").show("slide", { direction:"down" }, 1000);
$("#slide-link").animate({top: '0px'}, 950)
}
});
Modification in CSS:
#global-container
{
background-image : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
height: 400px; /* Added Height */
overflow: hidden; /* Added Overflow Property */
}
#slider
{
margin : 20px 0 0 0; /* Added Top Margin */
width : 100px;
height : 400px;
background : green;
position : relative;
}
/* Added New Style */
#slide-link
{
position: absolute;
top:0;
left:0;
z-index:9999;
height: 20px;
}
SEE DEMO