I have a modal that opens up when i click a button, the thing is that i have 2 buttons that open the same modal but with different contents, so if i click the same button when the modal is opened, it'll close. That's workin' fine, what i wanna do, and can't do, is change the content of the modal without closing it when i click the button that doesn't opened it. Can anyone help me with this? That's the code i'm using:
HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<title>EA - Need for Speed Test Page</title>
</head>
<body>
<header>
<nav class="menu-togglers is-visible">
<ul>
<li class="dropdown-toggler account" id="account"><i class="far fa-user"></i></li>
<li class="dropdown-toggler help" id="help"><i class="fas fa-question"></i></li>
<li><i class="fas fa-gamepad"></i></li>
</ul>
</nav>
<!--menu-togglers-->
<div class="dropdown-menu is-not-collapsed" id="dropdown-menu">
<img id="close-dropdown" class="dropdown-toggler" src="assets/x-lg.svg">
<div class="account-container menu-container opacity-0">
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/connectEA.svg" alt="">
<p>Sign In</p>
</a>
</div>
<!--account-item-->
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/createAccountEA.svg" alt="">
<p>Create Account</p>
</a>
</div>
<!--account-item-->
</div>
<!--account-container-->
<div class="help-container menu-container opacity-0">
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/originIcon.svg" alt="">
<p>Verify my Origin Login</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/linkAccount.svg" alt="">
<p>Link my Origin to my PSN ID</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/rescueCode.svg" alt="">
<p>How do I redeem a Code?</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/errorIcon.svg" alt="">
<p>I can't play online!</p>
</a>
</div>
<!--help-item-->
</div>
<!--account-container-->
</div>
<!--dropdown-menu-->
</header>
<!--header-->
<div style="height: 2000px;"></div>
<script src="js/hideHeader.js"></script>
<script src="js/setMenus.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EA - Need for Speed Test Page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.css" integrity="sha512-NDcw4w5Uk5nra1mdgmYYbghnm2azNRbxeI63fd3Zw72aYzFYdBGgODILLl1tHZezbC8Kep/Ep/civILr5nd1Qw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.modalDialog{
width: 90%;
position: fixed;
left: 50%;
right: 0;
margin: 0 auto;
top: 50%;
background: white;
transform: translate(-50%,-50%);
padding: 50px;
max-width: 600px;
border: 1px solid black;
color: black;
}
.modalcont{font-size:16px; color:black;}
</style>
</head>
<body>
<header>
<div class="button">
<a class="modalopen" href="javascript:void(0);" datacontent="testingone">modal open</a>
</div>
</header>
<!--header-->
<footer>
<div id="openModal" class="modalDialog" style="display:none;">
<div>
X
<div class="modalcont">testingone</div>
button one
button two
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
jQuery(document).ready(function(){
jQuery('.modalopen').on('click',function(){
var sun = jQuery(this).attr('datacontent');
jQuery('#openModal').show(500);
jQuery('#openModal .modalcont').html(''+sun+'');
//alert(sun);
});
jQuery('.btn').on('click',function(){
var sun = jQuery(this).attr('datacontent');
//alert(sun);
jQuery('#openModal .modalcont').html(sun);
//alert(sun);
});
jQuery('.close').on('click',function(){
jQuery('#openModal').hide(500);
jQuery('#openModal .modalcont').html();
});
});
</script>
</body>
</html>
Related
Is it possible after click on an IMG to go to a specific tab in bootstrap 5?
Unfortunately a href in an IMG code doesn't work in this case.
I wanna go to About Me tab after clicking on a first imgI wanna go to Projects tab after clicking on a second imgI wanna go to Contact tab after clicking on a third img
Please find my code below and on jsfiddle - https://jsfiddle.net/84zyvu0t/
<!DOCTYPE html>
<html lang="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.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item menuItems">
About Me
</li>
<li class="nav-item menuItems">
Projects
</li>
<li class="nav-item menuItems">
Contact
</li>
</ul>
</div>
<div class="tab-content">
<!-- TAB NUMBER 1 - About Me -->
<div class="tab-pane fade show active" id="aboutMe">
<p>Hi, my name is Robert</p>
</div>
<!-- TAB NUMBER 2 - Projects -->
<div class="tab-pane fade" id="projects">
<p>This is a projects tab</p>
</div>
<!-- TAB NUMBER 3 - Contact -->
<div class="tab-pane fade" id="contact">
<p>Reach out to me</p>
</div>
</div>
<img src="https://picsum.photos/id/27/200/300" alt="">
<img src="https://picsum.photos/id/28/200/300" alt="">
<img src="https://picsum.photos/id/29/200/300" alt="">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
</body>
</html>
I found a solution from this link (Jacob Goh's solution)
How to change active bootstrap tab with javascript
you may also use .tab('show') for more flexibility
https://codepen.io/jacobgoh101/pen/ALELNr
go to menu
3 javascript:
function menu3(){ $('[href="#menu3"]').tab('show'); } Bootstrap
documentation: https://getbootstrap.com/javascript/#tabs
**BUT** I had to turn my imgs to buttons (so to speak) so I'm not even sure if that'll work in the future and if there are any consequences using them this way...
SOLUTION
function aboutMeTab() {
$('[href="#aboutMe"]').tab('show');
}
function projectsTab() {
$('[href="#projects"]').tab('show');
}
function contactTab() {
$('[href="#contact"]').tab('show');
}
button {
background-color: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="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.0">
<title>Document</title>
</head>
<body>
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item menuItems">
About Me
</li>
<li class="nav-item menuItems">
Projects
</li>
<li class="nav-item menuItems">
Contact
</li>
</ul>
</div>
<div class="tab-content">
<!-- TAB NUMBER 1 - About Me -->
<div class="tab-pane fade show active" id="aboutMe">
<p>Hi, my name is Robert</p>
</div>
<!-- TAB NUMBER 2 - Projects -->
<div class="tab-pane fade" id="projects">
<p>This is a projects tab</p>
</div>
<!-- TAB NUMBER 3 - Contact -->
<div class="tab-pane fade" id="contact">
<p>Reach out to me</p>
</div>
</div>
<a href="#aboutMe">
<button class="btn btn-primary przycisk" onclick="aboutMeTab()">
<img src="https://picsum.photos/id/27/200/300" alt="">
</button>
</a>
<a href="#projects">
<button class="btn btn-primary przycisk" onclick="projectsTab()">
<img src="https://picsum.photos/id/28/200/300" alt="">
</button>
</a>
<a href="#contact">
<button class="btn btn-primary przycisk" onclick="contactTab()">
<img src="https://picsum.photos/id/29/200/300" alt="">
</button>
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
</body>
</html>
Below is the code of the first picture (the green one). I want to modify the boxes to look like the boxes in the picture 2 (the one with the red in the middle).
Should I add another class to the img or `id? How can I modify the boxes in first pic so they will look like the ones in the second pic?
What kind of code I am supposed to write in CSS file to change the look of them?
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel-item{
position: absolute;
background:green;
}
img {
width: 150px;
position: relative;
border-radius: 10px;
}
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static 'functionality/imageslider.js' %}"></script>
<link rel="stylesheet" type='text/css' href="{% static 'blog/imageslider.css' %}">
</head>
<body>
<div class="carousel">
<div class="carousel-item" id="one"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="">
</div>
<div class="carousel-item" id="two"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="" />
</div>
<div class="carousel-item" id="three"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt=""/>
</div>
<div class="carousel-item" id="four"
><img
src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg"
alt=""/>
</div>
</div>
</body>
</html>
This is the layout that I need to achieve. Full-screen carousel with footer and navigational bar:
I am almost done with this one but I can't find a tricky way to achieve it. Because there's the overflow. Here's my current output:
and
Here's my html code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Cyclehouse MNL</title>
<meta name="description" content="">
<meta name="msapplication-tap-highlight" content="yes" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Google Web Font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lekton:400,700,400italic' rel='stylesheet' type='text/css'>
<!-- Bootstrap 3-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- OWL Carousel -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<!-- Slider -->
<link rel="stylesheet" href="css/jquery.kenburnsy.css">
<!-- Animate -->
<link rel="stylesheet" href="css/animate.css">
<!-- Loader Style -->
<link rel="stylesheet" href="css/loader-2.css">
<!-- Costum Styles -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- Favicon -->
<link rel="icon" type="image/ico" href="favicon.ico">
<!-- Full Height -->
<style>
html,
body {
height: 100%;
}
</style>
</head>
<body>
<!-- Preloader -->
<div class="cover"></div>
<!-- Navigation section -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<img src="img/cyclehouselogo.png" alt="Logo" style="width:300px;height: 50px;margin-top:10px;"/>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>INSTRUCTOR</li>
<li>CYCLE WITH US</li>
<li>LOGIN</li>
<li>RIDE NOW</li>
</ul>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-control left inactive"></div>
<div class="slider-control right"></div>
<ul class="slider-pagi"></ul>
<div class="slider">
<div class="slide slide-0 active">
<div class="slide__bg" style="background-image: url('img/full-slider/image_7.jpg');background-position: top; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 1 1" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<br>
<Br>
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
<div class="slide slide-1">
<div class="slide__bg" style="background-image: url('img/full-slider/image_5.jpg');background-position: center; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="slide__bg" style="background-image: url('img/full-slider/image_9.jpg');background-position: center; background-size:cover;"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Dont let your dreams, be dreams.</h2>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row" style="float:right;">
<a class="footer-link" onClick="window.location.href='https://www.eliteboxing.com.ph'"><b>ELITE BOXING ·</b></a>
<b>PARTNER WITH US ·</b>
<b>TERMS AND CONDITION ·</b>
<b>FAQS ·</b>
<b>CONTACT US</b>
</div>
</div>
</div>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/pace.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/ef-slider.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
If you notice my css code:
<!-- Full Height -->
<style>
html,
body {
height: 100%;
}
</style>
The height is set 100% but when I try to put overflow:hidden; the footer will be no longer view able. Is there any tricky way to do this? Thanks.
These days I use height:100vh; for any element that needed 100% height rather than putting it in HTML and Body tag.
For the overflow I would use
.slider-container{
height: calc(100vh - HEADERpx - FOOTERpx;
}
I am trying to get the FAB from materializeCSS to work but nothing I try is working. Heres my code:
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DevWright Education</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body style="background-color: #eceff1;">
<de-root>
<img src="assets/images/ripple.gif" alt="">
</de-root>
</body>
</html>
new-post-card.component.html:
<div class="card">
<div class="card-content">
<span class="card-title">Post something!</span>
<!-- Fixed Action Button -->
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
<li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
<li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
</ul>
</div>
</div>
</div>
I've tried using angular2-materialize but i cant find the right component to work with it.
In my case it was because the position on the FAB was fixed, so changing
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
to
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px; position:static;">
fixed the problem.
I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>
I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading
Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks