Selecting content inside of iframe - javascript

The design for the project I'm working on has live chat plugin and an image on the header that says online/offline. I'm trying to work on script that will place the "online" image when the agent is online.
The heading of the plugin displays the status, like so
<span __jx__id="___1_livehelpbutton__agentstatus" class="agentStatus" style>Offline</span>
I would like to get the innerHTML of the tag and use it in the conditional of an if statement, which, if the status is "online" will display the "online" image and otherwise display the offline image. That is where I run into an issue. I'm having trouble selecting for this tag. When I try this on the console, I get [] and no change on the screen.
$('.agentStatus').css('background','red');
When, as a test on the CSS page, I try .agentStatus { background: red; }, the background turns red.
The iframe it is in is does not have a different url:
<iframe __jx__id="___$13__iframe src="javascript:void(document.write('<!DOCTYPE HTML PUBLIC -//W3C//DTD HTM…order-box}</style></head><body></body></html>'), document.close())" frameborder="0" style=" background-color: transparent; vertical-align: text-bottom; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0px; z-index: 999999;">
#document
<!DOCTYPE html PUBLIC"-W3C//DTD HTML 4.0 Transitional/EN" "http:www.w3.org/TR/html4/loose.dtd"
<html style="overflow-y: hidden">
...

The problem is that you simply cannot access the content in an iframe without first grabbing the document that is being displayed by the iframe.
This post explains this better than I can.
There is no actual way to do this in JavaScript or jQuery, unless the iframe's source is on the same domain (research 'Cross-Domain and JavaScript'). If they are on the same domain, however, you should be able to select (and manipulate) elements using the following:
$("#iframeID").contents().find(".agentStatus").css("background", "red");
This post shows a few alternative solutions to this, as well.

Related

Is it possible to put a footer at the bottom of the last page using Chrome print?

I know this has been asked multiple times before but none of those solutions have worked and hopefully since then someone has figured it out.
I have created a HTML page that i will be printing using Chromes browser print utility, i need to add an image at the bottom of the last page, the problem is that the content within the page is dynamic, so most methods i have looked at just place the image where the content ends, and not at the bottom of the last page.
<head>
<title></title>
<style>
#footer:before {
display: block;
content: "";
margin-top: 100%;
}
</style>
</head>
<body>
<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>
<div id="footer">
<img src="https://get.clt.re/wp-content/uploads/2014/12/footer-background-01.jpg" style="">
</div>
</body>
This is a very simplified example, the content will be dynamic so there could be multiple pages, and the image in the footer will be large,
essentially i need the footer to look like this:
https://i.stack.imgur.com/Wh9s0.png
but only on the last printed page
any javascript or jquery solution is welcome
You could essentialy generate two footers, one for your page content and one for printing. Use CSS then for displaying:
#media print {
.content-footer {
display: none;
}
.print-footer {
display: block;
//Always at the bottom
position: absolute;
bottom: 0;
}
}
I don't think there is an answer here. If you want to place that image on each page then Idan Cohen has a good solution here: https://medium.com/#Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
As to just the last page ... not even the CSS 2 Spec. for Paged Media supports a :last page selector (but does for :first). But even #page is unreliable as most browsers have scaled down support for things like page counters etc. (See #Page Browser Compatibility)
Your best bet is to explore either a compromise (either the image on each page, or the image at the end of the content - but not necessarily at the bottom of the page) or explore the possibility of getting the job done via a JavaScript library that generates PDF on the fly.

Prevent to load a page with js disabled

