Image rotate pagination question - javascript

trying to get the pagination inside the main area display to look a little better. Where it has the pagination, i would like the active states to be formatted to fit perfectly inside the appropriate boxes without the numbers showing but having some difficulties.
you can view the image rotate pagination issue here:
http://obliqueinteractive.com/demo/oblique/
Here is the code im working with for the pagination:
HTML
<div class="paging">
1
2
3
</div>
CSS
.paging {
position: absolute;
bottom: 10px;
left: 372px;
width: 189px;
height:41px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(../images/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
background-image: url(../images/active.png) ;
width:12px;
height:11px;
}
.paging a:hover {
background-image: url(../images/active.png) ;
}

.paging a {
background-repeat:no-repeat;
background-position: x-offset
y-offset; }
change offsets in pixels to fit Your layout
and change content of to:
$nbsp;

Related

HTML & CSS Tooltip Keeping On Screen

I need help keeping my CSS tooltip on screen for my website. It unfortunately is too big for the website near the edge of the screen and also is WAY too big for any mobile device and doesn't position correctly (probably because I plan to add very large descriptions in each tooltip). I would like to just use CSS but would be willing to use JS as I'm starting to think that may be the only way to do it correctly, but I'm having a lot of trouble figuring out how to make it work.
I basically had copied over the code from another website with many tweaks if it helps you understand my code better: https://www.w3schools.com/css/css_tooltip.asp
The only results I could find online were about centering the tooltip on the screen which strangely didn't work and code using SCSS which I'm not experienced with and would prefer not to use.
Here is my partial HTML and CSS code:
body {
overflow-x: hidden;
overflow-y: scroll;
}
.ref {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.ref .versekjv {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 6px;
z-index: 98;
position: absolute;
top: 100%;
left: 50%;
margin-left: -125px;
flex-direction: column;
}
.ref .versekjv::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
visibility: visible;
}
.redletters {
color:red;
}
#media screen and (max-width:1000px){
.ref .versekjv {
font-size: 1rem;
max-width: 20rem;
position: fixed;
bottom: auto; top: 13%;
left: 78%;
text-align: left;
transform: translate(-50%);
transform: translateX(-50%);
white-space: normal;
z-index: 98;
}
.ref .versekjv::after {
border-color: transparent;
}
}
<li class="box"><a>
<div class="innerbox">Reference</div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>
Thank you so much for your help!
First, you need to get the DOM object of your tooltip,
let tooltip = document.querySelector(".ref .versekjv")
Then, you can use the js method "getBoundingClientRect", which gives you an object that has top, right, left and bottom fields which give you the distances of your element from top, right, left and bottom of the viewport. If your element is fully visible inside the element, all four fields would be positive numbers, otherwise it means it's partly invisible, for example a left field of "-10" means about 10px of length of your elements is beyond the left edge of the viewport.
What you can do is that you always check the top, left, ... distances of your element, and if they are negative numbers, manually change them and thus position your element correctly, which could be achieved like this:
tooltip.style.left = 20

Underline blank rows area in handlebars

