Import external JS links in HTML - javascript

I am trying to make a Responsive Testimonial HTML File. It works on codepen (link is Here ) and is working nicely. When I transferred it on sublimetext, it doesn't seem to work. I believe it is due to the placement of my < script > codes. As we all know, the format of codepen is different from that of an actual code. Can someone tell me where I went wrong? I am confused on how to import or declare external JS links and the positioning. Thanks in advance
Here is what I made (UPDATE, I removed the main.js and saved it separately, and called it out. I believe the format is vendor first then the main.js)
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Testimonials</title>
<link rel="stylesheet" href="css/styles.css" />
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/boostrap.min.css" rel="stylesheet"/>
<link href="css/owl.carousel.min.css" rel="stylesheet"/>
<link href="css/animate.min.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.thenahid.com/wp-content/themes/twentyseventeen/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<section>
<div class="customer-feedback">
<div class="container text-center">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div>
<h2 class="section-title">What Clients Say</h2>
</div>
</div><!-- /End col -->
</div><!-- /End row -->
<div class="row">
<div class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
<div class="feedback-slider">
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/8/7310/buddyicons/24846422#N06_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Lisa Redfern</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138#N07_r.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Cassi</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="4">
4
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
<!-- slider item -->
<div class="feedback-slider-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" class="center-block img-circle" alt="Customer Feedback">
<h3 class="customer-name">Md Nahidul</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distracted by the readable its layout.</p>
<span class="light-bg customer-rating" data-rating="5">
5
<i class="fa fa-star"></i>
</span>
</div>
<!-- /slider item -->
</div><!-- /End feedback-slider -->
<!-- side thumbnail -->
<div class="feedback-slider-thumb hidden-xs">
<div class="thumb-prev">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/451270/profile/profile-80.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
5
<i class="fa fa-star"></i>
</span>
</div>
<div class="thumb-next">
<span>
<img src="//c2.staticflickr.com/2/1558/buddyicons/37689138#N07_r.jpg" alt="Customer Feedback">
</span>
<span class="light-bg customer-rating">
4
<i class="fa fa-star"></i>
</span>
</div>
</div>
<!-- /side thumbnail -->
</div><!-- /End col -->
</div><!-- /End row -->
</div><!-- /End container -->
</div><!-- /End customer-feedback -->
</section>
</body>
</html>
JAVASCRIPT main.js
jQuery(document).ready(function($) {
var feedbackSlider = jQuery('.feedback-slider');
feedbackSlider.owlCarousel({
items: 1,
nav: true,
dots: true,
autoplay: true,
loop: true,
mouseDrag: true,
touchDrag: true,
navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"],
responsive:{
// breakpoint from 767 up
767:{
nav: true,
dots: false
}
}
});
feedbackSlider.on("translate.owl.carousel", function(){
$(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity", "0");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").removeClass("animated zoomIn").css("opacity", "0");
});
feedbackSlider.on("translated.owl.carousel", function(){
$(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
$(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating").addClass("animated zoomIn").css("opacity", "1");
});
feedbackSlider.on('changed.owl.carousel', function(property) {
var current = property.item.index;
var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
$('.thumb-prev').find('img').attr('src', prevThumb);
$('.thumb-next').find('img').attr('src', nextThumb);
$('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
$('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
});
$('.thumb-next').on('click', function() {
feedbackSlider.trigger('next.owl.carousel', [300]);
return false;
});
$('.thumb-prev').on('click', function() {
feedbackSlider.trigger('prev.owl.carousel', [300]);
return false;
});
}); //end ready
Below is the OUTPUT that is showing our what I have right now. I believe it has something to do on how I declare the css and js external codes My Current Output


Edit the scr to src in this
<script type="text/javascript" scr="js/main.js"></script>

Related

CSS and Javascript aren't working inside my localhost PHP folder

Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.
My PHP code:
<?php
include('database.php');
session_start();
if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}
?>
<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Sidebar -->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="Main.html">
Eventses
</a>
</li>
<li>
<span class="glyphicon glyphicon-th-list">Main</span>
</li>
<li>
<span class="glyphicon glyphicon-user">Profile</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">Events</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">Settings</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">Messages</span>
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Main body -->
<div class="container" align="right">
<div class="col-sm-10">
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about event</p3>
</div>
</div>
Analyse</button>
</div>
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about events</p3>
</div>
</div>
Analyse</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>

As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.

Form generated from 3rd party javascript not appearing where it should

I have a wordpress site that uses 3rd party javascript to inject forms from Hubspot. The site is using Autoptimize plugin. While optimizing the site for google page insights speed test I encounter issues:
My footer should contain the form within a expanding menu but for some reason keeps generating in the body. I should mention that this only happens when adding the 3rd party script tag with async.
I have 2 different solutions written out in the snippet. All other dependencies loaded at the end.
How can I load this form into my footer and be placed where it should be?
Screen shot here.
<footer>
<div class="container-fluid">
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 subscribe text-center">
<div class="content tframe fw fh">
<div class="tcell valign-mid">
<div class="collapsible-data">
<a href="#" class="collapsible-opener">
Subscribe <span class="more">for Updates</span> <i class="fa fa-angle-up" aria-hidden="true"></i>
</a>
<div class="collapsible-content">
<div class="row" eq-height="">
<div class="col-lg-12 pull-left" eq-col="">
<div class="info">
<h3>Subscribe Today!</h3>
<!-- Start Solution 1: Prevents render blocking, but breaks layout -->
<script>
setTimeout(function(){
$.ajax({
url: '//js.hsforms.net/forms/v2.js',
dataType: 'script',
cache: true,
success: function() {
console.log("AJAX success!")
hbspt.forms.create({
portalId: '2564694',
formId: '2a257043-30bc-4888-a09e-745501e0012a'
})
}
})
},2800);
</script>
<!-- End Solution 1 -->
<!-- Start Solution 2: Works, but becomes render blocking -->
<!--<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '2564694',
formId: '2a257043-30bc-4888-a09e-745501e0012a'
});
</script>-->
<!-- End Solution 2 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6 social text-center">
<div class="content tframe fw fh">
<div class="tcell valign-mid">
<div class="container-fluid">
<div class="addthis_toolbox social">
<a href="#" class="addthis_button_facebook" title="Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<!--<a href="#" class="addthis_button_twitter" title="Twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>-->
<a href="#" class="addthis_button_email" title="Contact Us">
<i class="fa fa-envelope" aria-hidden="true"></i>
</a>
<a href="#" class="addthis_button_linkedin" title="LinkedIn">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="#" class="addthis_button_more" title="Share">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 signup">
<div class="content tframe fw fh">
<div class="tcell valign-mid">
<?php echo g2is_home_webinar_latest() ?>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Pagespeed compliant - Avoid render blocking load of JS -->
<!--<script type="text/javascript">
function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) };
loadJS('<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js');
</script>-->
<!--Pagespeed compliant - Alternate non-render blocking JS -->
<script async type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "<?php echo get_template_directory_uri(); ?>/_assets/js/all.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<?php wp_footer(); ?>
<!-- Social Share Links -->
<script type="text/javascript" async="" defer="" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-588971d14a074f13"></script>
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" async="" defer="" id="hs-script-loader" src="//js.hs-scripts.com/2564694.js"></script>
<!-- End of HubSpot Embed Code -->
</body>
</html>

