Develop Reference

Loading Animation and grayed-out background not working

I just want to have a loading animation with grayed-out background upon clicking TestLoading button. But I can't get it right. The loading gif is slightly in the left side but I want it in the center. Also grayed-out background is not working.
Here's my css:
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
}
.divLoaderContent {
position: absolute;
color: White;
top: 50%;
left: 40%;
}
In my view, I have this:
<!--LOADER -->
<div id="divProcessing" class="divLoader">
<p class="divLoaderContent"><img src="~/Content/image/blocks.gif"></p>
</div>
and
$('#btnRoster1').click(function(e) {
$("#divProcessing").show();
});

Here is revised version of css:
.divLoader{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(67, 71, 75, 0.8);
z-index: 30001;
}
.divLoaderContent{
position: absolute;
color: White;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
And don't use p tag for img container. Use div instead

To animate .show() use
$('#btnRoster1').click(function(e) {
$("#divProcessing").show(800);
});
where 800 is 0.8 sec.
To align the gif you can use flex and get rid of absolute positioning:
.divLoaderContent {
color: White;
display: flex;
justify-content: center;
}

Moving elements (especially img tags) with top/left based on percentages can get messy because it depends on the img size. I recommend using flex with this approach. The justify-content will center the children horizontally and align-items will center vertically when display is flex
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
display: none;
justify-content: center;
align-items: center;
}
Then have your js just modify display in css to flex when you want it to show, then display: none when you want it to hide;
$('#btnRoster1').click(function(e) {
$("#divProcessing").css('display', 'flex');
});
Fiddle below (has a timeout after 3 seconds to simulate something loading) I took out the unnecessary <p> tag as well.
https://jsfiddle.net/Garrito/vh2ttmu9/35/

padding-right not applying to last child

Trying to make an image timeline interface, and I'm a little stuck. The marker is always at the center so the first element has padding-left: 50% which is working fine. However, I also want the last element to have padding-right: 50% so I can scroll all the way to the end of the last element.
Here's the jsfiddle: https://jsfiddle.net/da3hk2xz/
As you can see #timeline:last-child is not being applied.
var timeline = document.getElementById("timeline");
for (var i = 0; i < 25; i++) {
var img = document.createElement("img");
img.src = "http://placehold.it/300x150?text=" + i
timeline.append(img)
}
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#timeline {
width: 100%;
height: 150px;
background-color: red;
overflow-x: scroll;
display: flex;
flex-wrap: nowrap;
position: absolute;
bottom: 0;
box-sizing: border-box;
}
#timeline:nth-child(1) {
padding-left: 50%;
}
#timeline:last-child {
padding-right: 50%;
}
#marker {
/* http://apps.eky.hk/css-triangle-generator/ */
width: 0;
height: 0;
border-style: solid;
border-width: 35px 17.5px 0 17.5px;
border-color: #007bff transparent transparent transparent;
position: absolute;
bottom: 115px;
/* 150 - 35 */
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#line {
width: 2px;
height: 115px;
/* 150 - 35 */
background-color: purple;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div id="timeline"></div>
<div id="marker-container">
<div id="marker"></div>
<div id="line"></div>
</div>

Simply changing the selectors in question from what you have to this below should work:
#timeline :nth-child(1) {
padding-left: 50%;
}
#timeline :last-child {
padding-right: 50%;
}
The reason for this is that the last "phrase" in the selector is the element to which the styles will be applied. In your fiddle, the last "phrase" was the #timeline element itself, thus it was receiving the padding. Putting a space between #timeline and :last-child made the :last-child phrase the last one, and since the space in the selector means "any decendant", the decendant will receive the padding.
In plain english:
#timeline:last-child: The last child, of a parent element, that also has an id of timeline.
#timeline :last-child: The last element that is a child of the element with an id of timeline.
Targeting the direct decendant would work as a safer and more efficient solution as well:
#timeline > :nth-child(1)
#timeline > :last-child
CSS is fun.

