I have used this method with or without area-bounding-box so please tell how to get the count classes with name item-box item-box-active
Javascript
function next() {
elementarray = document.querySelectorAll('#area-bounding-box .item-box item-box-active');
if (elementarray.length === 0) {
document.getElementById("btCount").innerHTML = "5";
} else {
document.getElementById("btCount").innerHTML = "2";
}
arr.push(elementarray.length);
console.log(arr);
}
HTML
<div class="area-bounding-box" style="margin-top: 87.5px;">
<img src="s3.-9278-494d-bfe5-e174e762089c.jpg" style="visibility: visible;">
<div class="item-box item-box-active item-box-editing" data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c" style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%;">
<span class="icon-resize icon-resize-tl"></span>
<div class="area-move"></div>
<div class="area-btns"><a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
<div class="item-box item-box-active item-box-editing" data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9" style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%;">
<span class="icon-resize icon-resize-tl">
<div class="area-move"></div>
<div class="area-btns"><a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
</div>
</div>
Do not use the space between **.item-box item-box-active**, replace it with .
elementarray = document.querySelectorAll('.area-bounding-box .item-box.item-box-active');
Also notice that area-bounding-box is a class.
Demo
var elementarray = document.querySelectorAll('.area-bounding-box .item-box.item-box-active');
console.log( elementarray.length )
<div class="area-bounding-box" style="margin-top: 87.5px;">
<img src="s3.-9278-494d-bfe5-e174e762089c.jpg?…;" style=" visibility: visible; ">
<div class="item-box item-box-active item-box-editing " data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c " style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%; ">
<span class="icon-resize icon-resize-tl "></span>
<div class="area-move "></div>
<div class="area-btns ">
<a class="btn btn-delete " href="# ">
<i class="fa fa-times " aria-hidden="true "></i>
</a>
</div>
<div class="item-box item-box-active item-box-editing " data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9 " style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%; ">
<span class="icon-resize icon-resize-tl ">
<div class="area-move "></div>
<div class="area-btns ">
<a class="btn btn-delete " href="# ">
<i class="fa fa-times " aria-hidden="true "></i>
</a>
</div>
</span>
</div>
</div>
</div>
You can use jQuery to find.
https://api.jquery.com/find/
Example: $('.item-box item-box-active').find()
$(document).ready(function() {
var arrLength = [];
var eleLength = $(".item-box.item-box-active").length;
//var eleLength = $(".area-bounding-box .item-box.item-box-active").length;
console.log("length", eleLength);
if (eleLength === 0) {
$(".btnCount").html("5");
} else {
$(".btnCount").html("2");
}
arrLength.push(eleLength);
console.log(arrLength);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="area-bounding-box" style="margin-top: 87.5px;">
<img src="s3.-9278-494d-bfe5-e174e762089c.jpg" style="visibility: visible;">
<div class="item-box item-box-active item-box-editing" data-uuid="c7054d5f-5355-4f4c-8b74-c468770b600c" style="top: 9.61%; left: 21.85%; width: 66.42%; height: 71.23%;">
<span class="icon-resize icon-resize-tl"></span>
<div class="area-move"></div>
<div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
<div class="item-box item-box-active item-box-editing" data-uuid="237f524b-d107-40f2-9c30-d7831d60e3b9" style="top: 11.14%; left: 8.28%; width: 6.71%; height: 21.71%;">
<span class="icon-resize icon-resize-tl">
<div class="area-move"></div>
<div class="area-btns"><a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
</div>
</div>
<div class="btnCount">
</div>
<div class="area-bounding-box" style="margin-top: 87.5px;">
<div class="item-box item-box-active item-box-editing" data-uuid="9fbc2435-d87d-418f-83fa-580c3841955a" style="top: 4.47%; left: 11.57%; width: 18.42%; height: 39.42%;"><span class="icon-resize icon-resize-tl">
</span><span class="icon-resize icon-resize-br"></span>
<span class="icon-resize icon-resize-tr"></span>
<span class="icon-resize icon-resize-bl"></span>
<span class="icon-resize icon-resize-t"></span>
<span class="icon-resize icon-resize-b"></span>
<span class="icon-resize icon-resize-l"></span>
<span class="icon-resize icon-resize-r"></span>
<div class="area-move"></div><div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
<div class="item-box item-box-active" data-uuid="78b14a5a-49b9-419d-9a90-fea9312b8029" style="top: 8.85%; left: 34.14%; width: 24.42%; height: 53.52%;">
<span class="icon-resize icon-resize-tl">
</span>
<span class="icon-resize icon-resize-br">
</span>
<span class="icon-resize icon-resize-tr">
</span>
<span class="icon-resize icon-resize-bl">
</span>
<span class="icon-resize icon-resize-t">
</span>
<span class="icon-resize icon-resize-b">
</span>
<span class="icon-resize icon-resize-l">
</span>
<span class="icon-resize icon-resize-r">
</span>
<div class="area-move"></div>
<div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
<div class="item-box item-box-active item-box-editing" data-uuid="7c143202-b7db-4515-9be0-c60be4249bd6" style="top: 17.42%; left: 72.28%; width: 21%; height: 45.71%;">
<span class="icon-resize icon-resize-tl">
</span>
<span class="icon-resize icon-resize-br">
</span>
<span class="icon-resize icon-resize-tr">
</span>
<span class="icon-resize icon-resize-bl">
</span>
<span class="icon-resize icon-resize-t">
</span>
<span class="icon-resize icon-resize-b">
</span>
<span class="icon-resize icon-resize-l">
</span>
<span class="icon-resize icon-resize-r">
</span>
<div class="area-move"></div>
<div class="area-btns">
<a class="btn btn-delete" href="#">
<i class="fa fa-times" aria-hidden="true">
</i>
</a>
</div>
</div>
</div>
(function() {
'use strict';
$("body").prepend ( `
<button id="btCount">Box Count</button>
<button id="btReset">Reset</button>
<div></div>`);
var arr = [];
var boxCount;
var sum;
var elementarray;
var nodeList;
document.getElementById("btCount").onclick = function() { funAlert();};
$('#btnNext').click( function(){
next();
});
$('#btnSkip').click( function(){
skip();
});
$('#btnPrev').click( function(){
prev();
});
$('#btnSubmit').click( function(){
funAlert();
});
function next(){
var elementarray = $(".item-box.item-box-active").length;
console.log("length", elementarray);
if (elementarray === 0) {
$(".btCount").html("5");
} else {
$(".btCount").html("2");
}
arr.push(elementarray);
console.log(arr);
}
Related
I found this Fiddle that synchronizes two Bootstrap Carousels, it's what I'm looking for but it's using jQuery; I want to reduce it to Vanilla Javascript.
The error in Console is Cannot read properties of null (reading 'length') -- I think I'm getting this error because there is no "next sibling element" for the last element. I'm unfamiliar with jQuery and learning Javascript, so I'm not sure how to fix the code.
Also, is there a Javascript equivalent of jQuery's .siblings() method? And is Javascript's .cloneNode() method equivalent to jQuery's clone()? Thank you.
(function() {
// Initalize the "slide" title
var carouselHeader = document.querySelector('#carousel-text>h3')
carouselHeader.innerHTML = carouselHeader.getAttribute('slide-title');
var items = document.querySelectorAll('.carousel[ data-type="multi"] .item');
items.forEach(function(e, i, items) {
var next = items[i].nextElementSibling;
if (!next.length) {
console.log(next)
}
})
})();
/*** More jQuery to Reduce ***/
/* $('.carousel[ data-type="multi"] .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function () {
activeslide = $(this).find('.active');
$('#carousel-text>h3').text(activeslide.data('slide-title'));
$('#numberCarousel').carousel(activeslide.index());
}); */
#numberCarousel {
padding: 40px;
}
#numberCarousel .carousel-inner {
margin-left: 0;
}
#numberCarousel .item {
text-align: center;
cursor: pointer;
}
#numberCarousel .item .col-xs-2 {
background-color: #fff;
}
#numberCarousel .carousel-inner>.next {
left: 16.66666667%;
}
#numberCarousel .carousel-inner>.prev {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.next.left,
#numberCarousel .carousel-inner>.prev.right {
left: 0;
}
#numberCarousel .carousel-inner>.active.left {
left: -16.66666667%;
}
#numberCarousel .carousel-inner>.active.right {
left: 16.66666667%;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-control {
width: 10%;
}
#numberCarousel .carousel-control .icon-prev,
#numberCarousel .carousel-control .icon-next {
transform: translate(0, -50%);
}
<div class="container-fluid" id="slider">
<div class="row">
<div class="col-xs-12">
<div id="carousel-text">
<h3></h3>
</div>
<!--/#carousel-text-->
</div>
<!-- /.col-xs-12 #slider -->
<div class="col-xs-12 hidden-xs carousel slide" data-type="multi" id="numberCarousel">
<div class="carousel-inner row">
<div class="item active">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="0">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">1</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="1">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">2</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="2">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">3</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="3">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">4</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="4">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">5</i>
</span>
</a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a data-target="#myCarousel" data-slide-to="5">
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-stack-1x">6</i>
</span>
</a>
</div>
</div>
</div>
<!-- /.carousel-inner.row -->
<a class="left carousel-control" href="#numberCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#numberCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /#numberCarousel -->
<div class="col-xs-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="active item" data-slide-title="State 1">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 2">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 3">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 4">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 5">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
<div class="item" data-slide-title="State 6">
<img src="https://t3.ftcdn.net/jpg/02/04/04/50/240_F_204045093_ojOEmSm3JobjF2tQOBKcYcXtU9Ss1ngf.jpg" alt="">
</div>
</div>
<!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev">back</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next">next</span>
</a>
</div>
<!-- /#myCarousel -->
</div>
<!-- /#carousel-bounding-box -->
</div>
<!--/.row-->
</div>
<!--/.container-fluid-->
I'm trying to fetch data from server and use it in a HTML grid. HTML Grid code is:
HTML:
<div id="wrapper-Baby" class="wrapper">
<div class="Product" style="width:100%">
<header class="product-header">
<div class="product-image-container">
<a class="product-image-link" OnClick="window.location.href='#Url.Action("Details", "Home", new { id = item.ItemID })'">
<div class="product-image">
<img alt="#item.ItemName" src="#item.ImageUrl" />
</div>
</a>
</div>
<div class="product-main-info">
<h3 class="product-title">
<a OnClick="window.location.href='#Url.Action("Details", "Home", new { id = item.ItemID })'">
<span>
<span class="product-brand">
#item.BrandName
</span>
<span class="product-name">
#item.ItemName
</span>
</span>
</a>
</h3>
<span class="product-pricing-info">
<span class="price-container">
<span class="currency-sign">Rs.</span>
<span class="rs-value">
#item.ItemPrice
</span>
<span class="paisa-value">.00</span>
</span>
<span class="saving-container">
<!----to be filled-->
</span>
</span>
</div>
<div class="product-info">
<p>
<span class="package-size">
<!--to be filled-->
</span>
</p>
</div>
</header>
<div class="product-actions-container">
<div class="fat-controller is-full-width">
<div class="fc-button" id="fcButton">
<div class="button-main-container clear">
<a href="/ShoppingCart/AddToCart/#item.ItemID/1" class="button button-main">
<span class="button-main-inner">
<span>
Add
</span>
<span class="product-qty">1</span>
<span class="product-text">for</span>
<strong class="product-price">Rs. #item.ItemPrice</strong>
</span>
</a>
</div>
<button class="button button-down">
<svg focusable="false" class="icon icon-dropdown-small">
<use xlink:href="#icon-dropdown-small">
<symbol viewBox="0 0 9 4" id="icon-dropdown-small">
<path d="M4.092,3.999 C4.092,3.999 0.008,0.002 0.008,0.002 C0.008,0.002 8.177,0.002 8.177,0.002 C8.177,0.002 4.092,3.999 4.092,3.999 Z" id="icon-dropdown-small-path-1" fill-rule="evenodd"></path>
</symbol>
</use>
</svg>
</button>
<div class="button-confirmation">
<div class="button-confirmation-container clear">
<div class="button-confirmation-label">
<span data-colrs-fat-controller-animation-message=""></span>
</div>
</div>
<div class="button-confirmation-icon">
<span class="icon-loading"></span>
</div>
</div>
<!---->
<div class="fc-dropdown">
<span class="popup-arrow"></span>
<ul class="fc-button-options" id="fcDropDown">
<!---->
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/1" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">1 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#item.ItemPrice</strong>
</span>
</a>
</li>
<!---->
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/2" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">2 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#(item.ItemPrice * 2)</strong>
</span>
</a>
</li>
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/3" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">3 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#(item.ItemPrice * 3)</strong>
</span>
</a>
</li>
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/4" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">4 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#(item.ItemPrice * 4)</strong>
</span>
</a>
</li>
<li class="fc-option fc-option-more">
<button class="button-more button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<span class="option-more combined" style="width: 93px;">
<span class="product-text">
<span class="product-qty" style="width: 12px;">
5
</span> or more...
</span>
</span>
</button>
#using (Html.BeginForm("AddToCart", "ShoppingCart", new { id = item.ItemID }, FormMethod.Post))
{
<div class="fc-option-more-input ng-hide">
<input type="number" id="itemCount" name="itemCount" class="ItemCount">
<button type="submit" class="button button-add-custom-qty" id=#item.ItemID disabled="disabled">
<!----><span>Add</span><!---->
</button>
</div>
}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I'm pasting all this code because I need to show my page in this format. I need to pass following variable values to Grid from ajax success:
#item.ItemName, #item.ImageUrl, item.ItemID, #item.BrandName, #item.ItemName
So for that, I needed to fetch the list of items from server. This JavaScript code is used to call data from the controller on a button click:
JavaScript:
$(".CategoryAnchors").click(function (e) {
e.preventDefault();
// Get the category name given in the id from the button
var category = this.id;
// Perform the ajax post
if (category != '') {
$.post("/Home/GetCategoryItems",
{
"categoryName": category
},
function (data) {
//successful request gets here
//Update page element
$("#wrapperShop").css('visibility', 'hidden');
}
)
}
});
Controller:
public JsonResult GetCategoryItems (string categoryName)
{
var itemList = db.Items.Where(x => x.CategoryName == categoryName).ToList();
return Json(itemList, JsonRequestBehavior.AllowGet);
}
I might be trying to do a wrong logic for the process but if it's possible this way, please advice how I can pass relevant data to from AJAX to my HTML Grid.
.CSS
#wrapper-Baby {
display: grid;
grid-template-columns: 214px 214px 214px 214px 214px 214px;
grid-auto-rows: minmax(20px, auto);
grid-gap: 15px;
margin-top: 0;
position: relative;
left: 12px;
width: 100%;
bottom: 880px;
}
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 5 years ago.
I have a section in my HTML that has a background image attached to it through the CSS. The background image goes across the entire screen and is outside the container div which the text resides in. However, every time I change the opacity of the background image so it's very light and subdued, the opacity also changes the text as well (because the background image is tied to the section id). How do I re-work this so that the background image is very faint and the text is strong in the fore-front?
<!--services section-->
<section id="services-head-section">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="py-5">
<div class="wow animated fadeInLeft">
<h1 class="display-4"><strong>SERVICES</strong></h1>
<p class="lead" style="font-style:italic;">
"We can't solve problems by using the same kind of thinking we used when we created them."
-Albert Einstein
</p>
</div>
</div>
</div>
</div>
<div class="row wow animated fadeInUp">
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Engineering</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Product Development</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Computer Applications</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-university fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Training</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
</div>
</div>
</section>
CSS:
#services-head-section {
background: url(img/1855JPerkinsSteamGun2.jpg) no-repeat;
background-size: cover;
}
I made a jsfiddle to describe what I mean here.
https://jsfiddle.net/ww5tqomd/
You are going to have two root level elements in your body tag.
The first is going to be your background image,
The second is a container that is positioned absolute over the background image.
<div class="background-image">
</div>
<div class="content-with-text">
<h1>Hello world</h1>
</div>
html,body{
height: 100%;
width: 100%;
}
.background-image {
height: 100%;
width: 100%;
margin-bottom: -100%;
background: black;
opacity: .2;
}
.content-with-text {
position: absolute;
top: 0;
left; 0;
color: blue;
}
This way you are able to adjust the opacity of the background without it affecting your content, because technically your content is not a child of the background container, but a sibling.
Hope this helps
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(http://is4.mzstatic.com/image/thumb/Purple118/v4/a0/ee/6c/a0ee6c57-b4b2-14f3-ae42-f47ad1dd5aac/source/1200x630bb.jpg);
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-size:cover
}
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
#services-head-section {
position: relative;
}
#services-head-section::after {
background: url('http://lorempixel.com/1800/780/sports/1/') 0 0 no-repeat transparent;
background-size: 100%;
bottom: 0;
content: "";
left: 0;
opacity: 0.6;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
<!--services section-->
<section id="services-head-section">
<div class="container">
<div class="row">
<div class="col text-center">
<div class="py-5">
<div class="wow animated fadeInLeft">
<h1 class="display-4"><strong>SERVICES</strong></h1>
<p class="lead" style="font-style:italic;">
"We can't solve problems by using the same kind of thinking we used when we created them."
-Albert Einstein
</p>
</div>
</div>
</div>
</div>
<div class="row wow animated fadeInUp">
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cog fa-spin fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Engineering</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-pie-chart fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Product Development</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Computer Applications</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
<div class="col-md-3 text-center">
<span class="fa-stack fa-lg fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-university fa-stack-1x fa-inverse"></i>
</span>
<a href="#">
<h5 class="text-center">Training</h5>
</a>
<p class="text-muted text-center">
Providing customers with seamless transitions from prototypes to production.
</p>
</div>
</div>
</div>
</section>
I want to div.panel-dashboard become full screen and the width and height of it become equal of width and height of window by clicking on fa-arrows-alt icon and by clicking on fa-minus icon the div.panel-dashboard return to its first size with animating.
<div class="row">
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5"></i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text1
</div>
</section>
</div>
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5"></i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text2
</div>
</section>
</div>
</div>
$(document).ready(function () {
$('.fa-arrow-circle-left').click(function () {
var $win = $(window);
$('.panel-dashboard').animate({ height: $win.height() }, 500);
$('.panel-dashboard').animate({ width: $win.width() }, 500);
});
$('.fa-minus').click(function () {
var $win = $(window);
$('.panel-dashboard').animate({ height: 250px }, 500);
$('.panel-dashboard').animate({ width: '100%' }, 500);
});
});
250px should be quoted
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fa-arrow-circle-left">fa-arrow-circle-left</div>
<div class="row">
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5"></i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text1
</div>
</section>
</div>
<div class="col-sm-6">
<section class="panel-dashboard hide1">
<div class="header color-purple-header">
<div class="controls">
<i class="fa fa-close"></i>
<i class="fa fa-minus ml5">fa-minus</i>
<i class="fa fa-arrows-alt ml5"></i>
</div>
</div>
<div class="body body2 color-purple-body">
text2
</div>
</section>
</div>
</div>
<script>
$(document).ready(function() {
var $win = $(window);
$('.fa-arrow-circle-left').click(function() {
$('.panel-dashboard').animate({
height: $win.height(),
width: $win.width()
}, 500);
});
$('.fa-minus').click(function() {
$('.panel-dashboard').animate({
height: "250px",
width: '100%'
}, 500);
});
});
</script>
i used two different menu for desktop and mobile. when i go in mobile view collapse menu is not working.I use:
$(".navbar-collapse").collapse('hide');
After using this on page load it shows first then hide.
Here is my mobile menu code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="top-header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left" style="margin-left:5px">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a href="http://localhost/eboighar/" class="logo-mini">
<img src="http://localhost/eboighar/img/eboi-s-logo.png" alt="Eboighar Small Logo">
</a>
<div class="pull-right cart-mview-top">
<a id="cart_at_head2" class="pull-right">
<div class="total" style="margin-top:10px;">
<span style="color: #666666;font-size: 14px;margin-top: 13px;padding-right: 5px;" id="headeritems3">0</span>
</div>
<img src="http://localhost/eboighar/img/cart.png" style="margin-right:5px;border-left: 1px solid #b3b3b3; margin-top: 0px;padding-left: 5px;" alt="cart">
</a>
<!-- <img class="header-busket" src="asset/busket.png"/> -->
<div id="cart-sumary2" class=" col-xs-12 m-tab-view" style="display : none;background:#fafafa;">
<div class="cart-sumary2-mobile" style="background:#fafafa;">
<h4 class="txt-blue" style="text-align:center">Cart Summary</h4>
<img id="close_cart_up2" class="close-cart" src="http://localhost/eboighar/img/minus.png" alt="eboighar Ico" style="position: absolute;top:15px; right:15px; height:16px;">
<div>
<div class="padding-10" id="cart_item_holder2">
<div class="bg-fa">
<div id="cart_product_list2" class="mCustomScrollbar _mCS_2 mCS-autoHide mCS_no_scrollbar"><div id="mCSB_2" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: 300px;" tabindex="0"><div id="mCSB_2_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"><div class="btm-border-sum no_item"><strong>You Cart is empty</strong>
<div class="clear_both"></div>
</div></div><div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"><div class="mCSB_draggerContainer"><div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px;" oncontextmenu="return false;"><div class="mCSB_dragger_bar" style="line-height: 30px;"></div></div><div class="mCSB_draggerRail"></div></div></div></div></div>
<div id="price_and_button2" style="display: none;">
<div class="pull-right" style="font-size:18px;">Total : Tk <font id="cart_list_total2" class="text-red">0.00</font></div>
<div class="clear_both"></div>
<div class="crt_btn_con ">
</div>
</div>
</div>
</div>
</div>
</div><!-- End of Cart Summery. -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<div stylle="clear:both; margin:0 5px;">
<form class="menu-search-frm" role="search" action="http://localhost/eboighar/index.php/index/searchbookview_m/" method="post" onsubmit="return submfrom_2(0)" name="searchForm_2" id="searchForm_2">
<div class="form-group menu-top-search">
<div class="input-group" style="padding:0 6px;">
<input class="form-control" style="border:1px solid #ccc;background:#fff;" id="search2" name="search2" autocomplete="off" onkeyup="lookup_2(this.value,event);" value="" placeholder="Enter Book Title, Author or Publisher" type="text">
<div class="suggestionsBox" id="suggestions_2" style="display: none; position:absolute; z-index:999999999999999999;background:#fff;left: 27%;top:30px;">
<!-- <img src="http://localhost/eboighar/images/view/upArrow.png" style="position: relative; top: -10px; left: 30px;" alt="upArrow" /> -->
<div class="suggestionList" id="autoSuggestionsList_2" style="max-height:300px; overflow:auto">
</div>
</div>
<div class="input-group-btn">
<a style="border:0px;" class="btn btn-default add_serch glyphicon glyphicon-search" id="basic-addon2" href="javascript:submfrom_2(1); "> </a>
</div>
</div>
</div>
</form>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="m_menu_top_con" class="navbar-collapse collapse mobile-menu-top" aria-expanded="false">
<div style="clear:both"></div>
<a id="close_mobile_menu" class="close_mobile_menu btn pull-right" style=" margin: -6px -10px -3px;padding: 0;border:none !important"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
<div style="clear:both"></div>
<ul class="nav navbar-nav ">
<li class="active">
<i class="glyphicon glyphicon-home ico-danger"></i> Home
</li>
<li>
<i class="glyphicon glyphicon-user ico-success"></i> About eBoighar
</li>
<li><span><img class="nav-2-ico_ac" src="http://localhost/eboighar/img/howtobuy.PNG" alt="Eboighar How to Buy"></span>How to buy books</li>
<li><i class=" glyphicon glyphicon-tasks ico-warning"></i> Order unlisted books</li>
<!-- <li><i class="glyphicon glyphicon-file ico-info"></i> Tutorials</li> -->
<li><i class="glyphicon glyphicon-gift ico-danger"></i> Bulk order</li>
<li><i class="glyphicon glyphicon-briefcase ico-success"></i> Medical equipment</li>
<li><i class="glyphicon glyphicon-print ico-info"></i> Printing & Binding </li>
<li>
<i class="glyphicon glyphicon-globe ico-warning"></i> News
</li>
<li>
<i class="glyphicon glyphicon-earphone ico-info"></i> Contact Us
</li>
</ul>
<div style="clear:both"></div>
<p class="log pull-right" style="margin-bottom:10px;">
<a class="" href="http://localhost/eboighar/index.php/index/login" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-lock"></i>Login</a>
<a class="" href="http://localhost/eboighar/index.php/index/signup/" style="font-size:12px; color:#000000; padding: 5px 7px;"><i class="glyphicon glyphicon-user"></i>Signup</a>
</p>
</div><!-- /.navbar-collapse -->
</nav>
You can see problem Here : http://eboighar.com/
Some one help to solve this...