Load JQuery first, then show html page contents? - javascript

I have a mobile site, unfortunately I can't direct access to do anything on HTML, so I'm using JQuery to style its width, height etc., the problem is the site has actually 762px width(which is a normal site for PC) and I gave 320px width(for an iPhone screen), everything works well but at the time when page loads it comes from the middle of the page to fit the 320px screen size. I strongly believe that my JQuery code for width(320px, although I specified Jquery for some other elements too) is taking action after the contents loaded in the html page.
(I saw this problem on Opera mobile emulator 320x480)
So if I can able to load the JQuery first then the contents(HTML) in the page may solve the issue. You guys have any suggestions?
my script is given below..
$(document).ready(function() {
$('head').append('<meta name="viewport" content="initial-scale=1.0, width=device-width" />');
$("table.bgContent").removeAttr("width");
$("table.bgContent").attr("width","320");
$("table.cart-header").removeAttr("width");
$("table.cart-header").css("background","none");
$("table.cart-header").css("border","none");
$("table.cart-header td:first").html('<img src="images/userdir/logomobile.gif" width="320" height="79" border="0"/>');
$('head').append('<meta name="viewport" content="initial-scale=1.0, width=device-width" />');
$("table:eq(2) td.bgHeaderBarCart").html(" ");
$('table.cart-header td:nth-child(2)').css('display', 'none');
$('hr').css('width','300px');
$('td.FormTextCart').removeAttr("width");
$('.cart-header').css('height','0px');
$('.ContentAreaCart').css('padding','0px');
$('.SpanOrderCenter').css({padding : '0px', textAlign : 'left', fontWeight : 'normal', fontSize : '12px', width : '300px'});
});

Just put a wrapper <div> within your <body> tag, for example:
<html>
<head>
</head>
<body>
<div id="wrapper" style="display:none;">
</div>
</body>
</html>
then on document ready in your js file, add:
$("#wrapper").show();

Related

Links not working in an absolute container with a positive z-index

The problem can be seen on the website I am developing https://manu354.github.io/portfolio/
The links in the header cannot be clicked. After a quick search on SO I realized this was because my div was positioned absolute. I had positioned it absolute, so it didn't take up any space in my page layout. To fix this, multiple answers said to add a z-index : 10; to my div. This let me click the links (Pointer / hover functionality worked) and completely fixed the problems for my external links to Facebook, or Twitter. However my internal functional links e.g href="#welcome"were clickable, however they didn't move to the area they were meant to (works if the div is positioned relatively).
For example (the actual codes much longer, and uses revolution slider)
<div style="position:absolute; z-index:1;">
<a href="#welcome" target="_self" style="z-index: 10;>
</div>
Anybody know a fix for this?
Thanks
The problem may be that you didn't put the ending double quotes in the a(anchor) tag the below code can help:
<!doctype HTML>
<html>
<head>
<title>codedamn HTML Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div style="position:absolute; z-index:1;">
Hello world
</div>
</body>
</html>
Well it doesnt work because your links to an id "welcome" but the div's id is "welcome_forcefullwidth".
Welcome ID
If you remove "_forcefullwidth" or add on your href "_forcefullwidth" it will work
Not to mention that the rest of the IDs are nowhere to be found
I see on your website a lot of inline style and the website is too complex as it should. The code is not that clean.

Angular web app: Splash screen is not rendered and browser is busy fetching the js files

