Auto-scroll to section - javascript

I need to automatic, smooth scroll from section #banner, to section #about-me if in section #banner will event scroll.
I try this:
$('#banner').bind('scroll', function(event) {
$(window).scrollTo($('#about-me'), 500);
});
but it not working. (I used scrollTo plugin).
#banner have height 100vh.

The delegation that you are looking for is mousewheel. You need to use e.preventDefault(); to block the default behavior (scroll) of the browser.
Working demo:
$('#banner').bind('mousewheel DOMMouseScroll', function(e) {
if (e.originalEvent.wheelDelta < 0) {
e.preventDefault();
$(window).scrollTo('#about-me', 500);
}
});
body {
margin:0;
}
div {
width:100%;
height:100vh;
}
#banner {
background:red;
}
#about-me {
background:green;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<div id="banner"></div>
<div id="about-me"></div>
http://jsbin.com/dubaza/edit?html,css,js

Related

jQuery hover effect for ::after

I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule.
My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.
Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no luck there either. This is my script:
var play = $('a.image-wrap::after');
$(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () {
$('.image-holder').css('background-color', color);
$('.image-holder img').css({
'mix-blend-mode': 'multiply',
opacity: .6
});
if ($(window).width() > 1115) {
$('.read').css('right', '35%');
} else {
$('.read').css('right', '0');
}
},
mouseleave: function () {
$('.image-holder').css('background-color', '');
$('.image-holder img').css({
'mix-blend-mode': '',
opacity: ''
});
$('.read').css('right', '');
}
});
What if you just add the new CSS to a style and then remove it when we're done hovering? It works pretty well:
$(".example").on("mouseenter", function () {
$("#workAround").html(".example:after {background:pink}");
}).on("mouseleave", function () {
$("#workAround").html("");
});
.example {
height:10px;
width:100px;
background:green;
margin:20px 0 20px 0;
}
.example:after {
content:'';
background:red;
height:10px;
width:100%;
display: block;
position:relative;
bottom:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="workAround"></style>
<div class="example"></div>

Resize textarea with div

How to resize a divs when resizing textarea within it?
If I create two or more sticky and use ESC all sticky will be closed. How to set up the ESC to close only active pop-up?
How to keep alive sticky when page is refreshing?
I use this code to make a pop-up sticky note: http://codepen.io/anon/pen/XXNBoz
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
<script>
$(document).ready(function(){
function limitTextareaLine(e) {
if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
return false;
}
}
$(function() {
$('textarea.limited').keydown(limitTextareaLine);
});
var x = "<div class='darkYellow'><div class='close'>X</div>Note<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";
$('#click').click(function () {
$('#one').append('<div class="note">'+x+'</div>');
$( ".darkYellow" ).draggable();
$('.close').each(function(){
$('.close').click(function() {
$(this).parent().remove();
});
});
});
$('.darkYellow').live('click', function() {
$(this).addClass("index");
});
$('.darkYellow').live('blur', function() {
$(this).removeClass("index");
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
window.open(location, '_self', '');
openedWindow.close();
}
});
});
Change the fixed width and height to min-width and min-height like below.
And it should auto resize.
*{
margin:auto;
padding:0;
}
.darkYellow {
position:absolute;
background-color: #76B5F0;
min-width:200px;
min-height:150px;
font-size:12px;
text-indent:1px;
-webkit-box-shadow: 1px 1px 10px #888888;
cursor:move
}
.lightYellow {
min-width:200px;
min-height:135px;
background-color: #8EC0EE;
margin-top:1px;
}
textarea {
background-color: #8EC0EE;
border: 0px;
}
.index {
z-index: 55;
}
.close {
width:7px;
height:7px;
padding:0;
line-height:2pt;
float:right;
margin-top:6px;
margin-right:4px;
font-size:14px;
cursor:pointer;
}
also use a more up to date version of JQuery, I've updated you fiddle below.
https://jsfiddle.net/link2twenty/gLrmgqgz/10/
You can capture the resize event with the resize of jQuery
$("textarea").resizable({
resize: function() {
//resize your div
}
});
For the sticky notes: how do you define the variable openedWindow?
In CSS set the parent div's display to display: table should fix the problem and make it resize as you change the textarea's size.
EDIT: As for the escape thing (just refreshed and saw that) you could use document.activeElement or since you're using jQuery you could do $(':focus').
EDIT: take your openWindow variable and set it as openWindow = $(':focus'); and as for the 3rd item you added you would have to save the active sticky in the localstorage of the page and just update it each time you change which sticky is active. Here's some info on localstorage localstorage MDN

Jquery : Display hidden image on page scroll

I've to fadein an image that is set to display:none, This is what i'm doing that is not working for me
HTML :
<img src="img/myimg.jpg" id="img">
CSS :
#img{
display:none;
}
JS :
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('#img').fadeIn();
}
});
Try to add your code inside ready() function :
$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('#img').fadeIn();
}
});
});
#img{
display:none;
}
body{
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://assets.entrepreneur.com/content/16x9/822/20141230193127-work.jpeg" id="img"/>
jquery .fadeIn() won't override display:none; It might work if you use opacity: 0; and visibility: hidden; as your style rules.
You could also try $('#img').hide(); right when the page loads.
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
$("#img").hide();
}
else{
$("#img").show();
}
This will hide and show the image when you scroll the window down and up, very useful

How to work with scroll() JQuery

I want to do something when window scrolls to a certain position
Fiddle : https://jsfiddle.net/to1uuvnb/16/
HTML:
<div id="container"></div>
<div id="target"></div>
CSS:
#container {
min-height:300px;
max-width:400px;
background-color:#000;
}
#target {
min-height:1000px;
max-width:400px;
background-color:red;
}
JavaScript:
$('#target').scroll(function() {
if($(this).scrollTop() > 10) {
alert('');
}
});
You are attaching the scroll event to a div that has no overflow: auto; or overflow: scroll; set. And the question title does not seem to match with your code, I believe you want to attach the event to window instead:
$(window).scroll(function() {
https://jsfiddle.net/to1uuvnb/17/

A website can start in a determinate div when load?

A website can start in a determinate div when load?
I make three divs like this.
and I want to start on the second div when the website load.
How I can do it?
html,body {
height:100%;
margin:0;
}
.content {
height:100%;
min-height:100%;
}
html>body .content {
height:auto;
}
#one {
background: #ff4444;
}
#two {
background: #ff5555;
}
#three {
background: #ff6666;
}
<div class='content' id='one'></div>
<div class='content' id='two'></div>
<div class='content' id='three'></div>
You need to use #two (id of the second div) in the url.
like this
You can use smooth animation to scroll to the div using animate:
$('html,body').animate({
scrollTop: $("#two").offset().top
}, 'slow');
Demo.
EDIT
Without Animation:
document.location.href="#two";
Demo
Use this to scroll the second div into view on load:
$(function() {
$("#two")[0].scrollIntoView();
});

Categories