issue | JQuery slide forces my page to scroll to the top - javascript

This my slide HTML :
<div class="slide_container">
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide2.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide3.jpg">
</div>
<div class="one_slide">
<img alt="slide_img" class="slide_img img-responsive" src="images/slide4.jpg">
</div>
</div>
And the JQuery :
setInterval(function(){
$('.active').removeClass('active').addClass('old_active');
if($('.old_active').is(':last-child')){
$('.one_slide').first().addClass('active');
}
else{
$('.old_active').next().addClass('active');
}
$('.old_active').removeClass('old_active');
$('.one_slide').fadeOut(500);
$('.active').fadeIn(500);
},5000);
This is my JQuery slide, the problem with it is when the image change it's forcing my page to scroll to the top and i don't like this, i searched for the same issue but no result .

Try removing the 'href="#"', this is responsible for the upscrolling!

Related

in angular 5 how to make splash screen till the child component load all images?

I'm using angular 5 for displaying pages that have a lot of images with high res, and it takes too long to load.
What I want to do is to make a splash screen, a div that will cover the full screen, and after all the images finish loading it will disappear.
How and where do I implement this in angular 5?
window.onload = someFunction; // is not working well
page.component.html:
<div id="page" class="page">
<div id="splash"></div>
<div id="home-page">
<div class="container d-none d-lg-block">
<img src="assets/images/home/line_with_bird.png" alt="">
<div class="row">
<div class="col-3 ad-paper">
<img src="assets/images/home/paper.png" class="" alt="">
</div>
<div class="col-2">
<img id="arrow-word" src="assets/images/arrow_word.png" alt="">
<img id="ladder" src="assets/images/ladderLong.png" alt="">
</div>
<div class="col-6 offset-1 c2">
<div id="window"></div>
<div class="smicos">
<app-socialmedia style="width: 641px;"></app-socialmedia>
</div>
</div>
</div>
</div>
</div>
page.component.ts
ngOnInit() {
function splash() {
console.log('tttttttttttttttttttttttttttttttttttttttttt');
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
window.onload = splash;
}
Do not hide your splash screen on ngOnInit. Instead do this:
Keep count of images you are showing in controller.
totalImages = 20;
Keep a load handler on each image;
<img (load)='checkAllLoaded()'>
In checkAllLoaded function, check if all images are loaded:
checkAllLoaded() {
this.totalImages = this.totalImages - 1;
if(this.totalImages === 0) {
document.getElementById('splash').style.display = 'none';
document.getElementById('window').classList.add('window-animation');
}
}
Set a div with *ngIf on a property which will turn to true only when the image is loaded.
<div class="splash" *ngIf="!loaded"></div>
<img [src]="img" (load)='loaded=true'>
DEMO

Use JQuery to auto slide between images - with my html

I have this html code:
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide">
<img src="images/image1.jpg">
</div>
<div class="slide">
<img src="images/image2.jpg">
</div>
<div class="slide">
<img src="images/image3.jpg">
</div>
</div>
</div>
After every div with class slide there's the img as you can see above.
Using jquery, how can I get it to auto slide between images?
You can use setInterval() to cycle through the slides.
Set it so after x time move to the next slide
The snippet below isn't functioning completely properly, but it gives you a general idea
$(document).ready(function(){
window.setInterval(nextSlide, 1000);
});
function nextSlide() {
var $cur = $('.slide.active');
var $next = $cur.next();
if(!$next) $next = $('.slide-group').children()[0];
console.log($next);
$cur.removeClass('active');
$next.addClass('active');
}
.slide {
display: none;
}
.slide.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide active">
SLIDE 1
</div>
<div class="slide">
SLIDE 2
</div>
<div class="slide">
SLIDE 3
</div>
</div>
</div>
Jon Raasch's simple jquery slideshow is the absolute classic, in my opinion. I've seen it used on many sites.
http://jonraasch.com/blog/a-simple-jquery-slideshow
His example uses a fade, but you can change it to a slide or even Ken Burns it easily enough.
http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/
is just one example of tutorials for image scrollers using jquery.
Just google "jquery image scroller" then if you have further issues come back and see us :)

