So i made a navbar for my one page website, all the button work and go where i want them to go but when i click on forum anything happens, this is my HTML Code :
<div class="menu">
<div class="container clearfix">
<div id="nav" class="grid_9 omega">
<ul class="navigation">
<li data-slide="1">Acceuil</li>
<li data-slide="2">A propos</li>
<li data-slide="3">Serveur</li>
<li data-slide="4">Contact</li>
<li>Forum</li>
</ul>
</div>
</div>
</div>
And this is my CSS
I share it in a ghostbin https://ghostbin.com/paste/2ctm9
I don't know what's wrong about this line <li>Forum</li> why this doesn't work ?
Here is my website http://gamenxtgen.multi-gaming.fr/
Shouldnt it be something like /forum.html? Unless your are using some .htaccess the link should contain the extension.
Try this : <li>Forum</li>
Maybe you failed the href.
This is a code you have on your site:
var links = $('.navigation').find('li');
...
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
The link to the forum is also in li so the preventDefault applies on it to preventing it from going to the page.
To Solve this you should define your variable more clearly (maybe add a class to it). So it does not include the link. Maybe something like
<li class="slides">Slide1</li>
<li class="slides">Slide2</li>
<li class="link">Forum</li>
var links = $('.slides');
Related
I am trying to link my mobile menu to different sections on the homepage. It is a one page website. The links are not working. What is wrong with my mobile menu code? Thanks!
```
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services </li>
<li>Contact</li>
</ul>
</nav>
```
You need to remove index.html in your href or it will reload the page.
Set id for the element you want to link to:
About
And:
<section id="about-section">...
If everything is on one page, you can omit the page name in the link, i.e. just use
<a href="#targetabout">
instead of
<a href="index.html#targetabout">
Note: If (just in case) the linked element has the ID #about, don't use #targetabout, but just #about, like <a href="#about">
Don't include the "index.html" in the href in your links, or it will reload the page. It should just be <a href="#about">, <a href="#services">, etc. I'm not sure why you prefaced them with "target", that's not necessary. These should all correspond to <a name> tags, in the body of the page. Since this is a one-page website, and that <nav> only appears once, you don't need to keep linking to index.html.
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<a name="about"><h2>About Us</h2></a>
<!-- your page here -->
<a name="services"><h2>Services</h2></a>
<!-- and so on.... -->
<a name="contact"><h2>Contact</h2></a>
These <a> tags, with no href and only a name, do not visually affect their contents in any way. It's just a sort of "bookmark", to specify where on the page to jump to. For instance, you can't click on them, and they don't appear any different than regular text. You could use this, and it would work (and look) exactly the same.
<a name="about"></a> <h2>About Us</h2>
<a name="services"></a> <h2>Services</h2>
This technique also works with jumping up to the top of a page, as well as jumping down.
It is a bit late, but....
If you use jQuery mobile, this is expected behaviour (see mobile documentation). So you have to scroll to the section yourself:
<script language="JavaScript" type="text/javascript">
function getAnchor() {
return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
}
function scrollTo(hash) {
if (hash){
location.hash = "#" + hash;
}
}
scrollTo(getAnchor());
</script>
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I have an HTML code like this:
<div class="menu">
<ul>
<li id="default">Home</li>
<li>Research</li>
<li>Publications</li>
<li>Resume</li>
<li>Blog</li>
</ul>
</div>
I'd like the link
<li>Blog</li>
to redirect to another external page. So I changed the code like this:
<li>Blog</li>
But the whole page messed up and got crazy on me. Is there a way I can make this work somehow?
Here is your answer. I was also getting this problem but then I researched and found that we have to use a protocol like https:// and http:// before we open an external link. you can see my research.
<li>v</li>
i have set working example i think in your html you forget to close any tag
<div class="menu">
<ul>
<li id="default">Home</li>
<li>Research</li>
<li>Publications</li>
<li>Resume</li>
<li>Blog</li>
</ul>
</div>
see here
I've looked at this for a number of hours now and can't figure out what is going on. Any help would be much appreciated thank you. It is a very strange problem and rather than going into detail I thought it best to just show you, so please find below a link to problem, currently on the development page of my website.
http://dev.cccit.co.uk/about-us/our-team/
As you can see the active dropdown seems to work along with the header being active in the nav bar as well, however when highlighting the nav select it is making the header appear darker and also not selecting the whole box (missing out the information section). It is probably easier to just see for yourself.... hover over About Us in the nav bar and you will see.
I thought initially this might be css related.... there is a separate css file for color selection which I have changed every option without any affect, and what makes me think this won't help is the strange way in which the whole menu is not changing when you hover. Please find a copy of the code below, bear in mind I'm using php for this section, but it also does the same thing regardless, so I have also changed the header for "Support" so that you can see it is doing the same thing.
I thought someone may have come across the same thing, if you need any more information or files, then please get in touch. Thank you in advance
`div class="container">
<div id="nav-wrapper">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="buttons-container">
</div>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="single"><a href="../index.php">HOME
<i></i>
</a>
</li>
<li <?php if($pageName == "About Us")echo " class='dropdown active' ";?> class="dropdown">
<a href='/about-us'>
ABOUT US<i></i>
</a>
<ul class="dropdown-menu">
<li <?php if($pageMetaTitle == "Our Team")echo " class='active' ";?>>Our Team</li>
<li <?php if($pageMetaTitle == "Philosophy")echo " class='active' ";?>>Philosophy</li>
<li <?php if($pageMetaTitle == "FAQs")echo " class='active' ";?>>FAQs</li>
</ul>
</li>
<li class="dropdown active">
<a href="/support">
SUPPORT<i>IT support for business</i>
</a>
<ul class="dropdown-menu">
<li>Support Packages</li>
<li>Service Level Agreements</li>
<li>FAQs</li>
</ul>
</li>
`
Remove the custom background colors you set have for the <i> tags.
Noticing the hover effects on Firebug, the colors don't match the hover effects of the parent element.
I'm new to jQTouch -- it's pretty awesome -- but I'm finding that I'm not able to get it to work out of the box for my HTML, even though I'm following the getting started guide as well as the markup guidelines.
Specifically, each of my screens is a <section> element (direct child of <body>) with a unique ID, and I have links to those IDs, e.g. <a href="#screen-a">. This seems to follow the convention of the demo code, but yet the demo code works and my code doesn't.
Here is the HTML structure of my <body>:
<section id="main-menu">
<header class="toolbar"><!-- ... --></header>
<nav>
<ul>
<li class="arrow">Screen A</li>
<li class="arrow">Screen B</li>
<li class="arrow">Screen C</li>
</ul>
</nav>
<footer><!-- ... --></footer>
</section>
<section id="screen-a"><!-- ... --></section>
<section id="screen-b"><!-- ... --></section>
<section id="screen-c"><!-- ... --></section>
<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>
<script src="init.js"></script>
And my init.js simply initializes jQTouch (no custom options):
var jQT = new $.jQTouch({});
When I load my page, the UI appears fine, and I can confirm jQTouch was initialized because my jQT variable exists.
But when I click any link, the location bar changes to the new hash (e.g. "#screen-a"), but the UI doesn't change. And the JavaScript console starts throwing repeated multiple No pages in history errors.
(When I use the unminified jQTouch.js, these errors come from inside the jQTouch goBack() function, which is being called from the dumbLoopStart() timer.)
Note that this happens for me both in desktop Safari and in Mobile Safari on the iPhone. But that's very strange, because their demo works just fine for me on both.
I've banged my head against this for hours to no avail. Does anyone have ideas or suggestions or tips for what I might be doing wrong? Thanks!
I created an test from your provided example (with the addition of the style imports). Simply removing the <nav> elements resolved the issue for me.
I believe your main elements have to be div's. Additionally, you need a class of "current" on the div that should be displayed first.
I don't know if the version you are using requires this, but what I pulled via git a while back requires that all of your main elements be contained in a div with an id of "jqt".
<div id="jqt">
<div id="main-menu" class="current">
<ul>
<li class="arrow">Screen A</li>
<li class="arrow">Screen B</li>
<li class="arrow">Screen C</li>
</ul>
</div>
<div id="screen-a"><!-- ... --></div>
<div id="screen-b"><!-- ... --></div>
<div id="screen-c"><!-- ... --></div>
</div>
<script src="jquery.min.js"></script>
<script src="jqtouch.min.js"></script>