Override jQuery Mobile Background CSS - javascript

I am trying to override the typical jQuery Mobile background with a .jpg. I cannot, for the life of me, figure this out. It is driving me nuts! I have been all over SO and Google to no avail with anyone's answers.
My current header information
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
The process my application is following:
index.html loads as a picture fades in. (This CSS override works perfect)
After the image has faded in, I do a $.mobile.changePage() to another page, not a multipage format
This is where it fails, the background loads up, but then gets overridden by something. I just cannot seem to figure out what is overriding it.
This is my CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
Anyone have some pointers or know what I am doing wrong? The background flashes for a split second, but then gets tossed out...
Thanks in advance for any help!

First, you need commas between the CSS classes you are setting to transparent. Next, as ui-overlay-c is also applied to the body, you can set its background image along with the body's.
So together, set the transparency first, then the body background:
.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
background: transparent !important;
}
body, .ui-overlay-c
{
background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
Here is a working fiddle of the above: http://jsfiddle.net/ezanker/5GgR9/

Related

How can I create a fixed floating plus button?

I'm looking to create a floating action button for my mobile application. Similar to the ones used in the Gmail and WhatsApp mobile applications (see the red button in the image).
I'm building a small app using jQuery Mobile and I would like the button to bring the user to another page. I've been researching for quite a while, with mixed results, but the main problem seems to be that the button doesn't sit above all of the other content on the page and doesn't stay fixed in a position once the user scrolls the page.
Does anyone have any resources or knowledge that could assist? Thank you
The JQM footer has already the fixed positioning and the correct z-index which plays nicely together with the other JQM widgets, like panels and so on. Why don't use that?
The classes ui-btn-left and ui-btn-right don't behaves well in footer, so I am using a grid with transparent background. The advantage with this approach is that You can quickly add more buttons, if You need it later.
.ui-footer {
border-width: 0 !important;
background: transparent !important;
}
.ui-grid-d {
overflow: visible !important;
background: transparent !important;
}
.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e {
text-align: center !important;
background: transparent !important;
padding-top: .3em;
padding-bottom: .9em;
}
.ui-icon-big {
height: 40px !important;
width: 40px !important;
margin-top: -18px !important;
border-radius: 20px !important;
}
.ui-icon-big:after {
width: 32px !important;
height: 32px !important;
background-size: 22px !important;
background-color: #F4123D !important;
background-color: rgba(244, 18, 61, 0.8) !important;
margin-top: -16px !important;
margin-left: -16px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js">
</script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
<h3>Page content</h3>
<hr>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid-d">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
<div class="ui-block-d"></div>
<div class="ui-block-e">
</div>
</div>
</div>
</div>
</body>
</html>
Moreover, You can decide to use data-tap-toggle="false" on not (default is true) to allow Your users to show the footer buttons on demand, when the page content is bigger than the screen height.
this is more a CSS question than a JS question although you could use either to solve it. In CSS that button element or whatever element contains it should have the attributes; position: absolute; and a z-index: x; (a z-index which is higher than any other element in the DOM). If you try to solve this with JS then you still have to have a z-index property and that only works when and element has a fixed, absolute, or relative position attribute... so you may as well just use CSS. you could use js to determine the hight of the window (the device height on mobile since the browsers are not resize-able like on a desktop) and then set the top: Xpx attribute so that to button appears to be in the same position regardless of the device.
I think this pen would help you. It has a tutorial link.
To make sure that your button is above all other elements, add z-index: 999 to your button in css.
You can think of z-index as layers.
So a z-index: 2 element will be above a z-index:1 element.
For further details about the z-index css property go here and here.
Here you are:
https://material.io/develop/web/components/buttons/floating-action-buttons/
Read more about it here:
https://material.io/design/components/buttons-floating-action-button.html
Have you tried using the "fixed" or "sticky" property values in CSS to hold the image in a relative position to browser window or user's scroll position?
Hope this helps, it's the first idea that comes to mind.
https://www.w3schools.com/cssref/pr_class_position.asp

Iframe on bottom of every page

I am not sure if this is the right place to ask this question, however I can't think of any other place where I can find answer to this.
I have noticed, this weird iframe on bottom of quite a few website. Weird because all of them same ip address. Here is screenshot from stackoverflow and bundler.io:
It may sound far fetched but could it be possible that someone is listening on me? I just concerned. I am using chrome: 41.0.2272.118 (64-bit)
and my os is ubuntu 14.04
I am talking about this:
<iframe id="fn_layer8" src="http://223.224.131.144:80/l8/Layer8Servlet" target="_blank" frameborder="no" style="display: block !important; opacity: 0 !important; z-index: 2147483646 !important;">
#document
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<pre style="word-wrap: break-word; white-space: pre-wrap;"></pre>
</body>
</html>
</iframe>
<div id="fnscreenOverlay" style="position: fixed !important; bottom: 0px !important; left: 0px !important; top: auto !important; right: auto !important; height: 2571px !important; z-index: 2147483645 !important; width: 100% !important; text-align: center !important; margin: 0px !important; padding: 0px !important; border: 0px !important; opacity: 0 !important; display: none !important; background-color: transparent !important;"></div>
If you're seeing this on pages that you normally wouldn't + sites that aren't connected in anyway (ie. same network) then there's a few reason I could think of (just speculation):
Malware on your computer
Browser add on that injects this iframe
If you open these sites in a different browser, does it still happen? If not, then it's option 2.
I would look into some security software/malware removers.

Hiding the toolbars in iOS 7 using overlay hack

I've been reading around Stack Overflow and searching on Google for a reliable way to hide the toolbars on iOS 7 as the old scroll trick no longer works.
Based on this: http://mihhaillapushkin.wordpress.com/2014/01/20/stop-navigation-bars-from-appearing-in-iphone-ios7-safari/
I've tried the following:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<style type="text/css">
*
{
padding: 0;
border: 0;
outline: 0;
margin: 0;
}
html,
body
{
width: 100%;
height: 100%;
overflow: hidden;
}
div.content
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 320px;
height: 480px;
background: orange;
}
#scroller {
height: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 100%;
}
</style>
</head>
<body class="default">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
setInterval(function(){
if((window.orientation == 90 || window.orientation == -90) && window.innerHeight != window.outerHeight) {
$('#scroller').show();
} else {
$('#scroller').hide();
}
}, 1000);
</script>
<div class="content">
<div id="scroller" style="z-index: 100000;position: fixed;top:0;left:0;right:0;bottom:0;">
Scroll up!
</div>
</div>
</body>
</html>
But scrolling up never actually hides the scrollbars. The #scroller is hiding and showing if the toolbars are visible or not, so half of it works, but just not the hiding unless I bounce the content into the toolbar, but if I scroll then the toolbars appear again.
Have I misunderstood the implementation?
If you want to hide the Safari Address bar you need to add this meta tags
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The status bar can be hidden in iOS 7.1 and above with this meta tag
<meta name="viewport" content="minimal-ui”>
Okay, here is an answer from the author.
I have not dived into your code block, but just to clarify what I've told about in that post.
Firstly, I have shown an example of a game that has adopted an overlay that forces the player to scroll up until the bars go away. After the game detects that bars are no longer visible it locks scrolling until the player triggers navigation bars again, forcing him to go through the loop again.
Secondly, I have revealed a trick that for some reason deactivates navigation bar triggering ONLY for the top part of the screen. The bottom still triggers them as usual, so the the overlay I mentioned earlier is still needed. Thus this is a half-solution for the problem, but it is still better than nothing.
IMHO, the combination of those 2 approaches yields a good-enough solution for games and other applications that need full-screen without the need for scrolling.

