I'm hosting my personal website on github, and I'm using the navbar from Twitter's bootstrap to build the sidebar:
What I want to accomplish is: When a user click on a section (e.g. Education), the page will jump right to that section so that the user doesn't have to scroll down.
The problem is: When I go to my webpage using HTTP and click on any sections, a page jump doesn't happen. However, if I use HTTPS, the problem is solved.
I tried adding the ID at the end of the address to force navigation to the education section, like this: http://huyennguyen2302.github.io/#education and it works.
I'm not sure what's happening here. Any help will be appreciated. Thank you!
I'm not sure why that doesn't work, can't seem to get it working either. However you can accomplish the same effect using jQuery. Change your link to
<a class="ui-link" id="educationButton" href="#"></a>
Then in your script part add
$("#educationButton").click(function() {
scrollTop: $("#education").offset().top
};
});
With jQuery you have more possibilites than just HTML, for example animate the scroll
$("#educationButton").click(function() {
$('html, body').animate({
scrollTop: $("#education").offset().top
}, 2000);
});
etc. Hope this helps
edit: Forgot to mention this second method, if this is your final host and you have no intention to move, you can fix it more easy by forcing secure connection. Simply by changing your
<a class="ui-link" href="#education">
to
<a class="ui-link" href="https://huyennguyen2302.github.io/#education">
this will also work.
Related
I have a blog-site, which is full of text, therefore i use sections.
my code:
Test
....
<h3 id="test">Test</h3>
When I click on the anchor, it works, but if I use the URL, i cannot get to the section, only to the top of the site.
What I want:
mysite.com/site1:
<a href="/site2#test > Test</a>
mysite.com/site2
<h3 id="test"> Test </h3>
Why does it not jump to the section?
Have you tried using two # for the anchor?
<a href="/site2##test>Test</a>
It seems Chrome sometimes has it's issues with anchor links and this may help (at least works on my machine)
(possibly related to Anchor <a> tags not working in chrome when using #)
One way to solve this might be using window.location in javascript
<script>
function goToSite2Section() {
window.location = '/site2#test';
}
</script>
Test
I really feel like this is a therapy because I wouldn't post here if I wasn't seriously struggling. I can't figure out what's going wrong but my menu title and icon seem to start overlapping randomly when I switch views. In addition, sometimes even the main content in the view disappears making the app useless.
I cannot click on the icon once this happens.
Screens:
in my menu.html, I believe this is the relevant part
<ion-side-menu-content drag-content="false">
<ion-nav-bar align-title="center" class="header" ng-show="isInApp()">
<!-- Hamburger Menu Button -->
<ion-nav-buttons side="left">
<button class="c-hamburger" menu-toggle="left" ng-class="{'is-active': isActive === true}">
<span>toggle menu</span>
</button>
</ion-nav-buttons>
<!-- Settings -->
<ion-nav-buttons side="secondary">
<img src="icons/settings.png" alt="Settings Icon" class="nav-button-icon" ng-click="goToSettings()" ng-class="{'settings-button-is-active': settings_isActive === true}" ng-if="isUsersOwnProfile()">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainView">
</ion-nav-view>
</ion-side-menu-content>
I then define the view name in separate template files like so
<ion-view view-title="CMON NOW">
Any advice what might be happening here? I tried copying laborously the same menu code into each view and defining the view there as well through ion-nav-title but the result was the same.
Thanks
The original question was posted on the Ionic forum. Since then, I have removed all but one ion-content elements as I found a similar question with the marked answer saying to not ddefine new ion-content directives inside of my view html, but no luck still.
I had a similar problem with an app I'm developing. The title alignment was initially working on all pages at app launch. I have the title alignment set globally with
$ionicConfigProvider.navBar.alignTitle('center');
Found from the ionic documentation: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
The default value should be centered anyway.
After some long hours trying to figure out this problem I noticed that the title alignment problem always started with one particular page in my app. After visiting this page the title alignment was wrong randomly - not even always happening and happening in random pages of the app. I noticed in the development tools console that I was getting an error in this particular page (with $ionicNavBarDelegate stuff). After fixing this error the title alignment issue was fixed.
So in your case I would make sure there are no other errors in the code itself and this could fix and hopefully fixes your problem.
This is just a long shot and might not be the case in your app but hey, it could help debugging this problem for you and hopefully you get it fixed.
EDIT: Also came across this discussion which might be a cause to the problem and plausible fix.
https://github.com/driftyco/ionic/issues/2881
From the discussion I made a solution which ultimately solved the issue.
$scope.$on('$ionicView.afterEnter', function (event, viewData) {
$timeout(function() {
$ionicNavBarDelegate.align('center');
}, 100);
});
Try it out! Unfortunately this seems to be an angular issue rather than a ionic problem.
SECOND EDIT:
If nothing else helps you can disable the translate3d css attribute which is used to animate in the titles since it seemed that this was sometimes broken in my app. (there could be a better solution to disable the animation but I did not investigate since I was in a hurry with the fix). The css:
.title {
transition-duration: 0ms !important;
transform: translate3d(0px, 0px, 0px) !important;
text-align: center !important;
}
This ultimately solved the problem for me.
Ionic link for doc
http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
You can set it using application config
appname.config(function($ionicConfigProvider)
{
$ionicConfigProvider.navBar.alignTitle('center');
});
You can use z-index property, for you button.
.button {
position: relative;
z-index: 9999;
}
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?
Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
Cheers!
I think the problem is resulting from the anchors with no contents that you are using.
Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
I'd try sticking the fragment identifier in the actual renderable entity such as:
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
I got problem in iphone for links with fragments, having
TYPES OF INFORMATION WE COLLECT, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
window.scrollTo(0,$('#info').offset().top);
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
GO TO SPONSORS
I don't know what standard your page is trying to conform to, but it is full of errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Some of them so severe, for example:
Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.
that the validator gives up. Contrasted with a page like gnu.org
http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0
You should be pleased that the site renders at all.
I had a problem with scrolling to the wrong position and I fixed it by disabling the Development Tools panel in Chrome :) Apparently Chrome calculates the position incorrectly when DevTools is open.
I would like to preview the content of a div with imgPreview
I tried to do this:
<div id="five" style="background-image:url(1.jpg);"></div>
In script:
<script type="text/javascript">
$('div#five').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
I would like that when it passes over muose make preview of 1.jpg
Help me! Many thanks, ando sorry for my bad english! :).
From "imgPreview demos" # james.padolsey.com:
The image preview shows up in a tooltip-like box appearing alongside
the user's cursor when hovering over a link. The plugin is entirely
unobtrusive; it does not require any hooks to target specific links
(no non-semantic classes); it will automatically detect the anchors
that are linking to images and will only apply the preview effect to
them.