Image Picker Html - javascript

I tried to create a website to show 6 images and a user can mark every image
he likes. Just like when you register on Netflix or the Captcha from Google.
I am very new to Web development and so I don't know what is the best way to do this. I created the website using Bootstrap but now I have trouble to implement the code to make the images checkable.
I found a very interesting plugin but it didn't work. But I am not sure if I implemented the plugin right. Link: http://jcuenod.github.io/imgCheckbox/
If I copy the code the images show up on the page but I cannot click them.
The code below is not my full website it's only a small page to test this.
<head>
<script type="text/javascript" src='imgCheckbox/jquery.imgcheckbox.js'>
<body>
<!-- Main -->
<main role="main" class="container-fluid">
<div class="container-fluid" style="margin-top:50px;">
<section id="basicusage" class="wrapper special">
<header class="major">
<h2>Basic Usage</h2>
</header>
<form class="exampleone">
<p>
<img src="images/1.jpg" class="img-fluid" alt="">
<span class="spacer"></span>
<img src="images/2.jpg" class="img-fluid" alt="">
<span class="spacer"></span>
<img src="images/3.jpg" class="img-fluid" alt="">
</p>
<input type="submit" />
</form>
</section>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>


Since jquery.imgcheckbox is a jquery plugin, you need to include jquery.
This is done by linking to https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js for example.
After jquery and the plugin have loaded successfully, you can add the checkbox to any image using $("img").imgCheckbox();
Here's a working example:
$(document).ready(function() {
$("img").imgCheckbox();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jcuenod.github.io/imgCheckbox/assets/js/jquery.imgcheckbox.js"></script>
<div class="container-fluid" style="margin-top:50px;">
<section id="basicusage" class="wrapper special">
<header class="major">
<h2>Basic Usage</h2>
</header>
<form class="exampleone">
<p>
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
<span class="spacer"></span>
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
<span class="spacer"></span>
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
</p>
<input type="submit" />
</form>
</section>
</div>
Please note, the above will just work here. Copy & paste won't work.
If you want something that can be saved as a .html file, take this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://jcuenod.github.io/imgCheckbox/assets/js/jquery.imgcheckbox.js"></script>
<script type="text/javascript">
$( document ).ready(function()
{
$("img").imgCheckbox();
});
</script>
</head>
<div class="container-fluid" style="margin-top:50px;">
<section id="basicusage" class="wrapper special">
<header class="major">
<h2>Basic Usage</h2>
</header>
<form class="exampleone">
<p>
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
<span class="spacer"></span>
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
<span class="spacer"></span>
<img src="https://picsum.photos/200/300" class="img-fluid" alt="">
</p>
<input type="submit" />
</form>
</section>
</div>
</html>

Related

mdbootstrap lightbox not working

I am using mdbootstrap lightbox code to open up lightbox on click.
Code is very simple but for some reason it is not working.
Here is my code.
I am using CDN links/urls so anyone can test it.
<!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>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox no-margin">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/js/mdb.min.js"></script>
<!-- MDB core JavaScript -->
<script>
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>
</body>
</html>
When I click on the image it do not show the light box as need it.
I am not sure what is going wrong.Anybody like to check.
Thanks in advance.

Lightbox is a premium component of MDBootstrap. It means you cannot use it with MDB Free

Yes its a paid version and after purchasing it from mdbootstrap you will get required files/folders.
Updated code :
On the other hand
I have done some research on it and I am able to find the possible solution to make it work.
It is bit tricky.
mdb-addons/mdb-lightbox-ui.html
Path must be correct and exact.
For testing purpose : You can download it from here
https://github.com/rushijeware/testGitHub/blob/master/mproj10/src/main/webapp/assets/mdb-addons/mdb-lightbox-ui.html
<!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>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
<link rel='stylesheet' id='compiled.css-css' href='https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/compiled-4.5.7.min.css?ver=4.5.7' type='text/css' media='all' />
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<div class="mdb-lightbox no-margin">
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg" class="img-fluid">
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" class="img-fluid" />
</a>
</figure>
<figure class="col-md-4">
<a href="https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg" data-size="1600x1067">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg" class="img-fluid" />
</a>
</figure>
</div>
</div>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.js"></script>
<script>
// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
});
</script>
</body>
</html>
Follow the above page structure and add required JS/CSS to so it will start working easily.
I hope it help someone !

