Pop up window using javascript and css - javascript

My app needs to generate a pop up window on button click. The app is specifically for mobile devices in android and IOS.
I have received the same using this code:
.popup
{
position:absolute; left:0; top:0; width:132;
border-style:solid;
border-width:4;
border-color:blue;
background-color:black;
padding:5px;
color:white;
font-family:Arial;
font-weight:bold;
font-size:10pt;
z-index:2;
visibility:hidden;
}
But what I need is for the background to be blurred and disabled while the pop up window is open. How do I achieve that?
The code being in JavaScript or CSS is fine with me.

<div id="popup">
<div style="position:absolute;width:100%;height:100%;z-index:9000;opacity:.5,background-color:#000;"></div>
<div style="position:absolute;width:400px;height:400px;left:30%;top:20%;z-index:9001;">MY POPUP WINDOW</div>
</div>

Consider using a jquery plugin such as jQuery Tool's overlay.

You just have to put a div above everthing with position absolute and its z-index to something high like 9999.
you can take a look here http://www.w3schools.com/cssref/pr_pos_z-index.asp or use some plugin as mentioned by kamchatka.

If you are looking to develop for IOS as you mentioned in one of your comments, you could check out JQuery Mobile.

Disabling the background or creating a modal lightbox is pretty simple and covered in the other comments. Just be sure you set focus to new lightbox window or users using a screen reader will be lost.
Creating a blur is challenging. Webkit has introduced a CSS blur effect into their nightlies
http://bit.ly/AuBZJO
I believe this is ultimately the solution. For now we can use RGBA to set the background div to be somewhat transparent as the other commenters noted.
Or you can tilt at windmills and hack together something using canvas to first do a screen capture
Can you take a "screenshot" of the page using Canvas?
Then blur the generated image
http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Related

Dojo mobile show scroll bar

Is it possible to show the scroll bar in dojox mobile when the page is viewed from desktop browser?
This is my scrollablePane in which i want to show the scrollbar
<div id="resultViewScrollPane" data-dojo-type="dojox/mobile/ScrollablePane">
<div id="resultViewContentPane" data-dojo-type="dojox/mobile/ContentPane"></div>
</div>
To show the desktop browser scrollbar, you can override the overflow: hidden statement in dojox/mobile/themes/*/ScrollablePane.css in your own stylesheet:
.mblScrollablePane {
overflow: auto !important;
}
However, I don't think this is what you're looking for, as the client scrollbar seems to be pretty confused, because ScrollablePane is using webkit transforms to emulate scrolling in an inner div (see comments near top of dojox/mobile/scrollable.js). Try the above to see what I mean.
If you're just looking to keep dojox/mobile's custom scrollbar visible, you can override hideScrollBar() in scrollable.js, though it won't act like a normal desktop scrollbar (can't click and drag it, etc). I'd suggest not using a dojox/mobile ScrollablePane when the page is viewed on a desktop, and inserting a different widget such as a regular ContentPane.

Scale background image to fit ie8 window

I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing.
background-image: url('image.jpg');
background-size: cover;
I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it.
A javascript solution is fine if this can't be done with just CSS that ie8 supports. (Something that also works for ie7 would be fantastic too, but ie8 is the priority).
Add Full Size Background Image to Internet Explorer 8, and IE7
Since you can't easily place the background in your site using the usual methods, can you place an image within your code? If so, this solution might work. I used it to simulate a full-screen background for IE8 and IE7, and it works well.
Place the image right after the body tag in the html code. (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only).
HTML Code
<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
CSS
.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}
You probably already know this, but here are 3 ways to target older versions of IE:
JavaScript browser feature detection - mattstow.com/layout-engine.html
Css Hacks - BrowserHacks.com
IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Helpful Tips: background-image:none; overwrites background-size: cover. The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;}.
position:fixed; is buggy in mobile/touch screens. The default position:scroll; works well on touch. The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/

IOS Scrollbar missing on Skrollr Parallax Implementation

I've built a demo site using Skrollr's fixed position parallax code:
http://dev-jfw-sample-parallax-2.gotpantheon.com/
And though scrolling works great on my iPhone, the vertical scrollbar has disappeared -- and I'd like how the scrollbar there to indicate there's additional content.
Now when I look at the Skrollr demo page -- which also uses fixed positioning -- on an iPhone I see a scrollbar:
http://prinzhorn.github.io/skrollr/
I'm doing this in Drupal so the content is now nested in multiple divs, is that's what's eliminating the scrollbars?
I got an answer from the developer:
There are no scrollbars added by skrollr. Add one yourself, you can easily animate the scrollbar using skrollr.
Take http://prinzhorn.github.io/skrollr/ as an example
<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
#scrollbar {position:fixed; right:2px; height:50px; width:6px; background:#444; background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.6); z-index:300; border-radius:3px;}
.skrollr-desktop #scrollbar {display:none;}

Image slider working locally but completely absent on upload

I'm a novice web designer. For a friend, I recently customized a site from a free template. At the top of the page is a JS Image Slider, which appears right as rain when a browser preview is done via my WYSIWYG tool.
However, the slider disappears completely once uploaded. Nothing is present in that space and the content below the slider is pushed upward. Unfortunately, I lack the necessary skills to troubleshoot this issue. What do you need from me to help?
The web address is http://www.michianamemories.com
The CSS rule:
.ps_container{
display:none;
width:656px;
height:345px;
margin:20px auto 80px auto;
position:relative;
background:url(../images/slider_bg.png) no-repeat center;
}
Is setting the div with class ps_container's display to none, when I remove that display:none in my browser inspector the photo slider will appear.

Better way to auto resize images mantaning aspect ratio?

I am using this code to auto resize images to the window size on a mobile page:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
My intention is to show the image in the right size of the window on small screens and max 480px on bigger screens maintaining the ratio.
But for some reason i dont know when i use that code the text around the image goes behind it.
Theres a way to achieve this result using another method like Java or Jquery and avoid this problem?
If you do this for mobile devices I would recomend server resize to save download size.
Regarding the text that goes behind, do you have a more comprehensive testcase showing the actual document this CSS applies to?
You'll end up with squished images if you do that. I think this gives the best result you can achieve with CSS:
#content img {
width: 100%;
height: auto;
max-width: 480px;
}
I added this code in my page and it's working:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
Have you tried using different style sheets for different screen sizes? Then you would just need to write the code for each situation and then load the needed style. It would also come in handy if you have other styles that need to change based on size. Very helpful on mobile sites.
<meta content="width=device-width, initial-scale=1.0" name="viewport">
helps to make sure it scales right. Not sure how helpful it will be, but hope this link helps.
CSS trick for specific style sheet
I've also played around a little, and it seems to work if you set the image as a percentage. I floated one to the left of text and at 50% of the screen and it re-sized text and all. If you need me to post an example, just ask.
use #media to do manual change by the mobile, tablet or desktop size.
by the way mobile and tablet will have landscape and portrait. if you using google chrome to check you can determine it better. sample of website : Media Queries: How to target desktop, tablet and mobile?

Categories