How to move to the foot of the web page dynamically - javascript

I have been asked to move the focus of the web page to the bottom of the page from the click of a button. I've tried using Focus() but that doesn't seem to work, which I think is something to do with the Postback.
Does anyone have any other ideas how to do this?

Add an anchor (A tag) just above the footer (or at the top of the footer content), and assign a name to it; e.g.
<a name="footer"></a>
This will not be visible. However, it allows you to add #footer to the URL and the browser will scroll down to it. For example, add another link:
see footer
Test how it works on this example:
How to move to the foot of the web page dynamically
Notice #9115063 in the URL above.
If you look at the source of this page, close to the top of this answer, you'll find this:
<a name="9115063"></a>

Related

Set a link equal to the last clicked link

I am trying to make a link that will return to a specific link that equals that of a link clicked on a main page.
Such that:
<a href="link.html" onclick="set this link to memory" target=home></a>
<a href="a memory of that other link" target=home></a>
The idea is that pages within an iframe can have links that users can follow while staying on the main page and the ability to return to original page that was inserted on that frame from a central link on the main page.
Thanks for everyone's help. I researched this quite a bit and tried to use javascript and jquery but I am far too novice to make anything work.
Only try this:
<a href="javascript:;" onclick="window.memLink = ['link.html', this];" target=home>Copier Link!</a>
<a href="javascript:;" onclick="this.href=window.memLink[0]; this.onclick();" target=home>Dynamic Link!!</a>
Try this Online!!
So basically I developed a workaround. Instead of using the reload the frame function ,which stops working once you navigate away from the src, I link to another page that contains a frame with the contents being the desired src. This way they can navigate to that page within the frame as far as they want and will always be able to return to the original page by refreshing the parent frame with the link I provided. This should work for now. However, this means that for every page I do this with I will have to create 2 pages to host one desired link within my pages that are to be navigated within iframes. Hopefully there will be some simpler way to do this and hopefully it won't cause problems on mobile platforms when I start designing the pages for that purpose.

how to disable auto scroll

I have embedded a ecwid store in my webage via iframe.
Whenever I load the page, ecwid automatically scrolls to the iframe, instead of the top of the page.
As seen here (ecwid: how to force the scroll position), ecwid's solution for this is to add the following DIV inside the {body} tag:
<div id="ecwid_product_browser_scroller"></div>
I've made a fiddle to try to make it work, but it won't happen. I do know that people have used the same code to force the bar not to scroll down, so I must be doing something wrong.
Here's the fiddle: fiddle
Notice that the store is forcing the bar to scroll down. I would like it to stay at the top so customers actually see the banner.
UPDATE:
Still don't know why the DIV does not work here fiddle. What am I missing?
We did manage to make it work inside the new fiddle but it does not work in my website
I think u want to do this
add jquery as i have done
http://jsfiddle.net/v3g20qxd/7/
I have added the pageYOffset and scrollBy in this

onclick = window.location anchor jumps to top

I had a complicated situation that involved a variety of sliders that just wouldn't work as tabbed content even though it was designed that way, on a one page wordpress site.
The site is here: http://carubba.brandconstructors.com/ and the "project" section is the issue.
So I made different wordpress page templates for each category. I used onlick=window.location to navigate through the so-called tabs. However, when you click through to the next tab, the page jumps to the very top for a brief second then back down. Is there a way to make this not happen and go straight to the anchor location? I tried adding return false, and javascript:void(0) and that didn't work either.
Here is the code for the links:
<ul class="projects-cat">
<li>Commercial</li>
<li>Marine</li>
<li>Institutional</li>
<li>Civil</li>
<li>Specialty</li>
<li>Residential</li>
</ul>
Any help would be awesome.
EDIT*
This is in the footer:
<script>
$(document).ready(function() {
$('.projects-cat li a').click(function(e) {
e.preventDefault();
});
});
</script>
No, the browser is always going to jump down as it renders the page and calculates how far down to move.
You should stay on the same page, and either load all content, and hide and show as needed, or load the content for each page via AJAX.

Can I jump to anchor / tab using OnClick?

I thought this one was easy but I'm banging my head on the jumping part. I have a page, on this page I have tabs, I want to click on the 'read' link so that it (1) opens the tab and (2) jumps to that part of the page so user can keep reading. My code:
<a onclick="$('a[href=#tab-read]').click();">Read</a>
Like I said, works just fine, opens the tab I need but doesn't actually make the jump to it? I still have to scroll down the page to get to the content area.
Try this out, you can force the window to go anchor tag, or change up the selector to go to the desired element :)
$(window).scrollTop($('a[href=#tab-read]').offset().top);

Seamless page loads

I've seen some similar questions about this around here but I didn't see anything that might be able to help me here. I am making a web site and I want each page to fade in on load and fade out when someone clicks a link. I have that down with jQuery but between the pages there is a white flash before the pages load. I tried moving around my javascript but in some cases the page didn't load correctly. I'm a bit new to this so I may need a bit of explanation on any possible solutions.
Here is the live site:
http://codyshawdesign.com
The HTML is valid in 4.01 Transitional. I've heard about something like Ajax or pagination but I am unsure how to implement those or what I would have to do to put it in my site or if it would even be the most ideal solution. Thanks for any help!
Shouldn't you only update a portion of a page, not the whole page? Now you have many full scale pages with different file names. The page address changes so the whole page is loaded. It's like refreshing the current with ctrl+r/cmd+r page and that isn't very ajaxy.
One solution would be to have a master page which contains all of the common elements between pages such as header, footer and navigation bar. On that page you have a div (or some other area) where you load information dynamically from a different file. What info is loaded could be determined with GET variables via anchor tags or ajax form buttons.
See for example this link and it's demo.
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
It's pretty basic but it demonstrates the idea not to load the whole page but only a portion of it. Add some styles and you're ready to go.
Sorry if this doesn't help. Maybe there is a way to refresh the whole page without the white flash. Easy solution would be to change the background color to white but then again, it wouldn't be very ajaxy...
With do pagination you would have to return all pages right when the the user visits your index.php and then you would use javascript to show and hide the right divs as the user clicks the links in menu, that's not good in your case, it'll make the user wait for the entire site even if he's not willing to look at all of it.
AJAX seems the right way, and u can easily implement it with jQuery load method. Just to get you started:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#pageContent").load($(this).attr("href"));
);
});
This should cause all your links to replace the content of the pageContent div with the content returned by the link without flashing the screen.

Categories

Resources