wrap the code in noptimize-tags, cfr. AO's FAQ?

How to show localStorage data in header using AngularJS

Hello I am working in MEAN Stack And I want show the local-storage value into the
Header of theme.I am using the Metronic theme.
Actually Local Storage data is accessible in view file.everything working fine But
I want to view LOcalStorage data in header that is not showing.
I am using like this.
{{adminData.email}}
It is not showing email of admin in header.
But when I am using same {{adminData.email}} in content file that is
showing mail of admin.I don't know what is the issue.
here is the index.ejs file.
<!DOCTYPE html>
<style type="text/css">
.page-spinner-bar {
display: none;
}</style>
<html lang="en" ng-app="myApp">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>Ditro Infotech App</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
<link id="ng_load_plugins_before"/>
<!-- END DYMANICLY LOADED CSS FILES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE JQUERY PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.7/angular-local-storage.min.js"></script>
<script nsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/module/module.js"></script>
<script src="js/controller/controller.js"></script>
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
<!-- END APP LEVEL JQUERY SCRIPTS -->
<script type="text/javascript">
/* Init Metronic's core jquery plugins and layout scripts */
$(document).ready(function() {
Metronic.init(); // Run metronic theme
Metronic.setAssetsPath('../../assets/'); // Set the assets folder path
});
</script>
</head>
<body>
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div data-ng-include="'js/view/header.html'" class="page-header navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="container">
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div ng-include="'js/view/sidebar.html'" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN STYLE CUSTOMIZER(optional) -->
<div ng-view></div>
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN ACTUAL CONTENT -->
<div ui-view class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div data-ng-include="'js/view/footer.html'" class="page-footer">
</div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</body>
<!-- END BODY -->
</html>
index.ejs file include header footer and sidebar file.
here is my header file.
<!-- BEGIN HEADER INNER -->
<div class="page-header-inner container">
<!-- BEGIN LOGO -->
<div class="page-logo">
<a href="#/dashboard.html">
<img src="../../../assets/admin/layout2/img/logo-default.png" alt="logo" class="logo-default"/>
</a>
<div class="menu-toggler sidebar-toggler">
<!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header -->
</div>
</div>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN PAGE ACTIONS -->
<!-- DOC: Remove "hide" class to enable the page header actions -->
<div class="page-actions">
<!--<div class="btn-group hide">
<button type="button" class="btn btn-circle red-pink dropdown-toggle" data-toggle="dropdown">
<i class="icon-bar-chart"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User </a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
</a>
</li>
</ul>
</div>-->
<!--<div class="btn-group">
<button type="button" class="btn btn-circle green-haze dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-docs"></i> New Post </a>
</li>
<li>
<a href="#">
<i class="icon-tag"></i> New Comment </a>
</li>
<li>
<a href="#">
<i class="icon-share"></i> Share </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Comments <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Feedbacks <span class="badge badge-danger">2</span>
</a>
</li>
</ul>
</div>-->
</div>
<!-- END PAGE ACTIONS -->
<!-- BEGIN PAGE TOP -->
<div class="page-top">
<!-- BEGIN HEADER SEARCH BOX -->
<!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box -->
<!--<form class="search-form search-form-expanded" action="#" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." name="query">
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>-->
<!-- END HEADER SEARCH BOX -->
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="top-menu">
<ul class="nav navbar-nav pull-right">
<li class="dropdown dropdown-user">
<a href="javaScript:;" class="dropdown-toggle" dropdown-menu-hover data-toggle="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../../../assets/admin/layout2/img/avatar3_small.jpg"/>
<span class="username username-hide-on-mobile">
{{adminData.name}} q</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li>
<a href="#/login">
<i class="icon-key"></i> Log Out </a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END PAGE TOP -->
</div>
<!-- END HEADER INNER -->