Using HandlebarsJS
I have a blank area with with dynamic content rendered. When text is not reaching min-height the content must contain empty underlined blank rows.
I tried using a background image in css like follows:
.regimul-juridic {
/*background-color: red;*/
margin-top: -5px;
min-height: 100px;
position: relative;
background-position: fixed;
line-height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAABlBMVEUAAAAAAASiCn3WAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjIAwaAACkAIHWnJmDAAAAAElFTkSuQmCC);
backdrop: static;
}
.regimul-juridic > p {
color: #000000;
font-weight: normal;
font-size: 9px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
but without success, because if there is more content on the area above the image will not expand properly. Does anyone have a solution ?
Picture showing what I am trying to achieve here:
For the underline you can use hr tags in the html

Z-Index of Material Dropdown component not layering underneath a fixed div when opened

Objective:
I would like the Header, Tab Section, and the Radio Button Section to be fixed in a form (see image below). Meaning that they should always be in view, and never have any overlapping elements.
The form looks like the following:
This is working fine when I simply scroll down on the form:
The Problem:
When I open the Angular Material dropdown, it overlaps over the Radio Button Section:
Here is the HTML. The highlighted sections are the elements that I want to be fixated on the form:
And here is the CSS for the 3 sections
//Header:
.module__header {
position: fixed;
top: 0px;
z-index: 1001;
display: flex;
height: 35px;
width: 100%;
background-color: #082749;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: stretch;
padding: 0;
margin-bottom: 0;
}
// Tab Section:
.mat-tab-label-container {
position: fixed;
top: 35px;
padding-top: 10px;
z-index: 1001;
width: 100%;
background: #fff;
}
// Radio Button Section:
.timaticFullTextView {
padding-top: 35px;
padding-left: 15px;
padding-bottom: 15px;
background: #fff;
z-index: 1001;
position: fixed;
width: 100%;
border-bottom: 1.5px solid gray;
}
I have tried changing the cdk-overlay-container to a z-index of <1001, but that still is overlapping the Radio Button Section.
How can I have the opened dropdown display underneath all 3 sections?
Edit: Adding screenshot to show the cdk-overlay that is giving issues. I have tried removing and lowering the z-index, but it doesn't have any effect
The problem is that mat-tab-body has z-index: 1 and this won't allow your fixed view inside to have a higher elevation. You can remove the z-index from mat-tab-body put then your content without a z-index won't be clickable anymore so you have to add a z-index and position to your not fixed content.
The code would have to look something like this:
<mat-tab>
<mat-tab-body> <!-- <-- added automatically -->
<div class="tab-header"></div>
<div class="tab-content"></div>
</mat-tab-body>
</mat-tab>
::ng-deep mat-tab-body {
z-index: unset !important;
}
.tab-header {
position: fixed;
z-index: 1001;
}
.tab-content {
position: relative;
z-index: 1;
}
You've found the right element whilst applying styles to the wrong one.
Here is how I made it work
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}

Changing positioning of elements depending on user screen size. How do I stack these elements for mobile devices?

I'm currently designing a website and there's a problem regarding the website footer.
When viewed on Desktop, the footer looks like this:
Website Footer viewed on Desktop
The code used to create this look is:
<meta name="color:Footer Background Color" content="#000000">
CSS CODE
/*-----------------------------
footer
-----------------------------*/
.bottom-footer {
background-color: solid #ffffff;
}
.bottom-footer, .bottom-footer a, .back-to-top a {
color: solid #000000;
}
.footer-message {
display:flex;
justify-content:space-between;
list-style-type:none;
width:500px;
}
.bottom-footer {
clear: both;
height: 80px;
width: 100%;
position: relative;
bottom: 0;
z-index: 1
}
.bottom-footer p {
font-size: 1.4rem
}
.footer-message {
float: left;
margin-top: 33px;
margin-left: 20px
}
.creation {
float: right;
display: block;
margin-top: 33px;
margin-right: 20px;
font-size: 1.4rem
}
.back-to-top {
position: absolute;
margin-top: 20px;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 30px
}
.back-to-top a {
font-size: 3rem;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.back-to-top a:hover {
opacity: .5;
text-decoration: none
}
.back-to-top .fa-angle-up {
font-size: 4rem
}
footer.bottom-footer {
height: 150px
}
.footer-message {
padding: 40px 0 0
}
.creation,
padding: 10px 0 0
}
.creation,
.footer-message {
float: none;
text-align: center;
margin: 0
}
.back-to-top {
margin-top: 0;
top: 0
}
HTML CODE
<footer class="bottom-footer">
<p class="footer-message">
Home
About
News
Musings
Music
Media
Shows
Store
Contact
Ask
</p>
<a class="back-to-top" href='#'>^<i class="fa fa-angle-up"></i></a>
<div class="creation" style="text-decoration:none">
© 2016 Sam Joel Nang. All Rights Reserved.
</div>
</footer>
Now the problem is, when (for example) the window's width is decreased, the footer elements seem to scatter, the .creation element goes out of the footer and goes below.
What I want to do (when website is viewed in small window width, or on Mobile Devices screens) is to 'center' and 'stack' the footer elements (.footer-message, .back-to-top, and .creation) in the following order: top: .back-to-top, middle: .footer-message, and bottom: .creation, with the Footer Background Color still #ffffff. A small photo edit can represent what I mean:
Ideal Website Footer look on Mobile Device or small Desktop window width
I hope someone can help me. Thank you so much.
Introducing media queries
In order to achieve what you're looking for, you can use media queries in CSS.
For example, if you want to stack the footer elements at a screen width of 480px or less, the following media query will allow you to style for that scenario only:
#media (max-width: 480px) {
// Styles here
}
Given that, let's get on to the point of stacking. You have different position attributes currently on the elements you're trying to stack. The easiest way to stack elements on top of one another is to use the properties display: block; and float: left;. This way, the elements will span the width of their container and appear in the order they are in inside the document's HTML.
Let's take a look at how you might go about that:
#media (max-width: 480px) {
.footer-message {
float: left;
display: block;
}
// center the links inside footer-message
.footer-message a {
text-align: center;
width: 100%;
}
.creation {
margin: 0 auto; // center it
display: block;
}
.back-to-top {
position: relative; // absolute positioning removes the element from document flow so we want to go relative
display: block;
margin: 0 auto; // center it
}
}
Note I simply removed the other properties since they're applied at all screen sizes already. You may want to alter those inside this media query in case the new styles affect their layout or you'd like it to differ for mobile.
Hope that helps!
UPDATE: I just noticed the part about you wanting to center the elements, I've added some code above to do so.

