I'm relatively new to HTML so maybe there's been a really blatant solution I've been missing. But I'm making a single-scroll website (with bootstrap) with a very basic navbar for people to jump to the section they want.
The navbar is currently an ul with a background image that appears from the right on hover.
I've followed various tutorials; created the anchor points and id tags, yet nothing seems to happen when I click on the navbar buttons. And I feel like I'm missing a fairly obvious solution here. I've shifted the position of the anchors around, and tried a few variants in both html and css I found online but none seemed to have solved it for me. I've tried it on other browsers, so it isn't a browser issue.
Here's the navbar code:
<div class="container-fluid menuholder">
<div class="menu">
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
</div>
</div>
and here's a relevant part of one of the sections it's supposed to automatically scroll to:
<div class = "container">
<div class="row">
<div class ="chap1title col-md-3" id="chap1">
<h3>Chapter 1:</h3><br><h2>The Storyteller</h2>
</div>
</div>
</div>
Aaaand here's some images of the menu and an example of where I'd like the Chapter 1 button to scroll to
Frontpage
Navbar
Where I'd like it to scroll to
Thank you so much in advance!
It seems like, your link is not valid, you are adding menutext inside the href which should actually take the link or the id of the anchor element
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
It seems like menu text is a class name, which should be added in the class
Related
I'm using Wordpress 5.2.2 with Newspress Extend theme as the parent.
I restored the default settings of the theme in Appearance --> Newspress Options in an attempt to fix something unrelated, and lost the custom html/inline css that floated the advertisements, one left and one right to be sandwiching the logo. Oops. I tried to guess the replacement code based on my very limited knowledge of html/css and it's rendering them above not only the logo, but the top menu as well. I know this change can be done in this section because I'm just trying to restore it to what it was from the previous developer. Help would be greatly appreciated.
Appearance --> Newspress Options --> General Options --> Custom code within Head area (all pages)
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery" style="float:left; max-width: 25%;">
<img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"/ style="float: right; max-width: 25%;">
custom css screenshot
logo screenshot in Newspress theme's custom interface
page in question
Your ads are sitting outside of the container div. They're actually sitting above the site's metatags at the moment. CSS is a powerful tool, but it shouldn't be used to over-correct or mask improper HTML structure. You need to stuff your ads into their respective divs.
This is how your HTML should look, specifically for your header div:
<div id="header">
<div id="header-content">
<!-- Site Titele and Description Goes Here -->
<div class="topadlft"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/FLO_16975_Education-Print-Ad-Ebony-News-Today_10.625x10.445-GLOBE-C.jpg" alt="fla lottery"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
<img class="site-logo" src="http://ebonynewstoday.com/wp-content/uploads/2017/04/Ebony_LOGOHorizontal_Color.gif"><h1 class="site-title-hidden">Ebony News Today</h1>
<h2 class="site-title-hidden">"The Heartbeat of Our Community"</h2>
<div class="topadrt"><img src="http://ebonynewstoday.com/wp-content/uploads/2017/10/SEH_EbonyNewsAd_OCT2017-1.jpg" alt="southeastern honda"><img src="http://ebonynewstoday.com/wp-content/themes/newspress-extend/images/ad3.png"></div>
</div><!-- header-content -->
<div class="heading-date">Friday, October 4, 2019</div>
</div>
You will also want to turn off the "display:none;" selectors in your CSS file for the "topadlft" and "topadrt" classes. Also remove the inline styles from each ad image. You're going to want the div classes that contain the ads to do the heavy lifting here. Inline styles will just cause further complications.
Once you've addressed the above, you should wind up with something that looks like this:
Fixed Header Image
I have a drop-down like so:
<div class="dropdown">
<select>
<option ng-repeat="i in sc.cl" value="{{i.deptname"}}><a ng-href="#{{i.id}}">{{i.deptname}}</a></option>
</select>
</div>
Basically, the dropdown element's name is inside an array and there are divs inside the html having the id as i.id like this:
<div class="right-bar">
<section class="contact-block" ng-repeat="i in sc.cl" id="{{i.id}}">
<div class="description">{{i.deptname}}</div>
<div class="inner-block">
<div ng-repeat="j in i.cgs">
<img class="vertical-image" src="frame.png">
<img class="horizontal-image" src="mobileframe.png">
</div>
</div>
</section>
</div>
whenever I click the dropdown element, I want it to scroll to the particular section. But nothing happens when I do so. Why does this happen? And when I tried inspect element in chrome, it doesn't even show the tags in the ng-repeat dropdown.
You should use Angular's $anchorScroll.
Please, take a look at this similar question: How to handle anchor hash linking in AngularJS
Uhhm, my suggestion seems completely unrelated as I'm a dummy at AngularJS. But I have a solution to scrolling to a section using jQuery. You could simply give the section an ID and animate scrolling to that point on click by calculating the top offset and animating the scrolltop to that point...If you want me to show you the code, I'll gladly do so...:-) (Oh and I know this should be a comment because it doesn't directly answer the question, but my reputation's 13 so I can't comment)...
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'm making a quick site and all the content is on one page, and I'm using a small menu with anchor links to make navigating to a certain part faster for the end user. I have two anchor links that work fine (About Me, My Projects) but the "Contact Me" link jumps to a random part of the "My Projects" section.
A preview of the site is available here : http://dev.cuonic.com/cuonic.com/
I have checked the IDs, they correspond, there is no random "contact-me" ID lying around in the "My Projects" section, I've changed the ID, still happens, and this in both Firefox and Chrome. Whats going on ? Any help is appreciated :)
All of then content within //*[#id="content"]/div[2] is floated to the left. Floating elements don't affect the height of their containing block-level elements. If you add this:
#contact-me { clear:both; }
to your CSS somewhere, the <span id="contact-me"> tag will reposition to where you actually want it. Your page still isn't long enough for the contact form to go all the way to the top (at least on my monitor), but it will still scroll to the end of the page.
Change this section of code:
</div>
<span class="anchor" id="contact-me"></span>
<h1>Contact Me</h1>
<div class="text">
To this:
</div>
<h1>Contact Me</h1>
<span class="anchor" id="contact-me"></span>
<div class="text">