I use vue.js with muse.ui here, and only use javascript and css without jquery library.
Now footer position always on the top of keyboard everytime the input field get focus.
is it do(able) to make footer position behind the keyboard everytime input get focus ?
#foot {
position: absolute;
bottom: 0;
text-align: center;
margin-bottom: 30px;
}
<form>
<div class="wrapper">
<mu-text-field type="text" />
</div>
</form>
<footer>
<mu-col class="foot">blablablablablablabla</mu-col>
</footer>
In your CSS you have defined #foot (which is an ID).
In your html "foot" is set as class:
<mu-col class="foot">blablablablablablabla</mu-col>
Either "foot" has to be defined as class in CSS or referred to as ID in the
HTML
`<mu-col id="foot">blablablablablablabla</mu-col>`
OR
in css define foot as class, that is ,
.foot {
...
}
Related
I am building a web page for homework. I am trying to figure out how to make a child div appear whenever I hover over the parent div at the bottom, sort of like a dropdown menu. The thing is that the child div has a class and I want only the element that is hovered to show the child div from the parent div. More specifically, the parent div I am talking about is <div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();> and the child div I am talking about is <div class="dropdown-content">. I want to use Vanilla Javascript (preferred) or CSS (not preferred).
TLDR: How do I target only current hovered element from HTML/CSS class in Vanilla Javascript?
How do I do that?
I got this far:
HTML
<!--Lab 1-->
<!--Each individual box.-->
<div class="box">
<!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();">
<!--The div with an image in it. Top one inside the box div.-->
<div>
<a href="Lab_01/LB1_WeiJianZhen_DD.html">
<!--Get an image with 300px width by 200px height. Make it responsive.-->
<img src="../../../Visual Content/placeholder.jpg" alt="Under Contruction" class="imgGrids">
</a>
</div>
<!--The div that contains the heading or title of the lab.-->
<div class="txtBar">
<h3>Lab 1</h3>
</div>
<!--The div that drops down to explain the lab with some text.-->
<div class="dropdown-content">
<p>My first website ever made in an HTML file! Describes a bit about the process of making a very basic website like mine.</p>
</div>
<!--End of inside box div.-->
</div>
<!--End of box div.-->
</div>
CSS
/*Creates the styling of the dropdown box.*/
.dropdown-content {
display: none;
position: relative;
background-color: #62ff36;
box-shadow: 0px 8px 16px 0px rgba(56, 255, 42, 0.8);
padding: 12px 0px;
z-index: 1;
}
JavaScript
function showDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "block";
}
function hideDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "none";
}
The easiest, most performant and overall definitely best way to solve this problem clearly is using CSS.
.inside-box:hover .dropdown-content { display: block; }
If for whatever reason you insist go with Javascript (which I do explicitly not recommend), you are going to have to add 2 listeners to each .inside-box, one for mouseenter, the other for mouseleave:
document.querySelectorAll('.inside-box').forEach(insideBox => {
insideBox.addEventListener('mouseenter', () => insideBox.querySelector('.dropdown-content').style.display = 'block');
insideBox.addEventListener('mouseleave', () => insideBox.querySelector('.dropdown-content').style.display = 'none');
})
Using inline event listeners like you suggested is considered very bad practice, so don't try that.
Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw
I have a very simple jQuery mobile page and would like to show a copyright message at the bottom of my page exactly above the footer.
In the page footer, I have several buttons and the copyright message should appear in small plain text on the right cornenr exaclty above the footer... I see it as a kind of dual footer .
When I add the copyright message to the footer, it will inherit the footer data-theme which is not desired. When I add it to the content of my site, it does not show the copyright at the bottom of the page. Any hints on where to inject my copyright message is highly appreciated.
Easy with some CSS magic
create a 'copyright' CSS class:
.copyright {
font-size: 0.75em;
margin-top: -20px;
float:right;
padding-right: 5px;
}
Notes:
a. 'margin-top' makes it render just above your footer
b. 'float:right' puts in on the right of the screen. Use 'float:left' or 'float:center' if desired.
In your footer, use the copyright class.
< div data-role="footer">
< span class='copyright'>© My Company Ltd</span>
< h4>Footer </h4>
< a href="#" data-rel="back" data-icon="home">Home</a>
< /div>
Ideally I'd need to see some html to try to fix your exact problem, but the gist of what you want is something like:
<div style="position: absolute; bottom: 0; width: 100%">
<div style="width: auto; text-align: right">Copyright...</div>
<div style="border: 2px solid red; width: auto">footer</div>
</div>
I want to display a div over an element (especially a link) when hovered, like in Facebook, when you hover a profile picture.
I know this could be done with JavaScript and CSS but have no exact idea.
Facebook's approach is to simply use CSS, which won't work in all browsers. In those browsers Facebook ditches the effect and always shows the element that should only display on hover:
#parent #child {
display: none;
}
#parent:hover #child {
display: block;
}
Use conditional CSS to set display: block as the default in IE7 and below.
This can actually be done with pure css, here is a simple example:
HTML:
<div id='outer'>
<div id='button'>
<!-- your element here -->
</div>
<div id='popup'>
<!-- your popup menu here -->
</div>
</div>
CSS:
#popup {
visibility:hidden;
}
#outer:hover #popup {
visibility:visible;
}
I am trying to use z-index on some elements in a page. Basically, I have a contact form with a waiter and a response box. The contact form is used on the page in a different place and is working fine ...
Send button is pressed, overlay-1 covers the form, ajax response triggers a thank-you box that covers overlay-1
Now this all works fine for the form that is positioned relatively on the page. However, I have the exact same form that pops up on-top of everything but my z-indexes aren't being honoured even though the form uses the same classes.
Can anyone give me any pointers ?
Alex
HTML:
<div id="popuporderform" class="orderform">
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
<!-- .orderspinner injected here -->
CSS:
/* -- ORDER FORM -- */
div.orderform {
width: 220px;
background-color: #fff;
height: 300px;
}
// This ID is for the pop up version of the form and is not used in the
// form that is within the layout of the page
#popuporderform {
position: absolute;
top: 100px;
left: 100px;
z-index: 200;
}
// this is the overlay with spinner in it -- this DOES overlay the form
.orderspinner {
position: absolute;
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
z-index: 250;
background: #fff;
}
// This is the thank-you box - it should appear over the .orderspinner (but isn't)
.resultBox {
display: block;
width: 150px;
height: 100px;
background-color: #fff;
position: absolute;
z-index: 300;
border: 1px red solid;
color: #000;
}
FIXED:
I injected the overlay into the div rather than outside it therefore putting it into the same z-index context.
HTML:
<div id="popuporderform" class="orderform">
<!-- .orderspinner injected here -->
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
I had trouble with this a while back. My problem turned out to be connected to stacking context, basically when you have an element with a z-index it starts a new stacking context in within it meaning that the z-index of elements within will not be compared with z-index of elements out side.
What adds to the complexity of things is that IE 6-7 (I don't know about 8) starts a new stacking context when elements are positioned (absolute, relative).
so i would check the elements of your popup down to the root and try and give them a high z index and see if that fixes it. with a bit of trial and error you can probably find the problem.
Does the code that's supposed to be in the background use z-index? Have you tried changing the z-index to ridiculously large values to see if it's competing with some other component?
Hard to think of much else blindly.