I am using the below script to autoslide two divs.
Below is my code.
The HTML:
<div id="gallery">
<div id="slider" style="width: 6000px; left: -500px;">
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
</div>
<span id="prev"></span>
<span id="next"></span>
</div>
<div id="galleryTwo">
<div id="sliderTwo" style="width: 6000px; left: -500px;">
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
<div><aside class="widget widget_testimonial amr_widget" id="attitude_testimonial-3"><h3 class="widget-title">Main Title</h3>
<div class="testimonial-icon"></div>
<div class="testimonial-post">Content here.</div>
<div class="testimonial-author">
<span>Sub content</span>
</div>
</aside></div>
</div>
<span id="prevTwo"></span>
<span id="nextTwo"></span>
</div>
The CSS:
/* Scolling review starts */
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:960px;
height:178px;
}
#slider{
position:absolute;
left:0;
height:278px;
}
#slider > div {
position:relative;
float:left;
width:960px;
height:178px;
}
#slider > div img{
width:100%;
}
/* buttons */
#gallery > span{
cursor:pointer;
position:absolute;
width:50px;
height:100%;
background:rgba(255,255,255,0.5);
opacity:0.5;
}
#next{
right:0px;
}
#gallery > span:hover{
opacity:1;
}
/* Scolling review ends */
/* Scolling review Two starts */
#galleryTwo{
position:relative;
margin: 0 auto;
overflow:hidden;
width:960px;
height:218px;
}
#sliderTwo{
position:absolute;
left:0;
height:278px;
}
#sliderTwo > div {
position:relative;
float:left;
width:960px;
height:178px;
}
#sliderTwo > div img{
width:100%;
}
/* buttons */
#galleryTwo > span{
cursor:pointer;
position:absolute;
width:50px;
height:100%;
background:rgba(255,255,255,0.5);
opacity:0.5;
}
#nextTwo{
right:0px;
}
#galleryTwo > span:hover{
opacity:1;
}
/* Scolling review Two ends */
The Script:
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('#slider > div'),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0, // a counter
intv;
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
function auto(){
intv = setInterval(function(){
$('#next').click();
}, 3000);
}
auto(); // start
$('#gallery').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
////////////////////////////////////////////////////////////
var $galTwo = $('#galleryTwo'),
$sliTwo = $('#sliderTwo'),
$boxTwo = $('#sliderTwo > div'),
WTwo = $galTwo.width(), // 500
NTwo = $boxTwo.length, // 3
CTwo = 0, // a counter
intv;
$sliTwo.width(WTwo*NTwo);
$('#prevTwo, #nextTwo').click(function(){
CTwo = (this.id=='nextTwo' ? ++CTwo : --CTwo) <0 ? NTwo-1 : CTwo%NTwo;
$sliTwo.stop().animate({left: -CTwo*WTwo },800);
});
function autoTwo(){
intv = setInterval(function(){
$('#nextTwo').click();
}, 3000);
}
autoTwo(); // start
$('#galleryTwo').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
The fiddle link:
Fiddle link
The Issue:
I am creating an autosliding div by using two div ids #gallery and #galleryTwo. I need same functionality in both, so I have renamed their ids and used them at different places. It works fine, but on the fiddle (as well as on my workflow), when you hover your mouse on the autosliding div, the auto slide for the duplicated div i.e #galleryTwo stops which was sliding automatically initially. I am stuck up on this part of the code and need to make both of them auto slide even hover happens or not.
The variable intv is global, which is pointing to the interval set for the second slider. Whenever you hover either of the sliders, As you can see in the code below
$('#gallery').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
$('#galleryTwo').hover(function( e ){
return e.type=='mouseenter'?clearInterval(intv):auto();
});
You're clearing intv hence the second slider will stop. If you want to control them separately, you need to have to different variables pointing to each sliders intervals.
If you don't want to control the slider on hover, you can remove these hover listeners :)
Related
I have this script that changes the image(s) when the text reaches the top of the screen. I want it in reverse. I would like to have the image(s) change when the text becomes visible from a certain height (say 50px) from bottom. How do I go about this?
JS Fiddle: https://jsfiddle.net/ramo427e/
HTML:
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>This is sparta and what comes whatever after. This is sparta and what comes whatever after. This is sparta and what comes whatever after. </h1><h1>This is sparta and what comes whatever after. This is sparta and what comes whatever after. This is sparta and what comes whatever after. </h1>
</div>
<div class="col-md-6">
<section id="one">
<div class="content">
<h1>first heading</h1>
<p>description</p>
</div>
</section>
<section id="two">
<div class="content">
<h1>second heading</h1>
<p>description</p>
</div>
</section>
<section id="three">
<div class="content">
<h1>third heading</h1>
<p>description</p>
</div>
</section>
<section id="four">
<div class="content">
<h1>fourth heading</h1>
<p>description</p>
</div>
</section>
</div>
<div class="col-md-6">
<div class="image"></div>
</div>
</div>
<div class="row">
<div class="col-12">
<h1>This is sparta and what comes whatever after. This is sparta and what comes whatever after. This is sparta and what comes whatever after. </h1>
</div>
</div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
}
h1{
font-size: 18px;
font-weight: strong;
}
p{
font-size: 12px;
}
.main{
width:100%;
height:auto;
position: relative;
}
.image {
background-image:url('https://i.postimg.cc/FRxNp6yG/hr-ax.png');
background-size:100% 100%;
background-attachment:fixed;
transition: 1000ms;
width: 200px;
height: 200px;
position: fixed;
}
#one, #two, #three, #four {
min-height: 150px;
}
JS:
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top) {
$('.image').css('background-image', 'url(https://i.postimg.cc/FRxNp6yG/hr-ax.png)')
};
if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top) {
$('.image').css('background-image', 'url(https://i.postimg.cc/wvz9hzm7/hr-bx.png)')
};
if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top) {
$('.image').css('background-image', 'url(https://i.postimg.cc/FRxNp6yG/hr-ax.png)')
};
if ($(document).scrollTop() >= $("#four").position().top) {
$('.image').css('background-image', 'url(https://i.postimg.cc/wvz9hzm7/hr-bx.png)')
};
});
on the scroll, you can get the position of the all element. And calculate whether it is visible or not. Based on the switch case you can change image.
Sample:
window.addEventListener('scroll', function() {
var element = document.querySelector('#main-container');
var position = element.getBoundingClientRect();
// checking whether fully visible
if(position.top >= 0 && position.bottom <= window.innerHeight) {
console.log('Element is fully visible in screen');
}
// checking for partial visibility
if(position.top < window.innerHeight && position.bottom >= 0) {
console.log('Element is partially visible in screen');
}
});
More:
https://usefulangle.com/post/113/javascript-detecting-element-visible-during-scroll
Select the text with jQuery and correct the height relative to that and use that to trigger the event for Example:
if($(document).scrollTop() >= $("#one .content h1").position().top - 50){
$('.image').css('background-image', 'url(https://i.postimg.cc/FRxNp6yG/hr-ax.png)')
}
I have a div with a link inside of it. as you see in snippet when the link is clicked it appends a new div beside. it is working!
but what i want is when every time link is clicked a new seperative class should be dynamically adding to 'project-list'.
$(".click").click(function () {
$(".container").append('<div class="project-list"><div class="projects-name"> div1</div><div class="project-box">Content</div></div>');
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
if it is not clear ask me below.
var i=0;
$(".click").click(function () {
i++;
var toAppend = '<div class="project-list newClass'+i+'"><div class="projects-name"> div1 [newClass'+i+']</div><div class="project-box">Content</div></div>';
$(".container").append(toAppend);
});
.container{
width:100%
}
.project-list{
width:100px;
background:#e8e8e8;
border-radius:5px;
padding:10px 20px;
display:inline-block;
margin:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="project-list">
<div class="projects-name"> div1</div>
<div class="project-box">Content</div>
<div class="ProjectSetting">
<a class="click" href="#">click</a>
</div>
</div>
</div>
I would like to have a background blur on scroll. It works but everything inside the section gets a blur. I would like to only have the background image as a blur. Can anyone help?
My code:
<section class="block clearfix z-index background--image text--white blurme" style="background-image: url(<?php echo $image_src ?>);">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
And my javascript
$(window).scroll(function(e) {
var distanceScrolled = $(this).scrollTop();
$('.blurme').css('-webkit-filter', 'blur(' + distanceScrolled/60 + 'px)');
});
Cheers!
You can achieve it by doing below code
<section class="block clearfix z-index background--image text--white blurme" style="z-index: -1; height: 100%; width: 100%; position: absolute; background-image: url(<?php echo $image_src ?>);"></section>
<section class="block clearfix z-index background--image text--white blurmeNot" style="background-color: transparent">
<div class="block__black">
<div class="grid__container no-padding">
<div class="grid__row">
<div class="grid__col--10 grid__shift--1 grid__col--sm--1">
<div id="noblur">
<?php
$a = new GlobalArea('Banner Navigation');
$a->display($c);
?>
</div>
</div>
</div>
</div>
</div>
</section>
Please set height, width of first section according to your need.
Best of luck :)
Try to blur before or after "selector".
https://jsfiddle.net/xrnk08n4/
<div class="blurme">
<div class="no-blur">
banner
</div>
</div>
.blurme {
position: relative;
height:600px;
}
.blurme:before {
content: "";
position:absolute;
z-index: -1;
top:0;
bottom:0;
left:0;
right:0;
background: url("https://thumb7.shutterstock.com/display_pic_with_logo/2502094/402146209/stock-photo-sample-rubber-stamp-text-on-white-background-402146209.jpg");
-webkit-filter: blur(20px);
}
I'm trying to create my own modal overlay. If you don't know what that is, it is an effect where you if you activate a certain element by clicking on it an black opaque overlay will show up on your screen, and usually a message box will be in the center of the overlay. I think I have successfully done the modal overlay. However, whenever I click out of the overlay the overlay will become hidden but the message box will still be shown. I looked into my debugging tools and the css says the message box is supposedly hidden. However, I still see it on the screen.
CSS
div.overlay{ height:100%; width:100%; margin:0; padding:0; background:rgba(40, 0, 77,0.7); position:fixed;
z-index:100; top:0; left:0; display:none;}
div.rela{height:100%; width:100%; margin:0; padding:0; position:relative; z-index:101;}
div.rela span{ position:absolute; top:0; left:98%; font-weight:bold; font-size:36px; }
div.rela span a{ color:white; text-decoration:none; z-index:152;}
div#message{width:40%; height:20%; background:white; text-align:center;
border:1px solid black; font-weight:bold;display:none; z-index:102;}
div#message h5{font-size:18px;}
HTML
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
</div>
<div id="ex3"><h2>Example 3</h2><p></p><h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
Javascript
/* This is for clicking off the overlay */
(function removeOverlay(){
document.querySelector('div.overlay span a').onclick = function()
{
document.querySelector('div.overlay').style.display ="none";
console.log('I am closing')
};
document.querySelector('div.overlay').addEventListener('click', function(){
this.style.display ="none";
console.log('Im closing with overlay');
});
})();
document.querySelector('button#overlay-on').addEventListener('click',function(){
var overlay = document.querySelector('div.overlay');
overlay.style.display = "block";
var message = document.querySelector('div#message').outerHTML;
var relative = document.querySelector('div.rela');
document.getElementById('message').setAttribute('style','position:absolute; display:block; top:10%; ');
var text = document.createTextNode(document.getElementById('message').offsetWidth);
document.querySelector('div#message p').appendChild(text);
console.log(message);
relative.innerHTML = relative.innerHTML + message ;
});
You just need to put the message box inside the modal.
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
<div id="ex3">
<h2>Example 3</h2>
<p></p>
<h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
</div>
Or wrap the modal around the message box.
<div id="ex3">
<h2>Example 3</h2>
<p></p>
<h4>results:</h4>
<button id="overlay-on">Open up the overlay</button>
<div class="overlay">
<div class="rela">
<span>X</span>
</div>
<div id="message">
<h5>Title</h5>
<p>Width is:</p>
</div>
</div>
</div>
Fiddle
Can someone tell me what is wrong with this slider? When I execute it, the script works for the first two slides and then glitches.
css:
.slider {
z-index: 0;
clear: both;
position: relative;
margin: 0 0 15px 0;
height: 275px;
}
.slider .jumbo {
z-index: 0;
clear: both;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 40px 10px;
}
jquery:
$(".slider > .jumbo:gt(0)").hide();
setInterval(function() {
$('.slider > .jumbo:first')
.show("slide",1000)
.next()
.hide(0)
.end()
.appendTo('.slider');
}, 2000);
Webpage (slid show sped up for question): http://awkwardpetsiblings.x10host.com/
When you start the animation, jQuery UI is wrapping your slide in a div as part of its animation process. Your code then immediately moves your slide out of the wrapper, and jQuery UI gets confused, leaving behind a trail of wrapper divs as the interval repeats.
If instead you start the animation after you move the element, it works as intended. Live example:
$(".slider > .jumbo:gt(0)").hide();
setInterval(function() {
$('.slider > .jumbo:first')
.next()
.hide()
.end()
.appendTo(".slider")
.show("slide",500)
;
},1000);
$("#nv-cntnr-tab1").click(function(){window.open("/","_self")});
.jumbo {position:absolute; top:0;left:0;background:white;width:100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="slider">
<div class="jumbo slide1">
<div class="cover" id="sld1-cover"></div>
<div class="container" id="sld1-container">
<div class="desc" id="sld1-cntnr-desc">
<h2>For Sharing your awkward and funny pet pictures.</h2>
<h4>See what it's all about by trying our interactive tour.</h4>
</div>
<div class="nav" id="sld1-cntnr-nav">
<div class="tour btn" id="sld1-cntnr-nav-tour_btn">
Let's Get Started
</div>
</div>
</div>
</div>
<div class="jumbo slide2" style="display: none;">
<div class="cover" id="sld2-cover"></div>
<div class="container" id="sld2-container">
<div class="desc" id="sld2-cntnr-desc">
<h2>The Feed. It's what we live on.</h2>
<h4>Try it out for free. No account needed.</h4>
</div>
<div class="nav" id="sld2-cntnr-nav">
<div class="signup btn" id="sld2-cntnr-nav-signup_btn">
Visit The Feed
</div>
</div>
</div>
</div>
<div class="jumbo slide3" style="display: none;">
<div class="cover" id="sld3-cover"></div>
<div class="container" id="sld3-container">
<div class="desc" id="sld3-cntnr-desc">
<h2>Take your experience to the next level.</h2>
<h4>Personalize your profile and Feed with friends.</h4>
</div>
<div class="nav" id="sld3-cntnr-nav">
<div class="feed btn" id="sld3-cntnr-nav-feed_btn">
Create Your Account
</div>
</div>
</div>
</div>
</div>