Tested this and it worked out
#timeline img:nth-child(1) {
padding-left: 50%;
}
#timeline img:last-child {
padding-right: 50%;
}

Here's a cool solution you might like:
Instead of padding, use pseudo flex items.
#timeline::before {
content: "";
flex: 0 0 50%;
background-color: red;
}
#timeline::after {
content: "";
flex: 0 0 50%;
background-color: red;
}
jsFiddle

There you go:
https://jsfiddle.net/da3hk2xz/1/
Your layout uses a bit much absolute positioning, so I had to change it around a bit. The main thing was that I added #right-padding and #timeImgContainer.

How to make an image the full width of a screen with dictating the height

I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>

On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}

change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.

try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),

Absolute position of button centered but now full width

I have fixed this issue before on a previous project but have totally forgotten how i resolved it so thought I would see if anyone knows of the top of their heads :)
I absolute position a button at the bottom of a container, and use left: 0 and right: 0 to center the button but then it makes it full width any ideas how to prevent this?
fiddle mockup: http://jsfiddle.net/1t6Ljkjg/
ul li img {
width: 500px;
}
.ty-subcategories__item {
position: relative;
margin: 0;
display: inline-block;
width: 49%;
}
.ty-subcategories__item .logo-box {
width: 58%;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
<ul>
<li class="ty-subcategories__item">
<a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/butterfly-sofa-bean-bags/" class="ty-subcategories-block__a">
<img class="ty-pict ty-subcategories-img " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-butterfly.jpg?t=1437997789" alt="left" title="left">
<div class="logo-box left"><span class="ty-btn ty-btn__primary">Shop Now</span>
</div>
</a>
</li>
</ul>

Rather than using left:0 and right:0, you could consider using a CSS transform to center your button. For example, your declaration block might turn into:
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
}
Here's an updated JSFiddle. Hope this helps! Let me know if you have any questions.
EDIT: Though, if you were hoping to get it centered in the black box (and not just the button's parent element), you'll need to update the width of the parent to something like:
.ty-subcategories__item .logo-box {
width: 161px;
}
(I assumed the black box is square.) Here's a new JSFiddle.
EDIT 2: To make the centering work responsively, we can do a little math: Assuming the black box is square, and the image width/height ratio are always the same, we can then calculate the percentage of the width of the image the box takes, with:
520 (height of image) / 1610 (width of image) * 100% = 32.3%
So this is the width needed for the parent of the button. To avoid text breaking to multiple lines in the button, you can specify the white-space property. So your CSS could become:
ul li img {
width: 100%;
height: 100%;
}
.ty-subcategories__item {
position: relative;
margin: 0;
display: inline-block;
width: 100%;
}
.ty-subcategories__item .logo-box {
width: 32.3%;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
}
Here's another updated JSFiddle. Let me know if this helps!

Basic Slider: Place caption under image

I need to show image slide show for news which can have one or more than one image displayed.
If it has just one image then Navigation bar should hide, This feature is built in.
But i am facing problem with moving the caption of the image exactly under the Image. I am able to change the bottom margin for css p.bjqs-caption to -30px. which moves the caption but hides under something and is not visible i tried all options like z-index and other stuff but nothing seem to work.
I would appreciate help in this regard.
Slider : http://www.basic-slider.com/
I tried to setup fiddle but demo on fiddle is not working link http://jsfiddle.net/rUXAt/1/
UPDATE : Working fiddle http://jsfiddle.net/rUXAt/2/

Check working fiddle
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
http://jsfiddle.net/rUXAt/2/

try this one,
put height for ul and li height: 355px !important; and color to p.bjqs-caption
p.bjqs-caption {
background: none repeat scroll 0 0 #CCCCCC;
}
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
ul.bjqs {
display: none;
height: 355px !important;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
li.bjqs-slide {
display: none;
height: 355px !important;
position: absolute;
}