I am working on a mockup and have created this:
http://cynthialarenas.billybluedigital.net/
I'm having a problem with my nav buttons: Play, About, How To.
If you click 'about' then 'how to' everything works fine, but if you go from 'how to' to 'about' the 'how to' disappears. How do I get all the buttons to work consistently and not disappear. Also I am noticing the slide transitions are actign a little funny, sometimes displaying a white banner.
I want the jquery to be just inside the content area but its appears to flash quickly above and over the footer.
Can anyone shed some light?
Here are some snippets of my code:
CSS:
#contentArea{
width:1024px;
height:522px;
background:#FFF;
float:left;
overflow: hidden;
}
#playSlide, #howSlide, #aboutSlide {
display: none
}
.toggleDiv p {
margin: 0 0 12px 0
}
HTML:
<div class="toggleDiv" id="aboutSlide">
<div class="navContainer">
<div class="menuItem">
<a class="show_hide" rel="#playSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/play_black.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#aboutSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/about_btn.png">
</a>
</div>
<div class="menuItem">
<a class="show_hide" rel="#howSlide">
<img src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png" onMouseOver=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn_hover.png" onMouseOut=src="http://cynthialarenas.billybluedigital.net/wp-content/uploads/2013/10/howtoplay_btn.png">
</a>
</div>
</div>
Gonna have to agree with Mitchell on this one. Using images for simple navigation like this is incredibly non-SEO friendly. Not only that, it's just plain unprofessional.
While I can't cause the problem to happen when I visit your site, I can offer an alternative to the images you're using.
http://jsfiddle.net/L2MVu/1
<ul class="nav">
<li class="active">play</li>
<li>about</li>
<li>how to play</li>
</ul>
As you can see, it's all editable, but still just as clean as you wanted from the images.
While this doesn't do a whole lot to save page-load time, it's always best to try to get a desired effect with pure CSS before resorting to images.
Related
I hope everyone is ok!
I'm trying to achieve something simple, yet I don't know how to do it exactly.
I'm trying to do a fixed table of content, which highlights the active section.
The content:
<div class="content">
<div id="step-1">
...
</div>
<div id="step-2">
...
</div>
<div id="step-3">
...
</div>
</div>
The sidebar:
<nav>
<a href="#step-1">
<span>Step 1</span>
</a>
<a href="#step-2">
<span>Step 2</span>
</a>
<a href="#step-3">
<span>Step 3</span>
</a>
</nav>
As you can see, nothing too fancy. The problem is that I tried to do it with IntersectionObserver and intersectionRatio, and it gives the .active class to every .content > div that enters the screen.
What I would like, is a script in Javascript (or jQuery) that gives the .active class to THE current .content > div element that reach the limit of (for example) 20vh from the top of the screen.
Thanks a lot, I hope I'm clear enough.
I believe I have some fairly decent knowledge of HTML, CSS, and JS. However, I am stuck on one little bug. Whenever I click my hamburger menu icon, an overlay appears giving the user options to navigate throughout my website. I have managed to disable the scrolling of the body whenever the hamburger menu is clicked, however, once the user clicks the appropriate anchor tag, taking them to their desired location on the website, I want scrolling re-enabled.
It may seem like a little fix but I've been battling with this bug for quite some time and my brain feels fried right now lol. If anyone can shed some light on it, it'll be much appreciated.
My code is below:
HTML:
<header>
<div class="container">
<nav class="nav-container">
<div class="menu-toggle">
<i class="fas fa-bars" onclick="lockScroll();"></i>
<i class="fas fa-times"></i>
</div>
<ul class="nav-items nav-toggle" id="menu">
<li class="nav-links">
Home
</li>
<li class="nav-links">
About
</li>
<li class="nav-links">
Projects
</li>
<li class="nav-links">
Contact
</li>
</ul>
</nav>
</div>
</header>
CSS:
.lock-scroll {
overflow: hidden;
}
JavaScript:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
} else {
$('body').addClass('lock-scroll');
}
}
You can call the remove scroll function again on anchor click:
$("a.nav-link").click(function(){
$('body').removeClass('lock-scroll');
})
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
i've stumbled into a problem where I am not unable to close my mobile navigation menu.
I am using jQuery Full Page for my front-end. My mobile menu opens when clicked on:
<nav class="menu col-xs-4 pull-right">
<a href="#">
<span>Menu</span>
<button>
<span>toggle menu</span>
</button>
</a>
</nav>
With jQuery code of:
$('nav, .mobile-menu--close').click(function(e){
$('body').toggleClass('menu-open');
});
But it does nothing on closing with .mobile-menu--close
<a href="#" class="mobile-menu--close">
<span>Close</span>
<span class="mobile-menu--close-x"></span>
</a>
It is inside an aside element which is outside of main
...
<div class="background-image landing-mantas col-xs-8 pull-right">
</div>
</div>
</div>
</main>
<aside class="mobile-menu">
<ul>
<li>
Homepage
</li>
<li>...
With mobile-open class it translates X 100% and brings aside.mobile-menu from X100% to 0%. So basically it swaps these with positions.
I've read answers with disabling touch-actions: none and so on. Nothing does seem to help.
Full preview of web could be found here
Keep in mind that this is wop so please view it in responsive view to get the point. But it should do the trick.
Remove this style and try
.mobile-menu {
z-index: -1;
}
As I can see from the link you provided. When menu-open is applied then your navigation is not clickable, so you need to set z-index of menu-open to higher that the z-index of your content (I am assuming the the page is inside the content class) -
.menu-open{
z-index: 1111;
}
.content{
z-index: 1000;
}
On my website europebathroom.com I have a horizontal main menu. When I hover over one of the menu-items a dropdown appears. When I hover over another menu-item the drop-down of that menu-item appears, as it should of course.
However, I don't want this to happen when you accidentaly quickly touch another menu-item.
I want it to be like the horizontal menu on the following link: badkamerwinkel.nl.
So, there should be a delay in the change of the dropdown by some milliseconds on hover, to avoid annoying situations if you accidentaly touch another menu-item.
Is there a script I can use to do this? I am not very experienced yet, my apologies.
Thank you so much in advance, and please know this is my first post on this great support site, so any criticism and tips are welcome to make my next posts better!
Mike
EDIT:
The menu works approximately like the menu below.
<ul class="main">
<li class="item1">
<div class="submenu1">...</div>
</li>
<li class="item2">
<div class="submenu2">...</div>
</li>
<li class="item3">
<div class="submenu3">...</div>
</li>
</ul>
.submenu1{
display:none;
}
.main .item1:hover .submenu1{
display:block;
}
.submenu2{
display:none;
}
.main .item2:hover .submenu2{
display:block;
}
So if you hover item1 the submenu1 shows, if you hover item2 the submenu2 shows immediately. Is there a way to delay this action by a few milliseconds? Thanks!
You can use JQuery hoverIntent plugin to delay the animations. I have used this to create a similar kind of behavior.
check it out here