So I have the following function running and it works great. The selected div expands with the .slideToggle() function and the page slides down the body with the .animate() and .scrollTop() methods.
$('.pfitem').click(function(){
$(this).toggleClass('minimized maximized');
$(this).next().toggleClass('minimized maximized');
$(this).next().slideToggle(1200);
});
$('.pfitem.minimized').click(function(){
$('html, body').animate({
scrollTop: $(this).next().offset().top
}, 1200);
});
Now when I try to add this following code which from my understanding should slide the page back up to the div with an id of #portfolio it does nothing even though that now the class of the div that is targeted by the .click() function has been toggled to .pfitem.maximized, so the previous .click() function should not interfere.
$(".pfitem.maximized").click(function() {
$('html, body').animate({
scrollTop: $('#portfolio').offset().top
}, 1200);
});
This is a snippet of my HTML, I have tried to strip it of irrelevant information (I am using bootstrap and have left some bootstrap classes in the code)
<div class="page" id="portfolio">
<div class="content container">
<ul class="row npr">
<li class="container col-xs-12 col-sm-4 col-md-3 pfitem businesscards minimized">
<div class="orangeover">
<span>Business Cards</span>
</div>
</li>
<div class="container col-xs-12 maximizeitem minimized" id="businesscards">
<div class="maxicontent col-sm-4">
<h4>BUSINESS CARDS</h4>
<p>Some text goes here</p>
<p>Some text goes here</p>
</div><!-- maxicontent -->
<div class="maxiimages col-sm-8">
<button class="close"><span class="">X</span></button>
<img src="" class="">
</div><!-- maxiimages -->
</div><!-- container maximizeitem -->
</ul>
</div><!-- .content .container -->
</div><!-- #portfolio -->
This is my first post, I hope I have provided sufficient information.
Thanks
Since you want the selectors to be evaluated dynamically you will have to use event delegation
$(document).on('click', '.pfitem', function () {
$(this).toggleClass('minimized maximized');
$(this).next().toggleClass('minimized maximized');
$(this).next().slideToggle(1200);
});
$(document).on('click', '.pfitem.minimized', function () {
$('html, body').animate({
scrollTop: $(this).next().offset().top
}, 1200);
});
Related
How can I get scroll to the next class element called section and vice versa?
Below are the code i have tried so far:-
<div class="section">
content
</div>
<div class="hero">
content
</div>
<div class="midPage">
content
</div>
<div class="section">
content
</div>
<!-- Scroll Buttons -->
<div class="prev">
<button class="prevButton">Prev</button>
</div>
<div class="next">
<button class="nextButton">Next</button>
</div>
Check this fiddle
I did it fast, only next button working, not the best approach.
Check the data- attributes and how is working, i repeat, this is not the best approach.
$(".nextButton").on('click', function(e) {
var dataGoTo = $(this).attr("data-section");
var next = $(dataGoTo).attr("data-next");
$('html, body').animate({
scrollTop: $(dataGoTo).offset().top
}, 500);
$(this).attr("data-section", next);
});
I want to create a div that when clicked on, pops open another div and scrolls down to it.
Here's my take on it but it is not working. What is the correct way?
html
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c- 0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;"></div>
jquery
$(document).ready(function() {
$('.image').click(function() {
$('#box').slideToggle("fast");
$('html, body').animate({
scrollTop: $('#box').offset().top
}, 2000);
});
});
Try scrollIntoView()
$(document).ready(function() {
$('.image').click(function() {
$("#box").show()
$('#box').get(0).scrollIntoView()
});
});
#box{background-color:#000;height:100px;display:block;width:100%;}
.mage{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image">
<img src="https://dotcms.com/contentAsset/image/47ffbc9c-f224-47a2-ba6c-0fedb202dbe9/diagram1/filter/Scale/scale_w/500/scale_h/800">
</div>
<div id="box" style="display:none;">
</div>
You need to remove display:none inline css and add display:none to external css of #box div. here is the updated fiddle
<div id="box">
</div>
#box{background-color:#000;height:100px;display:none;width:100%;}
I am using this accordion script for an FAQ page: http://www.snyderplace.com/demos/accordion.html
It's great except for one problem which is especially evident on mobile devices. When you click on a question and it has a lot of content inside, it expands upwards off the screen, to where you have to scroll up to see the question and the beginning of the content.
Ideally I'd like to have it to where the script scrolls the question to the top of the page/viewport when you click on it. If anyone has an idea of what to tweak in the script that would be amazing!
You may try something like this. You don't need a plugin for an accordion:
Edited version with icons, default open, and touch enabled scroll to top
https://jsfiddle.net/07fdq3t1/10/
Add the class show to the one you want to open.
This could probably be written more efficiently as there's repeating code, but it should work.
jQuery
$(document).ready(function() {
$('.accordion').click(function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
}
});
$('.accordion').on( "touchstart", function(){
if($(this).next('.container').is(':visible')) {
$(this).removeClass('show');
$(this).next('.container').slideUp();
}
else {
$('.accordion').find('.container:visible').slideUp();
$('.accordion').removeClass('show');
$(this).addClass('show');
$(this).next('.container').slideDown();
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
}
});
});
HTML
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion show">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
<div class="content">
<div>Sample Content</div>
<p>Content here....</p>
</div>
</div>
Note you will need to include jQuery in your code.
I have a website with different sections. I have jQuery to slide between these sections.
But now I have a link in a section which points to another section.
HTML:
<div class="section" id="one">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="tow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="ordernow">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button"/>
</div>
</div>
jQuery:
// onclick on an object with class "section" scroll to this object
$('div.section').click(function() {
$.scrollTo($(this), 800);
});
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
}
The problem is that if I click on the link scrollOrderNow() the page slides to the order page and than back to the section because the link is in that section.
Could you please help me figure this out?
Thank You!
You can use a single click handler and determine what to do based on which element was clicked inside the section. For this, it's best to distinguish the clickable element by giving it a class:
<div class="section" id="four">
<div class="row">
<p>This is some text</p>
</div>
<div class="row">
<img src="button" class="scroll-to-order"/>
</div>
</div>
The the click handler code:
$('div.section').on('click', function(evt) {
var $target = $(evt.target);
if ($target.is('.scroll-to-order')) {
// the image itself was clicked, so scroll to ordernow
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
} else {
// something else inside the section was clicked, scroll to section
$.scrollTo($(this), 800);
}
});
You'll need to put return false to your scrollOrderNow() function.
function scrollOrderNow(){
$('html,body').animate({
scrollTop: $("#ordernow").offset().top
}, 1000);
return false;
}
This way, your links will not react and the hash will not be appended to the URL, leaving the page where it is.
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});