We're trying to make a lightbox responsive
Here's the original CSS:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#mageworxImageContainer{ padding: 10px; }
Which has been edited into:
#mageworxLightbox{ position: absolute; left: 0; width: 100%; height: auto !important; z-index: 60002; text-align: center; line-height: 0; }
#mageworxLightbox img{ width: auto; height: auto;}
#mageworxLightbox a img{ border: none; }
#mageworxOuterImageContainer{ width:80% !important; height: auto !important; position: relative; max-width: 600px; background-color: #fff; margin: 0 auto; }
#mageworxImageDataContainer{ width: 80% !important; height: auto !important; max-width: 600px; line-height: 2em; }
#mageworxImageContainer{ padding: 10px; height: auto !important; }
but the close button isn't working anymore on devices such as iPhones and I can't understand why; also in landscape mode the image is not resizing correctly.
This is our page:
http://www.arredodesignonline.com/it/letto-design-imbottito-heart.html
(to see the lightbox choose "modello letto" on dropdown and any image clicked in there will work)
Add this css to your stylesheet. Some elements have clashing layers, which causes the button to be "under" a layer so you are not clicking on a button but on some invisible layer.
#mageworxImageDataContainer{
...
position: relative;
}
device.iphone = function () {
return !device.windows() && find('iphone');
};
if (device.ios()) {
if (device.ipad()) {
addClass("ios ipad tablet");
} else if (device.iphone()) {
addClass("ios iphone mobile");
} else if (device.ipod()) {
addClass("ios ipod mobile");
}
}
Related
This question already has answers here:
How To Get Font Size in HTML
(9 answers)
Closed 1 year ago.
I want to address to font-size to change the size of a ball when pressing keys, but in switch the program sees only size (instead of font-size) after a hyphen.
Task: Create a page that displays a balloon (using emoji https://emojipedia.org/balloon/). When you click the up arrow, the ball should inflate (increase) by 10 percent, and when you click the down arrow, it should inflate (decrease) by 10 percent.
Then finish the program as follows, if the ball is inflated to a certain size, it will explode. That is, you need to replace the emoji of the ball (balloon) with the emoji of the explosion (https://emojipedia.org/collision-symbol/). You need to remove the event handler (the explosion cannot be inflated or inflated)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body{
margin:0;
overflow:hidden;
}
#blueRect{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
.box1 {
position: relative;
margin-left: auto;
margin-right: auto;
top: auto;
bottom: auto;
height: 1500px;
width: 1000px;
}
.one {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.two {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
visibility:hidden;
}
#second{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
</style>
</head>
<body>
<div class = "box1">
<div class = "one" id="blueRect">🎈</div>
<div class = "two" id="second">💥</div>
</div>
<script>
function moveRect(e){
var blueRect = document.getElementById("blueRect");
var cs = window.getComputedStyle(blueRect);
var size = parseInt(cs.style.fontSize);
switch(e.key)
{
case "ArrowUp":
blueRect.style.fontSize = size + 10 + "px"; /*setSize(size+10px)*/
break;
case "ArrowDown":
blueRect.style.fontSize = size - 10 + "px";
break;
}
}
addEventListener("keydown", moveRect);
if (size > 50px){
one.style.visibility = hidden;
two.style.visibility = visible;
}
</script>
</body>
</html>
You can use below codes with adding up your own functionality , below code is just to reference , make it use and develop accordingly based on your needs.Hope this may help. Codepen Demo.
var blueRect = document.getElementById("blueRect");
var size_val = window.getComputedStyle(blueRect,null).getPropertyValue("font-size");
var size = parseInt(size_val);
function moveRect(event){
//alert(event.type);
switch(event.type)
{
case "click":
var newSize = (size + 10);
size = newSize;
blueRect.style.fontSize = newSize +"px"; /*setSize(size+10px)*/
break;
}
}
blueRect.addEventListener("click", moveRect); // Put your arrowup and arrowdown similar to this here blueRect act as up similarly do it for down
html, body{
margin:0;
overflow:hidden;
}
#blueRect{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
.box1 {
position: relative;
margin-left: auto;
margin-right: auto;
top: auto;
bottom: auto;
height: 1500px;
width: 1000px;
}
.one {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.two {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
visibility:hidden;
}
#second{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
<body>
<div class = "box1">
<div class = "one" id="blueRect">🎈</div>
</div>
</body>
I have no idea why, but the function thumbsScroll only runs the first alert, and then stops. It doesn't even show the 2nd alert.
The function is supposed to hide the 'scroll' divs when the number of thumbs is less than 5.
Probably a very simple problem, but actually can't find a solution to this, and have spent a lot of time trying to find out. Is there something I'm not getting here?
var mainImg = document.getElementById("main-image");
function thumb1() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/394545.jpg')";
}
function thumb2() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/572806.jpg')";
}
function thumb3() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/486757.jpg')";
}
function thumb4() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612357.jpg')";
}
function thumb5() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/612358.jpg')";
}
function thumb6() {
mainImg.style.backgroundImage = "url('https://cml.sad.ukrd.com/image/661833.jpg')";
}
function thumbsScroll() {
alert('test - function runs');
var thumbs = document.getElementByClassName('image-thumb');
var desktopThumbsScroll = document.getElementById('scroll-desktop');
var mobileThumbsScroll = document.getElementById('scroll-mobile');
alert('test alert 2 - doesnt work');
if (thumbs.length < 5) {
desktopThumbsScroll.style.display = 'none';
mobileThumbsScroll.style.display = 'none';
alert('if true')
} else {alert('if false')}
}
thumbsScroll();
/* rollovers */
#main-image {
background-image: url('https://cml.sad.ukrd.com/image/661835.jpg');
}
#thumb1 { background-image: url('https://cml.sad.ukrd.com/image/394545.jpg') }
#thumb2 { background-image: url('https://cml.sad.ukrd.com/image/572806.jpg') }
#thumb3 { background-image: url('https://cml.sad.ukrd.com/image/486757.jpg') }
#thumb4 { background-image: url('https://cml.sad.ukrd.com/image/612357.jpg') }
#thumb5 { background-image: url('https://cml.sad.ukrd.com/image/612358.jpg') }
#thumb6 { background-image: url('https://cml.sad.ukrd.com/image/661833.jpg') }
/* rollovers */
* {
margin: 0;
padding: 0;
font-family: arial;
line-height: 1.5em;
box-sizing: border-box;
}
#images-and-hook-container {
width: 100%;
height: auto;
float: left;
background: cyan;
display: flex; /* allows hook container to be full height */
}
#hook-container {
background: blue;
float: left;
width: 40%;
height: auto;
padding: 3% 0 0 3%;
}
#images-wrap {
width: 60%;
height: auto;
float: left;
position: relative;
}
#scroll-desktop {
position: absolute;
bottom: -6%;
right: 5%;
font-size: 0.5em;
text-transform: uppercase;
opacity: 0.5;
}
#scroll-desktop > span { font-size: 1.5em }
#scroll-mobile { display: none }
#main-image {
width: 79%;
float: left;
background-size: cover !important;
background-position: center center !important;
height: auto;
padding-bottom: 53.666%;
}
#image-thumbs {
width: 19%;
height: auto;
float: left;
margin-left: 2%;
overflow-y: auto !important;
overflow-x: hidden;
position: absolute;
right: 0;
height: 100%;
}
.image-thumb {
margin-bottom: 6%;
background-position: center center;
background-size: cover;
width: 100%;
height: auto;
padding-bottom: 66.666%;
}
.image-thumb:last-of-type { margin-bottom: 0 }
#media (max-width: 768px) {
body { background: red }
#images-and-hook-container {
flex-direction: column;
}
#images-wrap {
position: static;
width: 100%;
}
#scroll-desktop { display: none }
#scroll-mobile {
display: block;
background: yellow;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 0.5em;
opacity: 0.5;
}
#scroll-mobile > span { font-size: 1.5em }
#hook-container {
width: 100%;
padding: 3% 0;
}
#main-image {
width: 100%;
padding-bottom: 66.666%;
margin-bottom: 1%;
}
#image-thumbs {
width: 100%;
margin-left: 0;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
overflow-y: hidden !important;
}
.image-thumb {
float: left;
margin-bottom: 6px;
width: 24.333%;
padding-bottom: 16.666%;
flex: 0 0 24.333%;
margin-left: 1%;
}
.image-thumb:first-of-type { margin-left: 0 }
#aspect-ratio-wrap {
float: left;
width: 100%;
height: auto;
padding-bottom: 16.666%;
background: orange;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
}
#media (max-width: 400px) {
#scroll-mobile { font-size: 0.25em }
#scroll-mobile > span { font-size: 1em }
}
#media (min-width: 1000px) {
#scroll-desktop {
bottom: -5%;
right: 6%;
}
}
<div id='images-and-hook-container'>
<div id="images-wrap">
<div id="main-image"></div>
<div id='aspect-ratio-wrap'>
<div id="image-thumbs">
<div class="image-thumb" id="thumb1" onmouseover="thumb1()"></div>
<div class="image-thumb" id="thumb2" onmouseover="thumb2()"></div>
<div class="image-thumb" id="thumb3" onmouseover="thumb3()"></div>
<div class="image-thumb" id="thumb4" onmouseover="thumb4()"></div>
<div class="image-thumb" id="thumb5" onmouseover="thumb5()"></div>
<div class="image-thumb" id="thumb6" onmouseover="thumb6()"></div>
</div>
</div>
<div id='scroll-desktop'>Scroll <span>↓</span></div>
</div>
<div id='scroll-mobile'>Scroll <span>→</span></div>
<div id='hook-container'>
hook container
</div>
</div>
You should definitely keep your eye on the JavaScript console. This is the first place to look when something doesn't work. The console will try to give you hints about the errors in your code.
Memorize the shortcut, the console in chrome on windows: ctrl-shift-j.
When running your provided script the console will tell you that it didn't understand getElementByClassName:
You mis-typed
getElementByClassName
it should be
getElementsByClassName
There is no a function like getElementByClassName. You can use document.getElementsByClassName('image-thumb') to achieve your goal.
I want to slide out my both sidebars and expand the width of my middle content div but at the same time and on a again click I want to toogle it back to original.
What I tried so far
$('.headbar').click(function () {
$(".leftside").animate({width: 'toggle'});
$( ".rightside" ).animate({
width: "toggle"
}, 300, function() {
$(".content").animate({width: '1200px'});
});
});
My Problems
headbar is flashing when animation start (but guess its CSS bug)
content is not toggle back to original
My Concept for understanding
I would approach this using a CSS class transition effect toggled by jQuery instead of using jQuery animate function.
Working Demo:
$(document).ready(function() {
$('body').on('click', '.headbar', function(){
$('body').toggleClass('expanded');
});
});
.headbar {
width: 100%;
background: #303030;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 5px;
position: fixed;
z-index: 1000;
margin-top: -40px;
}
.leftside {
position: fixed;
left: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.rightside {
position: fixed;
right: 2%;
top: 100px;
height: 500px;
width: 13%;
background-color: rgba(123, 123, 123, 0.95);
}
.scrollable {
position: relative;
top: 20px;
min-height: 700px;
width: 70%;
margin: 0 auto;
box-shadow: 0px 1px 5px;
background: white;
}
/* ===================== */
/* expanded transition
/* ===================== */
.leftside, .rightside, .scrollable {
transition:0.3s;
}
body.expanded .scrollable {
width:100%;
}
body.expanded .leftside {
left: -100%;
}
body.expanded .rightside {
right: -100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>
jsFiddle
I've been working on an overlay menu recently. It'll contain a long list of names (can't be avoided). It behaves perfectly on Chrome, but the list refuses to scroll on Firefox. I've no idea what's causing this but have created a JSFiddle to show what's happening.
Link here
A bit of the HTML:
<div class="full-menu">
<div class="full-menu--middle">
<button class="menu-toggle menu-toggle--close"></button>
<div class="section group menu_items">
<ul>
<li>a bunch of options vvv</li>
</ul>
</div>
</div>
</div>
A bit of the CSS:
html,
body {
height: 100%;
width: 100%;
}
.main_menu {
display: none;
}
.full-menu {
visibility: hidden;
display: table;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
}
.full-menu--open {
visibility: visible;
opacity: 1;
}
.full-menu--middle {
display: table-cell;
vertical-align: middle;
}
.menu-toggle {
background-color: transparent;
border: 0;
color: #fff;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu-toggle--close {
position: fixed;
top: 20px;
left: 20px;
}
.menu-toggle_black {
background-color: transparent;
border: 0;
color: #000;
position: fixed;
left: 20px;
top: 20px;
}
.menu-toggle_black:before {
content: '\f0c9';
font-family: 'FontAwesome';
margin: 0 20px 0 0;
}
.menu_items{
overflow: scroll;
height: 100%;
}
.page_inner_ {
display: table-cell;
vertical-align: middle;
}
.page_container {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #ffffff;
}
Any help would be very much appreciated!
Thanks
Maybe you should give position: absolute; to .full-menu, instead of fixed.
Take display:table; off of .full-menu and take display:table-cell; off of .full-menu--middle then add overflow:scroll; to .full-menu.
How to Fix Overflow Issues in CSS Flex Layouts:
"... add min-height: 0; to the flex child that has our overflow container ..."
https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/
I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>
On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}
change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.
try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),