I have angular application in which I want to show the user a splash (loading text) immediately while the browser fetches all the resources like js files and images.
I have included only css files in the head section. The first element in the body is the div that has the text Loading in it.
All the script tags are at the end of the body (just before the closing tag).
The issue is, theoretically the browser should render the loading text as the first thing, but what happens is that i just see a white screen until all my js files are fetched (even if i have only one after concatenation, the browser still fetches them first and then my loader comes after a long white screen).
Here is what I am doing:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="link to first css file" />
<link rel="stylesheet" href="link to second css file" />
</head>
<body ng-app="my-app" class="{{$state.current.name}}">
<div ng-hide="loaded()">
<h2>Loading...</h2>
</div>
<div id="content-wrapper" ng-cloak>
<!-- all other angular app content is wrapped into this section -->
</div>
<script src="first script"></script>
<script src="second script"></script>
<script src="third script"></script>
</body>
</html>
Unable to figure out why the Loading msg is not shown and browser starts fetching the js files. I am using angular 1.2.28
ng-hide should be listening to a property on $scope, not calling a function.
You need your code to look something like:
$scope.loaded = false
myLoadingFunctions() {
// ... do loading stuff
$scope.loaded = true;
}
And then your loading div is:
<div ng-hide="loaded">
<h2>Loading...</h2>
</div>
If you look at the console, it's likely that you're either interrupting your JS or calling a non-existent method and causing an error, or the loaded() call is simply evaluating to null and therefore hiding the div.
I got the reason for why my loading message was not being displayed. It turned out to be a silly CSS issue after all. :)
The body's height was 0 px as there was no content and my div was positioned absolute. (so it did not add to the body's height)
For me, making my div to position fixed solved the case.

Persistent/External JQuery Mobile Panel

