Create modal view on jquery mobile using html - html

I am creating a mobile website using HTML5 and jquery mobile. I am currently trying to create a modal view to show images in. I have tried using shadowbox and lightbox but in both cases the modal view opens but then the page transitions to a new blank page. Here is my code:
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeAppDetailScreen.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
<!--Shadowbox-->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
//Content
<div id="viewport">
<a id="ss1" onclick="return false" href="Screenshots/ss1.png" rel="shadowbox[ScreenShot]" ><img src="Screenshots/ss1.png"></a>
<a id="ss2" onclick="return false" href="Screenshots/ss2.png" rel="shadowbox[ScreenShot]" ><img src="Screenshots/ss2.png"></a>
<a id="ss3" onclick="return false" href="Screenshots/ss3.png" rel="shadowbox[ScreenShot]" ><img src="Screenshots/ss3.png"></a>
</div>
</body>
Does anyone know how to fix this?

I hope if you can give PhotoSwipe a try. It's a 3rd party plugin that can be easily integrated with jQuery Mobile.
I'm not sure if the following plugins works for you or not?!
jQuery Mobile Pagination Plugin
Diapo slideshow

Related

Google Sheets Add-on not triggering custom events in GTM

I am trying to fire GTM custom events from Google App Script Sidebar. A simplified version of the code is given below. The same code works if I test it locally on a local server as a web page. Events are triggered. But when it is part of an add-on the events are not getting triggered. Any help would be greatly appreciated. The HTML file is give below. This is displayed as a sidebar.
Update: I have put the full working code. The same below code is firing the tags when I test is in local server. But is does not fire the tags when displayed as a sidebar in a google sheets add-on. I am suspecting that the html is displayed inside an iframe. Not sure why it is not working
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<script>
dataLayer = [];
</script>
<!-- Google Tag Manager -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" ></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLGFLD7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container main_page">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<button type="button" class="btn btn-primary" name="report" id="report" >Create Report</button>
</div>
</div>
</div>
</div>
<script>
function ProcessReport() {
dataLayer.push({'event':'run_report'});
console.log(window.dataLayer);
}
$( document ).ready(function() {
$("#report").click(ProcessReport);
});
</script>
</body>
</html>
Try
function ProcessReport() {
dataLayer.push({'event':'run_report'});
console.log(window.dataLayer);
}
$( document ).ready(function() {
$("#report").click(ProcessReport());
});

Google Sign In Button Won't Render

I'm trying to make a sign in page for my web application and I followed the steps on this website:https://developers.google.com/identity/sign-in/web/sign-in
but the google sign in button won't show up, it's just a blank screen but I see that the google icon shows up and fades so it is connecting to google.
this is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Google SignIn</title>
<!-- Bootstrap CDN: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Google Sign In Client ID -->
<meta name="google-signin-client_id" content="**MY GOOGLE CLIENT ID**">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<style>
.g-signin2{
margin-left:500px;
margin-top:200px;
}
.data{
display:none;
}
</style>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>Email Address</p>
<p id="email" class="alert alert-danger"></p>
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
</body>
</html>
The Google Sign in API works only on a running web server. You will not be able to see the Sign in button if you are directly opening the file.

Why my dropdown menu is not working in bootstrap?

Code(In head):
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<title></title>
</head>
Code(In body):
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="d" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown Menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="d">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</div>
I looked and tried in many way from stackoverflow to solve this problem.But nothing worked for me.This code is working in https://jsfiddle.net/DTcHh/10972/ but when i open it with browser it is not working.
#AlexG's answer is correct (i haven't enough reputation to comment).
The very first line in the bootstrap.js is to check for jquery
if(typeof jQuery==='undefined'){throw new Error('Bootstrap\'s JavaScript requires jQuery')}
Because you load jquery after bootstrap, it will throw an exception. So even if this doesn't solve your problem with the drop down, you still must include it first.
<script type="text/javascript" src="js/boootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
here seems to be the problem. include jquery before bootstrap
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/boootstrap.min.js"></script>
jQuery after Bootstrap
jQuery before Bootstrap
Problem solved:
1)There was a console error.(Solved by Abhishek Ghosh)
2)The jquery script should be before bootstrap(Solved by AlexG)
I tested your code and found a console error. Then i tried with below CDN'S and it worked. Use these CDN and it would work fine
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>

image not showing (angularJS web app)

I can't for the life of me figure out why my jpg image isn't rendering on my local computer. I'm writing a simple web app using AngularJS.
I have the images in an "img" folder within the same directory as the home.html file.
Could it be something wrong with the picture? I'm able to open it and it looks renders fine. I don't see any errors in the console either, just a broken image. Maybe it's the way I'm using bootstrap or angular? I'm relatively new to both.
home.html code:
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<title>FedCup 5k</title>
<!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<div class='page-header'>
<h1>FedCup 5k</h1>
<div class="row">
<div class="col-sm-12">
<img src="img/test.jpg"/>
</div>
</div>
</div>
<!--the place holder to render our view dependent on the route-->
<div class="row">
<div class="col-sm-12" data-ng-view>
</div>
</div>
</div>
<script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
<script type="text/css" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="src/app.js"></script>
<script type="text/javascript" src="src/controller.js"></script>
<script type="text/javascript" src="src/factories.js"></script>
<script type="text/javascript" src="src/filter.js"></script>
</body>
</html>
Thanks so much for your help! I'm hoping it's just something stupid I'm overlooking because I've been staring at this for so long and it looks like it should be easy.
You have to access the folder in your local directory where the images are placed
through slashes.i.e if you have folder img then you have to access it in html via
<img src="/img/test.jpg"/>
Sometimes src not work with angular. Use data-ng-src instead.

Style issues after ng-include

I am building a huge one-page site, so I wanted to keep my code clean. I decided to part it into several HTML files and include them in one main index.html. So I wrote a snippet of code in index.html and everything worked fine. However, as I tried to include this snippet from another file, my web page did not appear properly.
Here is the snippet I wrote:
<div class="hidden-sm hidden-xs" id="containerStart">
<div id="left" class="start">
<img src="../pics/svg/Logo%20links.svg" class="logoStart hidden img-responsive" id="logoLeft">
</div>
<div id="right" class="start">
<img src="../pics/svg/Logo%20rechts.svg" class="logoStart hidden img-responsive" id="logoRight">
</div>
<div id="captions">
<h3 class="hidden" id="mivalStart">Mival</h3>
<h5 class="hidden" id="mivalMotto">Innovative Vertriebskonzepte</h5>
</div>
</div>
Here is my index.html:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--Start animation css-->
<link rel="stylesheet" href="../css/start.css">
<link rel="stylesheet" href="../css/letterFx.css">
<title>Mival</title>
</head>
<body ng-app>
<!--Intro-->
<div ng-include src="'intro.html'"></div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-letterfx.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
Maybe you know any solutions for my problem?