Bookmarklets - Click event - javascript

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');

Related

Trigger ZenScroll from external link

Is it possible to use ZenScroll (https://github.com/zengabor/zenscroll) to link in and scroll to a specific section from an external site? E.g. clicking example.com/#somesection on the first page and have it trigger with, say, the window history object?
Any ideas/directions are much appreciated.
There isn't a clean way to do it but you can work around it if you can control how the external site links to you site, and you don't mind if no scroll will happen in case JavaScript doesn't work in the user's browser.
Example:
External site links to https://yoursite.com/#somesection
However, the page https://yoursite.com/ doesn't have the any element with id somesection, so the browser won't automatically scroll anywhere.
Your custom JavaScript on this page detects that window.location.hash was set to #somesection which translates to #mysection so you invoke an animated scroll to that element:
if (window.location.hash==="#somesection") zenscroll.to(document.getElementById("mysection"))

Prevent reloading certain parts of page

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.

chrome extension opens with page load

I need to create a chrome extension that for every web page te he user opens - he will have a button on top of the page (similar to the google translate extension - just that it will appear with page load, without the need to press a button) - preessing on it will do some activity.
from what i saw - the way to do it is to create a content script that will add an iframe that includes the button on the window.onload. just before i do that - i want to be sure there is no more simple way of doing that.
Thanks.
There is an experimental infobar API, but it's unknown when, if ever, it becomes stable.
As-is, you really need to inject your UI into the page DOM from a content script, with an iframe being a good solution to separate your UI from the page.
If it's just a button for each page then you could use a Browser Action
If you'd like for it to actually be in the page then an iframe is a good way to go.

Linking to specific jquery tab from external page

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);
});

Trying to open some links with an inline modal popup window

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.

Categories

Resources