In JQuery Mobile 1.4 panels can be external, fixed and responsive which led me to try to create a persistent sidebar using a panel. Everything seems to work great except that the panel is closed every time a page transitions. The panel is then opened again when the new page is shown.
jsfiddle: http://jsfiddle.net/egntp/
I would like for the panel to remain on the page during page transition similar to the way persistent toolbars work.
Any ideas? I looked into the panel's beforeClose() event (http://api.jquerymobile.com/panel/#event-beforeclose) to try to prevent it from closing, but I didn't know how to proceed.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.css" />
<style type="text/css">
.ui-panel-dismiss{display:none;}
#p1, #p2{margin-left:17em;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){$("#sidebar").panel();});
$(document).on("pageshow", ":jqmData(role=page)", function() {
$("#sidebar").panel("open");
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="panel" data-animate="false" data-position-fixed="true" data-swipe-close="false" id="sidebar">
<h1>sidebar</h1>
Page 1<br />
Page 2
</div>
<div id="p1" data-role="page">
My page 1
</div>
<div id="p2" data-role="page">
My page 2
</div>
</body>
</html>
I'm trying to do similar things, playing around with mild success here and there....try starting with this and see how far you can take it...
.ui-panel-closed {
width: 17em !important;
visibility: visible !important;
}
The reason this may work is because all jQuery Mobile is doing when you open or close a panel is they are modifying the css classes of the panel div. One thing they do is toggle a couple css classes, ui-panel-open and ui-panel-closed.
The above css ensures that even though they add the ui-panel-closed class to the panel div, the panel remains open.
You can do this in jQuery mobile 1.4 onwards. Just place the panel outside your page (i.e. data-role="page").
Note that external panels need to be initialized manually. So just do the following:
$(document).on( "pageshow", "[data-role='page']", function() {
$( "your_panel_selector" ).panel({ animate: true });
});

iframe is cut when in div on mobile safari

I would like to scale an iframe on mobile safari.
I am including an iframe inside a div.
<html>
<body>
<div id="iframe_container">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" style="width:300px;height:300px;"/>
</div>
</body>
</html>
Now I am scaling the div with this code:
$(function() {
$('#iframe_container').css({
'-webkit-transform': 'scale(0.7)',
'-webkit-transform-origin': '0 0 '
});
});​
On iOS/Safari, the iframe is cut (i.e. can't be entirely seen) while on desktop/chrome, the iframe is not cut.
Here is a jsfiddle page with the code: http://jsfiddle.net/viebel/tJQUH/
Just to clarify: here is a demo page that demonstrates the real problem - when opened on iPad/iPhone Safari - all the three lines should be of the same size: http://jsfiddle.net/viebel/tJQUH/show
Please advice what can I do to see the iframe on Mobile Safari completely uncut?
I have made few changes.Especially make the frame-size as 100%. Then try to scale the iframe itself.Check this out
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by viebel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script>
$(document).ready(function()
{
//alert('hai');
$('#ifd').css({
'-webkit-transform': 'scale(1.1)',
'-webkit-transform-origin': '0 0',
'width': '100%',
'height': '100%'
});
});
</script>
</head>
<body>
<div id="iframe_container" style="width:500px;height:400px;border:1px solid black;">
<iframe src="http://jsfiddle.net/viebel/kTzDS/show" id="ifd" />
</div>
</body>
</html>
Link to jsfiddle:
http://jsfiddle.net/viebel/tJQUH/13
There's something wrong happening also on Safari Mac.
As a test, I would try to reload the iframe after changing the iframe_container CSS
var iframe = $('#iframe_container iframe');
iframe.attr('src', iframe.attr('src'));
Let me know if it's better!
You are scaling the outer div not the iframe, try scaling the iframe and it might work.
And since you did specify that the iframe should be 300px, it would be easier just set the iframe height and width to 210px since that is 70 percent of 300.
use jQuery's $(window).height() to scale the iframe and also calculate the iframe dimensions on orientation change.

jQuery Mobile Beta: can no longer use $('[data-role=header]')?

I used to be able to get hold of
$('[data-role=header]').first().height()
in alpha with jQuery 1.5.2, but no longer can in beta with jQuery 1.6.1. Has something changed?
Full code - this writes 0 to console.log...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log($('[data-role=header]').first().height());
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
//lots of code
</div>
</div>
</body>
</html>
However, change this to jQuery 1.5.2 and jQuery Mobile alpha:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
and it writes the non-zero height of the header div.
Incidentally, it is also non-zero with jQuery 1.6.1 but without jQuery Mobile. So it's something to do with the jQuery Mobile rendering.
Can't see anything in the release notes to suggest what might have happened, but I'm no jQuery expert.
The change that is causing the difference is "Responsive design helper classes: Now deprecated"
We include a set of responsive design helper classes designed to make it easy to build a responsive design that adapts the layout for various screen widths. At the time, we went with a system of dynamically appended min- and max-width classes on the body that are updated on load, resize and orientation change events as a workaround for the limitation that Internet Explorer doesn’t support media queries.
Basically, the page is getting min-height set to the current page height in the beta which is overriding the .landscape { min-height: 300px; } in the alpha.
It looks like you need to use CSS Media Queries if you want a page layout that changes or you could just add CSS style="height:43px" on the the header if you need a fixed height.
Seems like the page is not ready when you query the height(). There is no document.ready for jQuery.mobile. It doesn't explain why there is a difference between alpha and beta, but I guess a code path changed that exposed the issue.
Wrapping the query in a different event, returns the height as expected.
$("div:jqmData(role='page')").live('pageshow',function(){
console.log($('[data-role=header]').first().height());
});
I found this by examining the offsetHeight of the DOM element in the Chrome console which was non-zero but, as you reported, the height() was always reporting 0. I then created an link when clicked output the height and it was non-zero. I then realised that the height() was being called before the page was fully ready.
Relevant - jQuery mobile $(document).ready equivalent
Looks like they did change some of the syntax, Docs:
http://jquerymobile.com/demos/1.0b1/docs/api/methods.html
When finding elements by their jQuery
Mobile data attribute, please use the
custom selector :jqmData(), as it
automatically incorporates namespaced
data attributes into the lookup when
they are in use. For example, instead
of calling $("div[data-role='page']"),
you should use
$("div:jqmData(role='page')"), which
internally maps to $("div[data-"+
$.mobile.ns +"role='page']") without
forcing you to concatenate a namespace
into your selectors manually.
Try this:
$("div:jqmData(role='header')").first().height()

Categories