jquery toggle and smooth scroll clashing on same page - javascript

I am using jquery toggle plugin along with the smoothscroll plugin on a single page website. now, the problem is that the hidden text in the toggle function is not allowing the smoothscroll jquery to function properly. suppose we click 'item a' in the nav option and it is supposed to scroll to the 'item a' section div in a smooth manner, it does so haphazardly and also takes into account the height of the hidden text in toggle function which is about 100px. Hence, there is neither a smooth scroll but also a difference of 100px of the desired result.
For reference, i am using html5 and have 4 sections on the page, as provided in code below.
Here is the code for toggle function:
`$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).toggleClass("active").next(".togglebox").slideToggle("slow");
return true;
});
});`
here is the code for navigation menu (supposed to scroll on the same page):
<nav>
<ul>
<li>Home</li>
<li>Our Works</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
i am using the smoothscroll plugin located at:http://css-tricks.com/snippets/jquery/smooth-scrolling/
can someone please guide me why these 2 jquery are clashing.
PS: i am also using a jquery slideshow, but that has no effect as far as i can tell, coz i removed that, and nothing changed.

It's difficult to tell based on what you've posted, but using the .hide() method, which is comparable to setting the CSS property to display: none, could cause the browser to incorrectly calculate height. I would try setting visibility: hidden , and then when active visibility: visible.

Related

gsap menu to scroll to elements only moves down as expected, not up

I've got a page using gsap to animate scrolling.
To navigate, the menu is setup with a simple "scroll to ID" approach which is intercepted by gsap to do the scrolling.
This works as expected to scroll down the page, but not up the page. However if you've scrolled down the page, selecting the element above from the menu doesn't scroll up. But selecting an element 2 up from the current one, then scrolls up 1 element.
An example of the code;
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</nav>
<section id="section1" class="panel">
</section>
gsap.utils.toArray("nav a").forEach(function(a) {
a.addEventListener("click", function(e) {
e.preventDefault();
gsap.to(window, {duration: 1, scrollTo: e.target.getAttribute("href")});
});
});
A demo is here on codepen
This is a logical issue. Once you've scrolled past a section, the element has been moved down by 100vh. So when you navigate to its y offset, it's 100vh below where it was at the start.
There are different ways to fix it. The easiest may be to keep an array of values of the original offset and scrollTo those values instead. Demo.
Sides notes:
You can just use the selector strings as your targets in GSAP when you don't need it scoped further.
You should use a double colon (::) for pseudo-elements in CSS.
If you're going to use ES6 features like const some places, you might as well use them throughout your code.
You're more likely to get help even quicker in the GreenSock forums.

Javascript dropdown won't close on click, obfuscated?

Thanks for looking at my post - I'm trying to figure out how to make this dropdown menu close upon clicking a link but my javascript skills are sorely lacking and the code seems to be obfuscated. This is the HTML:
<nav class="site-nav" role="navigation">
<ul class="pos-ul">
<li>Menu</li>
<li>Wine + Cocktails</li>
</ul>
Menu
</nav>
And the minified javascript I think is controlling it is at http://sabiopleasanton.com/js/core.min.js
The website in question is http://sabiopleasanton.com and the dropdown menu appears when the screen width is below 768px. Thank you for any consideration at all, I apologize for any lack of clarity or shortcomings re: posting protocol.
I remember helping you with the slider transition on this page the other day. Anyway, this is what you need:
$(document).ready(function() {
if ($(window).width() <= 768) {
$('ul.pos-ul > li > a').click(function() {
$('.pos-ul').hide()
});
}
});
It'll select an anchor tag within the mobile nav, on click it'll hide the dropdown unordered list. Just edited it to wrap it in a document ready function, shorten the selector and make sure it only fires when the viewport is 768px or less.

Fade Toggle not working

QUESTION: Why does my fade in/fade out not fire/work? How best to resolve?
BACKSTORY: Clicking a link will trigger a javascript/jQuery event which will display or hid a series of LI's. Currently I've been able to create a link that when clicked will 'pop' a bunch of links (reveal) or hide them, but this feels kind of abrupt to me and i'm trying to make them cascade/fade in and cascade out/fade out, but my script is not working it seems. I have tried googling and looking at jsKit and jQuery websites but not found anything that I can understand well enough to properly impliment.
ACCESS EXAMPLE: Click on the white arrow icon in the little grey box in the upper right corner of the browser to reveal/open the navigation draw. Scroll down to magenta colored link which reads 'Display/Hide on click'. Clicking the magenta link ought to reveal three LIs (A), (B), and (C). Clicking the magenta link ought to hide them. However, when i click the magenta test link, nothing happens, the LI's remain 'hidden'. This is one my first attempts with JavaScript/jQuery and i'm dreadfully confused and hoping to find guidance on how to solve the issue. I am at best a hobbist when it comes to things like this, but i consider myself more of a persistent newbie.
URL: enter link description here
<!-- jQuery fadeToggle -->
<!-- css is currently directly embedded for testing -> add to tweak.css when done
<style media="screen" type="text/css">
#DivB { display:none; }
</style>
Display/Hide on click
<div id="DivB">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<!-- function is located in scripts/jsFunctions.js -->
var fadeToggle = (function() {
$(document).on("click",function (e) {
if (e.target.id=="DivA") {
$("#DivB").fadeToggle(200);
e.stopPropagation();
return false;
}
else if ($("#DivB").is(":visible")) {
$("#DivB").fadeOut(200);
}
});
});
After your script call the function fadeToggle()
JSFiddle

