I have added all required js and css files, still getting this error. I am sharing my header script : It's a jquery slider plugin I have downloaded from github and trying to integrate in a laravel web application
<link rel="stylesheet" type="text/css" href="{{asset('css/bootcamp.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/lightslider.css')}}">
<style>
.bootcamp-body{
background: white;
color: black;
}
.content{
}
.content-slider{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.demo .item{
margin-bottom: 60px;
}
.content-slider li{
background-color: #ed3020;
text-align: center;
color: #FFF;
}
.content-slider h3 {
margin: 0;
padding: 70px 0;
}
.demo{
width: 800px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='{{asset('js/lightslider.js')}}'></script>
<script>
$(document).ready(function() {
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:9,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
});
</script>
I am getting the following error :
The library looks (after clicking on the link) :
Related
No matter what I try, it just won't work for me. I'm wanting the user to click on an apple and display a modal. I placed an "x" inside the modal for closing it. I just need to know how I can close it by clicking outside of the modal.
Here is my JavaScript code for the apple button:
<script>
var ambModal = $('#ambPopup');
$('#amb').click(function() {
ambModal.show();
});
$('.ambClose').click(function() {
ambModal.hide();
});
</script>
This works perfectly, but I've scoured the Internet looking for solutions and nothing I've tried has solved my problem. I do have jQuery loaded in the HTML. Is Bootstrap required for this function to work? It's possible I've got my header wrong.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apples2Apples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="applestyles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap" rel="stylesheet">
<!--FONT FOR BODY-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
Am I missing something? Please, someone reply if you can. Thank you!
Not sure your use case but what works for me is to include an extra element behind the modal (like an overlay but can be transparent if you want) to catch the click outside the modal window. Here is an example.
$("body").on("click", '.toggle-modal', function() {
if ($('#ambPopup').is(":visible")) {
$('#ambPopup').fadeOut("fast", function() {
$(this).remove();
});
} else {
const modal = $("<div />", {
"id": "ambPopup"
}).append(
$("<div />", {
"class": "modal-overlay toggle-modal"
}),
$("<div />", {
"class": "modal-content"
}).text("Content for the modal. Can be dynamic too.").append(
$("<div />", {
"class": "modal-close toggle-modal"
})
)
).appendTo("body").fadeIn("fast").css("display", "flex");
}
});
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#ambPopup {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9000;
}
.modal-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0, .1);
cursor: pointer;
}
.modal-content {
background: white;
padding: 30px;
font-size: 16px;
line-height: normal;
text-align: center;
z-index: 2;
position: relative;
margin: auto;
}
.modal-close {
position: absolute;
top: 0;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
transform: translate(0, -50%);
cursor: pointer;
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle-modal">Show modal</button>
I believe you are using a custom modal?
You can use the Bootstrap Modal for your version (3.4.1) here.
They already have the scripts for closing the modal from the close button and from clicking outside or the backdrop.
This is my first leap on trying to implement a HTML/CSS website, so please take this into consideration.
I have multiple .html pages that implement the navbar from a nav.html, using a jQuery function( i guess?). The other html's are similar to index.
Any idea of what's wrong?
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
The code i used for adding active class is pure JS.
Here is index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9a39db93cf.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
let count = 0;
function counter()
{
count++;
document.querySelector('#pageContent').innerHTML = count;
}
</script>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script type="text/javascript">
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for( let i=0; i<menuLength; i++){
if(menuItem[i].href === currentLocation){
menuItem[i].className = "active";
}
}
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<div id="nav-placeholder" class="sticky-top">
</div>
<div class="firstPage">
<h4>The title of this paragraph</h4>
<img onclick="counter(); return false;" src="images/mirciun.jpg" alt="mirciun" height=auto max-width=auto class="center">
<p id='pageContent'>0</p>
</div>
</body>
</html>
CSS:
body{
display: block;
margin: 0;
}
.menu li{
display: inline-block;
margin: 0;
}
ul.topnav{
background-color: #333;
margin: 0;
padding: 0;
text-align:center;
overflow: hidden;
}
ul.topnav li a{
display: block;
font-size: 20px;
padding: 10px;
color: whitesmoke;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #222;}
ul.topnav li a.active {background-color: #4CAF50;}
#media screen and (max-width: "600px") {
ul.topnav li {float: none;}
}
#brand{
display: table-cell;
vertical-align: middle;
line-height:50px;
}
#topText{
max-width: 500px;
margin: auto;
text-align: center;
border: 5px solid green;
color: red;
background-color: #0f0f0f;
margin-top: 10px;
}
.firstPage
{
margin-top: -20px;
background-color:grey;
max-width: 100%;
height: auto;
}
h4{
padding: 20px;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#pageContent{
text-align:center;
width: 75%;
margin: auto;
color: blue;
}
wrap your code with jquery on ready function and move to the bottom of the page.
$(function () {
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].className = "active";
}
}
})
Nevermind, i solved it using $( window ).on( "load", function(){, instead of $( document ).ready(function () { . The short explanation is that code will run once the entire page (images or iframes), not just the DOM, is ready. - > https://learn.jquery.com/using-jquery-core/document-ready/
How to populate content of DOM elements after the initial append? Most of the code shown below is the DOM creation. The span segments are my four clickable elements. They all call the same function once clicked. The button calls a seperate function, which is used to reload the screen but show the next set of questions from JSON.
i=0;
function myFunction(){
//console.log('hello')
div1=document.createElement("div");
div1.setAttribute("class","container");
// console.log(div1)
// for(var i=0;i<content.length;i++){
div2=document.createElement("div");
div2.setAttribute("class","question-card");
div1.appendChild(div2);
// console.log(div2)
h11=document.createElement("h1");
h11.setAttribute("id","question1");
h11.innerHTML=content[i].question;
div2.appendChild(h11);
// console.log(h11)
div3=document.createElement("div");
div3.setAttribute("class","answer-choices");
div1.appendChild(div3);
// console.log(div3)
div4=document.createElement("div");
div4.setAttribute("class","row1");
div3.appendChild(div4);
// console.log(div4)
span1=document.createElement("span");
span1.setAttribute("class","choice1");
span1.setAttribute("id","one");
document.addEventListener('click',function(e){
if(e.target && e.target.id== 'one'){//do something}
unlocknext();
}});
//span1.setAttribute("onclick","choice1()");
span1.innerHTML=content[i].options[0];
div4.appendChild(span1);
// console.log(span5)
button1=document.createElement("button");
button1.setAttribute("id","btn");
button1.setAttribute("disabled",true);
document.addEventListener('click',function(e){
if(e.target && e.target.id=='btn'){//do something}
nextScreen();
}});
button1.innerHTML="Next";
div1.appendChild(button1);
//}
// console.log(button1)
document.body.appendChild(div1);
}
function unlocknext(){
document.getElementById('btn').removeAttribute("disabled");
document.getElementById('question1').innerHTML="Answer recorded, click next.";
console.log('Unlock next')
console.log(div1)
}
function nextScreen(){
console.log(i);
i++;
myFunction();
console.log("NextscreenUpload")
}
My JS
<!DOCTYPE html>
<html>
<head>
<title>Quiz game</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
</body>
<script src="json/qubank.json"></script>
<script src="js/dynamicindex.js"></script>
</html>
My HTML
body{
background-color: #642ca3;
font-family: Roboto;
}
.container{
text-align: center;
position:absolute;
width: 100%;
left: 50%;
background-color: green;
top: 40%;
transform: translate(-50%, -50%);
}
.question-card{
background-color: yellow;
}
.answer-choices{
background-color:
}
.choice1{
background-color: #f75c4f;
}
.choice1:hover{
background-color: #f52f1e;
}
.choice2{
background-color: #f23def;
}
.choice2:hover{
background-color: #ec10e9;
}
.choice3{
background-color: #02b6ee;
}
.choice3:hover{
background-color: #028fbb;
}
.choice4{
background-color: #f2ba2c;
}
.choice4:hover{
background-color: #dda30e;
}
.row1{
margin: 50px;
padding: 30px;
}
.row2{
margin: 50px;
padding: 30px;
}
span{
padding: 2%;
margin: 10%;
cursor: pointer;
}
button{
padding: 10px;
border-radius: 15px;
}
MY CSS
I am trying to create a 16x16 grid using jquery. I have a main div, and then I'm trying to create the grid within it. I am using for loops, but when the code below runs, I get a 16x32 grid.
Could anyone explain what is going on and why that is happening?
<html>
<head>
<title>etch-a-sketch</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id=main>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='app.js'></script>
</body>
#main {
height: 192px;
width: 192px;
background-color: antiquewhite;
}
.squares {
height: 10px;
width: 10px;
margin: 1px;
background-color: aquamarine;
display: inline-block;
}
$(document).ready(function() {
for(var x = 0; x < 16; x++) {
for(var y=0; y<16; y++) {
$("<div class='squares'></div>").appendTo('#main');
}
}
});
You get a 16x16 grid. When you're using "inline", spaces take place. Just change the CSS code to this:
#main {
height: 192px;
width: 192px;
background-color: antiquewhite;
}
.squares {
height: 10px;
width: 10px;
margin: 1px;
background-color: aquamarine;
display: block;
float: left;
}
Note:
display: block;
float: left;
I think your thought process was off.. I think the best way to make a 16x16 grid (256 boxes total) would be the way I went below and use css to style them.
The HTML
<div id="main">
</div>
The CSS
#main {
width: 100%;
}
.squares {
width:6%;
height: 50px;
border: 1px solid red;
display:inline-block;
}
The Javascript
for(var x = 0; x < 256; x++) {
$("<div class='squares'>hi</div>").appendTo('#main');
}
I have a fancybox lightbox implemented on this site and it won't open and I can't figure out why.
For reference, it's working on this site: http://triathlon.joomlatest01.mms-dev.com/
Once you click either "Learn More" or "Don't show this again", it will set a cookie and won't show up again (unless you clear your cookies).
I added all the same code (listed below) to both sites, so dont know why it's not working.
<!-- Add fancyBox Lightbox -->
<link rel="stylesheet" href="/js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/js/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/js/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/js/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
function setCookie() {
document.cookie="lightboxcookie=lightboxseen; expires=Thu, 18 Dec 2020 12:00:00 UTC";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var thecookie=getCookie("lightboxcookie");
if (thecookie != "") {
} else {
<!--Show Lightbox-->
jQuery.noConflict()(function ($) {
$(document).ready(function() {
$(".lightbox").fancybox({
helpers : {
overlay : {
closeClick: false,
css : {
'background' : 'rgba(0, 45, 92, 0.80)'
}
}
}
});
$(".lightbox").eq(0).trigger('click');
});
});
}
}
</script>
<body onload="checkCookie()">
<style>
div#lightbox {
background: #fff;
opacity: 1 !important;
height: 200px;
text-align: center;
}
div#lightbox h1{
font-size: 20px;
}
a.lightbox {
display: inline-block;
max-width: 200px;
background: #002D5C;
color: white;
border-radius: 5px;
text-decoration: none;
padding: 5px 20px;
}
a.lightbox_learnmore {
height: 40px;
font-size: 28px;
padding-top: 1px;
margin-top: 10px;
margin-bottom: 20px;
}
a.lightbox_dontshow {
height: 30px;
font-size: 12px;
padding-top: 8px;
}
a.lightbox_dontshow {
background: #ddd;
color: gray;
}
a.lightbox_learnmore:hover {
background: #1366a0;
}
a.lightbox_dontshow:hover {
background: #bbb;
color: white;
}
a.fancybox-close {
display: none;
}
.fancybox-skin {
background: #ffffff;
}
div#lightbox p{
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.fancybox-inner {
width: 650px !important;
height: 500px !important;
}
#media (min-width: 10px) and (max-width:767px) {
.fancybox-inner {
width: 100% !important;
height: 100% !important;
}
.fancybox-wrap {
top: 25px !important;
}
.fancybox-skin {
height: 700px !important;
}
.fancybox-inner {
height: 700px !important;
}
}
</style>
<a style="display: none;" class="lightbox" href="#lightbox">Lightbox</a>
<div style="display:none"><div id="lightbox"><h1><img src="http://ww2.joomlatest01.mms-dev.com/images/mds_logo.png" width=200/> <img src="http://ww2.joomlatest01.mms-dev.com/images/isnow.png" width=80 /> <img src="http://ww2.joomlatest01.mms-dev.com/images/Workwave_Logo_250.png" /></h1>
<br/>
<p>We’ve changed our name from Marathon Data Systems to WorkWave! The Marathon Data Systems brand has been a mainstay in field service management software for over 30 years. We’re doing this now, because we feel the time is right to unify our brand and messaging to more accurately reflect how our product offerings connect every aspect of our your business, providing an unprecedented level of insight into your office and field operations enabling you to truly delight your clients and supercharge your business performance.</p>
<p>
Our goal is to make this transition as easy as possible with little to no impact for our customers. For frequently asked questions regarding our change to WorkWave and how it may affect you, please click “learn more” for additional info.
</p>
<a class="lightbox lightbox_learnmore" href="" onclick="setCookie()">Learn More</a><br/><a class="lightbox lightbox_dontshow" href="" onclick="setCookie()">Don't show this again</a>
</div></div>