Slide content / page transition

I'm trying to recreate something like they've got over at gimmebar.com.
When you click an image, the content current page slides out left and fades out. The target page fades in and slides in from the right.
I've tried a couple of things, like creating two divs in a container with a width of 200% and scrolling the content in to view and using JqueryUI and slideing the divs.
The scrolling failed with the divs not moving at all and srollLeft always being 0 no matter what.
The slide worked somewhat better but to me it seems like they aren't run simultaneously.
The second div just pops in to existence instead of nicely sliding in right behind the first.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<style>
.container {
width: 100%;
float: left;
height: 800px;
}
#one {
background-color: red;
}
#two {
background-color: #333;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div class="container" id="one"></div>
<div class="container" id="two"></div>
<script>
$( document ).click(function() {
$("#one").hide("slide", { direction: "left" }, 1000);
$("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>
It seems like it should be so easy to achieve but I'm stuck.
Take care.
Edit:
I kind of got it to work as you can see in this fiddle.
The slide is there but I can't see no fade.
There also might be a better way of achieving this but I'm pretty satisfied with not having to load a third lib/plugin just to slide a div.
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios
Found a tutorial written by their developer. Think that would count as the solution.
A pure javascript solution: in the CSS:
div.wrap {visibility: hidden; position: absolute; overflow: hidden;
top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}
in the HTML:
<div class="initContent">
This is the content that is initially displayed
</div>
<div class="wrap">
<div class="newContent">
Put the content you want to be revealed here
</div>
</div>
The newContent div is initially hidden because its left edge is at the right edge of its parent (wrap) div, and the CSS tells the browser to hide any content that overflows the parent div.
Then to reveal the hidden content set a timer that progressively decreases the style.left for the inner div from 100% to 0% and increases the opacity from 0 to 1. I made a class for opening/closing swipey menus that could be adapted slightly to do this. (EDIT : a newer version)
i would recommend you use this jQuery script i used not so long ago in a website and it worked like a charm its called CODA SLIDER, it was made by Kevin Batdorf and the installation its barely 5 lines of code.
Good luck

Why doesn't 100% width/height work on iPhone?

If you have the chance to enter to http://toniweb.us/gm in your phone you will see that the dimensions are...wrong.
Acording to the css:
html, body{
position:relative;
height:100%;
width:100%;
overflow-y:hidden;
}
It should be using the whole of it.
And, I added:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=2.0" />
But I am not so sure what this affects.
In addition, the website is optimized to >= 1024 pixels. Is there a way to adapt iPhone to this? Perhaps by scaling somehow?
Any hint would be very helpful.
Tried:
html, body{
position:absolute;
top: 0;
left: 0;
right: 0;
overflow-y: hidden;
}
I guess that above code will do the job ;)
And I think your goal was to see only the grey sidebar on the iphone right?

Categories