Hello I am looking for a CSS only solution for animations pause on hover halfway until hovered off. I have one example working but it is on page load.
<h2>I want to pause this one on hover mid-way</h2>
<button type="button" class="psuedo-animation btn-primary">Pause on Hover
</button>
<h2>Example 2 - This is everything I want EXCEPT animation loads on page load though</h2>
<button type="button" class="psuedo-animation-2 btn-primary">Paused on Hover
</button>
https://codepen.io/fawn-marie/pen/NWYBjEo
Related
I have made a page with a button in a button like the following :
<button mat-button class="library-tile-button">
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>
<img class="library-picture" src="..."></img>
</button>
The buttons use angular material design.
When I click on the parent button I want to navigate to a certain page and when I click on the child button I want to display some additional content. This is working.
When I click on the parent button the default angular material animation for button is triggered. That's fine with me. My problem is that when I click on the child button this is as if the parent button has also been clicked and so the default angular material animation is triggered for both button. I would like to prevent that. What I want is for the animation to be trigerred only for the child button when I click on it.
Any lead how I can acheive that ? Thanks in advance.
As WorksLikeACharm posted, do not nest the buttons. If your problem is just positioning, wrap them into a div and use absolute position on one of them.
Like this:
div {position:relative;}
button {background-color:transparent; border:0;}
.edit-library-button {
position:absolute;
top:40px;
left:40px;
}
.edit-library-button img {width:30px;}
<div>
<button mat-button class="library-tile-button">
<img class="library-picture" src="https://lh3.googleusercontent.com/proxy/7TiJY6Mswv0hNIXdXRS0fgT687TBQ2SaZFd7PNpO8qfknkj4oIjggatPNPhG_6h9DJedmAycJaWe3p2dVHbFhOgyA0P0JbNu_aS1Tynre891APND36cFHll9qyIQWZ2vEk9kmg" />
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="https://img.icons8.com/material/4ac144/256/facebook.png"/>
</button>
</div>
A possible solution would be to remove the nesting of your buttons, thus seperating the click-events.
<button mat-button class="library-tile-button">
<img class="library-picture" src="..."></img>
</button>
<button mat-button class="edit-library-button">
<img class="edit-library-img" src="..."/>
</button>
I'm trying to make my Navbar have a few specific things.
I want it to:
-Be fixed at the top
-Have tabs, including one tab with a dropdown menu.
-Turn into a hamburger menu responsively on mobile
-Have the hamburger menu be animated smoothly.
I've been changing attributes between the code I have from MDBootstrap.
It gives me:
-the fixed navigation top bar
-the colours I want
-The hamburger menu, and a dropdown tab
-Animated hamburger menu
The problem is that even on the wide browser windows, the hamburger menu is there.
I want the hamburger menu to only show if the browser isn't wide enough.
<button class="navbar-toggler third-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent22"
aria-controls="navbarSupportedContent22" aria-expanded="false" aria-label="Toggle navigation">
I'm just not sure how to combine the responsive topnav I've found here:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
https://mdbootstrap.com/docs/jquery/navigation/navs/
Into the great MDBoostrap version. Can anyone help?
Check out this pen I made; I believe I used the same resource from W3 that you referenced~
HTML
<body>
<header class="topnav" id="myTopnav">
Responsive Navigation
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>
<main>
<p>A Responsive Navigation system that is Fixed on Desktop.</p>
<p>On mobile devices, a Hamburger Icon will be displayed in the upper-right corner. Click it once to open the navigation, then click it again to close.</p>
</main>
</body>
JS
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
I created iframe for my own map (it's a big image).
I need to create buttons for zoom-in and zoom-out on this image.
Can you help me, please.
I googled it, but couldn't find any clear answer for this.
I have this
<div class="scale_buttons">
<button class="button button1" id="zoom-in">+</button>
<button class="button button2" id="zoom-out">-</button>
</div>
<div class="map" id="map">
</div><!--map-->
Image is a bg. And I need to zoom it by click the buttons
I am trying to take the Bootstrap justified grouped buttons style and create divs that will appear like grouped buttons will be just result in non-link divs. I am using it as a "steps" representation, so button one would be highlighted with text symbolizing that we're on step 1, or button two would highlight when you're on step 2. Please see my attached image here for an example.
The buttons I screenshotted work wonderfully as stage indicators, but I don't want users to be confused and think they should be linking to something. I've tried replacing the button input with spans as follows:
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<span class="btn btn-default">Q&A</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-info">Proposal Submissions</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Best & Final Offers</span>
</div>
<div class="btn-group" role="group">
<span class="btn btn-default">Final Selection</span>
</div>
</div>
I don't know if this is even the way I should be going about this, or if there's a standard way to do this with divs. I also tried using divs with the btn classes instead of buttons or spans, same result, it still becomes a link. I am happy to keep using the button classes so long as I can remove the link effect when a cursor is hovered over it.
Thanks for your help.
I would suggest you to see if bootstrap has a component like breadcrumb, because that makes more sense for your use case. But if you want to hack something quickly, you can override btn classes. You could give the parent a class like c-steps and then override the styles for the btn groups:
html
<div class="btn-group btn-group-justified c-steps" role="group">...
css
.c-steps .btn-group,
.c-steps .btn.btn {
text-decoration: none;
/* other override styles */
}
I never had an experience with Bootstrap modal popup before. But in a recent theme purchase that was fully bootstrap based they demoed modal popups too which was perfectly working on their HTML page. But when I integrate in my master page, everything working fine. But the modal popup alone shows as double as you can see in the image below
I didnt get any idea why it behaves likes this when everything in the HTML page and ASPX page are alike. Also when the modal popup shows, there is a shifting like thing goingon on the page or a kinda small jumping towards the right when the modal popup comes.
Here is my modal popup code
<div class="modal fade bs-example-modal-sm" id="mytestmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
And here is the button code
<button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
<i class="fa fa-copy"></i>| Clone Data
</button>
For that jumping, edit it's CSS
body.modal-open{
overflow: visible !important;
}
The lateral shifting is a known open bug in Bootstrap.
Assuming your modal isn't long enough to need to be scrolled, you could try this supposed workaround:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}