I have a scenario, to activate the keyboard highlighting I need to add the contentEditable = true on enter press when focus is on main tag. Problem is that the tab press on focus comes on the main tag and I press the enter editing on content gets activated but the cursor is not visible on the first text of paragraph. This is because I have a hidden p tag in my html which consumes the cursor on enter press.
<p class="screen-reader-only">Page 4 and 5</p>
<style>
.screen-reader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
Really stuck, Anybody please help?
Related
I have a navigation bar at the top of the page and I'm trying to get a box shadow to appear underneath it on scroll.
I've tried using .active and :active with no luck. I can force the shadow to appear in chrome devtools but can't get this to work otherwise on scroll.
.sidenav-breadcrumbs {
height: 45px;
font-size: 16px;
font-weight: bold;
background: red;
}
.nav-fixed-top {
position: fixed;
top: 100px;
right: 0;
left: 0;
z-index: 1020;
}
.shadow:active {
box-shadow: 0 0 10px rgba(0,0,0,0.4)!important;
}
Shadow should appear under bar on scroll but seems to only appear when clicking the bar.
Thank you if you can help.
Active selector applies to clicked element, that's why the shadow appears when you click the bar. There is no selector for scroll, so you should be using JavaScript to add the shadow class while scrolling.
document.addEventListener("scroll", function(){
addShadowClassToBar();
});
And since you probably want to remove the shadow after scrolling is finished you should also remove the class. Here is a previous question that deals with detecting scroll stop.
I'm trying to have my website have drop-down divs when clicked, allowing you to examine the inline widgets inside the divs. However, iframe and other elements that aren't strictly images cause the div to transition back to its original state, causing the menu to collapse as though the user had clicked out of the div area.
Here's what I got:
.music-block {
width: 350px;
height: 90px;
background-color: #bc37ff;
overflow: hidden;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.music-block:focus {
max-height: 952px;
}
.music-block:hover {
cursor: pointer;
}
<div class="music-block" tabindex="1">
<p>
<h1>MUSIC</h1>
</p>
Text.
</div>
<p>
<iframe style="border: 0; width: 350px; height: 654px;" src="https://bandcamp.com/EmbeddedPlayer/album=3599654224/size=large/bgcol=ffffff/linkcol=7137dc/transparent=true/" seamless>toothbops - EP by toothbops
</iframe>
</p>
</div>
Here's an example of what I mean with the menu collapsing when you click on iframes (in this case, a bandcamp widget): http://jsfiddle.net/6m52jxtj/
Ok, I can see two posible solutions to your problem, a js way and a css way(there are probably more than that but this comes to mind at the moment :) )
For the css way, you'll need to add a input[tpye='checkbox'] and a label on top of the markup, make the label with height and width of the initial music-block and you're good to go: check out the js fiddle
#trigger-music-block{
display: none;
}
#trigger-music-block + label{
position: absolute;
top: 0; left: 0;
height: 90px; width: 350px;
cursor: pointer;
}
#trigger-music-block:checked + label + .music-block{
height: 952px;
}
For the js way, you can just add a extra class on .music-block when a user clicks it, like this:
check out js fiddle
$('.music-block').click(function(){
$(this).addClass('expanded');
});
I am trying to center a popup div in the middle of the screen, it does not work for all scenarios. I have a listing table, where columns represent daily hours and rows radio channels, so let's assume that on the current viewport only 10 radio channels can be fit and whenever a user clicks on a channel, the popup shows up with some information. Until now everything is fine, the popup is centered as I want, but If I scroll down for example to channel (row) 20-30 ect.. and click, the popup wont appear in the center of the screen but right above where it first did...
I think it is annoying to always scroll all the way up to see the information, is there a way to fix this div to always show in the middle of the screen regardless of the scrolling(row position) ?
this is the Div css :
#DescriptionDiv{
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
padding: 16px;
border: 3px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
#TableWrapper{
width : 900px;
height: 600px;
} // the Parent Div of the listing
<div id="TableWrapper" >
<div id="DescriptionDiv">
<span id="DescClose"><i class="fa fa-times"></i></span>
<h6 id="DesTitle"></h6>
<span id="Time"></span>
<div id="Desc"></div>
</div>
</div>
Thanks
Change
position: absolute;
To
position: fixed;
Fixed positioning will keep it from scrolling with the rest of the content. [MDN]
In my current app I have a radio field that is sitting in the upper-left corner of the window. I have given this component a class name of 'radio-buttons' and given the following css to the component:
.radio-buttons {
margin-left: 70px;
margin-top: 30px;
border: dotted;
}
The border is dotted just so I can see the outline of the component. Every time I resize the window, the radio button field shrinks small enough so that the buttons cannot be seen at all. The dotted border can still be seen so I know the component is still in the app, it just shrinks majorly. I tried adding:
position: fixed;
to the radio-buttons class, but this has not helped. Any help would be greatly appreciated! [hopefully this is a simple fix]
So, I searched for my question outside of StackOverFlow and found the following link:
http://css.dzone.com/news/how-resize-extjs-panel-grid
This site answers the question 'how to resize a panel' instead of keeping the panel from resizing, but I stole the following line of code and put it in my 'radio-buttons' class:
position: absolute;
and now my radio button field doesn't resize itself on window resizing!
Basically all I had to do is change
position: fixed;
to
position: absolute;
Here's my final css class that keeps the radio button in place:
.radio-buttons {
position: absolute;
margin-left: 70px;
margin-top: 30px;
}
In your CSS, you can specify the minimum width and height for a class or ID. try something like the following:
.radio-buttons {
margin-left: 70px;
margin-top: 30px;
border: dotted;
width: 20%;
height: 20%;
min-width: 50px;
min-height: 50px;
}
This will set the width and height to 20% of the window size, unless that is less than 50px.
I have got some markup that looks like this:
<div class="button">
<span class="image"></span>
<input type="submit" value="Test button">
</div>
The CSS:
.button{
background: url('http://img33.imageshack.us/img33/4108/leftd.png');
width: 10px;
display: inline-block;
height: 15px;
}
.image{
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
background: url('http://img339.imageshack.us/img339/3112/arrow090.png');
margin-left: 13px;
}
.button input{
background: url('http://img853.imageshack.us/img853/7212/righthw.png');
border: 0;
display: block;
font: 11px sans-serif;
margin-left: 10px;
padding-left: 23px;
padding-right: 10px;
color: #FFFFFF;
width: auto;
height: 15px;
}
The code for the submit button is generated by the backend which I cannot change, but the spans and divs are editable as they are part of the template. I have made a simple example using simple graphics to show the issue better: http://jsfiddle.net/UBS3z/
The div holds the left part of the sliding door and is about 10 px wide. The span holds an icon to be placed to the left of the text. Finally we have the submit button itself.
The problem is that while visually, it looks fine, the button does not register any clicks when the user clicks on the left sliding door or the area where the image is over. This is extremely bad as a huge chunk of the button is unclickable! This is demonstrated by clicking on the button. The script will log to the console if a click has been registered.
Is there anyway to make those areas clickable using CSS? I think this might be possible to solve using Javascript, but I would prefer a CSS solution.
See fiddle for code and demo
Fiddle: http://jsfiddle.net/UBS3z/6/
Demo: http://jsfiddle.net/UBS3z/6/embedded/result/
Yes you are correct it is possible using css only see the demo for your requirement.
I ended up using a javascript solution. While Dinesh's solution would work too, but background image is very complicated, so I need to use an image instead of a background color. This is the root cause of the issue.
Essentially, I just wrote a simple script to hook onto the button div and make any clicks on that submit the form.