Can I jump to anchor / tab using OnClick? - javascript

I thought this one was easy but I'm banging my head on the jumping part. I have a page, on this page I have tabs, I want to click on the 'read' link so that it (1) opens the tab and (2) jumps to that part of the page so user can keep reading. My code:
<a onclick="$('a[href=#tab-read]').click();">Read</a>
Like I said, works just fine, opens the tab I need but doesn't actually make the jump to it? I still have to scroll down the page to get to the content area.

Try this out, you can force the window to go anchor tag, or change up the selector to go to the desired element :)
$(window).scrollTop($('a[href=#tab-read]').offset().top);

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.

Click any menu-button to go back to one-pager AND scroll down to location

I'm curious to know if there´s an option to go back from a page to one-pages and to
a specific location?
I have a webpage that is a one-pager with fixed menu - on that page is a button "apply for a job" that takes you to a external page but with the same fixed menu.
Can I make people click on the menu so it goes back to the one-pager an autoscroll down to
the location
Is this possible?
NOTABENE: I´m not looking for going back to the previus location - just any location that the user
will click on the menu (because it´s the same menu for application and the one pages (the whole site)
have a nice weekend
Try this:
<a href='[Your URL] #[IDOfAnchorTagYouWantToScrollTo]'>[Link Text]</a>
Here's a little fiddle.
The ID of an HTML element can be used later as an anchor.
<p id="article10">Article 10</p>
Here we scroll to an anchor within the same page/domain
Scroll to article 10
This is how to access the anchor from an external page
Scroll to article 10
Have a look at http://en.wikipedia.org/wiki/HTML_element#Anchor. It uses the same principle. The page is automatically scrolled down to the headline Anchor which has the ID Anchor.
For example Firebug reveals the following markup:
<span class="mw-headline" id="Anchor">Anchor</span>

opening a target blank page with the parent page in front

I am simply creating an HTML page, where I am using target="" in the link which opens up the page as target="_blank".
For Instance,
link
What I want is, when the user clicks on it, the blank page, which opens up, should open, but the main page from where the link is clicked should stay. Right now, it is acting like "target="_blank", which onclick shows the page redirected.
Is this possible ?
Not an exact answer to this problem but you can do a nasty trick to make it look so by opening the current page in new tab and loading the link in current tab. One disadvantage with this would be that current page will be in a tab next to new page.
You can do something like
<a href="https://google.com" onclick="window.open('#','_blank');window.open(this.href,'_self');">
I don't think you can control the browser behavior by manipulating which tab to focus, it is like letting me make changes to your bank profile information illegally. There is really nothing much you can do about it.

Pop up problems with scroll

This is what i'm trying to create CodePen example
The idea is that the popup should work exactly like the Pinterest Link
The problems i have are:
When u close the pop-up, the page always jumps to the top. It should stay where it was
The popup is fixed, how can i make it that you can move it like on Pinterest? I would like to have some spacing on the top and when u scroll u actually move the up
If u have any chance to view this on mobile, please do. I want to make the site responsive. If u view the pop-up in the mobile version, it isn't smooth. That means when u scroll and move you finger from the touch screen, the scroll stops immediately. So it feels like you need to push the content down with you finger. It doesn't flow so u could swipe and it would stop slowly
I try to figure this out for days already and can't get it. Any help is welcome :) tnx!
Instead of using anchor tag for the close button like this :
<div class="close">close</div>
Do this instead :
<span class="close">Close</span>
Don't forget to add cursor:pointer style for .close class.
Your problem will be solved.
Right now, the image that triggers popup disappears when you click close button on firefox just in case if you haven't checked on it yet. So, better not use anchor tag for the close button. My suggestion would be Never use anchor tag for close button.
Hope this helps.

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