Scroll webpage based on url - javascript

So I'm building a website that's basically one page but the links at the top just scroll to a different location on the page. Here's an example: http://evanstoddard.site90.net.
If I were to give a link to, in the example above, the about page I would simply give that person a link that looked like http://evanstoddard.site90.net/#about and that link would go to the about section of that website.
Let's say I wanted to do the same thing except instead of adding the '#about" I would use /about. So it would end up looking like http://evanstoddard.site90.net/about but do the exact same thing as #about. This would be better for SEO I'm assuming.
Any help would gladly be appreciated. Or even a "you're crazy... it will never work" ;)
Long story short, I want to display 'http://evanstoddard.site90.net/about' and have it do the exact same thing as 'http://evanstoddard.site90.net/#about'

You're not crazy at all and it will work :)
You should edit your .htaccess so that everything after your domain would be sent to the same page (index.php I assume) as GET params and work from there.
Now you can get the URL on page load using javascriptO OR "digest" the parameters in PHP and output it to the client side.
jQuery scrollTo might help you with scrolling to whatever you need.
That's how it might be done in .htaccess (that's how it's done in Kohana):
RewriteRule .* index.php/$0 [PT]
And this should help you with scrolling.

Related

HTML sub-pages (using a domain)

I've been thinking about purchasing a domain and putting a website on it, but I'm not sure how I would add sub-pages. I'm probably using the wrong words, but I'll try to explain what I mean.
For example, the main page is stackoverflow.com. When you go to another page, it goes to stackoverflow.com/questions. Is this achieved using Javascript, or is it set up manually where you link an HTML file to the sub-page?
I'm not too sure where to start here, so any help is appreciated.
One of the simplest ways to set up a website with multiple pages is to create a folder for each page and an index.html file for each page. These can then be linked together using HTML anchors or JavaScript code. For detailed instructions on how to do this, I suggest checking out tutorials from W3Schools like how to make a website

Creating links without actually putting the whole link in <a> tag

I've been wondering how do other websites do their navigation links.
What most beginners like me do is put the whole link inside the tag
News
or something like this:
News
But I've seen a lot of websites lately that does this:
News
and then the browser address bar display it like this
http://www.example.com/news/
First I want to know how do you call this method? and what are the advantages of doing this. and lastly, how does it actually work?.
I want to research about it but I don't know what to type on google. I did try a lot of keywords I could think of that relates to this but nothing comes close to what I'm looking for
There's 4 basic link types:
self-link: href="". This is a short-hand form of "link to yourself". You'll see it used for in-page anchors, such as href="#top" and the link.
relative: href="news.html". Clicking on this will try to load a news.html page in the SAME directory as the page that the link is contained in, so if you're on http://example.com/foo/bar.html, you'll be trying to load http://example.com/foo/news.html.
local absolute: href="/news.html". This will try to load a news.html page from the document root of the site. If you're on http://example.com/foo/bar/html, you'll be trying to load http://example.com/news.html. The leading / is what makes this a local absolute instead of a relative path.
full absolute: href="http://example.com/news.html". A full-blown url, which can point to a completely different site if need be. It CAN be point to the exact same site you're on, but essentially it's a "go over there, no matter where over there is".
This has to do with HTML, not JavaScript. Your first snippet uses an absolute path. The second two use relative paths. For more information, read this: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The best practice (for me?) is the first one, you need to write all the URL for the most readable code..
The first and the 3rd link are the same if you are on the same domain name..
The 2nd is different, if you are on www.example.com/index.html you'll go to www.example.com/news.html..
But if you are on www.example.com/categoy/index.html you'll be redirected to www.example.com/categoy/news.html and not on root directory.
But I don't understand why you talk about /news/ directory ?
Relative URL's will probably get you some results.
news.html will navigate relative to your current location
/news.html will navigate relative to the root domain name
For example if your current location is http://example.com/sub/ :
href="news.html" will get you to http://example.com/sub/news.html
but
href="/news.html" will get you to http://example.com/news.html
See also http://www.w3.org/TR/WD-html40-970917/htmlweb.html#h-5.1.2

Change URL in link after code has been output

So, I have a dotNetNuke site that was developed by someone else. These developers are not available to respond to requests as fast as I need in this case, and I have to fix something on a customer's site ASAP.
Somehow, the Home link in the site's side nav is pointing to the Contact Us page. Not sure how this was done, but I have limited access to the backend of the site (what's there is a mess anyway).
I'm looking for a way to change the URL of the Home nav item only from http://www.mywebsite.com/subdir/ContactUs/tabid/2530/Default.aspx to http://www.mywebsite.com/subdir/. I've tried swapping out the text with JavaScript to no avail. Does anyone have any ideas?
Any help would be greatly appreciated. Let me know if you need more info.
As lostPixelx suggest and seeing it kind have some hack that DotNetNuke do to the the link work. Please add the following to a javascript
$(function() {
$('#tddnn_dnnMENU_ctldnnMENU2529').click(function(){self.location="http://www.mydomain.com/subdir/"})
});
I would recommend you go in to the PAGE SETTINGS for the HOME page via the Admin/Pages (page management).
From there, on the last "tab" in the settings, towards the bottom, you can find a "URL" or "Navigation" Section, make sure nothing is selected there, then save the page settings.
Running this Jquery code will remedy your issue... but it seems like your site has some issues that you should address, not bandage with JS.
$('h1.logo a').attr('href','http://www.mydomain.com/subdir/');

