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>
Related
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 trying to create sticky div on the left (using Bootstrap 4 beta v2) without CSS that will follow the user on scroll. I've got it mostly working, but when I scroll, the sticky div jumps out of its parent element div (a ). I'm not sure if it's an HTML issue or my JavaScript is messed up somewhere.
The last div on the left begins contained within the parent col-sm-3 as per the first pic. However, upon scroll, when it "catches" you can see that it breaks out of the col-sm-3 and is underneath the main content divs (which is a col-sm-9).
My HTML:
<div class="container mt-3">
<div class="row">
<div class="col-sm-3 d-none d-md-block">
<div class="card mt-3">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card mt-3" id="catcher">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card mt-3" id="sticky">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
My JavaScript:
<!--sticky on scroll javascript-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewTop));
}
var catcher = $('#catcher');
var sticky = $('#sticky');
$(window).scroll(function () {
if (isScrolledTo(sticky)) {
sticky.css('position', 'fixed');
sticky.css('top', '0px');
}
var stopHeight = catcher.offset().top + catcher.height();
if (stopHeight > sticky.offset().top) {
sticky.css('position', 'absolute');
sticky.css('top', stopHeight);
}
});
});
</script>
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
I'm trying to dynamically replace the src of some pictures using a the replace functon in javascript. I am not sure how I should write the regex though.
I'd like to replace the terms:1200|990|768|590|petit by something else.
Here's my code:
<div class="row">
<div class='col20 cs50'>
<div class="row">
<div class="col100">
<div class="contenu">
<p class='square'>Design and styled with Ulkit.</p>
</div>
</div>
<div class="col100">
<div class="contenu">
<img class='pictures' src=''>
</div>
</div>
</div>
</div>
<div class='col40 cs50'>
<div class="bg-contenu cssmall">5</div>
</div>
<div class='col40 cs100'>
<div class="row">
<div class='col50 cs50 '>
<div class="contenu">
<p class='square'>Flexible, nested grid layout.</p>
</div>
</div>
<div class='col50 cs50'>
<div class="contenu">
<img class='pictures'src=''>
</div>
</div>
<div class='col100'>
<div class="contenu">
<img class='pictures'src=''>
</div>
</div>
</div>
</div>
</div>
Here's the js`var pics=document.getElementsByClassName('pictures');
function replaceimg(picsize){
for(i=0;pics.length>i;i++){
pics[i].src.replace(/1200|990|768|590|petit/,'img/'+picsize+'/cube'+picsize+'.jpg');
}
}
function resizeimg() {
if (window.innerWidth > 1200) {
replaceimg(1200);
} else if (window.innerWidth < 1200 && window.innerWidth > 990) {
replaceimg(990)
} else if (window.innerWidth < 990 && window.innerWidth > 768) {
} else if (window.innerWidth < 768 && window.innerWidth > 590) {
} else if (window.innerWidth < 590) {
}
};
resizeimg();`
If you're used to math, x = x + 1 does not make a lot of sense. As said in the comments, you need to assign the return value of the .replace function to your original string to overwrite it.
It takes the original string, and puts the modified string into a new object/string, that's how pretty much any programming language would do it as far as I know.
In your case this would best be visualised by Original = Original.modifyingFunction() or
Modified = Original.modifyingFunction()
Original = Modified
I am using this code
//Resize Div
$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.site-intro').css({'height': vph + 'px'});
}
It works great and makes the first div 100% of the window and set the height inline. Is there a way to add to this code so it would make other divs set to the same height?
I am placing one div on top of the other and want them all to be the same height (that same height being what ever 100% is).
Sorry,
The HTML
<div class="wrapper">
<div class="site-intro parallax" data-velocity="-.3">
<div class="row-fluid header">
<div class="col-lg-6 col-sm-6 col-6 logo">
<img src="img/logo.png" alt="" />
</div>
<div class="col-lg-6 col-sm-6 col-6 follow text-right">
<img src="img/follow-fb.png" alt="Follow Us On Facebook" />
<img src="img/follow-tw.png" alt="Follow Us On Twitter" />
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">Website Success</h1>
<h2 class="text-center">Is Dependent On Effort and Imagination</h2>
<p class="text-center"><a class="text-center can-do" href="#">See What We Can Do For You</a>
</div>
</div>
</div>
</div>
I want to have more divs underneath the (.site-intro) not side by side. Then have links inside each div that will anchor to the next div.
It's hard to say without seeing your DOM, but generally you can just use a multiple elements selector separated by commas.
Let's say you want to resize 3 elements:
div with class site-intro.
div with ID user-data.
section element.
The code will look like that:
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.site-intro, #user-data, section').height(vph);
}