In the site that I'm working on, I am using the jQuery .toggle() function to display and hide the navigation when viewing the site in mobile devices. Here's the code that I am using:
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});
});
});
</script>
It is toggling the navigation but the text links are not displaying. I've used the element inspector in chrome and I'm seeing that overflow:hidden is being added inline to the element by the .toggle() function but it is not being removed when toggling to display the links. I've taken a look at the jQuery documentation for this but it doesn't mention anything about overflow:hidden. You can see that this is being adding by this function because it does not appear until after clicking the toggle button
Here's the url to the site: http://theinfluence.iamchrisbarnard.com
The toggle function is being applied to the toggle icon in the top right but can only be seen at smaller sceensizes. And it's toggling the nav element at the very top of the page.
What could be causing this issue?
Instead of making background image for the toggle menu try adding as image. Code something similar to
Html
<img src="images/icon_mobile_menu.jpg" alt="m"> Menu
jQuery
$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
$('#nav').hide();
$('#mobibtn').show();
} else {
$('#nav').show();
$('#mobibtn').hide();
$('#mobimenu').hide();
}
});
$(window).load(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
$('#nav').hide();
$('#mobibtn').show();
} else {
$('#nav').show();
$('#mobibtn').hide();
$('#mobimenu').hide();
}
});
$(document).ready(function() {
$('#mobibtn').click(function() {
$('#mobimenu').toggle();
});
});
(You may see live example at http://pfitr.net/frontend/index.html )
Related
I have some Bootstrap vertical tabs that I'm struggling with what I felt like would be a simple operation.
Goal:
On the click of Tab, I want to smooth-scroll to the corresponding pane.
What's Actually Happening:
On click of the tab, the browser animates to the tab, not the tab pane. I've tried passing in the paneId instead of the ID, but that doesn't work at all. Any idea where I'm going wrong?
Codepen:
Here's a Codepen: Codepen!
jQuery:
$("#tabs .nav-link").click(function (e) { //on click of nav tav, perform this:
var id = $(e.target).prop("id"); //Grab ID of .nav-link clicked
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
function navigateToElement(id) {
$("html, body").animate(
{
scrollTop: $("#" + id).offset().top
},
300
);
}
navigateToElement(id); //Tried with "paneId" instead of "id" to scroll to the pane, but doesn't work
});
Any idea where I'm going wrong?
This line:
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
Is creating a variable like: v-pills-profile-pane and there isn't a div on the page with that id. I did see a div with id="v-pills-profile". Change that last line to this and it should work:
var paneId = id.replace("-tab", "");
I just realized that it doesn't matter what pane I scroll to, as bootstrap will display the panes under #panes. As long as I can scroll to that, I'm good. This code worked:
$("#tabs .nav-link").click(function (e) {
var target = $("#panes");
$([document.documentElement, document.body]).animate(
{
scrollTop: $(target).offset().top - 20, // added a bit of offset
},
350
);
});
Im a little bit stumped on this for a number of reasons, sometimes it works, sometimes it does not. When you narrow the view port to less than 945px the subnav elements should toggle but sometimes they do not. I am also getting some unexpected results.
I have a codepen here
https://codepen.io/robbiemcmullen/pen/BqdRpN
my code is as follows:-
//toggle for subnavs
$(document).ready(function(){
//only toggle if window size is less than 945px
$(window).resize(function(){
var submenu = $('.nav-wrapper');
if (window.innerWidth < 945) {
$(document).on('click','nav ul li',function() {
$(submenu).toggle();
});
}
});
var listItem = $('.navigation-toggles__list-item');
//hide mega menu when settings activated
$(listItem).mouseleave(function(){
$(userMenu).hide();
});
var userIcon = $('.navigation-user-icon'),
userMenu = $('.dashboard-user-menu');
//toggle dashboard menu
$(userIcon).click(function(e) {
e.preventDefault();
$(userMenu).toggle();
});
});
can anybody tell me where I am going wrong?
I've created a page where the second nav bar appears when scrolling, and should be hidden when the window is at top: 0. When refreshing the page, the nav bar is visible, and then disappears when scrolling to then appear at the scrollPos set to appear.
How do I make it so that it is hidden when the page is refreshed?
The webpage is www.fareastfestival.com please take a look to help.
Here is the JS code I have used:
$(document).ready(function() {
var navOffset = $("nav1").offset().top;
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($("nav").outerHeight());
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
if (scrollPos >= navOffset) {
$("nav").removeClass("hide");
$("nav").addClass("fixed");
$(".navlogo").show();
}
else {
$("nav").addClass("hide");
$("nav").removeClass("fixed");
$(".navlogo").hide();
}
});
});
Just add the .hide class to your HTML element.
Here's an example (line 7):
$(document).ready(function() {
var navOffset = $("nav1").offset().top;
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($("nav").outerHeight());
$("nav").addClass("hide");
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
if (scrollPos >= navOffset) {
$("nav").removeClass("hide");
$("nav").addClass("fixed");
$(".navlogo").show();
}
else {
$("nav").addClass("hide");
$("nav").removeClass("fixed");
$(".navlogo").hide();
}
});
});
The above code adds the class dynamically. You could also just added to the HTML.
Add the hide class to nav in your html file like so <nav class="hide">
I have these icons above each section on my page (the largish circular icons, please see example: http://pftest.fhero.net) with colored hover states... what I would really love to do is have them change to the active hover states as the user scrolls to each section (preferably with a simple fade transition) - much like the effect of highlighting the active links/section in the navigation.
There are many tutorials, plugins and questions on this site and so forth for highlighting active sections in a navigation however, but doesn't seem to be much that I can find relating to applying the effect to another div or image on the page...
I'm definitely not any kind of jQuery expert but I'm wondering if one of the myriad of scripts/plugins available which are typically used for highlighting active states in navigation could simply be adapted to this scenario somehow to achieve the same effect? Perhaps even the one I am currently using on my page?
Here is the script I'm using for highlighting the active section in the navigation on my page:
/* Scroll Navigation highlight */
$("#work-section1").parent().addClass('active');
var main = main = $('#mainmenu ul');
$('.scroll').click(function(event) {
event.preventDefault();
var full_url = this.href,
parts = full_url.split('#'),
trgt = parts[1],
target_offset = $('#'+trgt).offset(),
target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 500);
/* Remove active class on any li when an anchor is clicked */
main.children().removeClass();
/* Add active class to clicked anchor's parent li */
$(this).parent().addClass('active');
});
$(window).scroll(function(event) {
if($("#work-section").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#work-section1").parent().addClass('active');
$("#about-section1").parent().removeClass('active');
$("#footer-section").parent().removeClass('active');
$("#services-section1").parent().removeClass('active');
$("#process-section1").parent().removeClass('active');
}
if($("#about-section").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
$("#about-section1").parent().addClass('active');
$("#work-section1").parent().removeClass('active');
$("#footer-section1").parent().removeClass('active');
$("#services-section1").parent().removeClass('active');
$("#process-section1").parent().removeClass('active');
}
if($("#services-section").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#services-section1").parent().addClass('active');
$("#about-section1").parent().removeClass('active');
$("#work-section1").parent().removeClass('active');
$("#footer-section1").parent().removeClass('active');
$("#process-section1").parent().removeClass('active');
}
if($("#process-section").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#process-section1").parent().addClass('active');
$("#about-section1").parent().removeClass('active');
$("#work-section1").parent().removeClass('active');
$("#footer-section1").parent().removeClass('active');
$("#services-section1").parent().removeClass('active');
}
if($("#footer-section").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#footer-section1").parent().addClass('active');
$("#about-section1").parent().removeClass('active');
$("#work-section1").parent().removeClass('active');
$("#services-section1").parent().removeClass('active');
$("#process-section1").parent().removeClass('active');
}
});
and the HTML:
<nav id="mainmenu" name="mainmenu">
<ul>
<li><a class="scroll" id="work-section1" href="#work-section">Works</a></li>
<li><a class="scroll" id="about-section1" href="#about-section">About</a></li>
<li><a class="scroll" id="services-section1" href="#services-section">Services</a></li>
<li><a class="scroll" id="process-section1" href="#process-section">Process</a></li>
<li><a class="scroll" id="footer-section1" href="#footer-section">Contact</a></li>
</ul>
</nav>
<section id="about-section" data-anchor-offset="90">
<section id="work-section" data-anchor-offset="90">
...ect...
Could this somehow be adapted to accomplish the effect I am looking for? Or any other/better methods, or plugins I should be looking at?
I should add that the icons use the sprites method which could make the CSS side of things a little trickier, although I would be willing to change them to non-sprite images if necessary...
You could use a small little function for this, that checks if a element is on screen. I set up a little JSFiddle for you: http://jsfiddle.net/LHrkB/1/
Code:
function isElementVisible(elementToBeChecked)
{
var TopView = $(window).scrollTop();
var BotView = TopView + $(window).height();
var TopElement = $(elementToBeChecked).offset().top;
var BotElement = TopElement + $(elementToBeChecked).height();
return ((BotElement <= BotView) && (TopElement >= TopView));
}
$(window).scroll(function () {
isOnView = isElementVisible(".inview");
if(isOnView){
//What to do when element is visible
$(".inview").css({"background":"#ccc"});
}else{ // If not visible
}
});
Ok, so i have changed the JSFiddle a bit, now it uses a fadeIn on a invisible element when it comes into view: http://jsfiddle.net/LHrkB/2/
Ok, i changed the JSFiddle once again. When you scroll in the results pane, and you play around with it a bit you can see the element change class as it comes on screen and also when it goes away again. I commented the JS so you can see what it does and where it does it. http://jsfiddle.net/LHrkB/4/
Thanks to the help of Veritas87 (who is super awesome), managed to get it all working with the following code:
function isElementVisible(elementToBeChecked)
{
var TopView = $(window).scrollTop();
var BotView = TopView + $(window).height();
var TopElement = $(elementToBeChecked).offset().top;
var BotElement = TopElement + $(elementToBeChecked).height();
return ((BotElement <= BotView) && (TopElement >= TopView));
}
$(window).scroll(function () {
isOnView = isElementVisible(".about-icon");
if(isOnView){
//What to do when element is visible
$('.about-icon').addClass('about-icon-active');
}else{ // If not visible
$('.about-icon').removeClass('about-icon-active');
}
isOnView = isElementVisible(".works-icon");
if(isOnView){
//What to do when element is visible
$('.works-icon').addClass('works-icon-active');
}else{ // If not visible
$('.works-icon').removeClass('works-icon-active');
}
isOnView = isElementVisible(".services-icon");
if(isOnView){
//What to do when element is visible
$('.services-icon').addClass('services-icon-active');
}else{ // If not visible
$('.services-icon').removeClass('services-icon-active');
}
isOnView = isElementVisible(".process-icon");
if(isOnView){
//What to do when element is visible
$('.process-icon').addClass('process-icon-active');
}else{ // If not visible
$('.process-icon').removeClass('process-icon-active');
}
});
with the "...icon-active" classes of course containing the style for the icon hover states.
I a have a menu, which on rollover shows a div which is not a child of the menu and when you roll off it hides that div again. The div is placed directly below the menu item, mimicking a submenu.
the html looks something like this -
Here is my menu -
<div id="nav">
<ul>
<li class='with_panel'>
<span id='panel1' class='current'><img src='theImage' /></span>
</li>
<!-- more list items -->
</ul>
</div>
In an unrelated div, I have this -
<div id="panels">
<div style="" id="panel1_panel" class="panel">
<img src="myImage.png">
</div>
<div>
I have some jquery that shows and hides the related panel when you rollover the li -
$("#nav .with_panel").mouseenter(function(){
var id = $(this).find("span").attr("id");
$(".panel").removeClass("open");
$panel = $("#" + id + "_panel");
$panel.addClass("open");
$img = $(this).find("span img");
$img.addClass("on");
var hide = function(){
if(!$panel.is(":hover")){
$img.removeClass("on");
$panel.removeClass("open");
}
}
$panel.mouseleave(hide);
$(this).mouseleave(hide);
})
This only seems to work in Chrome, and I'm fairly certain it's due to ie & Firefox not recognising .is(":hover").
I can't change the html structure, only the javascript. So I'm struggling on getting it to work cross browser. Any ideas?
The following code gives you 200 ms timeout (hide_to) to leave the menu and enter your panel before hiding it. Works the other way too. If you mouseenter the menuitem or the panel the timeout for the hiding is cancelled, and restarted when the mouse leaves any of them.
$("#nav .with_panel").each(function() {
var id = $(this).find("span").attr("id"),
$panel = $("#" + id + "_panel"),
$img = $(this).find("span img"),
hide_to = null;
var hide = function() {
// start hide timeout
hide_to = window.setTimeout(function () {
$img.removeClass("on");
$panel.removeClass("open");
},200);
};
var show = function() {
// clear hide timeout
window.clearTimeout(hide_to);
if (!$panel.is(".open"))
{
// open panel, only if it is not open already
$(".panel").removeClass("open");
$panel.addClass("open");
$img.addClass("on");
}
};
$(this).mouseenter(function() {
show();
}).mouseleave(function() {
hide();
});
$panel.mouseenter(function() {
show();
}).mouseleave(function() {
hide();
});
});
Try mouseover instead of mouseenter and mouseout instead of mouseleave.
For example:
$("#nav .with_panel").mouseover(function(){
var id = $(this).find("span").attr("id");
$(".panel").removeClass("open");
$panel = $("#" + id + "_panel");
$panel.addClass("open");
$img = $(this).find("span img");
$img.addClass("on");
var hide = function(){
if(!$panel.is(":hover")){
$img.removeClass("on");
$panel.removeClass("open");
}
}
$panel.mouseout(hide);
$(this).mouseout(hide);
})
It appears that .is(":hover") is actually broken for all browsers, as of jQuery 1.9.1. Bummer. The following is tested with FF, IE10, and Chrome (sorry don't have Opera) with jQuery 1.9.1. Opera users, please comment on whether this works on Opera.
function isHovered(elt){
var temp = $(elt).parent().find(":hover");
return temp.length == 1 && temp[0] == elt;
}
Then replace
$panel.is(":hover")
by
isHovered($panel[0])
otherwise, leave all your code as is.
fiddle: http://jsfiddle.net/mathheadinclouds/BxL4w/