I have build a website using MVC4, jQuery UI, Twitter Bootstrap etc using that template http://bit.ly/1aAcIJq
But the thing is, when Javascript is turned off the browser does not displaying anything, just blank page, however if I click view source so I can see the complete page source.
If you disable javascript and load http://bit.ly/1aAcIJq you will see what I mean
Is there any way to fix that?
After looking at your code, I found the problem. You have to change visibility: hidden to visibility: visible or just get rid of it. You will not have any of the flashy features and some of the functionality because JavaScript has been disabled, but it will display the website.
Related
I'm working with vue.js, and I want to display a pdf on a website. I keep seeing a lot of complicated examples of pdf viewers that require an upload button and a conditional display - this is NOT what I need.
I just need to display a hardcoded pdf document within a div on my web page.
This is what I have so far using iframe
I need the width of the actual pdf page to fill up 100% of the width (for legibility). I don't want the grey background to show. The page should also be mobile friendly.
Open to suggestions that include not using iframe, especially if it would make the page more mobile friendly. If you're going to bring up vue-pdf or PDF.js, please include some clear instructions on how to use them.
PS: I am using some parameters to remove the toolbar and navpanes like so:
src="<MY PDF HERE>.pdf#toolbar=0&navpanes=0&scrollbar=1"
I've tried adding &zoom=100 or &view=Fit and that does not fix my problem.
Here is a list of all the parameters.
I lied. Adding &zoom=140 to the end of my pdf url solved my issue.
I need to navigate through a particular website, frequently, to get at some sub-page that is several layers beyond the front page and it is taking too much time to click and scroll and click and scroll to get at the desired final screen where I enter the search string. So, I would like to automate the process by making Javascript trigger the right button events to get me to the distant page where I can enter the search string manually.
So, I know how the code needed to trigger the event,
document.getElementById('x').click();
but how can I implement this inside my browser, since this is not my own website?
If this is going thru different pages, then probably a Web UI automation tool would be the best (like Selenium - http://www.seleniumhq.org).
as #elcarns says, if you need to inject code into another's website, you could do so opening the console (view --> developers --> javascript console in Chrome).
Another, more complex way to do it when you have to traverse several pages is by developing a plugin.
javascript:document.getElementById('x').click(); in the url bar. You can probably make a bookmarklet for it as well.
In a few websites developed by me there is a slide-in/fade-in animations of the content once the page is loaded. I use jQuery for that but before the animation it is necessary the content to be hidden. To achieve that first I have used a css rule #content{display:none} . Then in the page header in a javascript block <script type="text/javascript">
$(function() {
$('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){
$('#loading').fadeOut();
...
If I understand well, the jQuery code executes once the page is loaded and it works well this way, but there is one problem. If the user has no javascript support then the page remains blank because of the hidden with a css content. Also google webmaster tools shows a blank page preview probably because they do not execute the javascript(jQuery) code and also the Safari web browser's Top sites page is with a blank page preview because of the same css rule. So in order to have a full support for non javascript browsers I removed the css rule and instead of that I use a javascript code to hide the content <script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script> only for the users that has a javascript support but this way if the internet connection is too slow first the content is loading like in a normal page, and once it is loaded then the browsers hides it and the animation is executed. This is annoying because this way the animation is bothering the user experience instead of improving it. You start reading the page and suddenly the page disappears and slide in... You can see the result here - http://sky-camp.com/en/paragliding-courses.html
What do I miss? I use javascript for content hiding instead of jQuery in order to try to hide the content before the jQuery plugin is loaded, but It does not work the way I expect.. Any help will be appreciated
Try doing something in the head like:
<script>document.write('<style>#content{display:none;}</style>');</script>
I haven't don't that in a long time, but I used to use it often.
<code>
$( function(){$('#content').css("display","none"); });
</code>
when your page charge completly:
<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>
This is just my opinion...
But I don't really ever prepare for people disabling javascript. As somebody already said, who still does that? If they did there web experience would be awful. Why don't you just add a noscript tag that bypasses that whole function and just shows the content. So if anybody ever does visit the site without JS they just see the page normally.
I feel all the suggestions people have been posting are horribly gross and not at all good practice.
My website all seems to work fine when I have javascript enabled but as soon as I disable it, the main page background renders fine but the actual content doesn't display at all. I thought I had designed it in a gracefully degrading manner. Can anyone shed some light on why the content does not display with JS disabled?
Website link
Your CSS on #main_content (and other elements) have display:none; set which hides the content by default.
You then use javascript to display it. Without javascript, it stays hidden.
I have developed an App using PhoneGap and JqueryMobile.
I have many HTML Pages , navigation from One page to other page on click of the image is taking lot of time.And the end user have no clue what is happening at the back end.
I would like to show loading image until the page gets loaded.
I'm wondering how could I use Jquery to show a simple "Loading..." on the screen until page is loaded.
Please help me on this.
With jquerymobile you can do this with $.mobile.showPageLoadingMsg() resp. $.mobile.hidePageLoadingMsg() as described in the documentation.