Javascript dropdown won't close on click, obfuscated? - javascript

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.

Related

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

How to animate list items or div elements on scrolling horizontally on a webpage?

I am trying to build a gallery using the isotope plugin, and in that i am using masonryHorizontal layout. All the images are placed in an unordered list and under that i have li which further has an anchor tag and an image tag nested.
<ul>
<li><img src="#></li>
...
</ul>
The layout is working properly ie the images align themselves optimally leaving very less white spaces (done through isotope) but i want to have an animation when i scroll through horizontally.
I searched for a day and was not able to find anything substantial. Any help is appreciated.
I don't know your plugins. But if you are trying to detect sideways scroll with jQuery on the Page (Not some plugin specific scrolling) then give this a try:
var lastScrollLeft = 0;
$(window).scroll(function() {
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
console.log('scroll x');
lastScrollLeft = documentScrollLeft;
}
});
That should detect if the scrolling position is still the same. And then you can make changes accordingly.
If that is not what you meant by scroll. Then nevermind :)
The code snippet comes from this answer:
https://stackoverflow.com/a/7076832/3767100

jquery toggle and smooth scroll clashing on same page

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.

jQuery /hover()/.mousemove() optimization issue

I'm working on a basic modal example in which the modal would follow the mouse cursor as long as the user was hovering over a certain section.
The issue I'm having is, when going from left to right, the modal lags significantly, as well as triggers the fadeOut() set if the user were to mouse out of the specific section.
Right to left, works seamlessly.
In the fiddle, you can observe the lagginess when moving the mouse over the <nav> from top to bottom, as well as notice the solid performance from bottom to top.
If there are any duplicate questions or related articles that you all know of, please point me in the right direction. My searches thus far have been informational but have not adressed this specific issue.
Here is my fiddle.
Thank you all, as always pro advice is warmly welcomed.
Ken
The issue is that jquery fires onmouseout event when you add the modal element it gets "focus" and hover events are not firing on your nav element.
I altered your example so that it is wokring much better now, check it out here
Oh awesome, classic example! The problem is that the jQuery thinks you've moused-out once you touch the section#coming-soon, so it obviously runs the fadeOut...
One way to overcome this is to put the section#coming-soon inside the nav, that way the script will still think you're inside the section#coming-soon, even if you hover over it:
<nav>
<ul>
<li><a>Home</a></li>
<br />
<li><a>About</a></li>
<br />
<li><a>My Work</a></li>
<br />
<li><a>Blog</a></li>
<br />
<li><a>Contact</a></li>
</ul>
<section id="coming-soon">
<h2>Coming Soon!</h2>
</section>
</nav>
Example here: http://jsfiddle.net/gcJuz/1/
Just a few recommendations to help out.
// cache the jquery object
var target = $('section#coming-soon');
target.hide();
// select the specific nav, not all navs
$('nav:first').mouseenter(function(){
// only need to show it once on enter
target.show();
}).mousemove(function(e) {
// can't really avoid this unless you want to keep moving it around all the time
// but show it only once you mouse over
target.css({
'position' : 'absolute',
'top' : e.pageY,
'left' : e.pageX
});
}).mouseleave(function() {
target.fadeOut(1300);
});

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