Develop Reference

Anchors with dynamic HTML page

I have a website on which comments are loaded via AJAX. I would like to create some links that point to some specific comments.
I have tried both:
<a name="comment-123"></a>
<a id="comment-123"></a>
It only works when the link #comment-123 is called from the same page. If called from another page, the page displays at its top.
Maybe its because the content is loaded after with javascript?

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.

jQuery tab with multiple web forms

I am trying to navigate multiple web pages using jQuery tab like below
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>
this is working fine, when I navigate through tab click. But, if any post back happens within the pages, they are popping out of the tab(with out tab). I tried using the tab in a Master Page, it is showing the tab properly in Master page, but showing the ul markup again in the child pages.
Since I have lot of condition checks in every page, I am trying with separate pages, rather than putting everything into one single page.
Currently I am using User Control as the menu, to navigate between these pages. I am just curious to try the same with jQuery tab. Can anyone help me out to resolve this issue. Thanks in advance.

Because Your web forms are targeting the same master page (this result in render the whole page including html and head... tags)!
So, to solve this issue, you need to replace webforms by partial views (as of MVC) or simple user controls (as of WebForm) or webForm not having a master page, nor html tag
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>

Preventing page from going to the top when using anchor on an external page

I've spend hours trying to find a solution for this without any success. There are similar issues/solutions I've found but nothing seems to match the problem I'm having.
I have some external links on my page that contain an anchor tag. When clicked and the new page opens the browser goes to the top first then it goes to the actual anchor so the viewer can see an unpleasant jump on the page.
I'd like that when you click on the link, it takes you to the external page, straight to the anchor without going first to the top of the page.
<ul class="secNavSubPag">
<li class="aboutSubMenu">our story</li>
<li class="creatTeamSubMenu">creative team</li>
</ul>
The page that contains the anchor has this:
<a id="offsetAnchor"></a>
I haven't done this before so maybe I'm doing it wrong but any help is appreciated.
You can see the page here:
http://arthurscatering.com/devOct13/about.php
The links are in the Secondary nav, bottom left. The links are "our story" and "creative team"
Thanks again :0)

jQuery Disable Link until page load

I have a jquery pop-up window attached to a link. If the page is not fully loaded (i.e. the .js files) when the link is clicked it opens in the browser window rather than a pop-up.
I was thinking of disabling/hiding the link until the page was loaded.
What would best practice be for handling this scenrio and have you any code examples?

First place your link in div section and make that div hide
<div style='display:none' id='LinkId'><a href=''>click</a></div>
Now write this code in head section
<script language="javascript">
$(document).ready(function() {
$('#LinkId').show();
});
</script>

Actually this is IMHO a perfect example why assigning event handlers directly in the HTML code is not necessarily a bad thing, despite what many people say.
If you use Link it there will be no gap between visibility of the link and the time you can use it. It improves usability, because the user don't need to wait for your page to load completely and still use the link the moment he sees it.

I had the same issue and here is how i solved it.
I had to create one dummy link in addition to my real link i.e
<!--fake link is visible by default-->
<li class="li_1">
<a class="dropdown-toggle" href="my_real_link_not_popup.html">Compose</a>
</li>
<!--original link is hidden with the hidden class by default-->
<li class="li_2 hidden">
<a class="dropdown-toggle ajax-popup-link_write" id="write_main_a" href="my_real_link_is_popup.html">Compose</a>
</li>
And my script goes thus:
$(document).ready(function()
{
//prevent event from being fired before page load
$(".li_1").addClass("hidden");
$(".li_2").removeClass("hidden");
});
so the page loads with the fake link and onpage load == "finish" then the fake link is hidden and the real link is made visible.
The only down side of this is that user must always have java script enabled in their browser else they won't be able to access the pop-up. But look on the bright side the fake link could still redirect to another page with the same content as the popup. wink
hope this helps

I had a similar problem, where a link's href was being filled by server and the the href was being modified before page load to us/en or /de/de before the url,
So if we click on the link before page loads completely, it would go to incomplete url, thus I would get page not found.
So solution I took is:
adding onclick="event.preventDefault()" as soon as possible from client side and then modifying it to onclick="" as the url gets updated.
So the issue got resolved, when the url was incomplete, then click did not happen.