I am using a jquery script called Feature List for displaying different sections of info on a page. The user can click through the various tabs to see different content. It works great for what I want it to do but I was hoping to be able to link to each tab from an external page. The problem is I'm not great with jquery am not sure how to go about this or if it's possible with the way the page is set up.
You can see the page and view the source at http://nourishedbynature.co.uk/
Ideally I'd like to be able to link to the page and display a specific tab by appending something the the url.
Any ideas would be greatly appreciated.
Thanks
Use document.location.hash on $.ready then fire the jQuery code that corresponds to that hash.
$.ready(function(){
gotosectionforhash(document.location.hash);
});
Related
I'm fairly new to web development so I don't have much experience with any of this. I currently have a navbar at the top of my website (made with Foundation), but I don't want it to reload every time the page reloads. I've noticed on several websites that certain parts of the page are kept in place when links are clicked and the url changes. How can I achieve this?
Thanks
There are several ways to achieve this. Using AJAX calls is one of them, iframe another. You could even create a one page application and show/hide elements when certain buttons are clicked. This will however force you to load all the data at once so I won't recommend that (depending on the website).
A small article about how you can use the iframe option.
A small article about the AJAX option, they include a small demo to show how it works.
You can set an <iframe> in your code and have the links in your nav target it. When you click on a link, the <iframe> will load the new content, but the rest of your page will not change.
I can't seem to figure out how to use a bookmarklet to link to a page and then trigger the pages lightbox image gallery. I am unfamiliar with this technique. Any assistance on the best way I can set up this bookmarklet?
Bookmarklets aren't really links per se, if your bookmarklet navigates to a page it will cease processing at that point (so you won't be able to trigger the lightbox). If you are already on the page you want to trigger the lightbox (assuming the page is using this plugin) you could try using:
javascript:$('a[#rel*=lightbox]').eq(0).trigger('click');
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.
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 am new here so bare me with some time. I want to open some of the links in my page with an inline popup window.
I guess that those special links have to have a different id attribute that triggers the jquery script
I used the script from this page sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ that has a simple code with great result
The problem is that this script shows the content of the div and am trying to show the page of the link
Thank you very much for your help and info.
It sounds like you're not trying to show inline content, but just a normal modal with an iframe or ajax. You would probably be better served using fancybox.
Fancybox has good documentation and should be easier for you to set up.