collapsing an accordion "li" when class is removed

I've been trying to sort through this for a while now, can't seem to get it working 100%. The current code reveals the .content area without any collapse. It also shifts the page down to center on the content (which in this case goes under the fold if you don't).
$(document).ready(function() {
$('.vl-option .vl-toggle-link').click(function(e) {
e.preventDefault();
$(this).closest('li').find('.content').not(':animated').slideToggle();
$(this).closest('li').toggleClass('active');
});
$('.vl-option').bind('click',function(){
var self = this;
setTimeout(function() {
theOffset = $(self).offset();
$('body,html').animate({ scrollTop: theOffset.top - 20 });
}, 310);
});
});
I've attempted a few approaches to no avail. I'll list a few below (concept was to find any siblings and collapse):
$(this).siblings('li').find('.content').slideToggle();
which actually breaks the original functionality. Then I went with the following (to try an make anything without class="active" collapse):
if ( $(this).siblings('li').not('.active').find('.content').slideToggle(); ) //also tried .hide()
which doesn't seem to have any affect on anything.
The HTML is simple
<ul>
<li class="lv-option active"><!-- when toggled, "active" class is applied... -->
Yada
<div class="content"></div>
</li>
<li class="lv-option"><!-- ...when untoggled, "active" class removed -->
Yada yada
<div class="content"></div>
</li>
</ul>
.active is only applied for stylistic reasons. it has no effect on the functionality of anything. Just needed to be able to target the :before / :after when something was selected.
I just can't seem to wrap my head around jquery... argh.
Only one content at a time should be opened in an accordion right, so applying .slideToggle() to all <li> contents will break this rule. I think it's okay with your markup since you only have two <li>, so they just slides alternately. But if you have more I think the active <li> only should be .slideToggle() other should be .slideUp() only.
You can just chain them all:
$('.vl-toggle-link').click(function(e) {
e.preventDefault();
//find the sibling content apply slideToggle, then move to their parent and add active
$(this).siblings('.content').slideToggle().parent('li').addClass('active')
// go through all the siblings of their parent and remove active, then slideUp their child content
.siblings('li').removeClass('active').children('.content').slideUp();
});
I also find your .animate({scrollTop}) not working properly because it's obtaining the old offset().top value. I think you should get the offset().top after the slideToggle() has finished. See this jsfiddle.
Or you can also calculate scrollTop: jsfiddle.

Wordpress Admin-Like Menu

Can anyone provide me with a link to a tutorial or plugin, preferably in jQuery that will allow me to create a menu that not only collapses vertically (jQueryUI's Accordian), but also collapses horizontally? No matter what I google, all I can find are the vertical ones, and the Wordpress one is super-integrated to its core, as far as I can tell.
EDIT: Here are some screenshots. The first is normal, the second is expanded / collapsed vertically, the third is collapsed horizontally.
Try jQuery UI i think thats what WP uses
http://jqueryui.com/
You can use a plugin like Accordion or Collapsible Menu (a bit more wordpress like) for the vertical collapse, and then put that menu in a div that can collapse horizontally with a plugin like TabSlideOut. Or just change the width of the menu DIV with .animate().
Also notice how the wordpress removes the text from the menus but leaves the icons.
html
<div class="hide-menu">Hide Menu</div>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>
<ul class="subs"><li>Subs</li></ul>
</li>
</ul>
jQuery
$('.hide-menu').bind('click',function (){
$('#menu').animate({width:30});//can always extend this.
//u can use the if statement or toggle if u need toggling feature
});
$('#menu').children('li').bind('click',function (){
//here u can hide the subs
})
now ofcourse the above is not going to work exactly like wordpress or may not work at all but you get the idea :) I hope
I will toggle a class, as you can see there is an arrow that toggles horizontaly. So, just add or remove class and with CSS make the effect done, like this:
$(mi-button).click(function(e){
$(mi-menu-selector).toggleClass(your-class);
e.preventDefault;
});
with Css show or hide the text of each li of your menu.
.hide-horizontal{
text-indent:-999em;
}
You need to use responsive design to achieve this.
You can use CSS media queries:
http://en.wikipedia.org/wiki/Responsive_Web_Design
http://mediaqueri.es/

Categories