I wanted the div id='cancelReq' to be displayed when the mouse hover at span id='requestSent'
I've tried this code, but it's not working.
<style>
#cancelReq {
display: none;
}
#requestSent:hover + #cancelReq {
display: block;
}
</style>
<div id='addUser'>
<span id='requestSent'>Add Friend</span>
</div>
<div id='cancelReq' >hello there</div>
You can use the javascript for that.
Here is the code for your problem:
<script type="text/javascript">
function fun(){
document.getElementById("cancelReq").style.display = "block";
}
function fun1(){
document.getElementById("cancelReq").style.display = "none";
}
</script>
And make your HTML code like following:
<div id='addUser'><span id='requestSent' onmouseover="fun();" onmouseout="fun1();" >Add Friend</span></div>
<div id='cancelReq' >hello there</div>
Related
I have a modal that, when opened, makes everything disappear via display-none except for itself. Or, at least, that's what I want it to do, but it doesn't. I don't know much about child selectors, but I think this should work since .fixed#myNav is a direct child of .fixed#all-body. Does anybody know what could be wrong?
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed#all-body >:not(.fixed#myNav),
.fixed#all-body >:not(.fixed#myNav) * {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
<!-- Other menu content-->
</div>
<!-- Other page content-->
</body>
function toggleMobileMenu() {
var element = document.getElementById("myNav");
element.classList.toggle("fixed");
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
More context, if anybody's wondering: When the button to open the modal is clicked, the .fixed class is added to both #all-body and #myNav, and I want their respective display values to switch. However, since #myNav is a child of #all-body, this doesn't work. I'm hoping to use the code above to basically say "everything except for #myNav is at display: none."
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed #myNav{
display:block;
}
.fixed#all-body >:not(#myNav) {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
menu
</div>
<p>page content</p>
</body>
.fixed class is set for body only.
Added display:block for nav when .fixed is parent.
Content should be wrapped in a tag for this to work.
I found it easier to follow what was going on if there was just one class, showMenu, introduced rather than trying to use fixed twice.
What this snippet does is toggle showMenu on the body. It also ensures the 'other content' on the page is wrapped in an element so that it too can respond when the showMenu class is added to body.
Then it does what you were basically doing, set all child elements of body to display none when the showMenu class is set and then it sets the menu to block so it alone shows.
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("showMenu");
}
#myNav {
display: none;
}
/* stop showing every element below body (but not body itself) */
.showMenu>:not(#myNav) {
display: none;
}
/* override the above setting for just the menu */
.showMenu #myNav {
display: block;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button> Other menu content
</div>
<div>
Other page content
</div>
I couldn't see how to do it without making sure the other content is in its own element - if it isn't it will stay visible which I believe you don't want.
By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered.
However, I would like to show the modal with a certain amount of gap under the top of the page.
The Modal is shown when the home page is opened.
AppModal.vue
<template>
<b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close>
//...
</b-modal>
</template>
<script>
export default {
data () {
return {
mymodal: ['mymodal']
}
},
methods: {
hideModal () {
this.$refs.thisModalRef.hide()
},
showModal () {
this.$refs.thisModalRef.show()
}
}
}
</script>
<style scoped>
.mymodal > div {
position: absolute;
top: 300px;
right: 100px;
background-color: yellow;
}
</style>
AppHome.vue
<template>
<div>
// omitted
<AppModal ref="modalRef"></AppModal>
</div>
</template>
<script>
import AppModal from './AppModal'
export default {
components: {
AppModal
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
showModal: function () {
this.$refs.modalRef.showModal()
}
},
mounted () {
this.showModal()
}
}
</script>
<style scoped>
// ommitted
</style>
html source related to modal
<div id="__BVID__16___BV_modal_outer_">
<div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;">
<div class="modal-dialog modal-lg">
<div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content">
<!---->
<div id="__BVID__16___BV_modal_body_" class="modal-body">
// ommitted
</div>
<!---->
</div>
</div>
</div>
<div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"></div>
</div>
As you can see, mymodal class is correctly applied. But the div .modal-dialog does not have the css properties I give it.
the real css properties found in dev tools
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
I tried adding a custom class to <b-modal> and style it. Nothing worked.
Please help.
If you want to put the modal into the specific position, below is my solutuon:
add specific class to <b-modal> by its props=modal-class
then add your styles into myclass > div
You can look into the github (line#:176), Bootstrap-vue will place one div.modal-content(including header/body/foot) into one div with class="modal-dialog" which is the direct child of root.
That is why above solution use the css selector = .myclass > div.
If you look into the dom tree: the structure of one bootstrap-vue modal will be:
one root div (myclass will be added into here) -> one div with modal-dialog -> one div with modal-content -> header/body/footer
Below is one sample: (I put different background-color for modal-dialog, modal-content.)
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
myclass: ['myclass']
},
methods: {
showModal: function(){
this.$refs.myModalRef.show()
}
}
})
.myclass > div {
position:absolute !important;
top: -10px !important;
left: -10px !important;
background-color:yellow !important;
}
.myclass > .modal-dialog > .modal-content {
background-color:red !important;
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button #click="showModal">
Open Modal
</b-button>
<b-modal ref="myModalRef" :modal-class="myclass" size="lg">
<h2>Test</h2>
</b-modal>
</div>
I use
<b-modal
body-class="modalcart"
ref="addToCart"
id="addToCarModal"
hide-footer
hide-header
>
<b-container class="text-center modal-product-content">
<img class="modal-image" src="~/assets/images/add-to-cart.png" alt=""/>
and:
<style lang="scss" scoped>
/deep/ .modalcart {
font-family: 'poppins-bold';
/deep/ .modal-product-content {
padding: 3rem;
margin: 0 auto !important;
/deep/ .modal-image {
height: 150px;
margin-bottom: 2rem;
}
}
...
}
</style>
and work! thanks
Keep in mind that not work without body-class and /deep/
I use node-sass, vue 3, vue-loader 15
Maybe you could try with something like margin-top: 100px.
I think it's because the #media breakpoint of Bootstrap. Then, in <style> you just override it.
#media (min-width: 576px) {
.modal-dialog {
margin: .5rem auto;
}
}
I can't figure out how to do this, and don't know if it's even possible:
<div class="container">
<div class="text"></div>
View more
<div>
How can I add a class to the div .text if I click on the link .view with only CSS?
I can't use javascript as I'm building a page with its css for AMP
If you can give a fragment to the anchor instead of 'javascript:;' then you can utilize the :target state of anchor.
#view-more {
display: none;
}
#view-more:target {
display: block;
}
<div class="container">
View more
<div class="text" id="view-more">text</div>
<div>
https://jsfiddle.net/karthick6891/g89fdagu/
But the best alternative is to use checkbox so you will have the :checked attribute, which is more robust
The only thing close to it I could think of would be to use the sibling styling
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
.text + a {
border: 2px solid #fc0;
}
So it is the next sibling item that is style and if you could order your structure as follows:
<div class="container">
View more
<div class="text">
</div>
Then maybe you could have
.text {
display: none;
}
a:active + text {
display: block;
}
You could then maybe use table row styling like the following to reorder them
setting the "a" as:
display: table-footer-group
setting the "text" as:
display: table-header-group
All without Javascript, but obviously the minute you haven't got the link active the text box disappears :-D
Soooooooooo you could have a checkbox instead..? when it is active the Adjacent sibling can be styled:
https://css-tricks.com/almanac/selectors/c/checked/
input[type=checkbox] + .text {
display: none;
}
input[type=checkbox]:checked + .text {
display: block;
}
Another possible solution
HTML
<div class="container">
<label for="textView">Button Style Me</label>
<input type="checkbox" name="textView" class="view">
<div class="text">Some Text</div>
</div>
STYLING
input[type=checkbox] + .text {
display: none;
}
input[type=checkbox]:checked + .text {
display: block;
}
CSS cannot do that, CSS is only styling. You can however do it with javascript.
<div class="container">
<div class="text"></div>
View more
<div>
<script>
function myFunction() {
var elements = document.getElementsByClassName("text");
for(var index = 0; index < elements.length; index++) {
var element = elements[index];
element.className += "otherclass";
}
}
</script>
In my SASS file I have some styling for a slick carousel and a loading spinner.
When the class slick-initialized appears is it possible to set display:none on the spinner.
For example - from:
slick.slick-initialized {
display: block;
}
To something like:
slick.slick-initialized {
display: block;
&.spinner { display none };
}
where I have:
<div class="row">
<div class="spinner"></div>
<slick init-onload=true data="qNew" dots=true arrows=false>
<div class=“tile" ng-repeat="question in questionsNew">
<span ng-bind-html="question.question"></span>
</div>
</slick>
</div>
If .spinner element is placed immediately after to .slick element
You can write SCSS
SCSS
slick.slick-initialized {
display: block;
+ .spinner { display none };
}
HTML
<div class="row">
<slick init-onload=true data="qNew" dots=true arrows=false>
<div class=“tile" ng-repeat="question in questionsNew">
<span ng-bind-html="question.question"></span>
</div>
</slick>
<div class="spinner"></div>
</div>
Place ..spinner element after slick element and use above scss
i am trying to build a simple tabbed interface and i am stalled. All works fine except, when cant seem to find a way to set default tab when loaded.
I would like to see when page loads, i want the tab-1 to be visible. Can it be done using pure css, if not for jquery
Here is the code.
<div class='tabs'>
<ul class='horizontal'>
<li>General</li>
<li>Showcase Box</li>
</ul>
<div id='tab-1' class="tab"> Tab1 Content here </div> <div id='tab-1' class="tab"> Tab 2 Content here </div>
CSS
.tabs div:not(:target) { display:none; }
.tabs div:target { display:block; }
I dont know if you could do this with css alone, but in javascript you can use window.location.hash to know if a hash is specified or not, if not it will redirect you to #tab-1.
Try this:
<style>
.tabs div:not(:target) { display:none; }
.tabs div:target { display:block; }
</style>
<div class='tabs'>
<ul class='horizontal'>
<li>General</li>
<li>Showcase Box</li>
</ul>
<div id='tab-1' class="tab"> Tab1 Content here </div>
<div id='tab-2' class="tab"> Tab 2 Content here </div>
</div>
<script>
(function(){
if (window.location.hash) {
window.location.hash;
} else {
window.location.hash = '#tab-1';
};
})();
</script>