jQuery Disable Link until page load - javascript

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.

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.

Using Javascript to redirect to an anchor

I have a website that's mostly generated via PHP and uses the jQuery library (v1.11.1). My problem is that I would like to link to anchor tags that are generated dynamically on separate pages.
For example, I have the following link on index.php?page=Home:
And on the page that's loaded when $_GET[page] == "ABC," I have the anchor:
<a name="firstItem"></a>
So far, so good. But when I try to click the link, it redirects to the page without jumping to the anchor. The same behaviour happens if I click Reload. However, if I enter the URL directly into the browser window, it DOES jump to the anchor.
I've found that the problem goes away if I delete the "function detach()" from the jQuery file, but then some other libraries that I've loaded fail to work. Any suggestions?

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.

User clicks on a link with a hash value to visit the page what happens if Javascript is disabled?

I am trying to get this functionality going but am a bit uncertain and don't know how to approach it. I have a master page with a div called "masterDiv". 'masterDiv' makes a load() call and loads content of an external html page called "details.html" from it content div. This is how I am doing it:
$('#masterDiv').load('details.html #content');
content loads up as expected and the url address pops in as "http://www.xyz.com#details"
This is all good and working, but then I thought of those users who may not have JavaScript endabled. I figure I would just direct those users to 'details.html' page directly instead of having the "Master Page" load the content from "details.html" page. So now here is the issue, lets say if I send a user this link:
http://wwww.xyz.com#details
And if that user's browser doesn't have Javascript enabled then obviously JQuery cannot be invoked and therefore load() call will not be made and so on. how can I direct the user to "details.html" page directly, please?
Any insight would be wonderful
Thank you.
Your link probably looks like this :
<a id="myLink" href="#details">Link that the user clicks</a>
When the user clicks the link, jQuery load is called. Is that correct?
If so, you could instead have your link like this :
<a id="myLink" href="http://wwww.xyz.com/details.html">Link that the user clicks</a>
That way, when the page loads, the link will work for everyone (even those with javascript disabled). Then, when the page first loads :
$(document).ready(function() {
$('#myLink').attr('href', '#details');
});
will set the link to the way it was before. That way, only users with Javascript enabled will use the load version. The other ones will simply be redirected to details.html
If there is something I haven't understood correctly in the question let me know.
how can I direct the user to "details.html" page directly, please?
By making the link's href attribute "details.html". The way every link works by default.
Details
Every link on your site should be built this way. That is how the Internet is designed to work, and how it works best. You should only add functionality with JavaScript if you actually need to, you shouldn't be depending on it for something as fundamental as linking between pages.

How to move to the foot of the web page dynamically

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>

Categories

Resources