When I load content with AJAX, is this content supposed to automatically use the preloaded main page css style ?
For example, if I load a <span class="smallText">hello</span> with AJAX.
Is this new HTML using the default.css file with
.smallText {
font-size:6px;
}
?
when I load content with AJAX, is this content supposed to automatically use the preloaded main page css style ?
Yes. The HTML is injected into the context of the current page, and subject to all its CSS rules.
Yes it will use the CSS of the page it's loaded in.
Related
I made a script that connects to a WP video plugin and generates a floating menu over it. The script works fine inside the WP page but it does not work when I use the plugins SHARE&EMBED function when it generates a link to my video that is used to incorporate it into another page structure. When embedding the into the outside webpage my custom Js script does not work. Better to say it works because my js and css files get connected to the head of the new page and the menu is present inside the structure of the page but it is covered by the new div elements generated by the plugin.
WordPress video plugin that I use generates an iframe tag. When I examine the page in which I embed the link to the video, in developer mode, I see that the is placed inside a tag that is outside the page's tag. When I try to access the Iframe tag with document.getElementsByTagName("iframe") or by its' id I get an error message that the element does not exist. I tried to use "document.addEventListener('DOMContentLoaded',..." and "if(window.fwduvpPlayer0)..." but it still i can not access the the tag with my video.
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
function shareAndEmbed() {
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
getIFrameDiv.insertAdjacentHTML("beforebegin",
`<div class="show-menu top-left" id="menuBtnDiv1">
<button class="btn btn-sm" id="menuBtn" onclick="videoOverlayMenuGenerator1()">
<span class="iconify" data-icon="whh:menu" data-inline="false"></span><span class="menu-button-title"> MENU emb</span>
</button>
</div>`
);
The idea is that I want my script to access he iFrame tag by its' id and include before it the div tag with the code for my custom menu.
You are selecting the document property within document. That property does not exist.
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
Maybe you tried to get the <html> tag which is the documentElement property in document.
documentElement only has three methods to select elements.
getElementsByClassName
getElementsByTagName
getElementsByTagNameNS
In order to access to a element that is not into the tag, you can try to use this options:
window.parent.document.getElementById()
OR
window.top.document.getElementById()
Maybe, with this you would can to access to this elements.
I hope that this, help you.
Regards
I am working on a visualforce page using an inputField on custom object with a date field and looks something like this:
<apex:page id="myVisualForcePage" showheader="false" controller="myController">
<apex:composition template="myTemplate">
<apex:define name="body">
<apex:outputpanel id="fullPage">
<div class="form-group">
!A bunch of other stuff!
<label class="col-xs-4">My Date</label>
<div class="col-xs-8">
<apex:inputfield id="myDate" styleClass="form-control" value="{!myControllerObject.MyCustomDateField__c}"/>
</div>
</div>
</apex:outputpanel>
</apex:define>
<apex:composition>
</apex:page>
For some reason the datePicker is not being formatted correctly on page load until an actionFunction is called.
This appears to be because the some of the standard salesforce css styling classes do not load on page load until the call is made.
When the page is loaded, we can see that the datePicker does not have the standard elements.css class associated with it and there is no link to the style class:
Datepicker Element
Datepicker Element Styling
CSS links before callout
Following a call to the action function, we can see below that all of salesforce's standard css styling classes are loaded and that the datepicker now has styling elements from element.css which was loaded:
Newly loaded css styling links
New element styles for date picker
If anyone has any information about why this may be happening and how to ensure the resources are loaded on page load I would really appreciate it!
As an update, if I load the following resource resource explicitly then it will work correctly:
<link href="/sCSS/41.0/sprites/1516644206000/Theme3/default/gc/elements.css" type="text/css" class="user" rel="stylesheet"/>
However, I do not need to do this on other pages and I am wondering why? Could this be a difference in API's?
By specifying showHeader=false you're declaring you don't want any SF "overhead" on your page, including stylesheets.
Check <apex:page> and consider explicitly adding standardStylesheets="true"... In theory it's a default but looks like you uncovered some funny behavio(u)r.
standardStylesheets: A Boolean value that specifies whether the standard Salesforce stylesheets are added to the generated page header
if the showHeader attribute is set to false. If set to true, the
standard stylesheets are added to the generated page header. If not
specified, this value defaults to true. By setting this to false,
components that require Salesforce.com CSS may not display correctly,
and their styling may change between releases.
For anyone who has this issue, try changing your visualforce page's API version. I find that v39 works fine but I had a page on v41 and v44 that both had this problem.
In my angular application, i load URLs inside an iframe dynamically, i want to apply custom.css to the loaded url once the url is loaded inside an iframe.
I have tried it using ng-init with angular-css-injector function in iframe. It works, but the css is not applied. Probably it is getting called in the initial stage. Is there any angular feature to apply the function once the url is loaded in iframe?
Here is the code
HTML:
<iframe frameborder='0' ng-src="{{trustSrc(selected.imgurl)}}" ng-init="applyCSS()" frameborder="0" allowfullscreen>
</iframe>
App.js:
var routerApp =angular.module('DiginRt', ['ngMaterial','angular.css.injector'])
routerApp.controller('AppCtrl', ['$scope', '$mdSidenav','$sce', 'muppetService', '$timeout','$log', 'cssInjector',function($scope, $mdSidenav,$sce, muppetService, $timeout, $log,cssInjector) {
$scope.applyCSS = function() {
cssInjector.add("style.css");
console.log("loaded css dynamically");
}
Here is the plunker
The thing which you are trying is appending CSS to own page, and appending css do parent document would not be applied to the child document which is created by iframe (Iframe creates child document after src has been loaded into the DOM).
Simply you can not do this. You can dynamically add the style dynamically inside iFrame unless the domain of both be same.(Refer this SO Answers for add url for same domain)
By looking at your code it don't looks like your are trying to load different domain inside iframe on your domain.
Possible work around would be, you could pass one more query parameter inside url & maintain css code on the site which you want to load it inside your iframe on basis of query parameter.(use yepnope.js to load js conditionally)
a few notes:
1.i can not modify the iframe content to add the onload= function
2.the iframe has an id.
3.the iframe has no callback to its parent html page.
4.I use the prototype ,not jquery, for some old reasons.
i wanna do something when the iframe load finished.
but, i have tried the
document.observe('dom:loaded',function()
{
alert($('iframe-id')); >> **IS NULL**
})
and
Event.observe(window,'load',function(){..
alert($('iframe-id')); >> **IS NULL STILL**
...})
Did i miss some methods in prototype or javascript?
Thanks.
I'm loading a webpage inside a HTML component in AIR. By default, when something is clicked the next page is loaded inside the HTML component itself. I want the links from that page to open in an external web browser.
Is this possible at all?
You have to set the property navigateInSystemBrowser. Check this code:
private changeHtmlLoaderBehaviour():void
{
html.htmlLoader.navigateInSystemBrowser = true;
}
<mx:HTML id="html"..location="http://www.amazon.com"../>