Button needs to be clicked twice (Jquery) - javascript

Background: Trying to build a fullscreen menu for mobile devices on a one page site.
Problem: The #handle div needs to be clicked 2 times for action. I have tried to use following in different ways but i seem to implement it wrong in some way:
live / die,
bind / unbind,
on / off,
delegate / undelegate.
I don't understand how i should solve my problem. Sorry for bad id-names on some divs.
HTML
<div id="overlay">
<input type="checkbox" id="op"></input>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<div id="nav">
<ul>
<li class="homescroll" class="overlayli">Home</li>
<li class="servscroll" class="overlayli">Services</li>
<li class="workscroll" class="overlayli">Work</li>
<li class="aboutscroll" class="overlayli">About</li>
<li class="contactscroll" class="overlayli">Contact</li>
</ul>
</div>
</div>
</div>
Jquery
When li is clicked the user gets scrolled down the page and the menu is hidden:
If the user now wants to open the menu again it needs to be clicked 2 times for action.
<script>
$(document).ready(function () {
$('li').hover(
function () {
$('li', this).fadeIn();
},
function () {
$('li', this).fadeOut();
}
);
$(".aboutcroll").off().on('click', function() {
$('html, body').animate({
scrollTop: $("#aboutdummy").offset().top
}, 800);
$("#overlay").hide();
$("#handle").on('click');
});
});
</script>
When #handle is clicked the overlay fullscreen menu will open:
<script>
$(document).ready(function(){
$("#handle").off().on('click', function() {
$("#overlay").show();
});
});
</script>

The problem seems to be with your #handle onClick function
In your code you are using
$("#handle").off().on('click', function() {
$("#overlay").show();
});
Here .off() is removing the event listener on the first click! Try removing .off()
Also for the scrolling, you can use the following code (which is also without .off())
$("SELECTOR").click(function() {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 500);
return false;
});
Hope this works for you! And If it doesn't it would better if you can share your code via jsFiddle or CodePen.

Related

HTML link to anchor without changing url

I have a button on the top of my page that links to /#tabs (index id="tabs"). it uses a script to scroll nicely down to the id but it changes the url to www.domain.com/#tabs how can I remvoe the #tabs part? I was thinking about doing it in .htaccess but not sure if thats possible and its proerbly a bad idea.
heres the html:
<a class="smoothscroll" href="/#tabs">
<div class="scroll-down"></div>
</a>
</header>
<br />
<div id="tabs" style="padding:20px;"></div>
<div class="tabs">
<h1>About</h1>
<div class="p">
about us
<input type="submit" value="Contact Us" class="btn" name="contact" style="min-width:15%;"/>
</div>
</div>
<a class="smoothscroll" href="/#tabs">
<div class="scroll-down"></div>
</a>
Is the button part and it uses this script to scroll smoothly
<script>
/*----------------------------------------------------*/
/* Quote Loop
------------------------------------------------------ */
function fade($ele) {
$ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
var $next = $(this).next('.quote');
fade($next.length > 0 ? $next : $(this).parent().children().first());
});
}
fade($('.quoteLoop > .quote').first());
/*----------------------------------------------------*/
/* Smooth Scrolling
------------------------------------------------------ */
jQuery(document).ready(function($) {
$('.smoothscroll').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);
</script>
just forget about the top of the script, thats just a part for the index.
You can do it otherwise like this:
In html
<a href="" class="smoothscroll" onclick="functionforscroll('tabs')">
<div class="scroll-down"></div></a>
in js
var functionforscroll = function(id){
var reqId = "#"+id;
window.scrollTo(0, $(reqId).offset().top-85);
}
this way you can scroll to the required position without changing the url
All you need to do is put a tabindex="-1" to the element you want the focus to, and on the event of focusout/blur remove that tab index. This will enable the element not to be tabbed, but will bring the focus to the element.
I have done that using JQuery:
(ELEMENT_FOR_FOCUS).attr('tabindex', -1).on('blur focusout', function () {
$(this).removeAttr('tabindex');
}).focus();
Try use "data-target" instead "href". Works for me.
Changing Vicky Kumar's answer, this will work.
HTML:
<button class="smoothscroll" onclick="functionforscroll('id')">
<div class="scroll-down"></div></button>
Javascript
const functionforscroll = function(id){
const reqId = "#"+id;
window.scrollTo(0, $(reqId).offset().top-85);
}
You can style the button to be like the rest of your links in your project. One thing is to set outline to none, so that when someone clicks the button it will not show the border/outline of the button.

How do I make a .hover div stay open while the mouseover is still on the parent?

First things first, a fiddle: http://jsfiddle.net/d7wfv8w8/
I have a navbar with a logo, search form and a Categories link. When somebody moves over it with the mouse, it should open the wrapper-categories div, which is display: none; by default.
I got it working, except the div is closing when you then move the mouse over the div that opened. I thought I could get it to stay open if I used .navbar .toggle to tell it that the parent is .navbar and it should stay open as long as the mouse is anywhere over that parent div.
How can I achieve this?
Here is my HTML:
<div class="navbar">
<div class="wrapper-header">
<ul>
<li class="">Logo Here</li>
<li class="">Search Here</li>
<li class="">Categories</li>
</ul>
</div>
<div class="wrapper-categories">
Categories Here
</div>
</div>
And the jQuery:
$(".navbar .toggle").hover(function (event){
event.preventDefault();
$(".wrapper-categories").slideToggle("fast");
});
You can achieve this by binding the hover function to the element wrapping both wrapper-header and wrapper-catagories. This will cause the hoverOut to only be called when it leaves the wrapper for both elements. Keeping both of your required divs open.
Fiddle: http://jsfiddle.net/d7wfv8w8/5/
Late to the party but change your class' to ID's and give this a go. Works for me.
$(document).ready(function(){
$( "#toggle" ).hover(
function() {
$( "#wrapper-categories" ).slideDown({
left: "+=50",
height: "toggle"
}, 500, function() {
// Animation complete.
});
}
);
var inArr = {toggle:false, wrapper-categories:false};
$('#toggle, #wrapper-categories').mouseover(function(){
inArr [$(this).attr('id')] = true;
});
$('#toggle, #wrapper-categories').mouseout(function(){
inArr [$(this).attr('id')] = false;
setTimeout(function(){
if(!inArr.toggle && !inArr.wrapper-categories) {
$('#navArea').slideUp(500);
}
},100);
});
});

ul li selector doesn't work

I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});