Mobile.changepage in jQuery not working(white screen)

i'm using html css and js for building my phonegap project on eclipse and i included my jquery and jquery mobile libraries to use mobile.changepage function in my js file but it keeps giving me white screen then returns to the same page (no change occurs)
here are my files:
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
document.getElementById("Golds").addEventListener('touchstart', function(){
alert("omar");
$.mobile.changePage('login.html');
});
document.getElementById("Titans").addEventListener('touchstart', function(){
$.mobile.changePage("login.html");
});
//End Login Form//
<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\golds-gym-logo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<script src="js/index.js"></script>
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\golds-gym-logo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<!--<script src="js/index.js"></script>--> <!-- Commented this Line in your code -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script> <!-- Added this line -->
</body>
</html>
And Javascript could also be
$(document).on('touchmove', function(e) {
e.preventDefault();
}, false);
$("#Golds").on('touchstart', function(){
alert("omar");
$.mobile.changePage('login.html');
});
$("#Titans").on('touchstart', function(){
$.mobile.changePage("login.html");
});

jQuery hide() or fadeOut() not working

I'm building a site using a template and I think something is interfering with .hide() or .fadeIn(). When I click the image here.
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
nothing happens. It won't disappear or do anything. Also I know menu.js is being detected because I can document.write() and it works and also console.log works in F12 developer tools
Menu.js
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
The image I'm trying to click is under
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="icon" href="images/favicon.ico">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/form.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/forms.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script src="js/tms-0.4.1.js"></script>
<script type="text/javascript" src="/js/jssor.slider.mini.js"></script>
<script>
$(document).ready(function(){
$('.slider_wrapper')._TMS({
show:0,
pauseOnHover:false,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:800,
preset:'fade',
pagination:true,//'.pagination',true,'<ul></ul>'
pagNums:false,
slideshow:8000,
numStatus:false,
banners: 'fade',
waitBannerAnimation:false,
progressBar:false
});
});
$(document).ready(function(){
!function(){
var map=[]
,names=[]
,win=$(window)
,header=$('header')
,currClass
$('.content').each(function(n){
map[n]=this.offsetTop
names[n]=$(this).attr('id')
})
win
.on('scroll',function(){
var i=0
while(map[i++]<=win.scrollTop());
if(currClass!==names[i-2])
currClass=names[i-2]
header.removeAttr("class").addClass(names[i-2])
})
}(); });
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
$(document).ready(function(){
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<link rel="stylesheet" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body class="">
<!--==============================header=================================-->
<header class="page1">
<div class="container_12">
<div class="grid_12">
<div id="logoImage1"><img src="SleepingMoonImages/sleepingmoonwhite.png" alt=""/></div>
<div id="logoImage"><img src="images/logo.png" alt=""/> </div>
<!--<h1><img src="images/logo.png" alt="Gerald Harris attorney at law" height="50" width="1600"/></h1>-->
<div class="menu_block">
<nav class="">
<ul class="sf-menu">
<li class="current men"><a onClick="goToByScroll('page1'); return false;" href="#">Home </a> <strong class="hover"></strong></li>
<li class="men1"><a onClick="goToByScroll('page2'); return false;" href="#">Menu</a><strong class="hover"></strong></li>
<li class=" men2"><a onClick="goToByScroll('page3'); return false;" href="#">Events</a> <strong class="hover"></strong></li>
<li class=" men3"><a onClick="goToByScroll('page4'); return false;" href="#">Hours & Location</a> <strong class="hover"></strong></li>
<!--<li class=" men4"><a onClick="goToByScroll('page5'); return false;" href="#">Contact Us</a> <strong class="hover"></strong></li>-->
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!--=======content================================-->
<div id="page1" class="content">
<div class="ic">More Website Templates # TemplateMonster.com - September 9, 2013!</div>
<div class="container_12">
<div class="grid_12">
<div style="min-height: 50px;">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="display: none; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
...
</div>
<!-- Jssor Slider End -->
</div>
<div class="slider_wrapper">
<ul class="items">
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Let Us Show You the Way to Success</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Interminable Energy for Your Project</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>We know how to solve your problems!</h2>
</div>
</li>
<li>
<img src="images/spacer.gif" alt="">
<div class="caption banner">
<h2>Make your business a booming one!</h2>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="page2" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Our Menu</h3>
</div>
</div>
</div>
<div id="menuCover">
<img src="SleepingMoonImages/sleepingmoonmenulogo.png" alt=""/>
</div>
</div>
<div id="page3" class="content">
<div class="container_12">
<div class="grid_12">
<div class="slogan">
<h3>Upcoming Events</h3>
<div class="text1">
Events Information Text TBA
</div>
</div>
</div>
</div>
</div>
<div id="page4" class="content">
<div class="container_12">
<div class="grid_12">
<h3>Hours & Location</h3>
</div>
<div class="companies">
<div class="clear"></div>
</div>
</div>
</div>
<!--==============================footer=================================-->
<footer>
<div class="container_12">
<div class="grid_12">
<div class="copy">
</div>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>

You need to put your JS code in a Document Ready function because it is executing before the page loads.
The solution:
http://jsfiddle.net/m2sv4t7q/
$("document").ready(function {
$('#menuCover').click(function () {
$('#menuCover').fadeOut();
});
});
Adding that function allows the full html of the page to load before executing your javascript.

Why is my JQuery function not being called inside bootstrap html template

I have just recently started developing websites and facing some issues. I am trying to include a jquery plugin into my html which is a thumbnail carousel bar. My issue is that the jq function is not being called. I tried using other plugins but facing the same issue.
Here is my code. thanks
<!DOCTYPE html>
<html>
<head>
<script src="/media/js/jquery-ui.min.js"></script>
<script src="/media/js/css3-mediaqueries.js"></script>
<script src="/media/js/fwslider.js"></script>
<script type="text/javascript" src="/media/js/jquery1.min.js"></script>
<script type="text/javascript"> // this junction is working
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
<script src="/media/js/jquery.easydropdown.js"></script> // this junction is working
<script type="text/javascript" src="/media/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
hoverEffect: function () {
// code on animation which is working
}
});
</script>
</head>
<body>
<!-- header-section-starts -->
<div class="header">
<div class="top-header" ><!--to work on style="position:fixed; width:100%; top: 0px; z- index:0;"-->
<div class="container">
<!-- navbar code -->
<script><!--script-nav-->
$("span.menu").click(function(){
$(".top-menu ul").slideToggle("slow" , function(){
});
});
</script>
</div>
</div>
<div id="fwslider">
<div class="slider_container">
<div class="slide">
<img src="/media/images/banner.jpg" class="img-responsive" alt=""/>
</div>
<div class="slide" id="Home">
<img src="/media/images/banner1.jpg" class="img-responsive" alt=""/>
</div>
</div>
<div class="timers"></div>
<div class="slidePrev"><span></span></div>
<div class="slideNext"><span></span></div>
</div>
</div>
<!-- header-section-ends -->
<!-- content-section-starts -->
<div class="content">
<div class="container">
<div class="about-section-left-grid">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="/media/images/tiger1.jpg" class="img-responsive" alt="" />
</li>
<li>
<img src="/media/images/pic2.jpg" class="img-responsive" alt="" />
</li>
</ul>
</div>
</section>
<script defer src="/media/js/jquery.flexslider.js"></script>
<script type="text/javascript"><!-- this works -->
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</div>
</div>
<!-- here my div block for thumbnail starts------------------------------------------------ -->
<div class="container-fluid" style="padding:0;">
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
<!-- Wrapper for slides -->
<div class="controls">
<ul class="nav">
<li data-target="#custom_carousel" data-slide-to="0" class="active"><small>INDIVIDUAL LESSONS</small></li>
<li data-target="#custom_carousel" data-slide-to="1"><small>PLAYER DEVELOPMENT PROGRAM</small></li>
</ul>
</div>
<script><!--This fuction is not being called. its taken from a jq plugin for thumbnail carousel -->
$(document).ready(function(){
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
</script>
<div class="carousel-inner">
<div class="item active">
<div class="container-fluid" style="background-color:#282B30;">
<div class="row" >
<div class="col-md-12">
<article style="position: relative; width: 100%; opacity: 1;">
<div class="col-md-4 clients-image">
<img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-8 clients-text">
<p>claritatem</p>
</div>
</article>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid" style="background-color:#282B30;">
<div class="row" >
<div class="col-md-12">
<article style="position: relative; width: 100%; opacity: 1;">
<div class="col-md-4 clients-image">
<img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-8 clients-text">
<p>claritatem</p>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div><!-- End Carousel Inner -->
</div><!-- End Carousel -->
</div><!-- End content -->
</body>
</html>

Code Edit to make random image appear in Boostrap Theme

I need a simple thing, but I'm a new programmer and if someone could help it would be great! Here's the thing:
I'm giving you the full code below and this is the page. As you can see there are 8 images inside. I need to make them appear in a random order using JavaScript. I can't make this happen, because when I put the script inside body into the Bootstrap component, it doesn't get the CSS style of Bootstrap. How can I fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>3 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/3-col-portfolio.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var gallery = new Array();
gallery[0] = new Array(new Array ("immagine_prova5.png", "http://www.altervista.org"),
new Array ("immagine_prova6.png", "http://www.ii.org"), new Array
("immagine_prova5.png", "http://www.google.it"), new Array ("module_04.jpg", "#04"));
gallery[1] = new Array(new Array ("module_05.jpg", "#0"), new Array ("module_06.jpg",
"#06"), new Array ("module_07.jpg", "#07"), new Array ("module_08.jpg", "#08"));
function pickImageFrom(whichGallery)
{
var idx = Math.floor(Math.random() * gallery[whichGallery].length);
document.write('<a href="' + gallery[whichGallery][idx][1] + '"><img src="img/' +
gallery[whichGallery][idx][0] + '"></a>');
}
</script>
</head>
<body>
<script language="javascript">pickImageFrom(1);</script><br /><br />
<p> </p>
<!-- Navigation --><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container"><!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"><button class="navbar-toggle" type="button" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-
only">Toggle navigation</span> </button> <a class="navbar-brand" href="#">Start
Bootstrap</a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse --></div>
<!-- /.container --></nav><!-- Page Content -->
<div class="container"><!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading <small>Secondary Text</small></h1>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="">
</a>
</div>
</div>
<!-- /.row --> <!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"/><script
async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></a>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2393383294332670"
data-ad-slot="4230127403"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> </div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
<div class="col-md-4 portfolio-item"><a href="#"> <img class="img-responsive"
src="http://laprovadelnove.altervista.org/img/immagine_prova5.png" alt="" /> </a>
</div>
</div>
<!-- /.row --><hr /><!-- Footer --><footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row --></footer></div>
<!-- /.container -->
<p> </p>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

The images you are adding via js are missing the css-class for your style to work.
Add class="img-responsive" to the images in your js code.
document.write('<a href="' + gallery[whichGallery][idx][1] + '">
<img class="img-responsive" src="img/' + gallery[whichGallery][idx][0] + '"></a>');

Categories