Hi all I am looking to make a JS popUp responsive to be able to viewed on most screen sizes. At the moment the popup loads in the middle of the page but does not resize when browser is shortened?
HTML:
<div class="col-lg-12">
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
</div>
CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .6);
z-index: 1001;
}
#popup {
width: 555px;
height: 375px;
background: #222;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px;
left: 375px;
}
JS:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 5000);
}
Update:
Here's whats happening! the popup box is still not resizing to the page dimensions
Update:
Thanks for the help #beerwin the following link shows the popup box now floats up in the corner of the page?
Basically you have to set max-width which would help to fit the popup width to screens that are less than 555px(555px - width of the popup). Not sure about your exact requirement but here is what you can do by assuming you need the popup to be aligned horizontally centered.
#popup{
max-width: 555px;
height: 375px;
position:absolute;
/* your rest of the styles */
}
/* To align horizontally center for screens greater than 555px width */
#media (min-width:555px){
#popup{
left:calc(50% - 277px); /* 277px is the half of 555px */
}
}
Here is the fiddle: https://jsfiddle.net/3js5mLpb/
You have static width in your deffinition
#popup {
width: 555px;
..
}
use '%' eq.
#popup {
width: 80%;
...
}
or you can use bootstrap classes like col-md-6, col-md-12 (see definition on bootstrap pages), but remove width: 555px;
Change width to max-width, height to max-height and add height: 90%; width: 90%. This will make it responsive.
Then update your PopUp function to automatically adjust the position of the popup so it always fit in the screen.
See a working example below:
function PopUp(hideOrshow) {
var popup = document.getElementById('ac-wrapper');
if (hideOrshow == 'hide') {
popup.style.display = "none";
}
else {
popup.removeAttribute('style');
popup.style.marginLeft = (popup.offsetWidth / 2) * -1 + "px";
popup.style.marginTop = (popup.offsetHeight / 2) * -1 + "px";
}
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 1000);
}
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .6);
z-index: 1001;
}
#popup {
width: 90%;
height: 90%;
max-width: 555px;
max-height: 375px;
background: #222;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 50%;
left: 50%;
}
<div class="col-lg-12">
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
</div>
Change width to max-width
#popup {
max-width: 555px;
height: 375px;
background: #222;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Related
I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}
You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>
You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>
For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}
You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);
So basically, I'm building an app in Meteor, and I have the left navbar in a position: fixed; and left : -300px and want to slide it over to left : 300px, but have no idea about how to animate a transition in Meteor (somewhat the slide transition in jquery). I understand the basic JQuery aspect of thing, but for some reason, it doesnt seem to work when I put it under the if Meteor.isClient aspect of the script. Keep in mind, Im am fairly new to Meteor, inclusive javascript code would be much appreciated.
My current code is as follows.
HTML
<body>
<div class='topmenu'>
<div class='menubutton'>
<span class="icon-bar1"></span>
<span class="icon-bar2"></span>
<span class="icon-bar3"></span>
<!--Needs to be fixed so that we only need to use one icon-bar class!!!-->
</div>
<div class='BanditDiv'>
<h1 class='BanditName'>Bandit</h1>
</div>
</div>
<div class='leftnav'>
<div class='sitenav'>
<a class='internalnav' href="#">Home</a>
<a class='internalnav' href="#">Musicians</a>
<a class='internalnav' href="#">Recording Space</a>
</div>
</div>
<div class='main'>
</div>
</body>
CSS
body{
margin: 0px 0px 0px 0px;
}
.navitem:hover{
background-color: #000066;
}
.main{
background-color: rgb(128,128,128);
height: 200vh;
width: 100vw;
margin: 0px 0px 0px 0px;
overflow-x:hidden;
}
.topmenu{
position: fixed;
z-index: 10;
top: 0px;
width: 100vw;
height: 50px;
background: white;
border-bottom: 2px lightgray solid;
}
.BanditDiv{
position: fixed;
top: 0px;
height: 50px;
width: 30vw;
margin-left: 35vw;
float: center;
}
.BanditName{
text-align: center;
font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif;
color: #000066;
}
.menubutton{
position: fixed;
top: 5px;
left: 5px;
height: 40px;
width: 40px;
border: 1px #cccccc solid;
background-color: white;
border-radius: 5px;
}
.menubutton:focus{
outline: 0;
}
.icon-bar1 {
position: fixed;
top: 15px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar2 {
position: fixed;
top: 25px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar3 {
position: fixed;
top: 35px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.leftnav{
position: fixed;
top: 0px;
left: -300px;
width: 300px;
height: 100vh;
z-index: 9001;
background-color: yellow;
}
So this is what I came up with for the solution that seemed to work.
I created an angular module inside the Meteor.isClient and that seemed to work well.
if (Meteor.isClient) {
angular.module('sidebar',['angular-meteor']);
angular.module('sidebar').controller('SidebarCtrl', ['$scope',
function ($scope) {
function Menu (callback){
$('.menubutton').on('click', function (){
$('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"});
$('.leftnav').animate({left : "0px"}, 500, function(){
$('.main').click(function() {
$('.leftnav').animate({left: "-302px"}, 500);
$('.leftnav').css({"box-shadow" : "none"});
});
$('.leftnav').click(function(event){
event.stopPropagation();
});
});
});
}
Menu();
}]);
}
I created an id wrapper in CSS:
#wrapper {
position: relative;
background: yellow;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
width: 960px;
padding: 40px 35px 35px 35px;
margin: 0px auto;
}
class box in CSS:
float: left;
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
HTML:
<div id="wrapper"><div class="box">
<p>ini box 1</p>
</div> </div>
The problem is the box is out from the wrapper. What is the soultion?
Remove the float:left style from box css
.box {
width: 170px;
height: 190px;
margin: 10px;
border: 3px solid #8AC007;
border-radius: 5px;
right: auto;
}
Add overflow: auto to wrapper to clear the float of box.
I always recommend a clearing element after floats, old IE especially behaved unpredictably without them
<div id="wrapper">
<div class="box">
<p>ini box 1</p>
</div>
<div class='clr'></div>
</div>
additional CSS
.clr {
clear:both;
height:0px;
}
I found myself stuck with this problem: I have game map with following code
Code
.content-right {
width: 50%;
height: 100%;
position: relative;
align-self: auto;
background-color: #44362D;
}
.content-inner-top {
width: 100%;
height: 70%;
background-image: url("http://i.imgur.com/wLJ1Pnt.jpg"); /* map.png */
background-position: left center;
background-size: 100% auto;
-moz-user-select: none;
background-repeat: no-repeat;
box-sizing: border-box;
position: relative;
-webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
}
.content-inner-bottom {
width: 100%;
height: 30%;
margin: 0 auto;
z-index: 9;
text-align: center;
display: block;
position: relative;
top: 10%;
transform: translateY(-10%);
}
#position {
width: 4%;
height: 6.11979%;
background-color: #FF503C;
border: 3px solid #90EE90;
box-shadow: 0px 0px 35px #87CEEB;
position: relative;
border-radius: 50%;
transform: scaleY(0.75);
left: 85%;
top: 200px;
}
<div class="content-right">
<div class="content-inner-top">
<div id="position"></div>
</div>
<div class="content-inner-bottom"></div>
</div>
I would like to absolute position #position element on game map, but, I find it impossible because every time I resize browser window height, element goes to another place. Images are shown below.
Images
1st image (normal window)
2nd image (resized window)
What should I do? I cannot find solution via javascript nor jQuery either...
Thanks for your help in advance
I see that there's a top in 'px' but when you decrease the size of window, the image is smaller not only in width but also height. That's why the pointer went down.
The percentage 'left' property seems to work fine. If you want to use also percents for 'top' property (which could solve the problem), you have to explicitly define the height of the element (the image in your case). You can do that with jQuery for example most easily like this (given that you have an #image element):
$('#image').height($('#image').height());
Then you can add a resize handler and reassign new height. You may have to remove the previous height, so the whole would be something like this:
$(window).resize(function() {
$("#image").css("height","");
$('#image').height($('#image').height());
});
Then you should be able to use css top property in percents and it would be working after window resize.
You will need to modify your layout in order to achieve this behavior
First of all you need to add your map as an img and created a holder for it
<div class="content-right">
<div class="content-inner-top">
<div class="map-holder">
<img src="http://i.imgur.com/wLJ1Pnt.jpg" class="content-inner-map" />
<div id="position"></div>
</div>
</div>
<div class="content-inner-bottom"></div>
</div>
After that it is a matter of css:
added
.content-inner-map {
resize: both;
width: 100%;
}
.map-holder {
position: relative;
top: 50%;
display: block;
transform: translateY(-50%);
}
.content-inner-top:after {
position: absolute;
-webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
top:0;
left:0;
right:0;
bottom:0;
content:"";
}
Altered
.content-inner-top {
width: 100%;
height: 70%;
-moz-user-select: none;
box-sizing: border-box;
position: relative;
}
#position {
width: 4%;
height: 6.11979%;
background-color: #FF503C;
border: 3px solid #90EE90;
box-shadow: 0px 0px 35px #87CEEB;
position: absolute;
border-radius: 50%;
transform: scaleY(0.75);
left: 85%;
top: 24%;
}
Here is a working Fiddle
I would use SVG instead, simple code and fully responsive:
svg {
display: block;
width: 100%;
}
circle {
stroke: white;
stroke-width: 3;
fill: red;
}
<svg viewBox="0 0 604 568">
<image x="0" y="0" width="586" height="604" xlink:href="http://i60.tinypic.com/2enrntu.jpg"/>
<circle cx="400" cy="190" r="20"/>
</svg>
I'm stuck on this one. Anyone up for a css puzzle?
I need the element displaying the scrolling text to remain fixed while scrolling down the page but then to be able to move if scrolled horizontally.
I made a jsfiddle to demo the issue. You can find it here: http://jsfiddle.net/6tPpE/
HTML:
<body>
<section id="front_page">
<div id = "ticker_placer">
<div id="ticker_holder">
<div id="ticker_ribbon">
<ul id ="ticker">
<li>Scrolling on Jin & Juice</li>
</ul>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
width: 700px;
height: 700px;
background:yellow;
}
#ticker_placer {
position: absolute;
left: 0px;
width: 68%;
min-width: 871px;
z-index: 1;
}
#ticker_holder {
position: fixed;
width: 68%;
min-width: 871px;
}
#ticker_ribbon {
position:relative;
padding: 0 10px;
margin: 0 0 0 -10px;
width: 400px;
height: 35px;
background: rgba(0,0,0,.25);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow:
inset 0 1px rgba(255,255,255,.3),
inset 0 10px rgba(255,255,255,.2),
inset 0 10px 20px rgba(255,255,255,.25),
inset 0 -15px 30px rgba(0,0,0,.3),
inset 0 -1px 6px rgba(0,0,0,.3);
}
#ticker_ribbon:before, #ticker_ribbon:after {
content:" ";
border-top:10px solid rgba(0,0,0,.6);
position:absolute;
bottom:-10px;
}
#ticker_ribbon:before {
border-left:10px solid transparent;
left:0;
}
#ticker_ribbon:after {
border-right:10px solid transparent;
right:0;
}
.tickercontainer {
position: absolute;
left: 0;
width: 400px;
}
.mask {
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 1000px;
font: 10px;
font-family: "KeplerStd-Regular";
src: url('Fonts/KeplerStd-Regular.ttf') format('truetype');
list-style-type: none;
color: white;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 5px 0;
padding: 0;
}
section#front_page {
position: relative;
margin: 0 2.5%;
width: 400px;
height: 400px;
background: green;
box-shadow: 0 0 10px -2px #AAAAAA;
}
$(window).scroll(function(){
$('#ticker_holder').css('left',-$(window).scrollLeft()+26);
});
This sets the positon of the div whenever it scrolls left..
Using scrollLeft() I get the amount of scrolling and this 26px is for positioning it properly..so setting the left property..
Working Fiddle:http://jsfiddle.net/6tPpE/1/
You need to make the body the same width as the fixed element:
body {
width: 400px;
}