I'm trying to make this owlcarousel work but for some reason its not coming up. Its an issue with some of the script tags I guess.
I'm using owl carousel and displaying items from Database inside owlcarousel using Ajax. However when I do that there is no carousel and the items get dumped one below each other like so:
Ajax
<script>
var results = $(".owl-carousel");
$.ajax({
url: "getmaincarousel",
type: "GET",
success: function (response) {
response.forEach(function (item) {
results
.owlCarousel()
.trigger("add.owl.carousel", [
JQuery(
'<div class="item"> <div class="blog-entry"> <a href="#" class="block-20 d-flex align-items-start" style="background-image: url(' +
item.img +
');"> <div class="meta-date text-center p-2"> <span class="day">' +
item.subject +
'</span> <span class="mos">' +
item.subject +
'</span> <span class="yr">' +
item.courseduration +
'</span> </div> </a> <div class="text border border-top-0 p-4"> <h3 class="heading"><a href="#">' +
item.coursename +
"</a></h3> <p>" +
item.coursedesc +
'</p> <div class="d-flex align-items-center mt-4"> <p class="mb-0">Read More <span class="ion-ios-arrow-round-forward"></span></p> <p class="ml-auto meta2 mb-0"> ' +
item.courseprice +
" </p> </div> </div> </div> </div>"
),
])
.trigger("refresh.owl.carousel");
});
},
});
</script>
Script format 1
<script src="../js/jquery.js"></script>
<script src="../js/popper.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
When I do this, I get the following error in console:
the script owlcarousel.min.js is not getting used idk why
and when i interchange the script tags like so, I get this error
Script format 2
<script src="../js/jquery.js"></script>
<script src="../js/popper.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/main.js"></script>
Notice how changing the Jquery 2.1.4 script position gives different errors.
I really dont know why this keeps happening. I need the owl carousel min to get the owlCarousel function which refreshes the carousel. I also need the Jquery 2.1.4 to perform Ajax query. How do I solve this and make use of both?
Here's my full html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel 07</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/owl.carousel.min.css" />
<link rel="stylesheet" href="css/owl.theme.default.min.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"
/>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
</head>
<body>
<div class="navbar">
Phemesoft
Dashboard
Courses
Live classes
Labs
<div class="search">
<input type="search" placeholder="Search" class="inputSearch" />
<!-- <button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>-->
</div>
<button type="submit" class="searchbtn">
<span class="material-icons">search</span>
</button>
<span class="material-icons">shopping_cart</span>
<span class="material-icons">account_circle</span>
</div>
<section class="ftco-section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="heading-section mb-5 pb-md-4">Courses available</h2>
</div>
<div class="col-md-12">
<div class="featured-carousel owl-carousel">
<!-- <div class="item">
<div class="blog-entry">
<a href="#" class="block-20 d-flex align-items-start" style="background-image: url('images/image_1.jpg');">
<div class="meta-date text-center p-2">
<span class="day">csubj</span>
<span class="mos">cboard</span>
<span class="yr">cduration</span>
</div>
</a>
<div class="text border border-top-0 p-4">
<h3 class="heading">Finance And Legal Working Streams Occur Throughout</h3>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<div class="d-flex align-items-center mt-4">
<p class="mb-0">Read More <span class="ion-ios-arrow-round-forward"></span></p>
<p class="ml-auto meta2 mb-0">
cprice
</p>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
</section>
<script src="../js/jquery.js"></script>
<script src="../js/popper.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../js/owl.carousel.min.js"></script>
<script src="../js/main.js"></script>
<script>
// $.ajax({
// url: "getmaincarousel",
// type: "GET",
// success: function (response) {
// var $results = $(".owl-carousel");
// for (var a = 0; a < response.length; a++) {
// // console.log(response[a].Name);
// $results.append(
// '<div class="item"> <div class="blog-entry"> <a href="#" class="block-20 d-flex align-items-start" style="background-image: url(' +
// response[a].img +
// ');"> <div class="meta-date text-center p-2"> <span class="day">' +
// response[a].subject +
// '</span> <span class="mos">' +
// response[a].subject +
// '</span> <span class="yr">' +
// response[a].courseduration +
// '</span> </div> </a> <div class="text border border-top-0 p-4"> <h3 class="heading"><a href="#">' +
// response[a].coursename +
// "</a></h3> <p>" +
// response[a].coursedesc +
// '</p> <div class="d-flex align-items-center mt-4"> <p class="mb-0">Read More <span class="ion-ios-arrow-round-forward"></span></p> <p class="ml-auto meta2 mb-0"> ' +
// response[a].courseprice +
// " </p> </div> </div> </div> </div>"
// );
// }
// },
// });
</script>
<script>
var results = $(".owl-carousel");
$.ajax({
url: "getmaincarousel",
type: "GET",
success: function (response) {
response.forEach(function (item) {
results
.owlCarousel()
.trigger("add.owl.carousel", [
JQuery(
'<div class="item"> <div class="blog-entry"> <a href="#" class="block-20 d-flex align-items-start" style="background-image: url(' +
item.img +
');"> <div class="meta-date text-center p-2"> <span class="day">' +
item.subject +
'</span> <span class="mos">' +
item.subject +
'</span> <span class="yr">' +
item.courseduration +
'</span> </div> </a> <div class="text border border-top-0 p-4"> <h3 class="heading"><a href="#">' +
item.coursename +
"</a></h3> <p>" +
item.coursedesc +
'</p> <div class="d-flex align-items-center mt-4"> <p class="mb-0">Read More <span class="ion-ios-arrow-round-forward"></span></p> <p class="ml-auto meta2 mb-0"> ' +
item.courseprice +
" </p> </div> </div> </div> </div>"
),
])
.trigger("refresh.owl.carousel");
});
},
});
</script>
</body>
</html>
Related
Before typing this question up I spent a number of days looking for an example that was close enough to help to no avail and so I'm bringing my specific use case to SO
I have three cards of bootstrap 5.
And I want to create Popovers for each card, but maybe the manager wants to make a hundred more. I want to create using a for loop. I don't want to enter every single code. How is this possible?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
<div class="row">
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 1</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 2</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="">
<div class="card position-relative">
<div class="d-block card-icon">
<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">
</div>
<div class="card-body">
<a href="#" class=" text-decoration-none text-dark ">
<h5 class="card-title ">Title 3</h5>
</a>
<p>A short description</p>
More Details
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
const servicePOP = document.querySelector('.servicePOP')
const popover = new bootstrap.Popover(servicePOP, {
sanitize: false,
html: true,
content: '<button type="button" class="btn btn-primary">My Button</button>'
});
</script>
</body>
</html>
I want to create using for a loop.
I think you need to use javascript string for html content.
Please try with this.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.rtl.min.css">
<title>Document</title>
</head>
<body>
<div style="height:200px"></div>
<div class="container">
<div class="row" id ="row">
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
for(var i = 0; i<100; i++){
let code = "";
code += '<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="" alt="'+i+'">\n';
code += '\t\t\t<div class="card position-relative">\n';
code += '\t\t\t\t<div class="d-block card-icon">\n';
code += '\t\t\t\t\t<img src="https://www.virtuozzo.com/company/blog/wp-content/uploads/2019/04/laravel-framework.png" class="card-img" alt="Title">\n';
code += '\t\t\t\t</div>\n';
code += '\t\t\t\t<div class="card-body">\n';
code += '\t\t\t\t\t<a href="#" class=" text-decoration-none text-dark ">\n';
code += '\t\t\t\t\t\t<h5 class="card-title ">Title 1</h5>\n';
code += '\t\t\t\t\t</a>\n';
code += '\t\t\t\t\t<p>A short description</p>\n';
code += '\t\t\t\t\tMore Details\n';
code += '\t\t\t\t</div>\n';
code += '\t\t\t</div>\n';
code += '\t\t</div>\n';
document.getElementById("row").innerHTML += code;
}
</script>
</body>
</html>
it would be great if someone can help me here .I am trying to add weight value option that let user select add to cart like this screenshot here]
this is my code`
Sorry for the long code but how can I implement the option value inside this shopping cart code.
How to add options to a select element to display it on the modal section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Shopping Cart Course Discoveryvip.com</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
crossorigin="anonymous"
/>
<style>
#output {
clear: both;
}
#checkoutdiv {
display: none;
}
.footer {
background-color: darkgrey;
color: white;
}
</style>
</head>
<body>
<header class="header">
<div class="htop">
<div id="checkoutdiv " class="container">
<div class="row">
<div class="col-md-6 text-xs-right">
(<span class="items text-muted"></span> <small>items</small>)
<span class="total"></span>
</div>
<div class="col-md-6 text-xs-right">
<span
class="btn btn-success"
data-toggle="modal"
data-target="#cart"
>Open Shopping Cart</span
><a href="checkout.html" class="btn btn-primary"
>Proceed to checkout</a
>
</div>
</div>
</div>
</div>
<div class="hbot">
<div class="container">
<nav class="navbar navbar-full navbar-dark bg-inverse">
<button
class="navbar-toggler light float-xs-right hidden-sm-up"
type="button"
data-toggle="collapse"
data-target="#nvbar"
></button>
<div id="nvbar" class="collapse navbar-toggleable-xs">
<ul class="nav navbar-nav float-sm-right">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="content">
<!-- content changes on each page -->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="card-title">iPhone</h3>
<h6 class="card-subtitle text-muted">$500.00</h6>
<img src="lamb.jpg" class="img-fluid" />
<form class="myform" action="" method="dialog">
<div class="optwheight">wheight-options</div>
<!-- <wheight -->
<select id="mySelect" onchange="myFunction()">
<option value="0">select
<option value="£9.50">226.79g=80z
<option value="£8.20">220g
<option value="£9.50">280g
<option value="£8.20">220g
</select>
<p id="demo"></p>
<div class="card-block">
<div class="card-text"><h4> 28 days Ribeye Steaks</h4>
<a href="#"
class="card-link productItem btn btn-primary" data-name="Beef" data-s="Ribeye Steaks" data-price="50000" data-id="1">Add to Cart</a> </div>
</div>
<!-- <wheight/end -->
<div><input id="res" type="reset" /></div>
</form>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-xs-center">© Copyright info blah blah</p>
</div>
</footer>
<!-- Modals -->
<div class="modal fade" id="cart" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Shopping Cart</h4>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead class="thead-inverse">
<tr>
<th>Qty</th>
<th>Item Name</th>
<th>Weight</th>
<th>Cost</th>
<th class="text-xs-right">Subtotal</th>
<th>Remove</th>
</tr>
</thead>
<tbody id="output"></tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">
Continue Shopping</button
><a href="checkitout.html" class="btn btn-primary"
>Proceed to checkout</a
>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = " " + x;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
crossorigin="anonymous"
></script>
<script>
var shopcart = [];
$(document).ready(function () {
outputCart();
$(".productItem").click(function (e) {
e.preventDefault();
var iteminfo = $(this.dataset)[0];
iteminfo.qty = 1;
var itemincart = false;
$.each(shopcart, function (index, value) {
//console.log(index + ' ' + value.id);
if (value.id == iteminfo.id) {
value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
itemincart = true;
}
});
if (!itemincart) {
shopcart.push(iteminfo);
}
sessionStorage["sca"] = JSON.stringify(shopcart);
outputCart();
///
});
function outputCart() {
if (sessionStorage["sca"] != null) {
shopcart = JSON.parse(sessionStorage["sca"].toString());
console.log(sessionStorage["sca"]);
$("#checkoutdiv").show();
}
var holderHTML = "";
var total = 0;
var itemCnt = 0;
$.each(shopcart, function (index, value) {
console.log(value);
var stotal = value.qty * value.price;
total += stotal;
itemCnt += parseInt(value.qty);
holderHTML +="<tr><td>" +value.qty +"</td><td>#" + value.id + " " +value.name +
"(" +
value.s +
")</td><td> " +
formatMoney(value.price) +
' </td><td class="text-xs-right"> ' +
formatMoney(stotal) +
'</td><td><span class="remove-item btn btn-danger">x</span></td></tr>';
});
holderHTML
holderHTML +=
'<tr><td colspan="3" class="text-xs-right">Total</td><td class="text-xs-right">' +
formatMoney(total) +
"</td></tr>";
$("#output").html(holderHTML);
$(".total").html(formatMoney(total));
$(".items").html(itemCnt);
}
function formatMoney(n) {
return "$" + (n / 100).toFixed(2);
}
$("#output").on("click", ".remove-item", function () {
var itemInfo = $(this.dataset)[0];
var itemToDelete = $(".remove-item").index(this);
shopcart.splice(itemToDelete, 1);
sessionStorage["sca"] = JSON.stringify(shopcart);
outputCart();
});
});
</script>
</body>
</html>
Use option:selected .
Checkout how to get selected option.
$(".productItem").click(function (e) {
e.preventDefault();
var iteminfo = $(this.dataset)[0];
let selectedItem = $('#mySelect option:selected') //add. selected option selector
iteminfo.qty = 1;
iteminfo.price = selectedItem.val().replace('£','') //add. value of selected option.
You'd better find a better way to use the formatMoney function with the numeric calculation instead of using .replace()
iteminfo.weight = selectedItem.text() //add. text of selected option
var itemincart = false;
$.each(shopcart, function (index, value) {
//console.log(index + ' ' + value.id);
if (value.id == iteminfo.id) {
value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
itemincart = true;
}
});
if (!itemincart) {
shopcart.push(iteminfo);
}
sessionStorage["sca"] = JSON.stringify(shopcart);
outputCart();
///
});
Add weight td in var stotal
var stotal = value.qty * value.price;
total += stotal;
itemCnt += parseInt(value.qty);
holderHTML +="<tr><td>" +value.qty +"</td><td>#" + value.id + " " +value.name +
"(" +
value.s +
")</td><td> " + //add
value.weight + //add
"</td><td> " +
formatMoney(value.price) +
' </td><td class="text-xs-right"> ' +
formatMoney(stotal) +
'</td><td><span class="remove-item btn btn-danger">x</span></td></tr>';
I have this code below to create a loop of div using javascript. It's working fine on looping the div that I wanted. But the problem is the alignment of the div. Its in alternate position. What I want to accomplish here is to have my design div to be aligned.
Expected Output
First Div | Second Div <<-- First Loop
First DIv | Second Div <<-- Second Loop
Current Design in my code
| First DIv
First Div |
function isOdd(n) {
var IsOdd = false;
if (Math.abs(n % 2) == 1) {
IsOdd = true;
}
return IsOdd;
}
$("#click").click(function(e) {
e.preventDefault();
var odd = [1, 3, 5, 7, 9];
var even = [2, 4, 6, 8, 10];
var counter = 0;
var FireCounter = [1, 2, 3]
for (var i = 0; i < FireCounter.length; i++) {
var ArchPlanDetails = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).find(".req");
var cardTitle = $("#frmPlanDetails").find("div.divHide:visible").find("div#collapse" + FireCounter[i]).parent().find(".card-title")[0]; //.innerText;
console.log(cardTitle);
var dividedAlertPlanDetails = FireCounter.length / 2;
var mainCard = "";
mainCard = '<div class="row">' +
'<div class="col-md-6" id="divBody_' + i + '">' +
'</div>' +
'<div class="col-md-6" id="divBody2_' + i + '">' +
'</div>' +
'</div>';
$("#modalAlert .modal-body").append(mainCard);
var fieldSet = '<fieldset class="border p-2 mt-2">' +
'<legend style="color:black !important; font-size:30px !important">' + cardTitle + '</legend>' +
'<div id="fieldDivID' + i + '"></div>' +
'<fieldset>';
//var cards = '<div class="card" id="HelloWorld_' + i + '"> <div class="card-header bg-success"><h3 class="card-title">' + cardTitle + ' </h3 ></div> <div class="card-body"> </div>'
if (isOdd(i)) {
$("#modalAlert .modal-body #divBody_" + i).append(fieldSet);
} else {
$("#modalAlert .modal-body #divBody2_" + i).append(fieldSet);
}
counter++;
$.each(ArchPlanDetails, function(Index, Value) {
var appendBody = "";
var id = "#fieldDivID" + i;
var divID = "#divBody_" + i;
var divID2 = "#divBody2_" + i;
var textboxValue = $(Value).find("input[type=text],[type=number]").val();
var InnerText = Value.innerText.trim();
appendBody = '<div class="row mt-2" style="font-size:20px">' +
'<div class="col-md-12"> ' + InnerText + ' </div >' +
'</div >';
if (textboxValue == "") {
if (isOdd(i)) {
$(divID + " " + id).append(appendBody);
} else {
$(divID2 + " " + id).append(appendBody);
}
}
});
}
$("#modalAlert .modal-header").html("Header");
$("#modalAlert").modal("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form id="frmPlanDetails">
<div class="col-md-12 divHide" id="dvFireCounter1">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter1"></span> Plan A
<a class="fa fa-window-minimize float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="Fire" name="FireIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="Fire">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
<fieldset class="border p-2">
<div class="row">
<div class="col-md-6 req">
Ave. Cover(mm)
<input type="text" class="form-control flat" name="FireAveCover" id="" placeholder="25">
</div>
<div class="col-md-6 req">
Overall Depth(mm)
<input type="text" class="form-control flat" name="FireOverAll" id="" placeholder="150">
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter2">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter2"></span> Plan B
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="BP" name="BPIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="BP">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
B
</div>
</div>
</div>
<div class="col-md-12 divHide" id="dvFireCounter3">
<div id="card_one" class="card">
<div class="card-header bg-success pt-0 pb-0">
<h3 class="card-title pt-1">
<span id="FireCounter3"></span> Plan C
<a class="fa fa-plus float-right FAHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
<a class="custom-control custom-checkbox float-right">
<input type="checkbox" class="custom-control-input" id="AS" name="ASIsComplied" value="true">
<label class="custom-control-label font-weight-normal" for="AS">
Complied
</label>
</a>
</h3>
</div>
<div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
C
</div>
</div>
</div>
<button id="click">Click</button>
</form>
<div class="modal fade" id="modalAlert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-success">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row">
</div>
</div>
<!-- Modal footer -->
</div>
</div>
</div>
jsFiddle
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q=funny&searchType=image&safe=high";
$(function () {
var jqxhr = $.getJSON(url, function () {
console.log("success");
}).done(function (data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>"
+ "<div class='b'><img src="+ item.link +" height=200px width=200px /></div><div class='a mn-video-title'> "
+ item.title+"</div></div>";
}
}).fail(function (data) {
console.log("error");
});
});
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
Hello Friends, I am new in google custom search API and jquery.
This code is perfect on page load but i want to load images on button click.
How to load images on button click i tried other peoples code but it can't do what i want.
I want to get the URL of images from custom search and display that images in html.
so, please help me
Add the json calling function inside the button click.And passing the input string to the URL
$('#findNow').on('click',function(){
document.getElementById("content11").innerHTML ="";
var a =$('#search1').val();
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high";
var jqxhr = $.getJSON(url, function() {
console.log("success");
}).done(function(data) {
for (var i = 0; i < 4; i++) {
var item = data.items[i];
document.getElementById("content11").innerHTML += "<br><div class='c'>" + "<div class='b'><img src=" + item.link + " height=200px width=200px /></div><div class='a mn-video-title'> " + item.title + "</div></div>";
}
}).fail(function(data) {
console.log("error");
});
})
button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>
I am printing a div in a javascript and i was putting a css within it, why it doesn't follow my css? anything i put in my css was something nothing or it doesn't have an effect to arrange my print section. Can anyone teach me how to arrange the printing page in a javascript code with css to arrange my print?.
how do i apply my css in this situation,
Here is my code:
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style >' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'}' +
'header-cert{' +
'text-align: center;' +
'text-decoration: underline;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
<div id="printme">
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader"></p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div>
<!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div>
<!-- col-md-4 -->
</div>
<!-- row -->
<div class="row">
<div class="col-md-12">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label> was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label> with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for <label id="cert_physician"></label> days barring complication.</p>
</div>
</div>
<!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div>
<!-- signatory -->
</div>
<!-- printme -->
why does it not makes my header-cert centered in printing? it didn't follow the css that i've put.
I think you missed . in header-cert, so use .header-cert.
function printDiv() {
var divToPrint = document.getElementById('printme');
var htmlToPrint = '' +
'<style rel="text/stylesheet">' +
'body {' +
'font-family: arial, sans-serif ;' +
'font-size: 12px ;' +
'}' +
'.header-cert{' +
'text-align: center;' +
'text-decoration: underline;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
//newWin = window.open("");
newWin = window;
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
document.getElementById('printBtn').addEventListener('click', function(){
printDiv();
})
<div id="printme">
<div class="border">
<div class="row">
<div class="cliniclogo" style="background-image: url()">
</div>
<div class="col-md-12 text-center">
<div class="header-cert">
<p class="certheader">Cerheader title</p>
<p class="certheader" id="clinic_name"></p>
<p class="certheader"><label id="clinic_address"></label>, <label id="city_name"></label> </p>
<p class="certheader"><label id="province_name"></label>, <label id="zipcode"></label> </p>
</div><!-- header-cert -->
</div>
<div class="col-md-12 text-center">
<p class="medcert">MEDICAL CERTIFICATE</p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-10">
<p>Date: <u><?php echo "".date(' M j, Y'); ?></u></p>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4">
<p class="certmarg">To Whom It May Concern:</p>
</div><!-- col-md-4 -->
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<p class="startindent">THIS IS TO CERTIFY that <label id="cert_name"></label> of <label id="cert_address"></label>
was examined and treated at the <label id="cert_clinic_name"></label> on <label id="cert_check_up_date"></label>
with the following diagnosis: <label id="cert_diagnosis"></label> and would need medical attention for
<label id="cert_physician"></label> days barring complication.</p>
</div>
</div><!-- row -->
<div class="signatory">
<div class="row">
<div class="col-md-4 col-md-offset-10">
<u><p id="cert_physician_signatory"><label id="cert_physician_sig"></label>, M.D.</p></u>
</div>
</div>
</div><!-- signatory -->
<button id="printBtn">Print<button>