i created a video photo library / video library, there i have many rows where i places the icons against video or Image, & because of the length of the page i used the jquery pagination technique, Now i have 2 problems (1) SEO Problem, if anyone search any data that i have on the other than the 1st page, it shows in search engine & when user click on that link it land on the 1st page, not on the relevant page, (2) when user click on the next page, the view will stile on the pagination i want it goes on the top of the page or top of the table,
Link of that page "http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=1"
any one can help me in this situation?
Thanks In Advance.
Have a read of Making Ajax Applications Crawlable as written by google.
In brief: Instead of www.example.com/ajax.html#key=value use www.example.com/ajax.html#!key=value as your scheme.
Then respond appropriately to requests in this format: www.example.com/ajax.html?_escaped_fragment_=key=value
To solve your scrolling issue, you'll want to add just one line of code to pager.showPage(). To scroll to the top of the table, add this line:
document.getElementById(tableName).scrollIntoView();
Or, to scroll to the top of the page, add this line:
scrollTo(0, 0);
For the SEO work, follow wombleton's advice.
See that your url container fragement #pg=1 by default when you point to such link it will move your view there. As an workaround you can write window.scroll(0,0); on your page to always be on top. For your SEO problem it seems like a usability problem which has to be resolved using some design changes. Also doesnot your search results give the url as
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=4
http://funswith.com/Multimedia/Video/Indian-Songs.html#pg=3
i mean the page numbers.
Related
My google fu is currently letting me down so I thought I'd ask here for some help..
I have a page that has a single article on it (url.com/article/article-headline). When you scroll down the page using jQuery it loads the next article and changes the url (url.com/article/next-article-headline).
My issue is, I have a left hand sidebar which has a list of all the articles. What I'd like to happen is to have the current article highlighted. So when you scroll down the page and the next article loads the next sidebar article title is highlighted etc etc.
If you need an example of what I mean you can see it in action on time.com
http://time.com/4010146/smartphones-dinner/ (scroll down the page and watch the URL and sidebar)
I'm really struggling to find what it's called in order to do a proper search. I guess it's something similar to scrollspy but I'm not sure. Are there any plugins that exist for this?
You need to add data-attributes to your sidebar and the article section at the main content. With the help of which you could determine the article title.
Using jQuery then add a class named "active" which would determine the current article is active and style the "active" class later just for the sidebar.
Example: .sidebar-article.active { color: #f00; }
IF you need a solution you need to also provide appropriate HTML structure and jQuery code with the help of fiddle. So that rest of the code snippet we could provide and also not harm your current code base.
I'm trying to build a page where the admin can do multiple tasks from within.
For example after the admin logs in, he will click on a button to either manage the users or view the reports, but the result the result is extremely small view of the page while I'd like the loaded page to fill the entire bottom of the screen:
here is my code:
I looked for explanation on the web but couldn't find any.
Thanks.
The size of the element you're looking at is probably the default size for an object in that browser.
You're putting your file/data directly into an object with type text/html; to be honest, I'd suggest looking into a bit more background information on how to display data on the web using tables and/or grids without actually dumping pure file-info into the client-window.
I fixed the problem by using iframe. Thanks
I am sure the answer to this question has been answered many times. In fact, I've been reading tons of threads regarding this question, but I still have no clue how to go about doing this. If you can help me with a very simple way of implementing the code, that would be awesome. I am a complete newbie at this, and have very little, if not, zero, knowledge of javascript.
I have a simple fixed navigation bar (of about 5 links) on the top of the site I'm currently building, using twitter bootstrap. This is a one-page scrollable website.
In twitter bootstrap, there is a class on the first link. This class is "active". It's there by default.
I'm assuming this is the key to highlighting the links when a user clicks on one of the links in the navbar, ie. when the user scrolls to a certain section on the 1-page website, the corresponding navigation link gets highlighted.
I think I need to add some javascript to get this working. Or maybe I can get this working without javascript?
What do I do? Please help...
If you can get an example up on jsfiddle, that would be great too.
What I need help with specifically:
1) I need to incorporate smooth-scrolling on the website (which I can kinda do, using something I've searched for online, but would prefer to have a complete solution to this including the points below).
2) When user scrolls down or up my 1-page website, the navigation links changes color, according to the section they're in.
3) When user clicks on one of these navigation links, the link remains highlighted while the user reads that section of my website.
4) If I need to use javascript, do I write the javascript at the bottom of my HTML code, above the body tag? Or should I create a new .js file?
5) I need to stress that I'm a complete newbie, and that I'm using the current version of twitter bootstrap.
Ok.
download http://flesler.blogspot.com/
download http://github.com/davist11/jQuery-One-Page-Nav
Call js
jQuery('#top-nav').onePageNav({
scrollSpeed: 1200,
currentClass: 'active',
changeHash: true,
filter: ':not(.external)' // used for external navigation links if any <a class="external" href=""></a>
});
Add id="top-nav" to your nav
Okay, so first some background info: I am trying to embed a webpage within another page. The sub-page is basically a small web application written in javascript and html that takes in several screens of input (radio buttons, text boxes, etc.) and gives a screen with results at the end. Each of these screens can be a different size.
There are two methods I have tried using to do the embedding:
1) Copy all of the html and javascript from the sub-page into the main page and stick it in a div/table/whatever.
2) Keep the sub-page in its own file and embed it using embed/object/iframe.
Using the first method the page behaves as it should; the only real problem (aside from being kind of a messy solution) is that the sub-page I am embedding is actually generated by an external application, and every so often the page is replaced with a newer version. This more or less rules out using the first method as a long-term solution.
Now the second method has its own problems. Since the embedded javascript page changes in height, the frame that is holding it needs to vary in size with it. I'm able to change the size using any of the solutions given here, however these do not update the size of the frame as the user progresses through each screen.
The closest solution I've been able to come up with so far is using a document.onclick handler to catch any clicking which might cause the next screen of the sub-page to come along. The handler pauses for a very short time (to allow the next screen to come up) and then calls the necessary resizing function. However this feels like a very hacky solution, and there is also a slightly noticeable delay during with the scroll bar shows up on the side of the frame when it hasn't expanded yet to fit the new content. I'm thinking there must be a better way to do this.
If the file is on the same server/domain, you could just load it in with jQuery. Here is some jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>
Just change id-of-div to the id of the div that you want the page to be loaded into and change /path/to/page.html to the actual URL to the page. (you don't need the domain of it, just the path to it)
I hope this helps.
If this answers your question, please remember to click the checkmark next to this to accept this answer.
Our webapp allows customers to view historical snapshots of pages on their site. We want to inject a header into the top of the page (something like the digg or linkedin toolbar) that contains data like snapshot time, url, and various other metrics.
We want to present these pages as close as possible to their original state.
So what is the best way to add a header into a page whilst preserving it as best possible?
Potential approaches we have looked at:
Sticking the cached page in an iframe. However a surprising number of sites contain frame-breaking code and we don't want to do anything hacky like trying to stop this.
Add an absolutely/fixed positioned div to the top of the page with a high z-index. The problem with this approach is that a) some of your styling may get over-written, b) javascript that runs on DOM load can screw around with your html/ccs (e.g Plone-powered sites add classes and styles to all tables for example) c) the varying DOCTYPEs or lack-of can screw up our css (yes IE, looking at you).
Adding an absolutely positioned iframe to the top of the page with a high z-index. This get around any of our html/css being clobbered or amended. However again we have DOCTYPE issues - we'd like it statically positioned and IE7 doesn't support this in Quirksmode.
Any thoughts? Thanks
Why would you want to use a banner with a height of 100px? I see some other possibilities:
Can't you use a link to a popup or page with more information?
Or make it pull out if you hover it.
That way it will not obscure a large percentage of the site.
If you control the links that lead to an archived version, you could put in a proxy-url. Let that URL open the right html in a frame. This is much like google cache:
show a list of links that look like pagearchive.html?version=43234324
let pagearchive.html be a html page with an iframe that starts 100px from the top. the version=43234324 part can let you open the right url in the frame.