Dynamically adding slide images inside slider

i am trying to dynamically add images in the slider called owl slider.
The problem is that i want to clear the divs inside the
.owl-wrapper
div and then add new items on a click.
The original code is
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<img src="../img/car1.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car2.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car3.jpg" alt="The Last of us">
</div>
<div class="item">
<img src="../img/car4.jpg" alt="The Last of us">
</div>
</div>
Now i did this
$('.singleNewsItem').click(function () {
$('#owl-demo').append('<div class="item"><img src="../img/trac1.jpg"></div>');
});
});
Somehow its adding the image outside the main slider.
Please help .
thanks.
Try this:
// make sure it's initialized:
// $("#owl-demo").owlCarousel();
$('.singleNewsItem').click(function () {
// clean the container:
$('#owl-demo').text('');
var img = '<div class="item"><img src="../img/trac1.jpg"></div>';
$("#owl-demo").data('owlCarousel').addItem(img);
});
There is a demo with owl manipulation examples.
Demo with transistions.

jQuery Show 1 Image on Load and Hide Others on Mouseover

Trying to get one image to load on page load and then hide the other three images. Then on mouseover hide the other three and show the appropriate image on hover. On load it works perfectly, but on hover all of the images disappear. Below is the code.
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-one">
<div id="blocrst-1" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-two">
<div id="blocrst-2" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-three">
<div id="blocrst-3" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/single-iphone.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
<!-- PHONE IMAGE -->
<div class="col-md-4 col-sm-4 phone-four">
<div id="blocrst-4" class="phone-image wow bounceIn" data-wow-offset="120" data-wow-duration="1.5s">
<img src="/images/venue-info.png" alt="" data-animation="pulse" data-animation-delay="800" />
</div>
</div>
jQuery:
<script>
jQuery().ready(function(){
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
$(function() {
$("#btnBrowseEvents").mouseover(function() {
$("#blocrst-1").removeClass().addClass("phone-image wow fadeInRight");
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnBottleService").mouseover(function() {
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
$('.phone-one').hide();
$('.phone-three').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnConnect").mouseover(function() {
$("#blocrst-3").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-four').hide();
});
});
$(function() {
$("#btnYourDigitalHost").mouseover(function() {
$("#blocrst-4").removeClass().addClass("phone-image wow fadeInLeft");
$('.phone-one').hide();
$('.phone-two').hide();
$('.phone-three').hide();
});
});
});//end ready
</script>
You first do
$('.phone-two').hide();
$('.phone-three').hide();
$('.phone-four').hide();
but subsequently never call show on any of these elements. The
$("#blocrst-2").removeClass().addClass("phone-image wow fadeInRightBig");
affects the img elements, but the parents are still hidden. Adding a
$('.phone-one').show(); in your mouseover functions will fix your problem. Remember to change the phone-one to match the class of the div you're trying to show (you should really be using an id for these divs).
As an aside, take a look at the developer tools in chrome or firefox. It'll help you see how your javascript affects your DOM so you can track down issues more easily in the future.

fadein fadeout jquery on mouse-over

I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.
When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.
I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..
The Html :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
And Here's the jsfiddle
You need to add a hover effect on the class logo-middle.
e.g.
$(".logo-middle").hover(function mouseIsOverImage() {
/* keep the image */
}, function mouseIsOffImage() {
/* make the image what it was before */
});
By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.
I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects
$('.bg').hide();
$('.main').hover(function (){
$(this).siblings('.main').find('.bg').stop().fadeOut();
$(this).find('.bg').stop().fadeIn();
$('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
$('#logo img').attr('src',$(this).data('logo'));
$('.main .bg').stop().fadeOut();
});
You can check the updated fiddle here

Categories