try to use service/factory. a little not angular way but works fine(ES6)
export function metadataService(httpFactory) {
'ngInject';
this.setMetaTags = function (title='CONSTART',description= 'CONSTART',foto){
var bImgUrl = httpFactory.baseImgUrl;
var photo = foto? bImgUrl+foto :'assets/ico/favicon-32x32.png';
document.querySelector('meta[itemprop=name]').content = title;
document.querySelector('meta[itemprop=description]').content = description;
document.querySelector('meta[itemprop=image]').content = photo;
};
}
and inside your controller/component/directive get your localStorage data and
metadataService(/localStorage.getItem(someItem)/)

Why doesn't my form display in a modal dialog box?

I have a webpage (MVC) where I'm using jQuery to open a contact form in a modal dialog box. I was following the instructions at this location, http://amitraya.blogspot.com/2012/09/modal-dialog-form-view-using-jquery.html?showComment=1456279968693#c1669084113853730370. Instead of showing up in a modal dialog, the form shows on a separate webpage by itself. I've commented some things out, changed some versions and got many results other than the one I want. I think something may be clashing. Can someone tell me why my form won't show up in a modal dialog box like I want? Thanks for any help. The pertinent code is as follows:
_Layout.cshtml:
<!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">
<meta name="description" content="">
<meta name="author" content="Clarence Benoit">
<title>Background Sound - The Sound System Rental Company</title>
<!-- Bootstrap Core CSS -->
<link href="Content/themes/base/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="Content/backgroundsound.css" rel="stylesheet" type="text/css">
<!-- 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]-->
#*#Styles.Render("~/Content/css")*#
#*#Styles.Render("~/Content/themes/base/css")*#
#Scripts.Render("~/bundles/modernizr")
</head>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Background Sound</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Packages</li>
<li>Gallery</li>
<li>Contact</li>
<li>Credit</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Width Image Header -->
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Background Sound</h1>
<h2>Will Rock Your World</h2>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
#RenderBody()
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © 2016 Background Sound. All Rights Reserved.</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")*#
#RenderSection("scripts", required: false)
<!-- jQuery -->
<script src="#Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="#Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>").addClass("dialog").att("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({ title: $(this).attr("data-dialog-title"), close: function () { $(this).remove() }, modal: true }).load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
var senderName = $("#senderName").val();
var senderEmail = $("#senderEmail").val();
var message = $("#message").text();
$.ajax({
type: "POST",
url: "Home/SendEmail",
data: { "senderName": senderName, "senderEmail": senderEmail, "message": message },
success: function (data) {
alert("Your email was successfully sent.");
$(this).closest(".dialog").dialog("close");
},
error: function (data) {
alert("There was an error sending your email. Please try again or contact system administrator.");
$(this).closest(".dialog").dialog("close");
}
})
});
});
</script>
Index.cshtml:
(the ActionLink is what's supposed to open the modal dialog)
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-left" src="Images/contactus.gif" height="500" width="500">
<h2 class="featurette-heading">
Contact Us
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<br /><br />You can contact us by calling 816.529.9986 or<br />clicking #Html.ActionLink("here", "SendEmail", "Home", null, new {#class="openDialog", data_dialog_id="sendEmail", data_dialog_title="Contact Us"}) to send an email.
</p>
</div>
<hr class="featurette-divider">
(the below div is at the bottom of the view and where the partial view is loaded)
<div id="emailForm"></div>
SendEmail.cshtml (partial view):
#model BackgroundSoundBiz.Models.EmailModel
<form id="sendEmailForm">
<div id="sendForm">
#Html.LabelFor(m => m.senderName)<br />
#Html.TextBoxFor(m => m.senderName)
<br />
#Html.LabelFor(m => m.senderEmail)<br />
#Html.TextBoxFor(m => m.senderEmail)
<br />
#Html.LabelFor(m => m.message)<br />
#Html.TextAreaFor(m => m.message)
<br />
<input class="close" name="submit" type="submit" value="Submit" />
</div>
</form>
EmailModel.cs:
public class EmailModel
{
[Required]
[Display(Name = "Name")]
public string senderName { get; set; }
[Required]
[Display(Name = "Email")]
public string senderEmail { get; set; }
[Required]
[Display(Name = "Message")]
public string message { get; set; }
}
SendEmail method in HomeController.cs:
public ActionResult SendEmail()
{
return PartialView("SendEmail", new EmailModel());
}
Rendered page:
<!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">
<meta name="description" content="">
<meta name="author" content="Clarence Benoit">
<title>Background Sound - The Sound System Rental Company</title>
<!-- Bootstrap Core CSS -->
<link href="Content/themes/base/minified/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="Content/backgroundsound.css" rel="stylesheet" type="text/css">
<!-- 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 src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Background Sound</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
<li>Packages</li>
<li>Gallery</li>
<li>Contact</li>
<li>Credit</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Full Width Image Header -->
<header class="header-image">
<div class="headline">
<div class="container">
<h1>Background Sound</h1>
<h2>Will Rock Your World</h2>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<hr class="featurette-divider">
<!-- First Featurette -->
<div class="featurette" id="about">
<img class="featurette-image img-circle img-responsive pull-right" src="Images/aboutus.jpg" height="500" width="500">
<h2 class="featurette-heading">
About Us
<span class="text-muted"></span>
</h2>
<p class="lead">
Background Sound is a new innovative and inexpensive way to get the professional sound system you need for you events and parties at a fraction of the cost. Here's how it works!
You provide you own music by laptop, iPod, or tablet and we do the rest. We'll provide you with a high quality professional sound system, which can consist of brands such as JBL, QSC,
Electro-Voice (EV), Crown, Mackie, and Sure. Lighting and wedding uplighting is also available. We deliver, setup, and take down all equipment. We do have DJs available
if you desire. A sound technician remains at your event operating the sound system and lighting portion of you event assuring you the highest sound quality available making sure your event
is a night to remember while you DJ your party your way with your own style of music.
</p>
</div>
<hr class="featurette-divider">
<!-- Third Featurette -->
<div class="featurette" id="packages">
<img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">
<h2 class="featurette-heading">
Packages
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<span style="display:block;">Wedding - $350.00</span><br />
2 - 15" two-way speakers • 2 speaker tripod stands • 2 speaker stand decorative white skrims • 1 table (4 ft) with decorative white or black skrim cover • 1 corded mic with 25 ft cable
</p>
<p class="lead">
<span class="text-center" style="display:block;">Upgrades</span><br />
<span class="pull-left">Wireless Mic</span><span class="pull-right">$40.00</span><br />
<span class="pull-left">Party Lights</span><span class="pull-right">$75.00</span><br />
<span class="pull-left">Subs</span><span class="pull-right">$100.00</span><br />
<span class="pull-left">Dinner Lighting (Uplights)</span><span class="pull-right">$20.00/light</span><br />
<span class="pull-left">Cake Pin Spot</span><span class="pull-right">$60.00</span><br /><br />
</p>
<p class="lead">The cake pin spot is used to help show the beauty of your cake or personalize a table for the bride and groom only.</p>
</div>
<hr class="featurette-divider">
<!-- Fourth Featurette -->
<div class="featurette" id="gallery">
<img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500">
<h2 class="featurette-heading">
Gallery
<span class="text-muted"></span>
</h2>
<p class="lead">
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
</p>
</div>
<hr class="featurette-divider">
<!-- Fifth Featurette -->
<div class="featurette" id="contact">
<img class="featurette-image img-circle img-responsive pull-left" src="Images/contactus.gif" height="500" width="500">
<h2 class="featurette-heading">
Contact Us
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<br /><br />You can contact us by calling 816.529.9986 or<br />clicking <a class="openDialog" data-dialog-id="sendEmail" data-dialog-title="Contact Us" href="/Home/SendEmail">here</a> to send an email.
</p>
</div>
<hr class="featurette-divider">
<!-- Sixth Featurette -->
<div class="featurette" id="credit">
<img class="featurette-image img-circle img-responsive pull-right" src="Images/acknowledgements.gif" height="500" width="500">
<h2 class="featurette-heading">
Credits
<span class="text-muted"></span>
</h2>
<p class="lead text-center">
<br /><br />Website constructed by Clarence Benoit<br /><br />Need a website<br />personal or small business<br />call 816.898.6870.
</p>
</div>
<hr class="featurette-divider">
<div id="emailForm"></div>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © 2016 Background Sound. All Rights Reserved.</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="/Scripts/jquery.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.24.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").click(function (e) {
e.preventDefault();
$("<div></div>").addClass("dialog").att("id", $(this).attr("data-dialog-id")).appendTo("body").dialog({ title: $(this).attr("data-dialog-title"), close: function () { $(this).remove() }, modal: true }).load(this.href);
});
$(".close").click(function (e) {
e.preventDefault();
var senderName = $("#senderName").val();
var senderEmail = $("#senderEmail").val();
var message = $("#message").text();
$.ajax({
type: "POST",
url: "Home/SendEmail",
data: { "senderName": senderName, "senderEmail": senderEmail, "message": message },
success: function (data) {
alert("Your email was successfully sent.");
$(this).closest(".dialog").dialog("close");
},
error: function (data) {
alert("There was an error sending your email. Please try again or contact system administrator.");
$(this).closest(".dialog").dialog("close");
}
})
});
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"ac6dd739aa2b4e58a67eda5ec66a09bc"}
</script>
<script type="text/javascript" src="http://localhost:49245/f88ffa026ad94b73bfa9b9bbddf32f30/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>