It's possible to disable an entire page html if the js is disabled on the browser of the user?
EDIT:
Thank you all for the answers and comments! However, what I mean is: I want that the page is replaced with something else, like an image, in that case.
The noscript tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.
You can do something like this in your html body to display whatever image you want to show:
<noscript>
<style type="text/css">
.wrapper {display:none;}
</style>
<div>
<img src="src/to/your/image.png" alt="You don't have javascript enabled">
</div>
</noscript>
The css inside the noscript tag will hide the html content inside the wrapper class.
Not that I am aware of. Somewhere somehow you need to tell the browser to prevent the action/event linked to it, eg returning false, which is a task for javascript. I can come up with two alternatives:
Make all anchors dummies and correct them when JS is turned on:
foo
$('a').each(function(){ this.href = $(this).data("href");} // * jQuery for simplicity
Put an layer on top of the anchor, which you can remove with JS.
.BlockedAnchor a{ position: relative; }
.BlockedAnchor a:before{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
$('body'removeClass("BlockedAnchor");

Want to dock and undock portion of application using jquery layout ui

I have been researching this for a long time and this topic seems to be very underrepresented in the coding world. I am using the Jquery Layout UI in my application,
http://layout.jquery-dev.com/
And we only have South and Center panes. I want to be able to "undock" the South pane similar to how devtools can undock from the bottom of the browser and become its own window. i.e.
I tried inspecting devTools to see if I could get any hints from the available code there but wasn't able to find anything useful. Does anyone have ideas on how this could be achieved, or if there are code examples anywhere online that I may have somehow missed? Again, my application is using the jquery layout UI with the South region being the one i want to be able to "undock" and dock back.
There is no way to simply "undock" it. You would have to create a separate page that displays what you want to undock.
You would then create a button that (with Javascript) first removes the bottom portion of your page and then opens a popup with the part you just removed (the separate page).
It's not too hard to create but keep in mind that popup blockers could block it. The Devtools are part of the browser so they aren't affected by a popup blocker.
Here's a working jsFiddle: https://jsfiddle.net/Loveu79d/
$("#popout").click(function() {
$(".bottom").hide(); // You could also use jquery to remove the div from the DOM
$(".top").addClass("fillpage"); // Add a class to the top div to stretch it to 100% height
window.open("http://www.google.com", "popupWindow", "width=800,height=400,scrollbars=no"); // Use this to open your other page that has the same content as the bottom div
});
html,
body {
height: 100%;
}
.top {
border-bottom: 1px solid #000;
}
.top, .bottom {
height: 49%;
}
.fillpage {
height: 100%;
}
.bottom {
color: #FFF;
background: #FF0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<h1>Top part</h1>
<button id="popout">Open popup</button>
</div>
<div class="bottom">
<h1>Bottom part</h1>
</div>
In this case we have the red bottom div with "Bottom part" in it. You would have to create a separate page that has only that content in it, for example "bottom.html". Then you take my code and put that page in the Javascript part where it says "http://www.google.com".
If the bottom part of your page contains content that has been edited client side you would have to use cookies or a database to store those modifications and then load them in the bottom.html page.

HTML Iframe within page content

I have a huge content in an HTML page and i want to put the same within iframe. But putting the content within iframe tag within page, page shows that part as blank. Please suggest how does we put content within iframe in the same HTML. What should be placed in src if applying the same page content.
<iframe src="">
//Content
</iframe>
Thanks.
I strongly recommend that if you want to place a large section of your current page's output into a scrollable area of your page, don't use an iframe, instead do something like this:
<div style="overflow-y: auto; width: 100%; height: 400px;">
<!-- put all of your large amount of content after this comment, before the closing div tag -->
<p>this is my huge amount of content (just an example.... you'd have hundreds of lines of code here I suspect</p>
</div>
Of course you can change the height and width of the div to suit your needs.
the div style="overflow-y: auto;" with a specified width and height should (I think) create a scrollable area in your page similar to the output of an iframe, but without requiring the browser to load two copies of the contents. Also you avoid the possibility of an infinite loop.
you could also add a border around the area if you like, for example after height: 400px; by changing the first line to this:
<div style="overflow-y: auto; width: 100%; height: 400px; border: 2px solid grey;">
You would put the link to the page you need to display the content from
<iframe src="http://www.yoursite.com"></iframe>
src = URL potentially surrounded by spaces Gives the address of a page
that the nested browsing context is to contain.
read up on iframes
Say for example all of your HTML is inside index.html, simply set the src attribute to index.html.
Like so:
<iframe src="index.html"></iframe>
Remember, this doesn't necessarily work correctly as you'll run the <iframe> into a continuous loop. Though, correct me if I'm wrong, it will only repeat the iframe twice as a security policy.
<iframe src="URL or pagename.html"></iframe>

Wrapping ajax elements to HTML page

So I have already fetched data from our mongodb database using Ajax. I can retrieve the data and from database store it inside javascript variables successfully.
Firstly, What I want is to put the data back on the HTML page like inside the blocks. Should it be done using Jquery and put in CSS tags? I have the data stored in global variables inside javascript. How could this be done?
Second, after we have loads of data with text elements and the strings vary in length. So how do I make sure that whatever text I put on the HTML page is properly aligned to our canvas width and height everytime. It should not exceed the canvas width. How can this be achieved?
So this is my css element
#disp_prob_title{
position: absolute;
display: none;
top: 450px;
left: 240px;
height: 150px;
width: 350px;
}
And this is the Javascript function where I want to append it
setQuestion : function(titleString, bodyString, hintString){
$("#disp_prob_title").append(this.qsName);
},
this.qsName is a global variable in my js file and it retrieve a string correctly on logs. However I do not see any text on my html page. Also how do I change the font size and color inside the css element?
Thanks!
Not sure what you mean by "put in CSS tags". You could do something like give the block of html you wish to have your content in an id like "content" then use jQuery add, append, appendTo, etc. method to append the content to the content block.
Html block would look like:
<div id="content"></div>
Then once you fetch the data:
$("#content").append("<div>some data here</div>");
As far as forcing the content to remain the right size etc. you'll have to add some styling to the content block or the content you append to that block.
Your question was a little vague so hopefully this helps?
It works now, I had to change the styling to
#disp_prob_title{
position: absolute;
width: 30%;
top: 250px;
left: 150px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Thank you for your help!

Categories