I have this working on a project that convert div into images. everything works but I have having this problem on mobile resizing. anytime the web page loads for the first time I will have to use my hand to zoom in for it to fit mobile screen size. I have several method for it work but is not working. Take a look at my code and see if am doing it right. Am not good with JavaScript if there a script to get done I will be open to
<div class="container" >
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-7" style="background-color: #fff;">
<div id="outer">
<div class="meme-generator " >
<div class="meme-generator-wrapper" id="memeGeneratorWrapper">
<div id="memeGeneratorImg">
</div>
<div id="memeOverlay" class="meme-hidden meme-generator-overlay"></div>
<h4 class="name" id='outputAccHomePagePermalink'></h4>
</div>
<div class="meme-generator-controls">
<a class="button button-primary meme-upload" href="#" style="font-size: 17px; font-weight:bold;">
<label>
<input id="memeAddPhoto" type="file">
</label>
Add Photo
</a>
<a class="button button-primary" id="memeClearPhoto" href="#" style="font-size: 17px; font-weight:bold;">Clear Photo</a>
<button class="button button-primary" id="foo" style="font-size: 17px; font-weight:bold;">download</button>
</div>
<div class="home_page_title">
<input id="nameField" type="text" name="Accessable[accsc_home_page_title]" placeholder="Enter Your Name Here"
data-depend-id="accsc_home_page_title" style="font-size: 17px; font-weight:bold; margin-top: 20px;">
</div>
</div
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
.meme-generator-wrapper {
position: relative;
margin-bottom: 80px;
width: 492px;
height: 607px;
background: url("{% static 'dp.png' %}") no-repeat center right #222228;
-webkit-background-size: contain;
-moz-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
.meme-generator-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("{% static 'dp.png' %}") no-repeat 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
z-index: 1;
}
.meme-generator-controls {
margin-top: 10px;
}
.meme-upload {
position: relative;
}
.meme-upload label {
background: #000;
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
opacity: 0;
top: 0;
left: 0;
}
.meme-upload input {
cursor: pointer !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cr-slider-wrap{
position: absolute;
bottom: 100%;
z-index: 99;
}
.name{
text-align: center;
font-size: bold;
text-transform: capitalize;
color :#ee2047 !important;
font-weight: bold;
}
.home_page_title input{
width:71%;
border: 1px solid #091639;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.meme-generator-controls .button {
background-color: #091639;
}
.meme-generator-controls .button:hover {
background-color: #ee2047
}
#media (max-width: 767px) {
.cr-slider-wrap{
position: absolute;
bottom: 100%;
left: 10%;
z-index: 99;
}
#wrap {
position: fixed;
max-width: 100%;
height: auto;
margin: 0 auto;
}
#outer {
left: -20px;
padding-left: 30px;
padding-top: 70px;
padding-bottom: 70px;
position: fixed;
width: 180%;
background: #fff;
transform-origin: 0% 0%;
border-radius: 10px;
box-shadow: 0px 3px 25px rgba(223, 207, 207, 0.2);
}
#mob{
width: 100vh;
}
}
Looks like you are using bootstrap, usually you can use the classes:
"img-responsive" for bootstrap 3
"img-fluid" for bootstrap 4
If you want to scale an image just using CSS though, you can set the max-width to 100% on the image tag. I have included a bootstrap example for using img-fluid on the img tag - Hope it helps :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<div class="container" >
<div>
<img src="img.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</body>
</html>
Related
i have created a sliding menu that shows two items at a time. However, when the second slide in view is clicked, instead of loading in content, it puts the slide to the top of the nav and then it will load content once clicked again.
I would like the slide to load in the content and not move to the top, it does it once the slides reach the ned but i could have 20 slides in at a time.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap');
body {
overflow: hidden;
width: 990px;
height: 1570px;
margin: 0 0 0 25px;
font-family: open sans;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 20px;
border: 20px #fff solid;
}
.poiIframe {
overflow: hidden;
width: 990px;
height: 100%;
left: 25px;
margin: 0;
z-index: 1;
background: white;
border: 0px;
}
.poiMenu {
overflow: hidden;
position: absolute;
width: 410px;
height: 830px;
bottom: 200px;
left: 55px;
}
.swiper-container {
position: absolute;
width: 100%;
height: 102%;
top: 0px;
left: 0px;
z-index: 100;
}
.poiBtn {
overflow: hidden;
position: absolute;
width: 350px;
height: 350px;
top: 10px;
left: 10px;
background: white;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.poiBtnImg {
overflow: hidden;
position: absolute;
width: 330px;
height: 170px;
top: 10px;
left: 10px;
border-bottom: solid 2px #F0F0F0;
border-radius: 20px;
z-index: 10;
}
.poiBtnTitle {
overflow: hidden;
position: absolute;
width: 330px;
height: 140px;
top: 200px;
left: 10px;
color: #222;
font-size: 2.1vh;
display: table;
}
.poiBtnTitle span {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
.poiFtr {
position: absolute;
overflow: hidden;
bottom: 25px;
left: 50px;
height: 150px;
width: 990px;
background-image: url(../img/bg/iframeFtrBg.png);
background-repeat: no-repeat;
z-index: 10;
background-color: white;
}
.poiFtrBtn {
position: absolute;
overflow: hidden;
top: 20px;
height: 122px;
width: 138px;
z-index: 100;
background-repeat: no-repeat;
border: 0;
}
.attractions {
background-image: url(../img/btn/NCity/attractionsBtn.png);
left: 0px;
}
.universities {
background-image: url(../img/btn/NCity/universitiesBtn.png);
left: 420px;
}
.hospitals {
background-image: url(../img/btn/NCity/hospitalsBtn.png);
left: 280px;
}
.transport {
background-image: url(../img/btn/NCity/transportGreyBtnV2.png);
left: 560px;
}
.entertainment {
background-image: url(../img/btn/NCity/entertainmentBtn.png);
left: 140px;
}
.libraries {
background-image: url(../img/btn/NCity/librariesBtn.png);
left: 560px;
}
.parks {
background-image: url(../img/btn/NCity/parksBtn.png);
left: 700px;
}
.sports {
background-image: url(../img/btn/NCity/sportsFacilitiesBtn.png);
left: 840px;
}
.attractionsActive {
background-image: url(../img/btn/NCity/attractionsBtn2.png);
left: 0px;
}
.universitiesActive {
background-image: url(../img/btn/NCity/universitiesBtn2.png);
left: 420px;
}
.hospitalsActive {
background-image: url(../img/btn/NCity/hospitalsBtn2.png);
left: 280px;
}
.transportActive {
background-image: url(../img/btn/NCity/transportGreenBtnV2.png);
left: 560px;
}
.entertainmentActive {
background-image: url(../img/btn/NCity/entertainmentBtn2.png);
left: 140px;
}
.librariesActive {
background-image: url(../img/btn/NCity/librariesBtn2.png);
left: 560px;
}
.parksActive {
background-image: url(../img/btn/NCity/parksBtn2.png);
left: 700px;
}
.sportsActive {
background-image: url(../img/btn/NCity/sportsFacilitiesBtn2.png);
left: 840px;
}
.swiper-vertical>.swiper-scrollbar {
position: absolute;
right: 0px;
top: 1%;
z-index: 50;
width: 10px;
height: 98%;
}
.swiper-pagination-bullet-active {
background-color: #C4D000 !important;
}
<html>
<head>
<meta charset="utf-8">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MZLHQBBKRP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MZLHQBBKRP');
</script>
<title>Notts City - Attractions</title>
<link href="../../../css/d2n2WhatsNearby.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<!-- Main POI Frame -->
<iframe class="poiIframe" name="poiIframe" src="pois/Attractions/oldMarketSquare.html"></iframe>
<!-- Info Area -->
<div class="poiMenu">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- POI 1 -->
<div class="swiper-slide"><a href="pois/Attractions/oldMarketSquare.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Old Market Square.png" /></div>
<div class="poiBtnTitle"><span>Old Market Square</span></div>
</div>
</a> </div>
<!-- POI 2 -->
<div class="swiper-slide"><a href="pois/Attractions/nottinghamCastle.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Nottingham Castle.png" /></div>
<div class="poiBtnTitle"><span>Nottingham Castle</span></div>
</div>
</a> </div>
<!-- POI 3 -->
<div class="swiper-slide"><a href="pois/Attractions/yeOldeTripJerusalem.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Ye Olde Trip to Jerusalem.png" /></div>
<div class="poiBtnTitle"><span>Ye Olde Trip to Jerusalem</span></div>
</div>
</a> </div>
<!-- POI 5 -->
<div class="swiper-slide"><a href="pois/Attractions/touristInfoCentre.html" target="poiIframe">
<div class="poiBtn">
<div class="poiBtnImg"><img src="../../../img/pois/Nottingham Tourism and Travel Centre.png" /></div>
<div class="poiBtnTitle"><span>Tourism and Travel Centre</span></div>
</div>
</a> </div>
</div>
<!-- <div class="swiper-scrollbar"></div>-->
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Initialize Swiper -->
<script> var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 2,
spaceBetween: 60,
freeMode: true,
// scrollbar: {
// el: '.swiper-scrollbar',
// hide: false,
// },
pagination: {
el: '.swiper-pagination',
},
})
</script>
</body>
</html>
I am very new to web development, but I have a simple card flip animation with javascript. It works fine until I add links to the back of the cards. Once I do this it will flip the correct card but open the links from the card above. I believe it has to do with event bubbling, but I am unable to find a solution that will work.
I want all cards to work like the first one. What I mean is that the card flips when clicked on and shows the information and the links that the user can click on if they want too.
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
:root {
--primary: #FFCE00;
--secondary: #FE4880;
--dark: #212121;
--light: #F3F3F3;
/* bottom back color*/
}
* {
margin: 0;
padding: 0;
}
body {
font-family: montserrat, sans-serif;
width: 100%;
min-height: 100vh;
}
.card {
margin: 100px auto 0;
width: 400px;
height: 600px;
perspective: 1000px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front {
background-image: url("iFoxify.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.card__face--front h2 {
color: rgb(0, 0, 0);
font-size: 32px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
}
.card__content {
width: 100%;
height: 100%;
}
.card__header {
position: relative;
padding: 30px 30px 40px;
}
.card__header:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
z-index: -1;
border-radius: 0px 0px 50% 0px;
}
.pp {
display: block;
width: 128px;
height: 128px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
object-fit: cover;
}
.card__header h2 {
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 900;
/* text-transform: uppercase; */
text-align: center;
}
.card__body {
padding: 30px;
}
.card__body h3 {
color: var(--dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="iFoxify.png" alt="" class="pp" />
<h2>Swift and Java
<h2>
</div>
<div class="card__body">
<h3>iFoxify</h3>
<p>A simple app that shows random pictures of foxes.</p><br><br>
<p><a href="https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
<p><a href="https://apps.apple.com/us/app/ifoxify/id1576016692" target = "_blank" >iOS</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="babysleep.png" alt="" class="pp" />
<h2>Swift<h2>
</div>
<div class="card__body">
<h3>Baby Sleepytime</h3>
<p>A simple white noise app.</p><br><br>
<p><a href="https://apps.apple.com/us/app/baby-sleepytime/id1480001818" target = "_blank" ><img alt="ApplePlayBadge" src="Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg" width="200" height="70"></p>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
You need to close out your <a> tags. You've left them open, so everything under the first tag is a link.
Change:
<p><a href = "https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
To:
<p>Google Play</p>
Do that for all the card links.
I have a function when the "user" click on the button shows an image, but each button shows a different image. So what I'm looking for is when the user clicks on another button the image of the previous one is hidden
And I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text
I'm using javascript, but I also believe that there is a way using jquery
Sorry my English is not the best, although I think I understand.
function showimage(id) {
var element = document.getElementById(id);
if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);
if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}
}
html {
overflow: ;
}
.background {
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}
#font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}
#font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}
.general {
background-image: url(../img/miSlJSc.png);
position: absolute;
top: 0%;
left: -1%;
width: 1584px;
height: 900px;
}
.contain1 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}
.contain2 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}
button {
background: #005F38;
background: rgba(0, 95, 56, 1);
border-style: Solid;
border-color: #112302;
border-color: rgba(17, 35, 2, 1);
border-width: 1px;
position: absolute;
left: 439px;
top: 822px;
width: 359px;
height: 60px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
#comprar {
left: 1185px
}
.styletext {
font-family: Avenir Next LT Pro Heavy Condensed Italic;
font-size: 40px;
color: #FCFCFC;
color: rgb(252, 252, 252);
}
.boxsmall {
background: #000000;
background: rgba(0, 0, 0, 0.3);
position: relative;
top: -14px;
left: 0px;
width: 117px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxbig {
background: rgba(0, 0, 0, 0.3);
position: relative;
left: 0%;
top: -5%;
width: 249px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxsellect {
background: #000000;
background: rgba(0, 0, 0, 1);
opacity: 0.65;
position: absolute;
left: 898px;
top: 526px;
width: 249px;
height: 120px
}
.icon * {
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}
#botella .icon * {
width: 130px;
height: 35px
}
#punoAmericano .icon * {
width: 70px;
height: 35px;
left: 0px
}
.icon-p * {
left: -10px;
width: 92px;
height: 72px;
}
#pistol_mk2 .icon-p {
transform: scale(1.0, 1.0);
left: -20px;
}
.statsPistol {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
position: absolute;
top: -270px;
left: 1090px
}
.statsPistolmk2 {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
position: absolute;
top: -270px;
left: 1090px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/styles.css" type="text/css">
<style>
/*.general {display: none;}*/
</style>
</head>
<body>
<div class="full-screen">
<div class="general">
<div class="contain2">
<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
<div id="statsPistol">
</div>
</button>
<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>
</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>
</html>
This is not at all difficult to do using jQuery. Just hide all the images (including those that aren't showing), and show the one that has been clicked. You don't need to worry about hiding only the previous image, because you don't have enough buttons to improve perceived performance if you do.
The code works like this:
When you click on an element with the class boxsmall:
Hide all images that are inside any element with the class boxsmall.
Show the image that is inside the element that has been clicked.
A couple of other bits of advice:
Don't have any HTML elements with the same id. If you don't need an id, just leave it out.
Don't set duplicate CSS properties, as you have with some of your background and color properties. The lower of the two will override the upper one, so there's no point to it.
$(document).ready(function($) {
$('.boxsmall').on('click', function(e) {
$('.boxsmall img').hide();
$(this).find('img').show();
});
});
.boxsmall {
width: 122px;
height: 122px;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="full-screen">
<div class="general">
<div class="contain1">
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
</div>
</div>
</div>
</body>
I need your help. I made a weather app and it looks okay in desktop but when i tested it on my mobile phone, the contents that the white box is holding were going out of bounds vertically. I tried overflow methods and it didnt work so as defining its container height at 100% and 100vh and it didnt work as well? Any solution ideas?
here is the app that i deployed:
https://sleepy-badlands-75629.herokuapp.com/#
here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css "href="../stylesheets/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="appBox">
<div class="container">
<header class="text-center">
<h1>Local Weather App</h1>
</header>
<section class="geolocation">
<h1>Today's weather in your location:</h1>
<h2><span id="location"></span></h2>
</section>
<section class="temperature">
<h1>
<span class="tempDisp"></span>
<a id="fahrenheit" class="selected" href="#">℉</a> |
<a id="celsius" href="#">℃</a>
</h1>
</section>
<section class="condition">
<h1><span class="conDisp"></span></h1>
<div class="highLow col">
<p>
<span class="high"></span>°/
<span class="low"></span>°
</p>
</div>
<div class="humidity col">
<p><i class="wi wi-humidity"></i> </p>
</div>
<div class="wind col">
<p>
<i class="wi wi-small-craft-advisory"></i>
<span class="direction"></span><span class="speed"></span>
</p>
</div>
</section>
<section class="forecast">
<h1>5 Day Forecast</h1>
</section>
</div>
</div>
<script type="text/javascript" src="../src/app.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Raleway:400,800');
*{
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
/* overflow:hidden; */
font-family: raleway;
text-align: center;
background: no-repeat center center fixed;
background-size: cover;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.appBox{
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border-radius: 8px 8px 0 8px;
background: rgba(255,255,255,0.2);
}
.container{
width: 80%;
margin: 0 auto;
}
a{
text-decoration: none;
transition: all 1s;
color: black;
}
a:hover{
color: purple;
}
.selected{
color: blue;
cursor: default;
pointer-events:none;
}
header h1{
text-align: center;
}
.temperature{
font-size: 2em;
}
.condition p{
font-size: 1.3em;
}
.col{
font-size: 1em;
display: inline-block;
width:20%;
/* margin: 5px; */
/* padding: 10px; */
border: 1px solid black;
border-radius: 10px;
background: rgba(250,250,250, 0.3);
-webkit-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
box-shadow: -2px 7px 27px 1px rgba(0,0,0,0.75);
}
.forecast{
width:100%;
margin: 20px;
}
.forecast h1{
background: rgba(255,255,255,0.3);
border: 1px solid white;
margin-bottom: 0;
}
.fcol{
display: inline-block;
width:20%;
background: rgba(255,255,255,0.3);
border: 1px solid white;
}
#media(max-width:700px){
/* .appBox{
height: 100vh;
} */
.col{
/* display:block; */
width: 35%;
margin: 10px auto;
}
}
In your .forecast class, the margin: 20px; is pushing your forecast element off center in the smaller width screens. On the larger scale it's not quite as noticeable, but that 20px bump becomes much more noticeable once your real estate shrinks.
I used the developer console to reassign it to margin: auto; and it seemed to rectify the problem. Your element should also center fine with this change as it is a nested element.
.forecast {
width: 100%;
margin: auto;
}
That should do the trick!
Since your problem is that the content goes out of bounds, why not make the content size relative or use css media queries.
You can use vh to set the size of the content relative to the height of the viewport.
You can also use something like #media screen and (max-width: 480px) to determine when devices are small enough to cause the content to go out of bounds then write new sizes for the content here.
Sorry for asking a pretty common question however I couldn't find how to fix that problem anywhere, and I have no idea how this slideshow works.
I want that slideshow to pause on mouseover and continue on mouseleave.
Here is the code below:
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 4,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager',
});
});`
And the html code for the block:
<!DOCTYPE html>
<html>
<head>
<!--
This carousel example is created with jQuery and the carouFredSel-plugin.
http://jquery.com
http://caroufredsel.dev7studios.com
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="description" value="This beautifull carousel centeres 3 images inside a wrapper with rounded corners. Note that this will not work in Chrome, due to it not being able to overflow content wrapped in rounded corners." />
<meta name="keywords" value="carousel, rounded, corners, jquery, example, pagination" />
<title>Carousel with 3 images centered in rounded corners</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
<script type="text/javascript" src="try.js"></script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/carousel_control.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/carousel_control.png) no-repeat -12px -32px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="img/up1.jpg" />
<img src="img/up2.jpg" />
<img src="img/up3.jpg" />
<img src="img/up1.jpg" />
<img src="img/up4.jpg" />
<img src="img/up5.jpg" />
<img src="img/up6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</body>
</html>
And the other two js file are in those link you can have a look.
jquery file second jquery file
You can see the current version at webmasteroutlet.com in the footer section. It doesn't pause on mouseover.
here is what i did if anyone wnats to use it i changed the scroll element and it works just fine
scroll: {
items: 1,
duration: 1250,
timeoutDuration: 2500,
easing: 'swing',
pauseOnHover: 'immediate'
},
Have you tried this on mouseover ??
$("#carousel").mouseover(function() {
$("#carousel").trigger('pause' ,true);
});