jQuery 1.7.1 slider not working except on homepage

I have tried to place the slider on every page on this website: http://atripathi.com
It works on the homepage, but doesn't work on any of the other pages (About, Services, etc.)
I know it's probably an easy fix, but I can't get it at the moment.
Thank you for any help or suggestions!
Looks like the original suggestion above is correct. I'm seeing slider javascript includes at the top of your homepage that aren't on the other pages.
Generally, a good way of troubleshooting is to make copies of both pages, index-c.php and about-c.php perhaps, and start removing everything that isn't pertinent to the trouble you're having (other HTML, css includes, etc.) until you get down to only the slider on the page. Once you've done that, you might notice that the one page is slightly different than the other, making it work. You can copy back and forth until it does.
The other possibility is that there's a relative path problem somewhere, because your one page is inside a folder (though I'm guessing you have a .htaccess redirect to a root folder page)? So if all else fails, move the reduced about-c.php to the root folder and see if that then works. If so, you know it's a path problem.
Hope these suggestions help.
I see that jQuery is being included on all your pages but the cycle plugin is only included on the home page. You should be able to update your template(s) to fix this.

jQuery+ AJAX + Help Hiding This Content

First of all: I hope the following question is not too generic.
I have a small problem and I cant think of a good solution and I was hoping some1 here is able to help me.
This is my situation:
I am using AJAX to dynamically load pages. My main site is index.php and once I click on a navigation link, the AJAX script replaces the content of index.php with new content and adds a hash tag to the URL. For instance:
I click on the link to about.php, the script adds #about.php to the URL and loads content from about.php into index.php. It works great :) However, there is a small issue that I would like to resolve:
Lets say we start by navigating to index.php#about.php directly - this means the content of index.php is visible for 2,3 seconds and than gets replaced with content from about.php. And I would like to avoid that.
I came up with a few ideas, but they are all not really great:
1) Hide content -> than make AJAX call -> on completed AJAX show content again
Downside: The content is still visible for a second.
2) Hide content with CSS and show it after AJAX call
Downside: This would work perfectly, but users without Javascript (and the GoogleBot) will see an exmpty page only.
3) Use an empty index.php and put the content of it in main.php and automatically load main.php via AJAX on page load.
Downside: Would work too, but again, users without JS and GoogleBot will just see an empty page when the visit index.php
Thats all I can think of and all three solutions are not good, because I am worried the SEO value will dramatically decrease when I have an empty index.php (I could accept that users with no JS get nothing to see).
p.s. I read somewhere that when you have display:none in an external css file and block it with robots.txt, GoogleBot wont know the difference, but I am worried thats maybe not the case? Any1 got some experience?
Edit: I guess my whole question comes down to this:
Do you think hiding the whole content of index.php with CSS (and than show it with JS), will be a huge no-go for SEO or will it be okay with GoogleBot (afterall the content is still in the source, but not visible to the user)?
If you used query strings instead of the hash you could have index.php load the correct content at the server level.
A plugin like history.js can help you push URLS to the browser so that you still get your ajax browsing.
Wow where to start...first of all the page 'blink' I'll call it is 2-3 seconds for you but it is completely dependent on the users computer, how fast it executes the javascript, and how fast the AJAX call returns so you could have a much larger delay.
Second I wouldn't worry about Googlebot seeing any of the ajax content. While it's true googlebot does try to fiddle with some javascript it won't make the ajax call like a normal browser would. I'd be very surprised if Googlebot ever saw any of your Ajax loaded data.
Googlebot does a fantastic job of figuring out what content is delivered via html/css to a user when they visit your page. It also figures out if something is displayed or not and does a good job of deciding if that content is just stuffing or is something that really matters.
You're worried about what someone without javascript will see when the entirety of navigating your site is based in javascript. This doesn't seem to reconcile.
You've got PHP available. My suggestion is to forgo the AJAX stuff you're trying to do and do it in PHP. You can just as easily script the same behavior in PHP as you can in AJAX.
SEO NOTES:
If you're looking for solid SEO results I suggest making the static (non-javascript version) page as SEO friendly as possible. I like to 'pick the low hanging fruit' like making sure the page has one and only on H1 and that it has the most important keywords in it. seomoz is one of the best sites I've found for seo information.

Categories

Resources