I have placed an IFRAME on the web page where I have set its src attribute to an HTTPS content to load. The IFRAME is placed inside a Bootstrap Nav-Tab Content; The Tab is placed inside a Card element.
I noted that if I load the web page, the content doesn't load; but if I clicked on the other tab the came back all other contents in the tabs are loaded. I am intending to show a PowerBi report.
Unlike the earlier posting on the subject, I didn't find an exact solution. Most of them were referring to X-Origin but mine it works if you switch back and forth between tabs and doesn't remain blocked.
Behaviour is captured in a video: https://youtu.be/tX8utKu7tYY
My working is https://jsfiddle.net/hifni/otcek65z/13/
What I have tried so far:
Used the Basic IFRAME
Used JQuery to auto Refresh the content in an IFRAME
Used JQuery to Set the Src dynamically in an IFRAME
Switched between Proxy and Public Internet
After analyzing the code from JSFiddle, the issue seems to be in the CSS. You have the following HTML part when loading the page (which represents your tabs):
<div class="tab-content">
<div class="tab-pane" id="foo">...</div>
<div class="tab-pane" id="bar">....</div>
</div>
And you have this CSS:
.tab-content>.tab-pane {
display: none;
}
This means that all content is hidden. Now when you click a tab, the class tab-pane changes to tab-pane active show. And the CSS used for this looks like this:
.tab-content>.active {
display: block;
}
The best way to solve this would be, to always automatically set the tab-pane active show class to the first tab element. For example:
<div class="tab-content">
<div class="tab-pane active show" id="foo">...</div>
<div class="tab-pane" id="bar">....</div>
</div>
Related
I have three pages/documents in my web page. The links to these pages/documents are provided in left navigation.
I am planning to add Skip to main content in angular UI header. So this will be a common skip link for all 3 pages.
Clicking on skip link from page 1 should take me to Main content of page 1.
Clicking on skip link from page 2 should take me to Main content of page 2.
Clicking on skip link from page 3 should take me to Main content of page 3.
So I have written a condition in my .ts file which will take to the respective main-content. But clicking on Skip to main link is working only once (focus moves to main-content landmark), but from next time the link is not working repeatedly. Am I missing something to make sure that the skip link is working multiple times on enter/click.
I am new to Angular, so please let me know if you need any additional details to understand my requirement.
.ts file
goToMainArea() {
if (location.href.substring(location.href.lastIndexOf('#') + 1) != "mainarea") {
location.href += "#mainarea";
}
}
Partial required HTML code:
<div class="ABC header d-flex" role="banner">
<div class="skip-link">
<a (click)="goToMainArea()" tabindex="0">Skip to main content</a>
</div>
<div class="inventory-title">
<span>
<a [routerLink]="['/home']" attr.ngbTooltip="Home" class="showLink"><span class="titleMaximized">ABC</span><span class="titleMinimized">A</span></a>
</span>
</div>
I have an angular page that has a structure like below:
<div id="topSection">
top section
</div>
<div id="bottomSection">
bottom section
</div>
From an external page (non angular), I'll need to provide a link to navigate to the bottomSection of the page. I looked at $anchorScroll() and it only appears to work for links within the same page. Thanks
Users can visit pages where they can download a pdf document. Each document has its own page. Each document also has a specific name, page number, and author. Next to the download button I want to have an image of a document that changes its content depending on the document.
Sort of like this:
Except I want the title to change depending upon which document page is being viewed. The back end for this is completed, however, the front-end is more problematic.
Currently, I have a structure like this
<div class="container">
<div class="col-md-6">
<div id="document">
<p>$document->title</p>
<p>$document->page_number</p>
<p>$document->author</p>
</div>
</div>
<div class="col-md-6">
<div id="download-button">
<button>Download</button>
</div>
</div>
This displays a document image which changes its content depending on the page, next to the download button. However, I am wondering if there is a better way to do this? Currently the document image changes width with the page and doesn't retain a 'document' shape.
Thanks,
I am using a cms which has a page where new content is added via ajax.
So the content is constantly updating but there are no page refreshes.
This is typically the html for each piece of content which gets added.
<li class="row-1" style="display: block;">
<div class="content">
Body text for content 1
</div>
</li>
As more content gets added the html will look like
<li class="row-2" style="display: block;">
<div class="content">
Example text for content 2
</div>
</li>
<li class="row3" style="display: block;">
<div class="content">
some more example text for content 3
</div>
</li>
etc
On my page load I have jquery being executed for the content which is already existing.
What I would like is jquery to be executed for each new content as it gets loaded on to the page.
Would I create the jquery individually for each item, then load the jquery when each item gets added to the page.
Or would I create a jquery function which detects when new content is added?
For now to begin with I would just like to alert when new content gets added so I can see how it is done?
Thank you for reading and any help provided.
Check answer to this SO question that could be a solution to bind the event on successful ajax load.
This might be the way you want to go for your website.
So what you can do is load the jquery with the elements itself and bind events to these elements.
i have a working tabs instance here and prepared a jsfiddle (somehow the tabs don't work correctly here, but the link issue is still present):
http://jsfiddle.net/Gyrga/6/
The links in the tab panes don't work anymore and don't go to the URL http://somewhere.com at all.. Why? What did I overlook?
Thanks!
When you use the tabs, you need to do the following (according to the doc)
Home
<!-- etc -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<!-- etc -->
</div>
But in your example, you put the data-toggle="tab" on the .tab-pane which breaks the links inside.
Just remove this attribute and put it on the link which actually toggles the tab. That way you won't even need the JavaScript to activate them.
Working demo (jsfiddle)