Javascript for popup image not working

Here's the link for my site.http://vani.valse.com.my/schone_lightings/productdetail.php
The thumbnail when clicked must pop up but its not working.I've included all the files needed yet can't figure out what's missing.
I created a test page and just included the image.But it's working here.
http://vani.valse.com.my/schone_lightings/test.php
In header
<!--only for productdetail.php starts-->
<!-- Carousel -->
<script type="text/javascript" src="/lib/jcarousel/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/jcarousel/css/product/skin.css" />
<!-- ColorBox -->
<link rel="stylesheet" href="/lib/colorbox/colorbox.css" />
<script type="text/javascript" src="/lib/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
$(".thumb_button").hover(function() {
var str = '<img src=\''+$(this).attr("image-cover")+'\' class=\'cover\' />';
$("#image_box").html(str);
});
$('.thumb_button').colorbox({rel:'photos'});
if ($('.stockquantity').attr("value") == ''){
$('.stockquantity').attr("value","0");
}
});
</script>
in body
<div id="image_box">
<img class="cover" src="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9-medium.jpg" />
</div>
<div class="thumbnail_box">
<ul id="mycarousel" class="jcarousel-skin-product">
<li><a class="thumb_button" href="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9.jpg" image="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9.jpg" image-cover="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9-medium.jpg"><img src="/upload/productimage/ca05c9c1e01179087d3c9015a4097ce9-thumb.jpg" width="66" height="66" alt="" border="0" /></a></li>
</ul>
</div>
<div class="thumbnail_tip center">(Click on thumbnails to enlarge image)</div>
</div>
<div class="small-12 medium-12 large-12 columns">
<div class="desc">
Lorem ipsum dolor sit amet
</div>
</div>
<!--only for productdetail.php ends-->

I managed to fix it. Just need to remove this from footer.
<script src="js/vendor/modernizr.js"></script>

Categories