I used
// make main container visible
$( window ).load(function() {
$( "#video-container" ).css( "visibility", "visible" );
});
but no luck. I figured the css would have already been applied to the div on load, but maybe I'm missing something.
CSS is as follows:
#video-container {
background-color: #191919;
border: 3px solid #999;
box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
left: 50%;
margin-left: -13%;
margin-top: -13%;
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
vertical-align: middle;
visibility: hidden;
width: 26%;
z-index: 2;
}
There is no border-radius declaration in your CSS so it's likely that this is set somehwere else,
I suggest that you check your other CSs/JS/JQ functions to ensure that this is added at the appropriate time.
Try using this...
$( "#video-container" ).show();
Related
The working on a project I can't understand why the heights of my components are fixed around 200px to 500px randomly.
I have tried adding height to the root id, but it doesn't affect the div they remain the same.
I'm adding a screenshot for better understanding:
What will be the best way to fix this, as my goal is to make this project dynamic. When I add more fields or elements, then this will be the big problem, causing other elements to lap over - like my footer is overlapping the elements, if I want to add more as in the image:
Global CSS Variables:
:root{
--clr-white: #fff;
--clr-black: #111;
--clr-grey-light: #f7f7f7;
--clr-grey-lighter: #ebebeb;
--clr-grey-lightest: #d8d8d8;
--clr-grey-dark: #999;
--clr-grey-darker: #777;
--clr-grey-darkest: #333;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 2rem;
--sm-radius: 1rem;
--light-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
--light-shadow-white: 0 0 10px rgba(200, 200, 200, 0.1);
--dark-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
--dark-shadow-white: 0 0 10px rgba(200, 200, 200, 0.3);
--max-width: 1170px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-size: 16px;
background: var(--clr-black);
font-family: futuramedium;
}
.container{
max-width: var(--max-width);
margin: 0 auto;
padding: 0 10vw;
}
I want slide number on each navigation bar bullet points
HTML code
<div id="slideshow">
<div class="container">
<div class="flexslider showOnMouseover ">
<ul class="slides">
<li> <img src="sliders/images/1.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-1.png" alt=""></div></li>
<li> <img src="sliders/images/2.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-2.png" alt=""></div></li>
</ul>
</div>
you can do that by removing a class name
use the below code to do it as soon as the slider starts.
$('.flexslider').flexslider({
start : function(){
$('.flex-control-paging').removeClass('flex-control-paging');
}
});
NOTE: You may need to change some more css to make it look pretty
Anyone still looking for the solution to this as I was, it can be solved simply by modifying the style sheet 'flexslider.css'.
The script already gives each nav link a number, but hides the number from view using a text-indent of -9999px. To get the numbers back, modify the class '.flex-control-paging li a'. As an example, here's the original:
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Modify it to:
.flex-control-paging li a {
width: 20px;
height: 20px;
font-size: 20px;
display: block;
background: #ddd;
cursor: pointer;
}
And...
.flex-control-paging li a:hover {
background: #333;
color:#eee;
}
.flex-control-paging li a.flex-active {
background: #333;
color:#FFF;
cursor: default;
}
Should give you a good starting point to add your own style to.
I made a form control which uses as its container (see the Yes/No toggler below)
Here's the code for that:
<span class="toggle">
<i>Yes</i>
<i>No</i>
<input type="hidden" name="toggle-value" value="0">
</span>
My CSS isn't relevant to the question, but it's included for comprehension of my control:
.toggle { width:auto; height: 20px; display: inline-block; position: relative; cursor: pointer; vertical-align: middle; padding: 0; margin-right: 27px; color: white !important;}
.toggle i { display: block; padding: 0 12px; width: 100%; height: 100%; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font: 11px/20px Arial !important; text-transform: uppercase; }
.toggle i:first-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #73B9FF; }
.toggle i:last-child { -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) inset; background-color: #cc0000; position: relative; top: -20px; z-index: -1; }
.toggle.on i:first-child { z-index: 1; } /* they overlap but on click they switch who gets to be on top. */
.toggle.on i:last-child { z-index: -1; }
.toggle.off i:first-child { z-index: -1; }
.toggle.off i:last-child { z-index: 1; }
.toggle.off i:last-child:before { content: " "; display:block; position:absolute; left:1px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
.toggle.on i:first-child:after { content: " "; display:block; position:absolute; right:-23px; top:1px; text-indent: -9999px; width: 18px; height: 18px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; z-index: 1; background-color: #fff; } /* circle */
and the JS that makes it all work:
.on('click', '.toggle', function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}
The problem is that I'm using this all over my application for data-entry. Have you ever wanted to NOT use the mouse when you're entering a lot of data? Yeah, me too. So you hit TAB and a toggle like this should respond to the spacebar. But instead, since it's just a element, it is skipped altogether.
I'm hoping someone can help me solve the question of "how the heck do I make this a tab stop AND be in the correct order"?
==============
EDIT: HERE IS MY UPDATED JQUERY CODE CONTAINING THE SOLUTION:
$('.toggle').click(function(){
var input = $(this).next('input');
if(input.val() == 1) {
$(this).removeClass('on').addClass('off');
input.val(0).change();
} else {
$(this).removeClass('off').addClass('on');
input.val(1).change();
}
}).focus(function() {
$(this).bind('keydown', 'space', function(e){
$(this).trigger('click')
e.preventDefault();
});
}).blur(function() {
$(this).unbind('keydown');
}).attr('tabIndex', 0);
Try setting your tabindex to 0, on the non-anchor elements you would like to make "tabbable". For example tabindex="0". This way, you won't mess with the tabbing order, or have to throw tabindexs all over the place.
Look into the html attribute tabindex. Basically you should be able to set tabindex on each input you want to focusable via the tab key. Start the first one a 1 and just count upwards for each input. If you also want to take an input out of focusing via the tab key set the tabindex to -1.
So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:
modal hide fade
What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?
But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:
.modal-width-half (#modalWidth: 50%) {
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: #modalWidth;
margin: -250px 0 0 -#modalWidth / 2;
background-color: white;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.
I just did this and can share the line you're missing.
In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.
.modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g.
.my-modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
You can then refer to this in your html like:
<div class="modal fade open my-modal">...</div>
Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.
Can CSS be used to make a left and right edges of a content container look like this image? I have been trying to figure out a way to do this without using an image, if that is possible.
Here is jsFiddle that I have been working on. The CSS for the "top" class never gets applied. The CSS for the "bottom" class seems to work ok though.
http://jsfiddle.net/kXuQY/
HTML:
<div class="drop-shadow top bottom">
Content here.
</div>
CSS:
.drop-shadow {
/** Create container. Box-shadow here is to color the inside of the container **/
position:relative;
width:50%;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding:3em;
margin: 2em 20px 4em;
text-align:center
}
.top:before,
.top:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-1;
top:20px;
left:0;
width:40%;
height:1em;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.top:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
transform:rotate(-70deg);
}
.bottom:before,
.bottom:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-2;
top:90px;
left:0;
width:10%;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(99deg);
-moz-transform:rotate(99deg);
-o-transform:rotate(99deg);
transform:rotate(99deg);
}
.bottom:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-99deg);
-moz-transform:rotate(-99deg);
-o-transform:rotate(-99deg);
transform:rotate(-99deg);
}
You can use ::before and ::after pseudo elements to achieve the effect, see here.
Example: (Demo)
HTML:
<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>
CSS:
#box:before, #box:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
content: "";
left: 10px;
max-width: 300px;
position: absolute;
top: 80%;
transform: rotate(-3deg);
width: 50%;
z-index: -1;
}
#box:after {
left: auto;
right: 10px;
transform: rotate(3deg);
}
#box {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 4px 4px 4px 4px;
color: rgba(0, 0, 0, 0.8);
line-height: 1.5;
margin: 60px auto;
padding: 2em 1.5em;
position: relative;
text-shadow: 0 1px 0 #FFFFFF;
width: 60%;
}