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!
Related
I use javascript bookmarklets to control window layouts on a page, but one of the elements will be repositioned by another element. If I go into inspect source, I can see the jscontroller attribute for it being set and if I break that link, it functions the way I need it to. However, I'm not sure how to adjust that through a bookmarklet. My usual ones look like this:
javascript:(function(){var d=document,e=d.getElementsByClassName("zWfAib")[0];e.style="width: 1280px; height: 720px; left: 16px; top: 16px;";})();javascript:(function(){var d=document,e=d.getElementsByClassName("p2hjYe TPpRNe")[0];e.style="width: 1280px; height: 720px; left: 0px; top: 0px;";})();
I've tried changing style to jscontroller and passing a value, but that doesn't adjust it. Is there another way to change this attribute through a bookmarklet?
EDIT: Another approach if it makes a difference, changing the jsaction that element is set to. Is that possible through a bookmarklet?
I'm currently developing a document tree in AngularJS using a directive. It is part of the pages as component, and is placed relative any other component currently on the page.
As part of the document tree I have a version modal that is displayed when selecting a file, displaying its information and available versions of the file.
But this modal need to be fixed on the screen, so that the user does not need to scroll to the top to see it.
But as the modal is part of the document tree component, just setting it to fixed does not accomplish this. It just set it to fixed in relation to the directive.
// This does not work.
.version-modal {
position: fixed;
top: 5vh;
right: 2vw;
bottom: 5vh;
width: 480px;
}
How would one go about to set a fixed position on a div through a directive, that could be nested down several levels of dom objects with relative positions and sizes? It works if I through the browser tools move the modal div out as a child to < body/>, but doing so through code breaks the application.
let bodyDiv = document.getElementById('body-container');
let versionDiv = document.getElementById('version-modal');
bodyDiv.appendChild(versionDiv);
As far as I understand, doing this the div looses its connection to $scope, and all functions and members are lost.
Fixed positioning should work regardless of where the element is in the DOM hierarchy. It would be useful to have a jsfiddle or similar to take a look at this issue. Alternatively, the HTML of the element would be useful.
Your CSS is referencing .version-modal as a class, but you're successfully referencing the modal using document.getElementById('version-modal'). Does your element have a version-modal class attribute as well as a version-modal id attribute?
You may just need to add class="version-modal" to your modal, or change your CSS rule to:
#version-modal {
position: fixed;
top: 5vh;
right: 2vw;
bottom: 5vh;
width: 480px;
}
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");
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.
This is a really quick question :)
Just wondering here if its possible for javascript to select objects which aren't part of the DOM... like selecting an :after or :before content created by CSS?
for example...if I have a div and create a box through
div:after{
content: '.';
display: block;
width: 200px;
height: 200px;
background: green;
}
I still having difficulties to understand how those elements are created and since they can draw elements on screen but are not part of them DOM, does this mean it's not possible to interact with them?
Cheers
No, you won't be able to interact with them.
They're not part of the DOM, but rather are a manifestation of the style that was assigned.
If you need to add/remove the content, you can use class names.
<div id='myElem' class='withAfter'>some content</div>
div.withAfter:after{
content: '.';
display: block;
width: 200px;
height: 200px;
background: green;
}
Then add/remove the class as needed.
Check out the docs, I see that you cannot modify the properties directly, nor does it appear you can interact with the content created via pseudo-selectors. The best you can do is look at the properties: http://jsfiddle.net/uaN6z/
It looks something like this:
window.getComputedStyle(document.getElementById('test'), ':after')
The only viable way I've see to change it is to alter document style sheet. See this SO answer: Setting CSS pseudo-class rules from JavaScript
Good luck!