My modal window opens after click on user icon:
echo Html::a('<span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="badge badge-notify">444</span>',
['#'],
['id' => $model->id,
'class' => 'linkbutton',
'data-toggle'=>'modal',
'data-tooltip'=>'true',
'data-target'=>'#search'.$model->id,
'title'=> 'Votes']);
When Modal is opened all is OK. A tooltip dissapears and no border in user icon visible. But after close Modal some border appears. It dissapears after I click on any place of webpage.
How to remove them automatically after Modal close?
I tried to add css border:none!important on focus and visited but no success:
.linkbutton{
background:none!important;
border:none;
padding:0!important;
cursor: pointer;
color: darkcyan;
font-size: 15px;
}
.linkbutton:hover {
color: #ccc;
text-decoration: none;
}
.linkbutton:visited .linkbutton:focus{
border:none!important;
}
Related
I have a file drop area that has background-color: red. This area changes its background-color to gray on :hover and when it has drop-over class, that I add on dragenter event and remove on drop event.
When I drop a file I see red blinking of this area (.drop-over is removed, but :hover CSS rule is not applied yet).
How to fix it with CSS?
label.addEventListener("drop", event => {
event.preventDefault();
label.classList.remove("drop-over");
console.log(event.dataTransfer.files);
});
label.addEventListener("dragenter", event => {
label.classList.add("drop-over");
});
label.addEventListener("dragleave", event => {
label.classList.remove("drop-over");
});
label.addEventListener("dragover", event => {
event.preventDefault();
});
#file-input {
display: none;
}
label {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background-color: red;
}
label:hover, label.drop-over {
background-color: gray;
}
<div class="wrapper">
<input id="file-input" type="file">
<label id="label" for="file-input">
Drop Here
</label>
</div>
The question was how to fix it with CSS, and I still do not know how.
But if you need any decision, it possible to do with JS.
Replace inside the drop listener:
label.classList.remove("drop-over");
with:
setTimeout(_ => label.classList.remove("drop-over"), 50);
Here I have simple alert box:
/* The alert PROMO box */
.promobox {
padding: 10px;
background-color: #415ca2; /* Blue */
color: white;
margin-bottom: 7px;
}
/* The close button */
.closebtnpr {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 18px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
color: black;
}
<div class="promobox">
<span class="closebtnpr" onclick="this.parentElement.style.display='none';">×</span>
<center><b>U.S. POLO ASSN. DAY!</b></center>
</div>
When I click on (x) then hide element. But when I refresh page then again is displayed alert box.
How can I remember the choice of closing the alert box until I finish browsing the website?
update2:
sessionStorage.setItem('myCat', 'Tom');
The following example autosaves the contents of a text field, and if the browser is accidentally refreshed, restores the text field content so that no writing is lost.
// Get the text field that we're going to track
let field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});
You almost got it in your last edit. Use sessionStorage (or localStorage if you want your data to persist). Instead of changing display attribute directly with js use css class, and remove it if user didn't dismiss it before.
Use boolean value for sessionStorage variable.
This code snippet won't work in the sandbox environment
document.addEventListener("DOMContentLoaded", function() {
let dismissed = sessionStorage.getItem("dismissed");
let alertDiv = document.getElementById("alert");
let dismissButton = document.getElementById("dismiss");
if(!dismissed){
alertDiv.classList.remove("hide");
}
addEventListener("click", function(){
alertDiv.classList.add("hide");
sessionStorage.setItem("dismissed", true);
});
});
.alert{border: 1px dashed lime; font-size: x-large; display: inline-block}
.hide{display: none}
<div class="alert hide" id="alert">
SOME ANNOYING ALERT HERE!
<button type="button" id="dismiss">X</button>
</div>
I'm using Google Map Javascript Api to put a map on my website.
I created a button on the top right corner of the map just so the user could close it
This is my CSS button code:
#close-map {
position: absolute;
top: 0;
right: 0;
background: #ffc300;
color: #000;
font-size: 16px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
z-index: 400;
}
I used jQuery to put it inside the #map div
$(window).load(function() {
$('#map').prepend('<div id="close-map">close map</div>');
});
and I have jQuery code to hide the map when I'm clicking on it
So I can see the button on the corner but it's not clickable
you need to put that clickable button out of the #map div. for that you can wrap it on another div (testing-div) and put button into it.
<div class="testing-div" style="position:relative;">
<div id="close-map">close map</div>
<div id="map" style="height: 580px"></div>
</div>
now you can add some jquery to close the testing-div
$("#close-map").click(function(){
$(".testing-div").slideUp();
});
Im using reference from here : http://www.cssnewbie.com/example/showhide-content/ and confused with the javascript
I want if I click see more, the see more wont become invisible, only activate the link
PS: I tried this at jsfiddle but dunno why didnt working, here it is: http://jsfiddle.net/cfp35/
The code:
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">
home
</a>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
<p>Hide this content.</p>
</div>
CSS:
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
It's simple. If #shID element is not displayed, let it display.
No change in the buttom at all.
function showHide(shID) {
if (document.getElementById(shID)) {
if ((document.getElementById(shID).style.display == 'none')||(document.getElementById(shID).style.display == '')) {
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID).style.display = 'none';
}
}
}
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.