My image slider has white spaces - javascript

Plz see the following link,
http://www.beta.storeji.in/
when the image slides the next image wont slide appear until the sliding is done and white space is showed instead of image. How to fix this?
this is my slider javascript code
function slide()
{
if($('.current').is(':last-child')){
$('.current').removeClass('current');
$('#imgholder img:first-child').addClass('current');
$('#imgholder').animate({left: '0px'});
}
else{
$('.current').removeClass(function(){
$(this).next().addClass('current');
return 'current';
});
$('#imgholder').animate({left: '-=980'},{duration: 'slow', easing: 'easeOutBounce' });
}
}
var loop_handle= setInterval("slide()",'5000');

You have an error on your picslider.css sheet, the width and height are not properly set;
#imgholder{
position: absolute;
width: 5880;
height: 490;
z-index: 0;
}
Fix that and it should work fine.
Fixed.
#imgholder{
position: absolute;
width: 5880px;
height: 490px;
z-index: 0;
}

Related

Check a div postion when -100% left

im trying to check a div position so when it comes to -100% left it returns to right 100%.
Im sutck in the part of checkin its position. Im using the console.log to check if it works, ive tried console.log(back1X.left) to.
$(document).ready(function(){
setInterval(function() {
var back1X = $('.back1').position();
},100);
$('.back1').animate({'left':'-100%'},50500);
console.log(back1X);
});
You can use jQuery .animate()'s complete callback to call a function when the animation ends:
$(document).ready(function() {
(function loop() {
$('.back1').css('left', '100%').animate({
'left': '-100%'
}, 2000, "linear", loop);
})();
});
.back1 {
position: absolute;
top: 0;
left: 100%;
padding: 1em;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="back1"></div>

Sliding div out with css and jquery without triggering scrollbar?

I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}

Flying balloon with a parabolic animation

