Aloha,
I am trying to a make a Chrome App that replaces the Chrome Dev Editor. Here is what I have currently:
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('backstage.html', {
'outerBounds': {
'width': 1036,
'height': 583
}
});
});
backstage.html
<!DOCTYPE html>
<html>
<head>
<title>Celestia Pro</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "material.css">
<link rel = "stylesheet" href = "material.min.css">
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always shown,
even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="fixed-header-drawer-exp">
</div>
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<style>
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('welcome-card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
div.start-cards {
padding-top: 25px;
padding-left: 50px;
padding-right: 50px;
}
</style>
<div class="start-cards" align = center>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome to Celestia Pro</h2>
</div>
<div class="mdl-card__supporting-text">
Celestia Pro is a new integrated development environment (IDE) that allows developers to create Chrome apps quickly and efficiently. We're still in our baby stages, but we hope this tool works for you.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="runWizard()">
Get Started
</a>
<script>
</script>
</div>
</button>
</div>
</div>
</div>
</main>
</div>
</div>
<script src = "./material.min.js">
<script src = "./material.js">
</body>
</html>
This seems all fine and dandy until I try to make the Get Started button I mention actually open something. I want it to open a page called 'backstage2.html', but no matter what combination I try, it doesn't seem to work. Here is what I have tried.
The <a href=""> method
Using the chrome.app.window.current and/or chrome.app.window.create script by adding a script to the button ("runWizard()")
None of these seem to work. I want to be able to open backstage2.html in the same Chrome app windows! How can I do this, if it is even possible? Any help is extremely appreciated.
You may want to use web components and import the file in your main file. Then you can use it as regular web component.
Other option is to send the request to the background page where you can hold a reference to opened window. This reference has contentWindow property which is a JavaScript's window object. You can use it to replace the content of man window (after you read new file data using e.g. fetch).
You may use webview into backstage.html (or in a new window).
Could be...
backstage.html:
<a id="wizard" class="···">Get Started</a>
<!-- onclick doesn't work by CSP (see note bellow) ··· -->
<webview></webview>
<!-- ··· -->
<script src="./main.js"></script>
main.js:
onload = function {
// ···
document.querySelector('#wizard').addEventListener('click', runWizard);
// ···
};
// ···
function runWizard() {
// ···
document.querySelector('webview').src = 'backstage2.html';
// ···
};
CSP -Content Security Policy-, note:
"You can’t use inline scripting..."
#abarisone: Thanks!
Use href ="your html file" target = "_self"
Related
I think It's better that I explain like this:
There are 6 small images on the page next to each other
user clicks on one of them
all of the 5 other images (except for the image that the user clicked) will have an opacity of 0.7
A large version of the image (the image that the user has been selected) will show. ( I have an img tag and the image src will replace the src of the tag )
Can you tell me how can I do that? I prefer using JavaScript and Angular JS, But if you need it, there's no problem if you use JQuery too. sorry for bad English. Thank you
Update: some user asked me what I tried... This is my code and I know It will not work... that's why I'm asking this from you...
<!DOCTYPE html>
<html lang="fa-IR" data-ng-app="projects" data-ng-controller="projects_controller">
<!-- Website design by Mohsen_Nirouzad -->
<head>
<!-- Adding meta information -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mohsen Nirouzad - http://AproZ.ir">
<!-- defining stylesheets DO NOT delete the bellow codes if you don't have enough knowledge of web design -->
<!-- I used w3data.min.js for javascript templating engine so you've to change the bellow information in script tag -->
<meta name="application-name" content="{{application_name}}">
<meta name="description" content="{{description}}">
<meta name="keywords" content="{{keywords}}">
<meta name="publisher" content="{{googleplus_url}}">
<meta charset="UTF-8">
<title>{{page_title}}</title>
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/w3rtl.min.css">
<script src="assets/js/angular.min.js"></script>
</head>
<body>
<div data-ng-include="'variables/sidenav.html'"></div>
<div style="margin-right:25%" class="w3-row-padding">
<div class="w3-col s6">
<div data-ng-include="'variables/logo1.html'"></div>
<div class="w3-row-padding">
<div class="w3-col">
<div class="w3-col s6">
<img src="{{img1}}" alt="{{img1_alt}}" title="{{img1_title}}"><br>
<img src="{{img2}}" alt="{{img2_alt}}" title="{{img2_title}}"><br>
<img src="{{img3}}" alt="{{img3_alt}}" title="{{img3_title}}">
</div>
<div class="w3-col s6">
<img src="{{img4}}" alt="{{img4_alt}}" title="{{img4_title}}"><br>
<img src="{{img5}}" alt="{{img5_alt}}" title="{{img5_title}}"><br>
<img src="{{img6}}" alt="{{img6_alt}}" title="{{img6_title}}">
</div>
</div>
</div>
<div>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
<a href="javascript:void(0)" hreflang="fa-IR">
<i class="fa fa-square-o"></i>
</a>
</div>
</div>
<div class="w3-col s6">
</div>
</div>
<div data-ng-include="'variables/footer.html'"></div>
<script>
var application = angular.module('projects',[]);
application.controller('projects_controller',function($scope){
$scope.description='Some Description',
$scope.keywords='key1,key2,key3',
$scope.application_name='Sarabon',
$scope.googleplus_url='#',
$scope.page_title='پروژه ها'
});
</script>
</body>
</html>
Use ng-click to set a scope variable like selectedImage which can be used in ng-class and ng-src for big image
// small image
<img ng-src="{{img1}}"
alt="{{img1_alt}}"
title="{{img1_title}}"
ng-click="selectImage(img1)"
ng-class="{'low-opacity-class' : selectedImage && selectedImage != img1}}"
>
// big image
<img ng-if="selectedImage" ng-src="selectedImage ">
In controller:
$scope.selectedImage = null;
$scope.selectImage=function(img){
$scope.selectedImage = img;
}
One solution is to create a big hidden div that takes the whole screen and create an img tag in it without src attribute. in "onClick" event (onClick is for js. I don't know how angular handles clicks!), set that div visible (using css "display property") and set image's src to what you want.
css for the fullscreen div can be like this:
.fullscreen{
display:none;
width:100%;
height:100%;
background-color: black;
opacity: 0.8;
position: absolute;
left:0;
top:0
}
<div class = "fullscreen">
<img src="#"/>
</div>
then you just need to add a few code lines to change display property of the div and change src attribute of img to your desired one.
So, I am working angular project using yeoman angular-generator. I have a.png. I want this image to be the background for login page only. after I click the submit button then it will redirect to #/about.html and using body class as fullscreen background style. How can I do that?
Here’s my css:
body {
padding-top: 50px;
background-color: #EEF2F5;
font-family: 'Montserrat', sans-serif;
}
body2,
.body2 {
background: url(powercube-09.png);
background-repeat: no-repeat;
font-family: 'Montserrat', sans-serif;
}
Here’s my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/dashboard.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<!-- endbuild -->
</head>
<body ng-app="loginApp" class="body2">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ng-view=“"></div>
Here’s my view/main.html:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><br><br><br><br><br><br><br>
<div class="widget2 widget_tally_box">
<div class="x_panel" style="background:#edf1f4;">
<div class="x_content"><br>
<center>
<br><br>
<div class="col-md-12 form-group has-feedback">
<input type="text" class="form-control has-feedback-left" id="inputSuccess2" placeholder="Username">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-12 form-group has-feedback">
<input type="password" class="form-control has-feedback-left"
id="inputSuccess2" placeholder="Password">
<span class="fa fa-lock form-control-feedback left" aria-hidden="true"></span>
</div>
<div class="col-md-12">
<a ng-href="#/about"><button type="submit" class="btn2 btn-success3"><h15>SIGN IN</h15></button></a><br>
</div>
<div class="col-md-12 form-group has-feedback"> <br/>
<h32><strong>Forgot your password?</strong></h32>
<div class="divider"></div>
<h32>Not on PowerCube? <strong>Get started here.</strong></h32>
</div>
</center>
</div>
</div>
</div>
</div>
<div class="col-md-4"></div>
</div>
Here’s my view/about.html:
<p>This is the about view.</p>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
Add css at the end of view/main.html.
<style>
body {
padding-top: 50px;
background-color: #EEF2F5;
font-family: 'Montserrat', sans-serif;
}
body2,
.body2 {
background: url(powercube-09.png);
background-repeat: no-repeat;
font-family: 'Montserrat', sans-serif;
}
</style>
This style will effect to view/main.html.
Well first you would want to correct your css. 'body2' isn't a tag.
I'm not entirely sure where you want that 'body2' css class to appear, but deciding what class to apply based on the route you are on (this is pb what you want to do) can be done with controller logic:
main.controller('MainCtrl', function($scope, $location) {
$scope.getClass = function(path) {
if ($location.path().substr(0, path.length) == path) {
return "active";
} else {
return "";
}
}
});
Html code :
<ul class="nav nav-pills">
<li ng-class="getClass('/main')">Phone List
</li>
<li ng-class="getClass('/module1')">Phone details
</li>
<li ng-class="">Module 2
</li>
</ul>
Here is the wrking plunker code
http://plnkr.co/edit/16iOyo6dz5RBNI91AD28?p=preview
Do it with ng-style (or ng-class), add a controller to check when you are in login page or not and use a scope variable to change the style, example:
<div class="row" ng-controller="MainController>
<div class="col-md-4"></div>
<div class="col-md-4"><br><br><br><br><br><br><br>
<div class="widget2 widget_tally_box">
<div class="x_panel" ng-style="loginBackground">
MainController:
$scope.loginBackground = null;
If (islogin) {
$scope.loginBackground = "background:#edf1f4;"
}
Use the following css to set background image to the largest div of the routed homepage. It might be easier to simply include it in the HTML rather than separating it. Once other pages are loaded, the background-image will return to the default.
#bigDiv {
background-image: url("paper.gif");
background-color: #cccccc;
}
I encounter this issue yesterday and turn out with this solution, not so smart but it's working.
+ Assign each page with custom directive: changebg
+ Name the body in index.html with a id (#example)
+ Now hook up angular body and change background style.
angular.module('app').directive('changebg',function(){
return{
restrict:'C',
controller:'changebgctrl'
}
}).controller('changebgctrl',changebgctrl);
changebgctrl.$inject =['$location','$scope'];
function changebgctrl($location,$scope){
angular.element("#example").removeClass(); // remove any class exist
angular.element("#example").addClass("whitebody");
}
You can give directive a data if you want to use this directive multiple time across pages, or try modify .css() if you don't want .addClass()
I am working mvc-5 and using bootstrap and all my links are in _Layout.cshtml now i have a drop down tabs like this http://prntscr.com/76jfba (using bootstrap, It is obtained on VStudio project launch) now in my
_Layout.cshtml I have renderbody() which renders all my UI .
What I want to do
On clicking the tab "Real Time" I get a dropdown list which on futher click to "Tabular" must open replace the current view just below the tabs to a new view .
How I tried to do this
(1) In home controller I do this :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace testLayt.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult tabularshared()
{
return View();
}
}
}
(2) Then I create view and in that view I add Layout path like this :
#{
ViewBag.Title = "shekharTabularshared";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabularshared</h2>
As a result I have all the tabs but they are not aligned properly. It now shows the view like this: http://prntscr.com/76jiag
I feel like I dont have access to bootstrap here or I am doing anything wrong ?
Could some one please give guidance such that I can have tabular.cshtml view just below the tab in the first link (this tab will be common to all the views obtained)
EDIT: _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<!--starts here-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers-->
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<!--ends here-->
</head>
<body>
<div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-custom navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<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" #Html.ActionLink("Vision Vertex", "Index", "Home") />
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Real Time
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<!--onclick="tabularFunction()" -->
#*<a tabindex="-1" href="~/Views/Home/BackgroundViews/tabular.cshtml">Tabular</a>*#
#Html.ActionLink("Tabular", "tabularshared", "Home")
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
and Index.cshtml is:
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>shekhar Index</h2>
Further i noticed that on clicking at "Tabular" when i do "Inspect elements" i do not have <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> it's surprising for and i am stuck here since 3 last days. Could someone please help me?
Here is my full project i really appreciate if you could please help me coming out of this problem https://www.dropbox.com/sh/autm3mkqfdu0aup/AADfAeUSlvcDt7PTX8G5Qz9La?dl=0
It makes no difference on how you render your UI.
Make sure there are no errors in your developer console (you might wrongly
configure your bundles for bootstrap scripts).
Left only one reference to bootstrap CSS:
href="~/Content/bootstrap.min.css"
Inspect in developer console that all scripts&styles are actually loaded to the page.
If nothing wrong but your code still not works - add a full screenshot of your web-page in browser and let me know in comments.
You have lost '~' symbols in your bootsrap CSS links.
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
function del_cookie(name) {
document.cookie = name + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="Spanish Chat, Child Abuse Chat, Child Abuse Support, Child Abuse Discussion, Suvivor, chat, discussion, support, domestic violence, violencia domestica, abuso infantil, abuso de niño">
<meta name="description" content="Moderated chat rooms for victims and survivors of child abuse and domestic violence.">
<title>Yes ICAN: International Child Advocacy Network</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- <script type="text/javascript">
alert("SAFETY ALERT: If you are in danger, please use a safer computer, or call 911, your local hotline, or the U.S. National Domestic Violence Hotline at 1-800-799-7233 and TTY 1-800-787-3224. See more technology safety tips online.")
</script>-->
</head>
<body onLoad="initialize();">
<div id="wrapper">
<!--Main Navigation Bar-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.html"><img alt="site logo" id="navlogo" src="img/logo_short_sm.png"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tooltip" title="Home page" target="_blank" href="index.html">Home</a></li>
<li><a data-toggle="tooltip" title="Group Facilitated Chat Room" href="gethelp.html">Get Help</a></li>
<li><a data-toggle="tooltip" title="Message Board Community" href="community-rules.html">Community Forums</a></li>
<li><a data-toggle="tooltip" title="Learn More About Abuse" href="aboutabuse.html">About Abuse</a></li>
<li><a data-toggle="tooltip" title="Learn More About YesICAN" href="about-us.html">About Us</a></li>
<li><a data-toggle="tooltip" title="Opportunities to volunteer, donate, and get involved!" href="get-involved.html">Get Involved</a></li>
</ul>
<!--Right side of navigation bar-->
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn btn-lg btn-danger donate-nav"><a target="_blank" href="https://donatenow.networkforgood.org/yesican?code=Homepage">Donate <span class="glyphicon glyphicon-heart" aria-hidden="true"></span></a></div>
</li>
</ul>
</div>
</div>
</nav><!--END NAVIGATION-->
<img id="banner" alt="home page banner" src="img/banner.jpg"/>
<div id="content">
<section class="col-md-8"><!--Left column content goes here-->
<h2>Our Mission<small><br>Working World Wide to Stop the Silence and Cycle of Abuse</small></h2>
<p>The International Child Advocacy Network, Inc. (YesICAN) is a leading global provider of online information for those who have issues around child abuse. It is our mission to work worldwide to break the silence and cycle of abuse. <strong><em>We</em> believe</strong> that child abuse could cease to exist if everyone had the capability to receive accurate, up-to-date information about abuse and then had the capacity to receive assistance and support to change.</p>
<h2>How We Make a Difference</h2>
<p>Our website provides information, statistics, and definitions of abuse. We also have the <em>Yes</em>ICAN Community where individuals who have questions regarding child abuse and domestic violence can join with others to discuss various concerns and ideas around these topics.</p>
<p>The premier service of our organization is our facilitated chat groups. <strong>In these groups we offer an opportunity for abused children and adults to speak with others and to get council and support from trained facilitators.</strong> These facilitators have gone through a 60-hour training lead by a Licensed Therapist. To date, we have had over 44,000 participants in our chat rooms. We run specialized chat groups for teens, adult-survivors, victims of domestic violence, individuals who are in close relationship with abuse survivors and parents.</p>
<h2>Our Current Focus</h2>
<p>Our focus for now, is the development of an on-line parenting program. In this 6-8 week program, individuals will receive training in non-violent parenting. This training will include dynamics of both physical and emotional development, and appropriate discipline. In addition, each member of the program will have access to support groups where the topic of each weeks' training session will be discussed. During this time specific issues and concerns that come up for each participant will be shared in a safe and supportive environment.</p>
<p>It is our hope that in the future, we will provide an international support forum, specifically targeting military personnel and their dependents that are based outside of the United States.</p>
</section>
<section class="col-md-4" style="border-left:1px solid #cfd1d4;"><!--Right column content goes here-->
<div class="well">
<h2>April Kickstarter</h2>
<img src="img/unbrokenkickstarterbutton.png"/>
<p>Please support and learn more about our kickstarter running through this April!</p>
</div>
<h2>In Memorial</h2>
<img alt="Memorial List" src="img/memorial_list.jpg"/>
<p>We keep this list in honor of the children who have died from the injuries infliected upon them as a result of child abuse.</p>
<h2>Missing Children<br><small>Alert Cases</small></h2>
<section style="border: #cfd1d4 solid 1px; border-radius:2%; padding:10px;">
<!-- start feedwind code --><script type="text/javascript">document.write('\x3Cscript type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js">\x3C/script>');</script><script type="text/javascript">(function() {var params = {rssmikle_url: "http://www.missingkids.com/missingkids/servlet/XmlServlet?act=rss&LanguageCountry=en_US&orgPrefix=NCMC",rssmikle_frame_width: "100%",rssmikle_frame_height: "400",frame_height_by_article: "0",rssmikle_target: "_blank",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "12",rssmikle_border: "off",responsive: "off",rssmikle_css_url: "",text_align: "left",text_align2: "left",corner: "off",scrollbar: "on",autoscroll: "off",scrolldirection: "up",scrollstep: "2",mcspeed: "20",sort: "Off",rssmikle_title: "off",rssmikle_title_sentence: "",rssmikle_title_link: "",rssmikle_title_bgcolor: "#FF0000",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#FFFFFF",rssmikle_item_bgimage: "",rssmikle_item_title_length: "55",rssmikle_item_title_color: "#0066FF",rssmikle_item_border_bottom: "on",rssmikle_item_description: "on",item_link: "off",rssmikle_item_description_length: "150",rssmikle_item_description_color: "#666666",rssmikle_item_date: "gl1",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M:%S %p",item_description_style: "text+tn",item_thumbnail: "full",item_thumbnail_selection: "auto",article_num: "15",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: ""};feedwind_show_widget_iframe(params);})();</script><div style="font-size:10px; text-align:center; width:300px;">RSS Feed Widget<!--Please display the above link in your web page according to Terms of Service.--></div><!-- end feedwind code --></section>
</section>
</div>
<div class="container" style="overflow-y: hidden;">
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:#d3d3d3">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" style="text-align:center">Safety Warning</h3>
</div>
<div class="modal-body">
<p style="text-align:center"> Your computer can be monitored by others. For your safety, consider using a public computer or a friend’s computer. If you are in danger, please call 911, your local hotline, or the U.S. National Domestic Violence Hotline at +1-800-799-7233 and <br> TTY +1-800-787-3224.</p>
<p style="text-align:center"> To learn more how to computer safety, click the following link: <br>Internet Safety Tips</br></p>
<!--Wording can be better just for the meantime-->
<p style="text-align:center"> If you are not safe, click the following button: <br><span class="btn btn-lg btn-danger" id="get-away" id="del_cookie">Escape Button</span></br></p>
</div>
<div class="modal-footer">
<p class="text-center"><a href="" class="btn btn-default" class="btn pull-middle" data-dismiss="modal" >Close</a></p>
</div>
</div>
</div>
</div>
</div><!--End of Modal container-->
<!--<div class="container">
<section class="col-md-3">
<div class="list-group" id="sidebar">
<a href="#" class="list-group-item">
Link 1
</a>
</div>
</section>
</div>-->
</div><!--End wrapper-->
<footer>
<div id="footer-right">
<ul>
<li>ABOUT US</li>
<li>Contact Us</li>
<li>FAQ's</li>
<li>Site Map</li>
</ul>
<ul>
<li>SUPPORT OUR CAUSE</li>
<li>Donate</li>
<li>Volunteer</li>
<li>Fundraising Events</li>
</ul>
<ul>
<li>FOLLOW US</li>
<li>
<a target="_blank" href="http://ww.facebook.com/yesicanorg"><img src="img/social/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
<a target="_blank" href="http://www.instagram.com/childadvocacynetwork"><img src="img/social/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a>
<a target="_blank" href="http://twitter.com/YesICANorg"><img src="img/social/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a>
<a target="_blank" href="http://www.pinterest.com/Yesicanorg"><img src="img/social/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/></a>
<a target="_blank" href="http://www.youtube.com/childadvocacynetwork"><img src="img/social/youtube-icon.png" alt="YouTube Logo" class="social-icon"/></a>
</li>
</ul>
</div>
<div id="footer-left">
<p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong> OF ABUSE</p>
<p id="copyright">Copyright© 2015 International Child Advocacy Network</p>
</div>
</footer>
<!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
<script src="js/bootstrap.min.js"></script>
<script src="/path/to/jquery.cookie.js"></script>
<script src="js/escape-button.js"></script>
<script src="js/history.replace.js"></script>
<!--Testing to see if it works-->
<!--<script>
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '1');
}
});
</script>-->
<!--Works fine-->
<script type="text/javascript">
$(function(){
$( '#myModal' ).modal('show');
});
</script>
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
function initialize() {
( function( $ ) {
$( '.call' ).css ( "text-decoration", "none" );
$( '.call' ).css ( "color", "black" );
$( '.call' ).css ( "cursor", "default" );
} )( jQuery );
}
</script>
</body>
</html>
I am doing a website for abuse survivors and I have created a escape button that will jump the user to another link and replace the location of the site with another site like google. I am currently trying to figure out how to manipulate the history back button. Currently, I have this code but it is not working at all when the back button or back arrow is clicked on. Also, what would be the best approach to replace/erase the cookies when the user visits the website.
function getAway() {
// Get away right now
window.open("http://weather.com", "_newtab");
// Replace current site with another benign site
window.location.replace('http://google.com');
// This should clear all back button history.
var Backlen = history.length;
history.go(-2);
}
$(function() {
$("#get-away").on("click", function(e) {
getAway();
});
$("#get-away a").on("click", function(e) {
// allow the (?) link to work
e.stopPropagation();
});
});
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>