Use a button with JQuery to collapse a div - javascript

I found this code on jsfiddle and I am trying to get it to work on my page.
Here is the link:
http://jsfiddle.net/AfCdg/2/
Here is the code on JSFiddle:
<div data-role="page">
<div data-role="header" id="header">
Home
<h1>Logo</h1>
Buscar
</div>
<div data-role="content">
<div data-role="collapsible" id="searchForm" data-collapsed="true">
<h3>tester</h3>
<p>This is some text, cool</p>
</div><!-- end searchform-->
</div><!-- end content-->
</div><!-- end page-->
$(document).ready(function(){
$('#searchButton').live('click', function(event, ui) {
$("#searchForm").toggle();
});
});
and here is my code:
<div data-role="header" id="header">Refund Policy</div>
<div data-role="content">
<div data-role="collapsible" id="refund" data-collapsed="true">
and my javascript:
$(document).ready(function () {
$('#CollapseButton').live('click', function (event, ui) {
$("#refund").toggle();
setTimeout(function () {
var divPosition = $('#refund').offset();
$('html, body').animate({ scrollTop: divPosition.top }, "fast");
}, 200);
});
});
Currently the div does not start collapsed nor does it toggle when I click on the a href button. What am I missing?
Here are the only errors I receive in the Chrome console and neither looks relevant to me.

Your id of the button is searchButton
Change your code to the new id, or match them to your html either way:
$(document).ready(function () {
$('#searchButton').live('click', function (event, ui) {
$("#refund").toggle();
setTimeout(function () {
var divPosition = $('#refund').offset();
$('html, body').animate({ scrollTop: divPosition.top }, "fast");
}, 200);
});
});
<div data-role="header" id="header">
Home
<h1>Logo</h1>
Buscar
</div>

Try changing $('#searchButton').live('click', ... to $('#searchButton').on('click', ...
https://jsfiddle.net/o3mk90xq/
Also, note the check for whether or not the element is hidden when it first loads, in order to hide it initially.
if (!$("#refund").is(':hidden')) {
$("#refund").hide();
}

Related

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!

Why does scrollTop not respond?

The other jQuery scripts on the page are working fine, just not scrollTop, I could even get it to work on https://jsfiddle.net/ivolong/tyvusdte/ just not on my website, which is using JQuery 3.2.1.
In between script tags in the body I have:
$("#button1").click(function() {
$('html, body').animate({
scrollTop: $("#slide2").offset().top
}, 3000);
});
$("#button2").click(function() {
$('html, body').animate({
scrollTop: $("#slide1").offset().top
}, 3000);
});
Then I have:
<div class="slide" id="slide1">
<p id="title">Title</p>
<div id="specialText">
<p>Line 1.</p>
<p>Line 2.</p>
<p>Line 3.</p>
<p>Line 4.</p>
</div>
<button class="button" id="button1">↓</button>
</div>
<div class="slide" id="slide2">
<p id="title">Title</p>
<div id="text">
<p>Line 5.</p>
<p>Line 6.</p>
<p>Line 7.</p>
<p>Line 8.</p>
</div>
<button class="button" id="button2">↓</button>
</div>
But it doesn't respond when the button is clicked
It's because the javascript code is above the html code. At that point when the javascript code is interpreted, there are not buttons rendered which leads to no event handler being attached.
You can fix this by placing you javascript code under you html code, or like correctly in a comment below mentioned: by wrapping your code inside jQueries document.ready function which will look like:
$(document).ready(function() {
$("#button1").click(function() {
$('html, body').animate({
scrollTop: $("#slide2").offset().top
}, 3000);
});
$("#button2").click(function() {
$('html, body').animate({
scrollTop: $("#slide1").offset().top
}, 3000);
});
});

jquery scrollTo to work with a button

I'm having trouble getting a simple jquery code to work. I want a button to scroll the page down to another div.
The code is in here: http://jsfiddle.net/utm6d/
html:
<div class="jumbotron">
<div class="container text-center">
<h1>Scroll down!</h1>
<a type="button" id="helloclick" class="btn btn-default">scroll!</a>
</div>
</div>
<div class="container text-center" id="second">
<p> come here </p>
</div>
js:
$('#helloclick').click(function(){
$('html, body').ScrollTo("#second");
});
You need to use the scrollTop() method with an offset() of your target object.
$(function() {
$('#helloclick').click(function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $("#second").offset().top
}, 500);
});
});
EDIT: Code needed to be wrapped in $(function() {...});, to ensure #helloclick & #second are loaded before being executed.
See it working on JSFiddle
Try this:
$('#helloclick').click(function(){
$('html, body').animate({
scrollTop: $('#second').offset().top
}, 500);});
Working Demo
jQuery does not have .ScrollTo() method.
In your case, you need to use .scrollTop():
$('#helloclick').click(function(){
$('html,body').animate({ scrollTop: $('#second').offset().top });
});
Fiddle Demo

Jquery and Foundation 4 Accordion Deep Linking

I'm using Foundation 4 accordion with deep linking set to true:
<div class="section-container accordion" data-section="accordion" data-options="deep_linking: true">
<section class="section">
<h3 class="title"> Program Highlights <span class="arrow_down"></span></h3>
<div class="content" data-slug="panel1">...
Despite Foundation docs saying this should work, this by itself does nothing... so I added:
$(document).foundation('section', {
callback: function (){
var containerPos = $('.active').offset().top;
$('html, body').animate({ scrollTop: containerPos }, 200);
}
});
This works, but I wanted the accordion panels to close when clicked again, instead of having to click another panel. So I then add some code to toggle open/close each accordion panel and arrow up/down on click:
$(document).on('click','.accordion h3', function () {
$(this).find('span').toggleClass("arrow_down arrow_up");
$(this).next('div').toggle();
var containerPos = $(this).offset().top;
$('html, body').animate({ scrollTop: containerPos }, 200);
});
Then only only the foundation callback works, not the toggling. So these both work individually, but when I have both in the script only the foundation callback works. How can I get both of these to work?
You can use data-options="one_up: true;" to collapse the content of you accordion. For example:
<div data-options="one_up: true;" data-section="accordion" class="section-container accordion"></div>

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