Scroll to anchor when expanding details/summary? - javascript

I have a very large set of stacked divs containing id anchors and embedded videos wrapped in details and summary tags. Is it possible to simultaneously expand the details and scroll to its id in a single click? If I use the script below, I can scroll to an anchor with the a tag:
/* JS */
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function () {
window.location.hash = target;
});
});
});
/* HTML */
<div id="anchor></div>
Scroll to anchor
However, wrapping the summary or details itself in the a tag will disable this scrolling effect.
/* HTML */
<div id="anchor">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
I've tried a number of different variations, but I can't seem to get the combined effect of expand + scroll. What's the right approach for solving this issue?

Well, details tag use open attribute to expand, so you just need to add this attribute when click fired.
$('details').attr('open', true);
If you want to close it use:
$('details').attr('open', false);
In your code better use this selector:
$(target + ' details').attr('open', true);
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$(target + ' details').attr('open', true);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 400, 'swing', function() {
window.location.hash = target;
});
});
});
#divide {
height: 500px;
}
body {
padding-bottom: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<br>
Scroll to anchor
<div id="divide"></div>
<div id="anchor1">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor2">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor3">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>
<div id="anchor4">
<details><summary>Embedded Video</summary>
<div class="youtube-player" data-id="null"></div>
</details>
</div>

Related

How can I toggle text with shortcode using js or jquery?

My goal is after clicking the piece of the pie it would automatically scrolls down and activate the read more to show the description for that pie. I can't use jquery inside this shortcode because it was separated from the view. I tried adding the class="toggle-text-button"inside the chart but it didn't work
Shortcode for the pie chart
function pie_chart( $atts, $content="" ) {
$atts = shortcode_atts(array(), $atts, 'pie_chart');
$html = "";
$html .= '<div class="big-pie">';
$html .= '<div id="slice-1" class="hold"><span>First</span></div>';
$html .= '<div id="slice-2" class="hold"><span>Second</span></div>';
$html .= '</div>';
return $html;
}
Read more view
<!-- First -->
<div id="first">
<h3 class="py-3">First</h3>
<p>Shown Texts.</p>
<p class="toggle-text" id="toggle-text-1">Hidden Texts.</p>
<a class="toggle-text-button" toggle-text="1">Read More</a>
</div>
<!-- Second -->
<div id="first">
<h3 class="py-3">Second</h3>
<p>Shown Texts.</p>
<p class="toggle-text" id="toggle-text-2">Hidden Texts.</p>
<a class="toggle-text-button" toggle-text="2">Read More</a>
</div>
Script for scrolling down after clicking the pie
<script type="text/javascript">
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
},1000);
return false;
});
</script>
To read more and view more texts
<script type="text/javascript">// Add click event dynamically
jQuery(function($){
$(document).on("click", ".toggle-text-button", function() {
if ($(this).text() == "Read More") {
$(this).text("Read Less");
// Use a jquery selector using the `.attr()` of the link
$("#toggle-text-" + $(this).attr("toggle-text")).slideDown();
} else {
$(this).text("Read More");
// Use a jquery selector using the `.attr()` of the link
$("#toggle-text-" + $(this).attr("toggle-text")).slideUp();
}
});
});
</script>
If you just want the text to show (the button to trigger click) after scroll You can use .animate callback function then use .find() to find the button then .click to trigger the click
<script type="text/javascript">
$('a[href^="#"]').click(function(){
var The_Element = $($(this).attr('href'));
$('html, body').animate({
scrollTop: The_Element.offset().top
},1000 , function(){
The_Element.find('.toggle-text-button:not(".clicked")').click(); // or .trigger('click') // .toggle-text-button:not(".clicked")
});
return false;
});
</script>
Additional Notes:
Use $('a[href^="#"]') the anchor which its hrefs starts with # because $('a') will select all anchors
No need to work with attr its enough to use $(this).prev('p.toggle-text')
It'll be better to work with add/removeClass in the button click to prevent the click after animation to hide the text if its already shown
<script type="text/javascript">// Add click event dynamically
jQuery(function($){
$(document).on("click", ".toggle-text-button", function() {
if ($(this).text() == "Read More") {
$(this).addClass('clicked').text("Read Less"); //.addClass('clicked')
// Use a jquery selector using the `.attr()` of the link
$(this).prev('p.toggle-text').slideDown();
} else {
$(this).removeClass('clicked').text("Read More"); // .removeClass('clicked')
// Use a jquery selector using the `.attr()` of the link
$(this).prev('p.toggle-text').slideUp();
}
});
});
</script>
$(function(){
$('a[href^="#"]').click(function(){
var The_Element = $($(this).attr('href'));
$('html, body').animate({
scrollTop: The_Element.offset().top
},1000 , function(){
The_Element.find('.toggle-text-button:not(".clicked")').click(); // or .trigger('click') // .toggle-text-button:not(".clicked")
});
return false;
});
$(document).on("click", ".toggle-text-button", function(){
if ($(this).text() == "Read More") {
$(this).addClass('clicked').text("Read Less"); //.addClass('clicked')
// Use a jquery selector using the `.attr()` of the link
$(this).prev('p.toggle-text').slideDown();
} else {
$(this).removeClass('clicked').text("Read More"); // .removeClass('clicked')
// Use a jquery selector using the `.attr()` of the link
$(this).prev('p.toggle-text').slideUp();
}
});
})
body *{
margin : 0;
padding : 0;
}
.big-pie{
position : fixed;
top : 0;
background : red;
right : 0;
}
.big-pie > a{
display : inline-block;
color : #fff;
padding : 5px;
}
.TheElement{
height : 500px;
}
.toggle-text{
display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="big-pie">'
<div id="slice-1" class="hold"><span>First</span></div>
<div id="slice-2" class="hold"><span>Second</span></div>
</div>
<div style="height : 1000px;"></div>
<!-- First -->
<div id="first" class="TheElement">
<h3 class="py-3">First</h3>
<p>Shown Texts.</p>
<p class="toggle-text">Hidden Texts.</p>
<a class="toggle-text-button">Read More</a>
</div>
<!-- Second -->
<div id="second" class="TheElement">
<h3 class="py-3">Second</h3>
<p>Shown Texts.</p>
<p class="toggle-text">Hidden Texts.</p>
<a class="toggle-text-button">Read More</a>
</div>

Scroll effect from Nav to specific sections

I am trying to get my code to scroll so that when the user clicks on the nav links it scrolls to that section in particular. I can't figure out what line of code is wrong because when I click it does take me to the section it just doesn't scroll.
$('.scroll-to').on('click', function(e) {
e.preventDefault();
var thisTarget = $(this).attr('href');
var targetOffset = $(thisTarget).offset().top;
$('html, body').animate({
scrollTop: targetOffset
}, 600);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navigation">
<section>
<div class="navlinks">
about
skills
work
youtube
recommendations
contact
</div>
</section>
</nav>
Your above code works as expected; there can only be two things that are possibly wrong:
You have not included jQuery
You do not have an element with an ID corresponding to the target
Also note that an element cannot start with an ID, so your 3skills element will never be able to scroll. I assume this was simply a typo for the hash, so I've changed it to #skills.
Adding the links and ensuring that they don't start with numbers produces a working example, as is seen below:
$('.scroll-to').on('click', function(e) {
e.preventDefault();
var thisTarget = $(this).attr('href');
var targetOffset = $(thisTarget).offset().top;
$('html, body').animate({
scrollTop: targetOffset
}, 600);
});
#about {
margin-top: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navlinks">
about
skills
work
youtube
recommendations
contact
</div>
<div id="about">Lorem ipsum</div>
<div id="skills">Lorem ipsum</div>
<div id="work">Lorem ipsum</div>
<div id="youtube">Lorem ipsum</div>
<div id="recommendation">Lorem ipsum</div>
<div id="contactform">Lorem ipsum</div>
Hope this helps!

Move from a <div> to another <div> on scroll

I want my #logo-page div to move smoothly to #content div on scroll and also when clicked on FontAwesome icon. How do I do that using jQuery?
<div class="english-container" id="logo-page">
<div class="title">
<h1>Mean Design.</h1>
<img class="img-responsive" id="logo" src="MeanDesignLogo.png">
<h3>ui/ux • web design • graphic design • illustration</h3>
</div> <!-- title -->
<i class="fa fa-arrow-circle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="english-container" ></div>
I found a trick on how to do that at this page:
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Here are two demos:
https://css-tricks.com/examples/SmoothPageScroll/
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
This is the example of the second demo:
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
body, html, .main {
height: 100%;
}
section {
min-height: 100%;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Click Me to Smooth Scroll to Section 2 Below
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
You guys completely ignored his question. His question was he wants to scroll from one div to another div when on scroll not on click.
window.addEventListener('scroll', () => {
document.querySelector('#mission').scrollIntoView({
behavior: 'smooth'
});
})
This will help if you want to scroll to the div with the id name "mission"
You can use following code for scrolling smoothly to #logo-page div on click of .fa-arrow-circle-down:
$(".fa-arrow-circle-down").on("click", function(e){
$("html, body").animate({'scrollTop': $("#logo-page").offset().top }, 1000 );
});//click

Jquery scroll to element only if not already visible

I have a div that looks like this:
<div id="ProductPriceWrap" class="ProductPriceWrap">
<div class="DetailRow RetailPrice" style="">
<span class="Label">MSRP:</span>
<strike>$249.00</strike>
<span class="YouSave" style=""> (You save <span class="YouSaveAmount">$174.00</span>)</span>
</div>
<div class="DetailRow PriceRow" style="">
<div class="Value">
<em id="ProductPrice" class="ProductPrice VariationProductPrice" style="color: black; ">$75.00</em>
</div>
</div>
</div>
And I made this script to help customers see when the option chosen has changed the price:
$(document).ajaxSuccess(function(){
var currentPrice = $.trim($("#ProductPrice").text());
if(currentPrice == "%%GLOBAL_ProductPrice%%")
{
$("#ProductPrice").css('color','black');
$("#ProductPrice").removeClass("PriceChanged")
}
else
{
$("#ProductPrice").css('color','red');
$('html, body').animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
$("#ProductPriceWrap").animate({backgroundColor: "#ff0000" });
$("#ProductPriceWrap").animate({backgroundColor: "#ffffff" });
$( "#ProductPrice" ).addClass( "PriceChanged" );
}
});
</script>​
I want to change the function that scrolls to #ProductPriceWrap so that it will only scroll to that element if they have scrolled passed it. Meaning don't scroll to that element if it is already visible. I am pretty new to JS and JQ, and don't even know where to start on this one. Any input is greatly appreciated! Thanks!
Seems you are looking for selector :visible and function .animate().
At the end you will have something like:
if ($("#ProductPriceWrap:not(:visible)")) {
$("html, body").animate({
scrollTop: $("#ProductPriceWrap").offset().top
}, 1000);
}

jQuery Scroll: prevent anchor text from appearing in url

So i got the jQuery scroll working just fine on my page.
But I want to change one thing.
I don't want to show the anchor text in the url. ie. #products or #contactinfo
HTML CODE:
<div>
Products
Contact info
</div>
<div id="products"></div>
<div id="contactinfo"></div>
jQuery code:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Try this:
HTML:
<div>
<span class="link" rel="#products">Products</span>
<span class="link" rel="#contactinfo">Contact info</span>
</div>
<div style="height:800px;"></div>
<div id="products">products</div>
<div style="height:800px;"></div>
<div id="contactinfo">contact</div>
<div style="height:800px;"></div>
Script:
$(document).ready(function(){
$('.link').on('click',function (e) {
$('html, body').stop().animate({
'scrollTop': $($(this).attr('rel')).offset().top
}, 900, 'swing', function () {});
});
});
Fiddle
just add a return false; at the end of the click function.
Edit: and probalby remove this line, I mean.. it does exactly what you not want? Appearently?
window.location.hash = target;

Categories

Resources