Vertical centring images with known height in div with variable height, allowing images to overflow div above and below

I am trying to find a method of vertical centring images in a div of uncertain height, allowing the images to overflow the div when their heigh is larger than the containing div's. The div contains a randomly selected slogan which can be of various different lengths (and of course if the browser window width is small it may make even a short slogan run over two lines).
I have shown the problem in a jsfiddle. I have tried every method of pure css that I can think of (including negative margins, pseudo elements and transforms), but they only seem to work when the height of the containing div can be guessed or known. That suggests that the only way to achieve what I want is using javascript (jquery?) to establish the height of the div and then use that to give the images either a negative or a positive margin, but I don't know how to achieve that.
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left"> <img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right">SLOGAN OF VARIOUS LENGTHS, SOME ONE LINE, SOME THREE OR FOUR</div>
.slogan {
background-color: rgba(255, 100, 0, 0.3);
text-align:center;
display:block;
width:80%;
position:relative;
float:none;
padding:2em;
margin:0.5em auto 1em auto;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
border-radius: 0.8em;
z-index:6;
}
.tsimg-left, .tsimg-right, .tsimg-centre {
display:inline-block;
padding:0 1em;
height:150px;
border-radius:50%;
}
.tsimg-left {
float: left;
}
.tsimg-right {
float: right;
}
Weirdly there is a way to achieve this.
This is probably what you need:
HTML:
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" class="tsimg-left" />
<span>SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths<br/>Slogan of various lengths
SLOGAN OF VARIOUS LENGTHS, SOME ONE OR TWO LINES<br/>Slogan of various lengths</span>
<img src="http://www.placebear.com/150/150" alt="pic 2" class="tsimg-right" />
</div>
CSS:
body {
padding-top:2em;
}
.slogan {
background-color: rgba(255, 100, 0, 0.3);
text-align: center;
width: 80%;
position: relative;
margin: 2.5em auto 1em auto;
z-index: 6;
line-height: 100%;
}
.slogan img,
.slogan span {
display:inline-block;
vertical-align:middle;
}
.slogan span {
width:250px;
}
.tsimg-left, .tsimg-right {
height: 150px;
border-radius: 50%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.tsimg-left {
left:5%;
}
.tsimg-right {
right:5%;
}
and Fiddle is here
I've changed markup order, and made all children of slogan to be displayed as inline-block elements. Another thing to do is to restrict width of your text inside the div, which I wrapped in span tag (I think this is valid html now). And finally used a vertical aligning method, utilizing absolute positioning, transforms and top property.
Let me know if this is what you are after.
PS. No JavaScript needed
EDIT: (Previous method didn't seem to work)
Use this:
.slogan {
display: flex;
background-color: silver;
text-align: center;
}
.slogan > p {
align-self: center;
color: red;
font-size: 22px;
font-weight: bold;
}
#pic1 {
display: inline-block;
align-self: center;
right: 0;
height: 100px;
border-radius: 50px;
margin: auto;
}
#pic2 {
align-self: center;
height: 150px;
border-radius: 750px;
margin: auto;
}
<div class="slogan">
<img src="http://www.placebear.com/150/150" alt="pic 1" id="pic1"></img><p>Here goes some text!</p>
<img src="http://www.placebear.com/150/150" alt="pic 2" id="pic2"></img>
</div>

Categories