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.
Related
I have a parallax website, in which all different sections are accessible via anchor tags in navigation. It works fine when I am on the home page, but when I am trying to access these sections from an external page navigation(thankyou page down below), I land on the appropriate section momentarily but then the page scrolls to the bottom. I have tried a few things, but I cannot exactly pinpoint what's causing it, or how to prevent it from happening.
Home page with sections- http://www.gwcconferences.com/
Navigation via hamburger menu on top-right of header here-
http://www.gwcconferences.com/thankyou.html
Also, it works fine for the first item in navigation- "Meetings"
I'm afraid I don't think there's a way around this - the page renders as it is is loaded, so until the anchor you want has been rendered, the browser will show the top of the page, then it will zoom down.
I am working on a project where the client wants a way of transitioning between content that basically works like page turning on an e-reader app. When you click on a link to go forward, the current content slides to the left and new content is revealed as it slides. If you click on a link to go backwards, the content slides in from the left and is superimposed. (If you're jumping to a page further off it's fine for the page to reload.)
There needs to be a distinct URL for each content block, and ideally this should work all the way down to IE7. Assume there are at least 50 pages, each with at least 2-300 words.
I know there are lots of jQuery page transition options, but most of the ones that I've looked at slide in the new content while the old content is sliding off or fades in the new content after the old content is gone (think slide.js). What I need is basically curtain.js that is vertical, triggered by a link instead of scrolling, and doesn't need to load in all of the content on the page at once.
Here's one way I've come up with possibly building this:
Current content is loaded in from the database (or whatever)
Content for the previous and next pages are also loaded in and stored in hidden divs
When a link is clicked, the current page slides off (or the previous page slides in)
The content that's no longer needed is deleted
New content is "preloaded" with AJAX and hidden
Local URL also changes with AJAX
Here's a crude diagram
That seems really inelegant, though. Is what I've outlined above possible to do? What would be a better way of doing this?
I am okay with JS/jQuery and PHP, learning AJAX.
I'd suggest jQuery UI tabs
No need to deal with AJAX. Just get the server to spit out the 50 pages of texts once and that's a wrap.
It's pretty straightforward to hook into the API, which gives you more control over the entire procedure. Enough control to hook up a function that updates the address bar when you tab through.
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.
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>
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.