I've made a simple animation of a balloon moving from left to right side of the screen, but I want to make it as a parabolic movement instead of linear animation. Also I want to hide it from left site instead of starting on left:0;
Here's my actual code
$(document).ready(function() {
function loop() {
$('#promo').css({
left: 0
});
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
loop();
});
#promo {
position: absolute;
z-index: 500;
left: 0px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="promo">
<img border="0" alt="promo balloon" src="http://www.placehold.it/50" />
</div>
Adjust the left property of the balloon to -50px, so it's not visible at the start of the animation.
Also, to stop the scrollbars appearing, give the container of the balloon overflow: hidden. You could then use jQuery/JavaScript to adjust the width of the container to fit the browser's viewport on document ready, and window resize.
CSS
.balloon-container {
position: relative;
height: 200px; // Set a height of your container here, or use jQuery/JavaScript
}
.balloon {
position: absolute;
left: -50px;
}
jQuery
$(document).ready(function() {
function sizeContainer() {
$('.container').css('width', window.innerWidth);
}
function loop() {
$('.balloon').css('left', '-50px');
$('#promo').animate({
left: '+=100%',
}, 10000, 'linear', function() {
loop();
});
}
// Run initial functions.
sizeContainer();
loop();
$(window).resize(function() {
// Re-run functions on window resize.
sizeContainer();
});
});

Styles apply just to first two slides

I 'm trying to do kind of slideshow on the background using two img tags. I have a couple of random images, so I have a javascript function to get a random name. But the main problem is: when I zoom or resize window first two slides crop well and display without any problem, but after that every slide is changing if I try to resize the window or zoom in-out.
Here you can see that bug: cullycross.github.io(nevermind about big images, im gonna resize them)
Here is my code:
function randomBackground () {
var active = $('#background .active');
var next = ($('#background .active').next().length > 0) ? $('#background .active').next() : $('#background img:first');
next.attr('src', getRandomName());
var imgHeight = next.height();
var windowHeight = $(window).height();
var diff = imgHeight - windowHeight;
if(diff > 0) {
next.css('top', -diff*0.6);
}
next.css('z-index', 2);
active.fadeOut(1500, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
}
window.onload = function() {
$('#background .active').attr('src', getRandomName());
$('#background').fadeIn(1500);
setInterval(randomBackground, 5000)
}
Here is css:
#background {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
#background img {
position: absolute;
z-index: 1;
float: left;
bottom: 0px;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
#background img.active {
z-index: 3;
}
Here is part of html:
<div id="background">
<img id="current-image" class="active" />
<img id="next-image" />
</div>
It seem to affect only the images loaded after first run.
Try adding images directly into html, using a
<ul><li><img ...></li></ul>
structure, and get the image from there.
You should decrease the fadeout delay. The problem is caused from the browser since the delay is big it can't handle both fadeout and zoom in/out
active.fadeOut(300, function() {
active.css('z-index', 1).show().removeClass('active');
next.css('z-index', 3).addClass('active');
})
And try to use light size pictures, with the same aspect ratio
I didn't found an answer, but I found a library, that makes possible that thing, that I want. Thx to https://github.com/srobbin/jquery-backstretch

How do you make Javascript add the width of one element to another's height?

This is my first website. I'm having fun with it, but there are some things I can't seem to figure out.
I have an image, and I have four smaller images that look like portions of the main image. I have set it up so that the smaller images fade in as the main image fades out, and they fly off to the side of the screen. To position the small images correctly, I set their position to that of the main image, and I'm trying to get the bottom two images to have half the main images width added to their height. For some reason, my javascript/jQuery isn't working though. I've messed around with the code, and found when I take out the variable "width" the code works, so I think it must be a problem with the way I declared or called the variable.
Here's some of my code:
HTML:
<img class="fmsmall smallbutton" src="Images/FacilityMaintenance 2.png" />
<img class="lightsmall smallbutton" src="Images/Lighting.png" />
<img class="pssmall smallbutton" src="Images/PowerSweeping.png" />
<img class="landsmall smallbutton" src="Images/Landscaping.png" />
CSS:
#logoBig {
position: fixed;
left: 50%;
margin-left: -20%;
width: 40%;
top: 15%;
}
.pssmall {
position: fixed;
left: 50%;
margin-left: -20%;
width: 20%;
top: 15%;
z-index: 100;
}
.landsmall {
position: fixed;
left: 50%;
width: 20%;
top: 15%;
z-index: 100;
}
javascript/jQuery:
function categoryClick( beforeClickButton,
afterClickButton,
subcategoryMenu,
subcategoryHeader,
leftClickBefore,
topClickBefore,
leftClickAfter,
topClickAfter,
low
){
$(beforeClickButton).click(function()
{
$(afterClickButton).fadeIn("fast");
/*Here's the code that isn't working*/
var width = $("#logobig").width();
if(low = true){
$(afterClickButton).animate( {
top: "+=" + (width / 2) + "px"
});
}
$(".categoryButton").hide();
$("#logoBig").fadeOut("slow");
$("#selectCategory").delay(250).fadeOut("slow");
$(afterClickButton).delay(250).animate({
left: leftClickBefore,
top: topClickBefore
}, "slow");
$(subcategoryHeader).delay(250).fadeIn("slow")
$(subcategoryMenu).delay(1000).fadeIn("slow");
$("#accordion").fadeIn("slow");
$(afterClickButton).delay(500).one("click", function(){
$(this).animate({
left: leftClickAfter,
top: topClickAfter
}, "slow");
$(subcategoryHeader).delay(250).fadeOut("slow");
$(".categoryButton").show();
$("#logoBig").delay(600).fadeIn("slow");
$("#selectCategory").delay(500).fadeIn("slow");
$(afterClickButton).delay(250).fadeOut("fast");
$(subcategoryMenu).fadeOut("slow");
});
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$(subcategoryMenu).accordion({ collapsible: true,
header: ".menuItem",
heightStyle: "content",
active: false,
icons: icons
});
});
}
categoryClick( ".facilityMaintenance",
".fmsmall",
".fmMenu",
".fmHeader",
"-=30%",
"-=25%",
"+=30%",
"+=25%",
false
);
categoryClick( ".lighting",
".lightsmall",
".lightMenu",
".lightHeader",
"-=50%",
"-=20%",
"+=50%",
"+=20%",
false
);
categoryClick( ".powerSweeping",
".pssmall",
".psMenu",
".psHeader",
"-=32%",
"-=55%",
"+=32%",
"+=55%",
true
);
categoryClick( ".landscaping",
".landsmall",
".landMenu",
".landHeader",
"-=50%",
"-=55%",
"+=50%",
"+=55%",
true
);
The actual site is on my company's server, so I just put a copy on a free server to post here. Here's a link. The error messages don't show up on the actual site.
http://www.pcsinternal.net76.net/newcontractportal/go.html
Regarding the error messages, I have set a link to a password protect PHP script on line one, but it isn't linking properly. How might I fix that?
Thank you for all your help.

Categories