Using jQuery.ScrollTo to scroll down when a link is clicked

I have a link on top of my page Categories
when this is clicked, the page jumps to the bottom where the target div is located
I am trying to use jQuery.ScrollTo but its not working. I am not sure how to debug.
$(document).ready(function()
{
// Scroll the content inside the #scroll-container div
$('.categories_link').scrollTo({
target:'#categories'
});
});
UPDATE:
Found this http://jsfiddle.net/VPzxG/ so now trying to modify it. Any help would be appreciated.
You don't need JS at all. Just use
<a class="categories_link" href="#categories">Click me!</a>
DEMO: http://jsfiddle.net/ezCFC/
First, I recommend changing the HTML to the following:
<div id="sidebar">
<ul>
<li>auck</li>
<li>Projects</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
then just use .animate() and .offset():
$(function(){
$("#sidebar > ul > li > a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
$('body').animate({
scrollTop: $(id).offset().top
}, 1000);
});
});
DEMO:
http://jsfiddle.net/dirtyd77/VPzxG/1465/

How can I use the scollTop function to enable smooth scrolling with Bootstrap?

I have created a custom "subnavbar" that sits under bootstrap's navbar. It's based on the code from wrapbootstrap.
I want to enable smooth scrolling using scrolltop. I have the following Javascript:
$(document).ready(function(e) {
$('#subnav').bind('click', function(e) {
e.preventDefault();
$('html,body').animate({scrollTop: $(this.hash).offset().top});
});
});
However, I can't seem to make it work. Am I using the wrong # reference? Here is a bootply: http://bootply.com/62720
HTML snippet below:
<!-- Subnav bar -->
<div class="subnav subnav-fixed">
<ul class="nav nav-pills">
<li>Overview</li>
<li>Opening hours</li>
</ul>
</div>
<section id="Overview">
<h3>OVERVIEW</h3>
Thanks
Very simple and easy mistake to make "#subnav" should be ".subnav a" firstly because subnav is the class and secondly because you want the click binded to the link
Something like this will work. This will set top to 0 when there is no offset()
$('.subnav li a').bind('click', function(e) {
e.preventDefault();
var hashTag = this.hash;
var top = 0;
if ($(hashTag).offset()) {
top = $(hashTag).offset().top
}
$('html, body').animate({scrollTop:top}, 'slow');
});
Here is the update: http://bootply.com/62723

Categories