Here is the code for my javascript carousel:
var carousel = document.getElementById("carosello");
function myMoveLeft() {
carousel.scrollTo(-50, 0);
}
function myMoveRight() {
carousel.scrollTo(+50, 0);
}
<div class="container">
<div class="arrowLeft" onclick="myMoveLeft()">
<i class="fas fa-chevron-left fa-5x"></i>
</div>
<div class="caroselloContainer">
<div id="carosello">
<div class="caroselloCard">
<img class="active first" src="..." alt="">
</div>
<div class="caroselloCard">
<img src="..." alt="">
</div>
<div class="caroselloCard">
<img class="last" src="..." alt="">
</div>
</div>
</div>
<div class="arrowRight" onclick="myMoveRight()">
<i class="fas fa-chevron-right fa-5x"></i>
</div>
</div>
This works but only on the first click. How do I make it work at all clicks?
I would like it so that every time I click, scrollTo increases by 50. Something that simulates scrolling would be even better, but the first solution would also suffice.
You can scrollPosition in a variable and then increase/decrease it.
What happens now is no matter how many times you click, your scrollPosition is set to -50 or 50, you have to keep updating that values on clicks.
Like
<script>
var carousel = document.getElementById("carosello");
var scrollPosition = 0;
function myMoveLeft() {
scrollPosition = scrollPosition - 50;
carousel.scrollTo(scrollPosition, 0);
}
function myMoveRight() {
scrollPosition = scrollPosition + 50;
carousel.scrollTo(scrollPosition, 0);
}
</script>
Related
var check = null;
function Timer() {
if (check == null) {
var count = 10;
check = setInterval(function () {
count -= 1;
document.getElementById("VR").textContent = count;
if (count <= 0) clearInterval(check);
}, 1000);
}
}
function stop() {
clearInterval(check);
check = null;
document.getElementById("VR").textContent = "0";
}
<div class="VRcircle">
<div class="text">
<h1 id="VR">VR</h1>
</div>
</div>
<div class="circle circle1" onclick="Timer()">
<div class="text">
<a href="#">
<p>Scene</p>
<span>I</span>
</a>
</div>
</div>
<div class="circle circle2" onclick="Timer()">
<div class="text">
<a href="#">
<p>Scene</p>
<span>II</span>
</a>
</div>
</div>
<div class="circle circle3" onclick="stop()">
<div class="text">
<a href="#">
<p>Scene</p>
<span>III</span>
</a>
</div>
</div>
Circle1, circle2 & circle3 should change color whenever they are clicked and timer should be displayed on VR circle.
Would it be possible to start timer when i click on element and on second click stop it while it's running?
Could i click different elements without refreshing the page and how ?
Thanks in advance
I can display Timer() function on VR circle, i also have written stop() function, both of them works.
but can't do other things. my mind went blank probably.
Hope anyone will help me.
I am using Angular 7 with plugin this and the code i have written as below:
<div class="card ps-mid">
<div class="row" *ngFor="let comment of res.cmt">
<div class="col">
<ul class="collection z-depth-1">
<li class="collection-item avatar">
<div class="row">
<div class="col l2">
<img src="images/yuna.jpg" alt="" class="circle"
*ngIf="comment.IMAGE != null">
</div>
<div class="col l10">
<span class="title">{{comment.COMMENT}}</span>
</div>
</div>
</li>
</ul>
</div>
</div>
const ps = new PerfectScrollbar('.ps-mid', { suppressScrollX: true })
document.querySelector('.ps-mid').addEventListener('ps-y-reach-end', () => {
ps.update();
});
Now using above code i am looking for on load of the page the scroll bar will scroll to bottom of the div which is not working. Need help to make this work. tried multiple resources for solving this but no use so required little help.
You try to scroll bottom on the div before initializing the plugin.
ngOnInit() {
setTimeout(() => {
// Scroll to bottom on div.
var element = document.getElementById("ps-mid");
element.scrollTop = element.scrollHeight - element.clientHeight;
const ps = new PerfectScrollbar('#ps-mid', { suppressScrollX: true })
document.querySelector('#ps-mid').addEventListener('ps-y-reach-end', () => {
ps.update();
});
}, 1);
}
And change your Html slightly.
<div class="card" id="ps-mid">
// Your Code
</div>
Try with this example https://stackblitz.com/edit/angular-aavuuh
I have worked on a solution to change the src's value depending on the screen size, but somehow even if I resize the browser, it will only show the first image (../assets/img/features/cleardent-header.png). I want it to change to (../assets/img/features/cleardent-header-small.png when the screen size is less than 991.
I was looking at using CSS, but since it's within the carousel, it's a bit complicated. Could anyone give me a suggestion?
Here's my HTML of the carousel's first slide:
<div class="item active"> <img id="first-slide" class="first-slide" alt="First slide">
<!--slogan and CTA-->
<div class="container carousel-caption main-slider">
<div class="row header-slogan fadeInDown animated">
<div class="col-xs-12">
<section class="cd-intro">
<h1 class="cd-headline letters type"><span>Do everything.</span> <span class="cd-words-wrapper ahwaiting"><b class="is-visible">Better.</b><b class="colour-cleardent">with ClearDent</b></span></h1>
</section>
</div>
</div>
<div class="row header-tagline fadeInDown animated">
<div class="col-xs-12">
<p>A complete dental practice management program that you are going to <span class="colour-cleardent-sec">love</span></p>
</div>
</div>
<div class="row header-cta fadeInUp animated">
<div class="col-xs-12">
<button class="btn-u extra-demo-btns" onClick="window.location='../demo';"><i class="fa fa-paper-plane fa-fw"></i> Book a Demo</button>
<i class="fa fa-play fa-fw"></i> Watch a Video
</div>
</div>
</div>
<!--slogan and CTA end-->
</div>
Here's my jQuery :
<script>
$(document).ready(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
</script>
Your code works on the initial load of the DOM, but it has no affect once the document loads and the user resizes the browser window, you would need to hook up a handler to window.resize event to alert when the window size changes, then do your same logic:
//Place this in your document ready
$(window).resize(function() {
if($(window).width() > 991) {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header.png");
} else {
$("#first-slide").attr("src", "../assets/img/features/cleardent-header-small.png");
}
});
How about srcset?
<img src="../assets/img/features/cleardent-header-small.png" srcset="../assets/img/features/cleardent-header.png 991w, evenLargerImage.jpg 2000w">
I'm looking for some help. I'm new to JQuery and I wrote a script for My Site:
jQuery(document).ready(function( $ ){
$(function() {
var $spcright = $(".single-product-content-right"),
$spcleft = $(".single-product-content-left"),
$spcbottom = $(".single-product-content-bottom"),
$window = $(window),
offset = $spcright.offset(),
height = $spcleft.height() - $spcright.height(),
topPadding = 45;
$window.scroll(function() {
if ($window.scrollTop() < height && $window.width() > 768) {
console.log(height);
$spcright.css('position', 'fixed').css('margin-top', '0');
$spcright.addClass('spc_right');
} else if($window.scrollTop() >= height && $window.width() > 768) {
$spcright.css('position', 'absolute').css('margin-top', height+'px');
$spcright.removeClass('spc_right');
} else if($window.width() < 768) {
$spcright.css('position', 'relative').css('margin-top', '0px');
$spcright.removeClass('spc_right');
} else {
$spcright.stop().animate({
marginTop: 0
});
}
});
});
});
The purpose is to have the description slide down with the images as you scroll until the end of the div with images (where it would stop). I can't quite seem to get the height nailed.
I tried calling $(".single-product-content-left").height(), but that only retreived a value of 200px and not the actual container height (which left me confused). I've been trying other ways, but it doesn't quite seem to work.
TL;DR: Need to retrieve height of left div (.single-product-content-left), but I am struggling to do so. Please help.
Edit: HTML for the section
<div class="single-product-content row">
<div class="single-product-content-left col-sm-6 col-xs-12">
<div class="gem-gallery gem-gallery-hover-default"> <div class="ly-gallery-item ly-gallery1" data-image-id="27245">
<div class="ly-gallery-item-image ly-gallery-item1">
<img class="27245 img1" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/1.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery2" data-image-id="27244">
<div class="ly-gallery-item-image ly-gallery-item2">
<img class="27244 img2" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/4.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery3" data-image-id="27243">
<div class="ly-gallery-item-image ly-gallery-item3">
<img class="27243 img3" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/3.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery4" data-image-id="27242">
<div class="ly-gallery-item-image ly-gallery-item4">
<img class="27242 img4" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/2.jpg" alt="" class="img-responsive">
</div>
</div>
</div> </div>
<div class="single-product-content-right col-sm-6 col-xs-12">
<h2 class="product_title" style="color: #111111;">Test Board</h2><p class="price"><span class="woocs_price_code" data-product-id="26570"></span></p>
<div class="product-content entry-content"><p>Do you want to take a board everywhere you go but don’t want to lug around some giant piece of wood? We’ve managed to eliminate all the awkward from your life with the tiny Dinghy 24. It’s compact for quick moves through the streets, letting you dodge those human pylons as they drag their heels on their way to somewhere boring. But not you, you’re always headed somewhere epic with your Dinghy 24!</p>
<p>The quality and performance are unmatched, we could get into the details, but you’ll understand better when it’s under your feet.</p>
<p>24″ Length I 6.5″ Width I 14″ Wheelbase</p>
<p>100% Canadian Maple</p>
</div>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="26570" data-product_variations="[]">
<p class="stock out-of-stock">This product is currently out of stock and unavailable.</p>
</form>
</div>
</div>
I want to trigger a JQuery event when the user scrolls across a div for the firs time.
I have tried using waypoint. It is not working. Here is the code, it gives no error.
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
}
})
HTML code:
<body>
<!-- main content -->
<div id="push"></div>
<section class="grey darken-4 valign-wrapper">
<div class="container valign">
<div class="col s12">
<h2 class="center-align white-text">Hey!</h2>
<div class="divider"></div>
<p class="center-align white-text flow-text developer"></p>
</div>
</div>
</div>
</section>
<div id="main">
<div class="container" style="padding-top:8px">
<h2 class="center black-text darken-4">Profile</h2>
<h4 class="center teal-text darken-4">
I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
</h4>
<div class="divider"></div>
<div class="row" style="padding-top:5%">
<div class="col s4">
<h4 class=" teal-text darken-4">About me</h4>
<p class="flow-text me" style="font-size:20px">
</p>
</div>
<div class="col s4">
<img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
</div>
<div class="col s4">
<h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
<span class="name "></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
<span class="age"></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
<span class="location"></span>
</p>
</div>
</div>
</div>
</div>
</body>
Here are the approaches I have used till now, but nothing worked
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Help would be great!
To use waypoints, bear in mind there needs to be enough scroll room for the top of the "main" div to hit the top of the viewport. This will vary depending on the size of the browser window the user has open. You can set a % offset from the top of the viewport to make it trigger when the element is a certain distance from the top.
If your "main" div is the last element, you can also use the special "bottom-in-view" offset to make it work once the scroll hits the bottom of the page, even if the top of "main" can't reach the top of the viewport:
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
},
offset: "bottom-in-view"
});
All of this information is available in the documentation. See http://imakewebthings.com/waypoints/api/offset-option/ for more details