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");
Related
I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:
<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
position: absolute;
width: 100%;
height:100%;
margin: 0;
padding:0;
z-index: 999999999;
}
</style>
Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.
I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.
$(document).ready(function(){
$(window).on('dragenter', function(){
do stuff
});
});
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!
I want to embed zumi.pl map on my website. Their map is loaded via js to div with specific id and is dependent on external css. However my css for formating div inside div#content interferes with embedded map screwing it all up. I tried to enclose it in another div with contextual css reset but it's still displays wrong. Only way to make it display (almost) properly is to uncheck all my css rules for that div in firefox inspector but I can't figure it out how to achieve the same effect on page.
for clarity this is sample copy&paste code from their generator:
<div id="zumiMap" class="zumi_creator" style="width:300px; height:300px;"></div>
<script src="http://api.zumi.pl/maps/api" type="text/javascript" ></script><script type="text/javascript">(function(){var marker,map=new zumi.maps.Map("zumiMap", {"apiKey": "E48EF8E55A0B3BEAE0434628AE0A1EEA"});map.afterLoad(function() {document.getElementById("zumiMap").className += " zumi_creator";map.addMarker({lat: 52.214679,lng: 21.021101},{letter: "A", type: "main"});map.setCenter({lng: 21.021101,lat: 52.214679}, 7);});})();</script>
and here is my css that's to blame:
#content div {
display: inline;
float: left;
margin: 0px 0.833333%;
padding-left: 10px;
}
How to isolate html fragment so it behaves as there was no previous css rules present?
But without using Iframe.
Did you try this? #content #zumiMap div will have higher specificity than your #content div selector, so you can reset all the problem styles.
#content #zumiMap div {
display: block;
float: none;
margin: 0;
padding-left: 0;
}
I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/
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.