im losing it here. I working on this site and the menu link to differents anchors.. If im on another page the anchor link work properly but if im in the same page (home) do not work more than once.
I double check the urls and i think they are ok.
The live url is greencleansteamwash.com
The anchor links are Benefits, Services and Appointments
My code is something like this
<section id="benefits">
Content of benefits
</section>
<section id="plans">
Content of plans
</section>
<div id="book">
Content of booking
</section>
<ul class="nav-offcanvas">
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
</ul>
Delete the whole URL from the links, just leave the # part.
<li>Benefits</li>
<li>Services</li>
<li>Appointments</li>
Related
I have a Wordpress website I'm working on that uses jQuery tabs to separate information.
My client has pointed out that when a user uses the internal search and clicks on a result, the link does not take them to the specific tab that the info is on.
For example, if there are posters in tab #3 and the user searches for "posters", the search result link will take them to the correct page, but will have tab #1 open by default.
This makes it difficult for users to find what they're looking for. Is there any solution for this, or will we have to just do away with the tabs?
Here's the barebones code:
<div class="tabs">
<ul>
<li>apps</li>
<li>features</li>
<li>faqs</li>
</ul>
<div id="apps">
</div>
<div id="features">
</div>
<div id="faqs">
</div>
</div>
<script type="text/javascript">jQuery(function() { jQuery(".tabs").tabs() });</script>
If you know which tab the content is in:
// To open the third tab
jQuery('.tabs').tabs('options', 'active', 2);
I'd assume that a tab represents a category, so it should be easy enough to pass that to the results page.
I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.
<ul style="font-family:'Ralway', Serif;" class="nav navbar-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>EVENTS</li>
<li>SURRENDER STORIES</li>
<li><a href="http://www.reachoutcelebration.com/#globalstrategy" >GLOBAL STRATEGY</a></li>
<li>CONTACT</li>
<li>DONATE</li>
</ul>
I want to click on "donate" or "contact" links that are from the reachoutcelebration.com/tommy-barnett page and go to the "donate" or "contact" section of this webpage: http://www.reachoutcelebration.com. PLEASE ONLY CLICK THE CONTACT AND DONATE BUTTONS. I have verified they do not work. Clicking donate and contact it seemed to throw me in the middle of the http://www.reachoutcelebration.com site no matter where I but the anchor tags or the id attributes. The above code is revised.
The code on the reachoutcelebration.com page reads as follows:
<!-- Section Header -->
<div class="section-header container-fluid"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->
I already tried Expression Engine Stack over flow:
https://expressionengine.stackexchange.com/questions/38480/expression-engine-and-anchor-tags/38481#38481
Any ideas as to why it not working?
I think all you have to do is match names and URL's for <a name="donate"></a> and <a name="contact"></a> respectively:
<li>CONTACT</li>
<li>DONATE</li>
After much stress and tinkering, the anchors work, but I have to put them in ackward positions at the bottom of the viewport to "kinda" "sorta" go where I want them to go. It works, but it's cumbersome. Not sure what else to do here. guess we can close this.
FYI, the anchor tags I used just have the name in it, hence <a name="donate"> or <a name="contactus">
Add id attr to the div and test and it should work. I saw that anchor tag for donate has the href pointing to #donate but I think there's no div or section on the page with id donate.
<!-- donate id added to this div -->
<div class="section-header container-fluid" id="donate"><a name="donate"></a><!-- SEE ANCHOR HERE -->
<h3>GRAND TOTAL : $521,000</h3>
<div class="section-separator"><i class="fa fa-stop"></i></div>
<p style="text-align:center;">"Multiply" begins with you.</br>Own a piece of the ROC and join us in reaching our city, our region, and our world.</p>
</div><!-- Section Header /- -->
I have navbar like this :
<ul class="dropdown-menu" role="menu">
<li>People</li>
<li>Main Page</li>
</ul>
but when I click on "People" link, it will not position correctly, because I am loading some charts on that page. I have many section with unique id and content is loaded from JavaScript (charts).
<section id="top_something">
<div class= "container">
<h2 class="blue-headings text-center"><b>Top People</b></h2>
<div id="div_something"></div>
</div>
<br>
</section>
The content of a div id="div_something" I am making in JavaScript ...
I have a 10 div's like this on that main_page with unique id. I can see that when I click on a a href="/main_page#top_something" on navbar it will paste me on that section , but as soon as it loads JavaScript it will move me upper
thanks in advance
If your main_page is a directory (which it probably is) then you need to simply include a slash before the anchor name.
People
If you have JavaScript injecting content after the page loads then you will be brought to the appropriate anchor but the page may move because the additional content added by JS will push the anchor down the page. You might consider repositioning the screen to the appropriate anchor using JS after its done injecting content.
I have a pretty average jQuery Mobile app. On the bottom there is a navbar with icons and text.
This is how it should look
but when I tap/click on the page it toggles to this
To save myself some repetition, I've been appending the same footer to each page using this basic script.
$(function ()
{
$("div[data-role='page']").append($("#footer").html());
$("body").trigger('create');
});
And here's the HTML.
<div class="hidden" id="footer">
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Maps</li>
<li>Rules</li>
<li>Schedule</li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
I believe this script is the cause of this issue. Any ideas for how to fix this behavior?
EDIT: In inspecting the DOM I found that a class called "ui-fixed-hidden" is being toggled on the data-role="footer" div when I click.
It turns out that just because my template footer div was nested in another div with "display: none" doesn't mean that jQuery Mobile wasn't using that element. As such, I had multiple footers which created weird behaviors.
I resolved this by moving my template footer to a seperate html file and then loading it in on page start.