I'm trying to finish off our rehoming page, where a visitor clicks on an animal to open an iframe with more info output from our database. But I can't get the iframe scrollable. I've searched online extensively but can't get any of the suggestions to work.
What am I doing wrong? (I'm way out of my league with code but just doing the best I can with what I find online, so I may have made some basic errors.) Any help at all is greatly appreciated.
HTML:
<!DOCTYPE html>
<html lang="en">
<title>iFrame</title>
<script>
asm3_adoptable_filters = "size agegroup sex breed species";
asm3_adoptable_extra = function(a) {
return '<span class="waitingtime">Time waiting for a home: ' + a.TIMEONSHELTER + '</span>';
}
asm3_adoptable_iframe = true;
asm3_adoptable_iframe_fixed = true;
asm3_adoptable_translations = {
"(any sex)": "Any sex",
"(any size)": "Any size",
"(any breed)": "Any breed",
"(any age)": "Any age",
"(any species)": "Any species"
}
asm3_adoptable_sort = "-#DAYSONSHELTER";
</script>
<style>
.waitingtime {
color: black;
font-family: filson soft regular,sans-serif;
</style>
<div id="asm3-adoptables"></div>
<script src="https://service.sheltermanager.com/asmservice?method=animal_view_adoptable_js&account=sm1510"
></script>
Page CSS:
#asm3-adoptable-iframe-overlay{
background-color: rgba(0 0 0 / 57%) !important;
}
#asm3-adoptable-iframe{
overflow-y: scroll !important;
width: 479px !important;
max-width: 100%;
margin: 0 auto;
display: block;
height: 90vh !important;
background-color:white;
margin-top:3em;
}
#asm3-adoptable-iframe-close{
background-color: #c92327;
color: white;
padding: 7px 23px;
/* margin-top: 39px !important; */
position: absolute;
border-radius: 5px;
text-align: center;
right: 0;
left: 0;
margin-top: 34px;
width: 200px;
margin: 0 auto;
top:44px;
}
Element CSS:
.asm3-adoptable-item {
display: inline-block;
text-align: center;
background-color: white;
margin-bottom: 12px;
padding-top: 25px;
width: 31.8%;
margin: 10px;
}
.asm3-adoptable-item:hover {
background-color: black;
}
.asm3-adoptable-item:hover .asm3-adoptable-tagline {
color: white;
}
.asm3-adoptable-name {
font-family: "proxima soft extrabold", sans-serif;
font-size: 44px;
color: #c92327;
margin-top: -16px;
display: block;
}
.asm3-adoptable-tagline {
text-transform: lowercase;
font-family: "proxima soft extrabold",sans-serif;
font-size: 18px;
color: black;
margin-top: -10px;
display: block;
}
.asm3-adoptable-item:hover .asm3-adoptable-name {
color: #c92327;
}
.asm3-adoptable-item:hover .waitingtime {
color: white;
}
.asm3-adoptable-thumbnail {
margin-top: 15px;
width: 425px;
max-width: 100%;
height: 425px;
}
.asm3-adoptable-reserved {
position: relative;
color: white;
display: inline-block;
padding: 5px;
overflow: hidden;
font-family: "proxima soft extrabold", sans-serif;
font-size: 18pt;
}
.asm3-adoptable-reserved span:before {
content: "RESERVED";
}
.asm3-adoptable-reserved span {
position: absolute;
display: inline-block;
right: -60px;
text-align: center;
top: 50px;
background: #c92327;
width: 275px;
transform: rotate(45deg);
}
#asm3-adoptable-filters {
overflow:hidden;
}
#asm3-adoptable-filters select {
width: 17%;
float: left;
margin: 20px;
}
#asm3-adoptable-filters {
font-family: "proxima soft extrabold", sans-serif;
font-size: 22px;
background-color: #dab348;
}
.asm3-adoptable-list {
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 992px) {
.asm3-adoptable-item {
width:50%;
}
}
#media only screen and (max-width: 768px) {
.asm3-adoptable-item {
width:100%;
}
}
You are missing a closing bracket "}" in your <style> tags. After playing around with your website a little I believe you are talking about some sort of full screen modal. But then it seems you are using a iframe in the modal. You might consider not using an iframe because there is really no need and it may solve your problems. Another thing I noticed is that you don't have any links between your html and your css which you might want to look into.
Related
I have this CSS code below of some data displayed in a form of a pill what i'm trying to accomplish is trying to add a Unicode plus sign inside of my pill something like this image below.
But whenever i try to increase the font-size of the Unicode it just messes up the whole text and shape of the pills is there any way to make it look like the image on-top without messing too much of the original css? Any help would be appreciated thanks.
var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];
var redString = '';
$.each(red[key], function(index) {
redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);
.pilldiv {
padding: 0px 19px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.redpill:before {
content: "\002B";
font-size: 28px;
width: 15px;
vertical-align: baseline;
margin-left: -7px;
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h3 {
font-weight: normal;
color: White;
}
.panel {
display: table;
table-layout: fixed;
height: 100%;
width: 30%;
background-color: black;
}
body {
background-color: white;
}
<div class="center">
<div class="panel">
<div id="redid" class="redclass wrappingflexbox"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
When you change the actual size of the pseudo-elememt font it will change the shape of the pill accordingly since the pill's size is determined by the size of the contents.
Thus I would suggest that you change the apparent size of the glyph by using a transform instead.
Since this is entirely visual it does not affect the size of the pill.
.redpill:before {
content: "\002B";
/* font-size: 28px;*/ */ remove this */
width: 15px;
vertical-align: baseline;
margin: 0 7px 0 -7px;
display:inline-block; /* required */
transform:scale(2); /* this*/
}
var red = {};
var key = "Red Fruits";
red[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry'];
var redString = '';
$.each(red[key], function(index) {
redString += ('<div class="pilldiv redpill class">' + red[key][index] + '</div>');
});
$('.redclass').html(redString);
.pilldiv {
padding: 0px 19px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
.redpill {
background-color: Pink;
cursor: default;
}
.redpill:before {
content: "\002B";
/* font-size: 28px;*/
*/ remove this */ width: 15px;
vertical-align: baseline;
margin: 0 7px 0 -7px;
display: inline-block;
transform: scale(2)
}
.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center;
}
.wrappingflexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
h3 {
font-weight: normal;
color: White;
}
.panel {
display: table;
table-layout: fixed;
height: 100%;
width: 30%;
background-color: black;
}
body {
background-color: white;
}
<div class="center">
<div class="panel">
<div id="redid" class="redclass wrappingflexbox"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Make sure :before inherits class font-size:
.redpill:before {
content: "\002B";
padding-right: 2px;
}
.pilldiv {
padding: 5px 22px;
text-align: center;
font-size: 14px;
border-radius: 25px;
color: Black;
margin: 1px;
}
I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2);
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:1%;
padding:1%;
}
nav a{
display:block;
background-color: white;
border: 1px solid black;
text-align: center;
border-radius: 35px;
text-decoration: none;
padding: 2%;
margin: 1%;
}
h1{
text-align: center;
color:rgba(255,0,0,.7);;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
/* Safari and Chrome */
-webkit-column-count:3;
-moz-column-count: 3;
column-count:3;
}
ol{
list-style:upper-roman;
margin:1em;
}
img{
display: none;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
#media screen and (min-width: 600px) {
img{
display: inline-block;
width: 20%;
margin-right: 4%;
}
section {
display: inline-block;
vertical-align: top;
}
#left {
width: 20%;
}
#center {
width : 70%;
}
#center div:last-of-type{
width: 100%;
padding:.75em;
padding-left: 0;
margin: 0em 1em;
}
h2 {
font-size: 1.7em;
}
h1::after {
content: "(I guess...)";
}
h3 {
height: 35px;
line-height: 35px;
font-size: 1.6em;
font-weight: bolder;
}
#center div p {
height: 45px;
line-height: 45px;
font-size: 1.6em;
}
header , footer {
background-color: initial;
}
footer {
width: 70%;
float: right;
}
footer p {
text-align: left;
}
}
#media print {
nav a {
display:block;
background-color: white;
border: 0;
text-align: center;
border-radius: 0;
text-decoration: none;
padding: 0;
margin: 0;
}
h1 {
font-style: italic;
font-weight: bolder;
font-size: 16px;
}
}
<!--
Create a stylesheet that will style the page
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
<header>
<h1> Web Design is Awesome!!!</h1>
<nav>
University of Michigan
Intro to Web Design
</nav>
</header>
<footer>
<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
</footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
</body>
</html>
Try using em, px, or a a percent value.
h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
}
The percentage will depend on what the default text size is.
Usually the default size is 16px.
I was facing the same problem for H1. It turned out that for me normalize.css was overriding the font-size in the CSS file.
Try to use css for print mode:
#media print{
h1{....}
}
You can add !important in front of the h1 property value so that the browser does not override the value in print preview.
I'm trying to achieve the following page divider:
But, I'm ending up with this:
Obviously the yellow is just to tell me where the tops and bottom are (should be white), and I seem to be getting this unwanted top and bottom margin. I've tried a few methods including display:inline-block, display:inline, margin-top:-2px but lost what I've tried and what I haven't. The span was originally a div but this was one of the many things I changed trying.
This is my last attempt:
<style>
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding: 0 15px;
background: yellow;
font-size: 16px;
color: #333;
}
</style>
<div class="pageDivider"><span class="inner">SHARE</span></div>
Any clues on how to do this the proper way?
I cannot delete my question, so I will share the solution I have just found which works really, really nicely - I hope it helps others.
JSFIDDLE DEMO
h6.pageDivider {
font-family: 'Lato', 'Open Sans', sans-serif;
overflow: hidden;
text-align: center;
margin: 40px 0;
font-weight: 700;
color: #555;
}
h6.pageDivider:before,
h6.pageDivider:after {
background-color: #E9E9E9;
content: "";
display: inline-block;
height: 18px;
position: relative;
vertical-align: middle;
width: 50%;
}
h6.pageDivider:before {
right: 30px;
margin-left: -50%;
}
h6.pageDivider:after {
left: 30px;
margin-right: -50%;
}
<h6 class="pageDivider">HELLO WORLD</h6>
your answer is ....
.pageDivider {
margin: 30px 0;
background: #E5E5E5;
padding: 0;
text-align: center;
}
.pageDivider .inner {
line-height: 24px;
margin: 0 auto;
padding:2.5px 20px !important;
background: yellow;
font-size: 16px;
color: #333;
}
<div class="pageDivider"><span class="inner">SHARE</span></div>
I'm trying to float an image to the right of an unordered list using float: left, but the picture stays stubbornly underneath the div with the ul.
I've tried `display: inline-block, I've tried making them all block level elements, and I've messed with the margins and padding on both but the more I mess with the margins the less the code looks like the blueprint I've been given. Perhaps I don't fully grasp how floats work exactly.
Why won't the image float to the right of the div with the list?
Here's the relevant HTML:
<div id="introText" class="margins">
<p>Now you can get the digital sound quality you want at an affordable price. With more than 50 years of microphone innovation, Sony introduces the new UWP-D wireless microphone system. Just because your project is budget-driven doesn't mean you have to compromise on sound quality.</p>
<p>Sony's new wireless mics are the ideal audio-for-video solution that will boost the performance of even entry-level camcorders. Choose from among three packages, any of which are well-suited for ENG and field production or any budget-conscious application requiring high-quality digital audio.</p>
</div>
<div class="listWrap benefitsList">
<div class="inLine">
<div class="heading">
<p id="listHeading" class="margins">Key Benefits:</p>
</div>
<ul class="ulBenefits">
<li><p>Wide range with up to 72 channels</p></li>
<li><p>Three separate UHF frequency blocks available</p></li>
<li><p>USB Portable Charger w/Lithium-Ion Battery and AC adapter</p></li>
<li><p>Sturdy metal body construction</li>
<li><p>Digital audio processing</li>
<li><p>A DSP compander provides superb transient response performance</p></li>
<li><p>Wide switching RF bandwidth with 3 UHF frequency blocks available</p></li>
<li><p>True diversity receiver for stable reception</p></li>
<li><p>Output audio gain control on receiver</p></li>
<li><p>Headphone output on receiver</p></li>
<li><p>Handheld TX includes interchangeable capsule design</p></li>
<li><p>Mic or line input on both body-pack and plug-on transmitters</p></li>
<li><p>Sony UWP/800 Series & Legacy Analog Wireless System compatibility</p></li>
</ul>
</div>
<div class="inLine cameraDiv">
<img id="camera" alt="Camera" src="images/camera.jpg" />
</div>
</div>
<div class="clearIt blockIt">
<img id="headingTwo" alt="Digital Sound Innovation for Analog Systems" src="images/headerTwo.jpg" />
</div>
And here's the relevant CSS:
#listHeading {
background: #eceeef;
margin: 6px 13px;
}
#camera {
width: 354px;
height: 380px;
}
.inLine {
display: inline-block;
}
#camera, .listWrap {
display: inline-block;
}
.listWrap {
margin-left: 1px;
}
.benefitsList {
width: 422px;
float: left;
margin-top: 0;
}
.cameraDiv {
width: 354px;
float: left;
margin-top: 3px;
display: inline-block;
}
.heading {
margin-left: 25px;
width: 422px;
height: 40px;
background: #eceeef;
vertical-align: middle;
}
.heading #listHeading{
margin-top: 4px;
padding-top: 12px;
background: #eceeef;
font-size: 16px;
font-weight: bold;
vertical-align: middle;
}
.ulBenefits {
padding-left: 20px;
}
.ulBenefits li{
margin-bottom: 7px;
border-bottom: 1px solid #eceeef;
font-size: 12px;
font-family: Arial, sans-serif;
list-style-type: disc;
padding: 0;
}
.ulBenefits li p{
margin: 5px 0;
padding: 0;
}
#headingTwo {
margin-top: 30px;
}
The problem is the "camera.jpg" image. It always appears on the next line. Any ideas? Thanks in advance! Here's a fiddle of the issue: http://jsfiddle.net/S3523/
The camera image SHOULD be to the right of and on the same line as the unordered list above it. But instead it returns to the next line.
The problem is you're specifying a fixed width for the parent .benefitsList element so the image has no space to actually float to the left of the child list. So I removed the width on .benefitsList, floated .inLine left and it works.
Here's the CSS
<style>
.landingWrapper{
font-family: Arial, sans-serif;
font-size: 14;
width: 784px;
display: block;
}
.blockIt {
display: block;
}
.clearIt {
clear: both;
min-height: 50px;
}
.margins {
margin-left: 35px;
margin-right: 35px;
}
.introText {
margin-bottom: 50px;
}
#listHeading {
background: #eceeef;
margin: 6px 13px;
}
#camera {
width: 354px;
height: 380px;
}
.inLine {
display: inline-block;
float:left;
}
#camera, .listWrap {
display: inline-block;
}
.listWrap {
margin-left: 1px;
}
.benefitsList {
float: left;
margin-top: 0;
}
.cameraDiv {
width: 354px;
float: left;
margin-top: 3px;
display: inline-block;
}
.heading {
margin-left: 25px;
width: 400px;
height: 40px;
background: #eceeef;
vertical-align: middle;
}
.heading #listHeading{
margin-top: 4px;
padding-top: 12px;
background: #eceeef;
font-size: 16px;
font-weight: bold;
vertical-align: middle;
}
.ulBenefits {
padding-left: 20px;
}
.ulBenefits li{
margin-bottom: 7px;
border-bottom: 1px solid #eceeef;
font-size: 12px;
font-family: Arial, sans-serif;
list-style-type: disc;
padding: 0;
}
.ulBenefits li p{
margin: 5px 0;
padding: 0;
}
#headingTwo {
margin-top: 30px;
}
#secondaryText {
margin-bottom: 25px;
width: 714px;
}
.diagrams{
margin-bottom: 15px;
min-height: 50px;
width: 713px;
height: 195px;
}
.infoBox{
border: 1px solid #eceeef;
border-top: 10px solid #eceeef;
width: 211px;
display: block;
margin-left: 35px;
margin-top: 15px;
float: left;
}
.infoBox p {
margin-left: 6px;
margin-right: 6px;
}
#walkieTalkieOne {
width: 209px;
height: 186;
}
#walkieTalkieTwo {
width: 210px;
height: 186;
}
#walkieTalkieThree {
width: 211px;
height: 186;
}
.infoHeader {
font-weight: bold;
font-size: 20px;
margin-bottom: 0;
}
.infoDesc{
margin-bottom: 15px;
margin-top: 5px;
}
.closer {
display: block;
margin-top: 50px;
clear: both;
position: relative;
top: 25px;
}
#resellerButton {
margin-bottom: 50px;
clear: both;
position: relative;
top: 25px;
}
#resellButtLink{
text-decoration: none;
clear: both;
position: relative;
top: 25px;
}
</style>
You can see it here
Try moving the element to before the content - otherwise, it's just going to float what comes after it... which is nothing.
I know this is probably really easy, but I am just about ready to throw my laptop out the window with this...
I have been trying to make a bit of javascript work within my one of my web pages, but failing this I made a back up of my previous code and tried to restore what it was before... but it has completely messed up my gallery page (I haven't touched this page) and it isn't linking up with my CSS - I really don't understand it.
The images in the gallery are supposed to be horizontal not vertical.
Please help, I am very new to Wordpress and understand my coding may be amateur
Link: Gallery
/*
Theme Name: tigertone
Theme URI: http://tigertonestudio.com
Description:
Version: 1.0
*/
#clear {
clear: both;
}
body {
margin:0;
padding:0;
height: 100%;
background: url('images/bg.png') repeat;
text-align:left;
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size:.8em;
}
#brushblack {
background: url('images/brushblack.png') repeat;
height: 100%;
}
#header{
width:1000px;
height:118px;
margin: 0 auto;
padding:50px 0 25px 0;
clear: both;
}
#content {
font-family:'aller', Arial, Helvetica, sans-serif;
margin:0 auto;
width:100%;
padding:0;
text-align:left;
vertical-align: middle;
}
.blackcontent {
background: url('images/bgdark.png') repeat;
width:100%;
padding:40px 0;
height:100%;
overflow:hidden;
margin:0 auto;
vertical-align: middle;
}
.content{
margin:0 auto;
width:1000px;
}
.entry {
color:#000000;
}
.ngg-albumoverview .ngg-album-compact { float: left; margin-right: 20px;}
.ngg-gallery{
width:100%;
float: left;
}
.ngg-gallery-thumbnail-box {
width: 25% !important;
float: left;
margin-bottom:10px;
border:5px
border-color:white;
}
===================
Classes Page
===================
.classes {
margin-bottom: 75px;
}
.classes {
width: 450px;
float: left;
margin: 10px 8px 0 0;
}
.classes:nth-child(4n+4) {
margin-right: 0;
}
.classes a {
text-decoration: none;
}
.classes h2,
.classes .classes-bio h2 {
font-weight: 700;
font-size: 1.5em;
text-transform: none;
margin: 15px 0 5px 12px;
}
.classes .classes-bio p {
color: #666;
line-height: 21px;
margin: 0 70px 18px 70px;
}
.classes .classes-bio p strong {
font-weight: 700;
}
.classes a.read-more {
color: #D1883E;
display: block;
margin: 12px 0 0 0px;
}
.classes a.read-more:hover {
text-decoration: underline;
}
.classes .classes-bio {
position: fixed;
width: 600px;
height: 90%;
display: none;
z-index: 9998;
padding-bottom: 10px;
background-color: #eaeaea;
}
.classes .classes-bio .close-button {
position: absolute;
top: -17px;
right: -17px;
z-index: 9999;
cursor: pointer;
}
.classes .classes-bio img.profile {
width: 442px;
margin: 25px 181px 8px;
}
.classes .classes-bio h2 {
text-align: center;
margin-bottom: 6px;
}
.classes .classes-bio {
font-size: 1.1em;
margin-bottom: 28px;
}
.classes .classes-bio p {
font-size: 0.9em;
color: #000;
text-align: center;
}
.mask {
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9997;
background-color: #000;
}
HTML:
<h1>Gallery</h1>
<div class="ngg-gallery">
<div class="ngg-galleryoverview">
<div class="ngg-gallery-thumbnail-box">
[nggallery id=1]
</div>
</div>
</p>
</div>
Line 396 of style.css has a missing }, could be causing your issues.
There are some un-commented comments in there too...
===================
Classes Page
===================
(and the other ones like it) Should be like this
/*
===================
Classes Page
===================*/
There is a part in your styles.css file that is listed like this:
a:link{
font-color:#000;
a:hover{
color:#D1883E}
It looks like you are missing a closing bracket after the first a:link style block.
Looks likes there's a problem with your global.js file. The jQuery library which comes with Wordpress is in no-conflict mode, which means you can't use the $ sign. Solution is to surround the code with
jQuery(document).ready(function ($) {
So, in your case, change the global.js file to:
jQuery(document).ready(function ($) {
$('.classes a').click(function(e) {
e.preventDefault();
// Get the dimensions of the user's screen
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// Set the mask overlay to fill the entire screen
$('.mask').css({'width':maskWidth,'height':maskHeight});
// Fade in the mask overlay
$('.mask').fadeTo(600, 0.7);
// Get the dimensions of the user's browser
var winHeight = $(window).height();
var winWidth = $(window).width();
// Set the bio pop-up to be in the middle of the screen
$('.classes-bio').css('top', winHeight/2-$('.classes-bio').height()/2);
$('.classes-bio').css('left', winWidth/2-$('.classes-bio').width()/2);
// Fade in the bio pop-up
$(this).parent('.classes').find('.classes-bio').delay(610).fadeIn(600);
});
// Click the mask or close button to fade out the pop-up and the mask
$('.mask, img.close-button').click(function(e) {
$('.classes-bio').fadeOut(600);
$('.mask').delay(610).fadeOut(600);
});
});
See more here
I don't know if it will solve your problem, but you could give it a try!