I have built this website so far in Wordpress.
I created the navigation links on the left manually by entering this code in the Wordpress Left Sidebar widget:
<ul>
<li><h5><a class="page page-id-35 page-template-default logged-in admin-bar no-customize-support tc-fade-hover-links tc-l-sidebar tc-sticky-header sticky-disabled tc-transparent-on-scroll no-navbar skin-green tc-side-menu tc-sticky-footer sn-right" href="?page_id=35/" >This is page 1</a></h5></li>
<li><h5><a class="page page-id-39 page-template-default logged-in admin-bar no-customize-support tc-fade-hover-links tc-l-sidebar tc-sticky-header sticky-disabled tc-transparent-on-scroll no-navbar skin-green tc-side-menu tc-sticky-footer sn-right" href="?page_id=39/">This is page 2</a></h5></li>
</ul>
The long class names that you see there I got them by looking at the source code for each of the two pages.
Then, in the CSS stylesheet, I added this:
.page.page-id-35.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right a.page.page-id-35.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right,
.page.page-id-39.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right a.page.page-id-39.page-template-default.logged-in.admin-bar.no-customize-support.tc-fade-hover-links.tc-l-sidebar.tc-sticky-header.sticky-disabled.tc-transparent-on-scroll.no-navbar.skin-green.tc-side-menu.tc-sticky-footer.sn-right
{
background:red;
color:white;
}
I was expecting the links on the left to be highlighted when their corresponding page was loaded on the browser. The pages load fine, but there is no highlighting. Anyone knows what I am doing wrong? Or is there any other technique to highlight the navigation menu for the current page?
Related
I have an angular page that has a structure like below:
<div id="topSection">
top section
</div>
<div id="bottomSection">
bottom section
</div>
From an external page (non angular), I'll need to provide a link to navigate to the bottomSection of the page. I looked at $anchorScroll() and it only appears to work for links within the same page. Thanks
Normally you can specify an anchor on a page such as "index.html" with code such as:
Link Text
You can then jump to that anchor when the page is displayed by including it in the path:
http://example.com/index.html#anchor
I am developing a landing page with the Yesod Haskell framework, and would like to integrate this functionality into my landing page.
Currently I have a navigation bar with several links at the top of the page. The navbar is specified with hamlet as:
<div #navbar .collapse.navbar-collapse>
<ul .nav.navbar-nav>
<li :Just HomeR == mcurrentRoute:.active>
<a href=#{HomeR}>_{MsgHome}
Note that the href is specified with "HomeR". "HomeR" is defined in the Yesode "config/routes" file that lists all of the paths for the site.
It looks like:
/ HomeR GET
/settings SettingsR GET
Here is my problem. I can add an anchor to a section of the hamlet specification, then modify the href on the title bar to jump to that section such as:
<li :Just HomeR == mcurrentRoute:.active>
<a href=#{HomeR}#section0>_{MsgHome}
However this is annoying for several reasons. First the anchor is not checked for validity at compile time like the other paths.
Second normally the current page is highlighted on the navigation bar with the code:
<li :Just HomeR == mcurrentRoute:.active>
With this approach I can highlight for individual pages, but not individual anchors within a page.
Is there a way to insert safe anchors into the Yesod config/routes file. Or is it only possible to have a route with actual pages. This would allow jumping to sections of the page in the navbar, then highlighting the section that was clicked on. If this is not possible is there a better way to deal with page anchors in yesod?
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.
I want to script a website which will have a menu on the left side:
when clicked on an item on this menu the site slides up or down (but there should be no option to scroll up or down).
Yet now when the user interacts with something in the webpage (not the menu) the site slides right/left.
So there are no reloading of the site!
For example the menu contains home and account.
if the user is on home and clicks on acount the site slides down (but he should not have the option to scroll down by himself)!
Now on account when he clicks on a button named "Edit Account" the site slides (but not the menu) right to a page were he can edit his account no when he hits save the site slides back to account
With site I mean an inner pre defined box of course the header and footer don't move!
Here is a small example of a script I wrote on jsfiddle.
I know that this will look very cool but I don't want that the user to need to sacrifice website loading speed just for a cool sliding effect!
Now my question is: would this be good programming practice?
Right if i believe right you want something like my website "www.ohlookawebsite.com" what you will need to do is use jquery for .show and such to create the effect so for example
<div id="navagation">
<div id="home" onclick="homeClick()">Home</div>
<div id="about" onclick="aboutClick()">About</div>
<div id="account" onclick="accountClick()">Account</div>
</div>
That would be the navagation then you can set out the <div>s on the page with the ones that shouldn't be shown yet with style="display: none;" such as;
<div id="boxHome">
Welcome to the home page!
</div>
<div id="boxAbout" style="display: none;">
Welcome To the About Page!
</div>
<div id="boxAccount" style="display: none;>
You're account info!
</div>
You will need to the use jquery and javascript to show different "Pages"
function homeClick(){
$("#boxAbout").fadeOut(500);
$("#boxAccount").fadeOut(500);
$("#home").css("color", "green");
$("#boxHome").delay(500).fadeIn(1000);
}
You can see an example of this here: http://jsfiddle.net/gM4hB/4/
Hope this helps