Dynamically load content preserving 'open in new tab' functionality - javascript

I am using javascript to dynamically load page content on my webpage.
I have a number of links, but they do not have href attributes. When the user clicks a link, they have a data-content attribute which is used as a key to load new content dynamically from a JSON file.
My links look something like this:
<a data-content="about">About</a>
This works perfectly well.
I know from a UX perspective, users may want to right click a link and load it into a new tab. This current way of doing things does not permit this behaviour.
One way around this would be to move the data-content attribute to the href attribute and add a # before. For example:
About
Right clicking on this link and loading in a new tab would open the URL
About
I could then use javascript to look for # in the URL and use the string after it as a key to find the content to load on the page.
When I make this change though - javascript no longer loads my new content.
So what are some ways of dynamically loading content onto a page whilst preserving the functionality of 'open in new tab

Related

How to get links in an iframe I don't control to open in parent window

Is this even possible?
Background
I have a page that's basically just a logo and an iframe.
I have complete control over the parent page and can use whatever tricks I want (html, javascript, php, etc.).
The page in the iframe, however, is a third party page that I have very little control over. I can use no javascript, no css, I can't even modify any links. All I can do is modify some text.
Problem
I only need the logo on the initial page. Once the user logs in or clicks to a different page, I want that new page to open in the parent window. I know about target="_top" and target="_parent", but those won't help me because I have no real access to the links in the iframe.
Question
Is there any attribute I can put on the iframe or javascript I can use in the parent page that will force new pages in the iframe to load in the parent window?

Anchors with dynamic HTML page

I have a website on which comments are loaded via AJAX. I would like to create some links that point to some specific comments.
I have tried both:
<a name="comment-123"></a>
<a id="comment-123"></a>
It only works when the link #comment-123 is called from the same page. If called from another page, the page displays at its top.
Maybe its because the content is loaded after with javascript?

How to open a window in new tab with just href attribute?

Edit: The link above doesn't contain any answer that applies to this question. If the person who put it there actually read this question they would have realized this.
What's my best option for opening a link in either a new tab or new window when I only have control over the href attribute of an anchor tag?
We have a homegrown menu navigation system that someone before me built and it sets the href of the menu anchor links based on a url column in a database table. So I know there are much better ways to open a link in a new window than what I'm asking for and I wouldn't normally try this, but for now I just need to do it this way.
I've tried using:
javascript:window.open('http://www.goodwill.org')
That does work for opening the link in a new tab, however it changes the current tab to be a blank page except for the text [object], which obviously defeats the purpose.
You need to ensure that the JS expression in your link does not return a value:
javascript: void(window.open('http://www.goodwill.org'))
If you have access to the html, which you do by either html or js
HTML
<a target="_blank">

Reload iFrame CSS

I'm developing a system, which supports CSS themes. It's Ok so far, I can change the theme as desired, but the system is composed by two parts:
First is the "skeleton" of the system: it contains the menu and the options to change theme. That menu loads the contents of the second part which is composed essentially by an iframe which loads the modules called by the clicks on menu.
I can change the theme of the first part of the system using the following code:
$("link").attr("href", "css/temas/"+theme_name+".css");
The theme_name is gathered by reading the link on the menu click. The system is ok here, and no change is needed. Beyond changing the main theme, it records a cookie, which is used to read for further system theming.
So, the second part of the system also reads that cookie to apply the theme, but it doesn't change instantly as the main part does!
For example, when I click the theme icon, it instantly applies the theme without refreshing the screen, but that doesn't happens to the second part! It apply the theme, but it's shown only if I reload the iframe, and reloading, ain't cool!
I'm trying to change the iframe theme with the following code:
$("#ifr_main link").attr("href", theme_name);
Where #ifr_main is the iframe name!
Does anybody knows how can I figure that out and apply the new CSS without having to refresh the page, as I do on the menu?
You need to select the content of the iFrame first before trying to select it's link element.
$("#ifr_main").contents().find("link").attr("href", theme_name);
Side note, iFrames can be ugly :)
It is because iframe content was loaded when your page is loaded, so after it, you cannot change its looking unless you are using JQuery/ajax methods or reload.
Yo can find some questions about it
here, here and here
maybe you can reload your ifreame via ajax, read here
Finally you should watch this video for more unique way.

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