I am using
$(function(){
$("#header").load("header.html"
$("#footer").load("footer.html");
});
to load header and footer in all the pages of website. But ive a scriptfor menu bar in header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("very slow");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
</script>
<script type="text/javascript">
window.onload = function() {
alert("sfdfsd");
document.getElementById('panel').style.display = 'none';
};
</script>
----------**************--------------
well the problem is when i load another page the header is not getting completely reloaded. rather than that its getting loaded from history and my menu bar style will be changed to value "block".
Someone pls help me loading header completely on each page.
Related
When I run this code in my localhost server and I click the Show Ad button in the #!/reward page, the reward ad shows but sends me back to the #!/ page. However, in this online code editor this SPA (single page app) works as intended: it plays the ad but leaves you on the reward page. Obviously this must have something to do with the fact that the application is running in an iframe on the editor, but why am I getting the "unexpected" behavior on my localhost and "expected" behavior in these online editors (I've also tested in jsbin and jsfiddle and same result).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
</script>
</head>
<body>
<div id="App"></div>
<script src="https://unpkg.com/mithril/mithril.min.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(() => {
googletag.enableServices();
googletag.pubads().addEventListener('rewardedSlotReady', event => event.makeRewardedVisible());
googletag.pubads().addEventListener('rewardedSlotClosed', event => googletag.destroySlots([event.slot]));
});
const Home = {
view: () => m('button', {
onclick: () => m.route.set('/reward')
}, 'Go to Reward Page >>>')
}
const Reward = {
view: () => [
m('button', {
onclick: () => m.route.set('/')
}, '<<< Return to Home Page'),
m('button', {
onclick: () => googletag.cmd.push(() => {
const rewardedSlot = googletag.defineOutOfPageSlot('/22639388115/rewarded_web_example', googletag.enums.OutOfPageFormat.REWARDED);
if(rewardedSlot)
{
rewardedSlot.addService(googletag.pubads());
googletag.display(rewardedSlot);
}
})
}, 'Show Ad')
],
}
m.route(document.getElementById('App'), '/', {
'/': Home,
'/reward': Reward
});
</script>
</body>
</html>
UPDATE (2022.08.03 11:16)
I can confirm that by placing this code into a subdirectory and then running it inside an iframe I get the expected behavior. I still need to understand why it doesn't work without the iframe. Here's a Glitch page that illustrates both scenarios. Click the View button on the preview pane to view it in its own window and note the difference.
The specific code for a rewarded ad appends #goog_rewarded to the end of the page's URL. This is what forces the unexpected behaviour to return to the default route of Mithril's router when using the default #! strategy. The added # triggers a hashchange event and Mithril cannot resolve the route. Setting the m.route.prefix to a different strategy (in my case m.route.prefix = '?') resolves the problem as it prevents the lookup from taking place.
I have added the Web component Polyfill.
npm install #webcomponents/webcomponentsjs
I have added them in my index.html file:
<script src="./webcomponents/custom-elements-es5-adapter.js"></script>
<script src="./webcomponents/webcomponents-bundle.js"></script>
<script src="./webcomponents/webcomponents-loader.js"></script>
<script src="./webcomponents/webcomponents-bundle.js.map"></script>
Also Script for no suppport.
<script>
if (!window.customElements){document.write('Web components not supported'); alert('hi');
console.log('No web component');
}
I get the data Web components not supported in IE 11.
I tried the same using Vanilla JS and HTMl
My Html code
<html>
<style>
<head>
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-
loader.js">
<script>
if (!window.customElements){document.write('Web components not supported');
alert('hi');
console.log('No web component');
}else{
alert('Web componnets is supported');
}
</script>
</head>
<body>
**<my-shadow></my-shadow>**
<script src="C:\Users\rgo7cob\Desktop\shadow.js"></script>
<h3> Hello. It is in Red </h3>
</body>
</html>
I have loaded the script from https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-loader.js.
I get the error in IE 11 console at Line number 2 in Js file
const template =document.createElement('template');
**template.innerHTML=`**
<style>
h3{
color : blue;
}
</style>
<h3> This is data from the Template and it is blue</h3>
Browser is not able to identify the template object even after using webcomponents-loader.js.
My Web component element must look like this.
When you reference webcomponents-loader.js in the page, IE will actually be compatible with the template element. Your problem is that you need to add the template element to the body after you create it, and if you need to add html elements to the body, you need to wait for it to load, so you need to execute these codes in window.onload().
A simple example:
window.onload = function() {
const template = document.createElement('template');
template.innerHTML = "<h3>This is a template.</h3>";
document.body.appendChild(template);
}
function show() {
var shadowEle = document.getElementById('shadow1');
var shadow = shadowEle.attachShadow({
mode: 'open'
});
//add style
const styles = document.createElement("style");
styles.textContent = 'h3{ color:blue; }';
shadow.appendChild(styles);
//add h3 title
const title = document.createElement("h3");
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
title.textContent = clon.childNodes[0].textContent;
shadow.appendChild(title);
}
if (!window.customElements) {
document.write('Web components not supported');
alert('hi');
console.log('No web component');
} else {
alert('Web componnets is supported');
}
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-loader.js"></script>
<input type="button" name="show" id="show" value="show template" onclick="show()" />
<br />
<my-shadow id="shadow1">
</my-shadow>
Result in IE:
I have install Vue Devtootls but each time I have errors it doesn't show in the console I see o laracast they have like [vue: warn] and the error. I put this code but nothing.
catch(function(error){ console.log(error.message); });
}
I think you have a misunderstanding on vue-devtools, vue-devtools is a browser extension used as a debugging tool. You can check your components, events and more information via it. Please have a look at its introduction on GitHub.
On the other hand, messages like [vue: warn] ... are produced by Vue itself. The reason that you didn't get the messages is simply because you used vue.min.js instead of vue.js, I think. Save following code as a html file and then open it in chrome. You should be able to see the warning message in Chrome's console.
<!DOCTYPE html>
<html>
<head>
<title>Vue test</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2/dist/vue.js"></script>
<div id="app">
<span>{{ message }}</span>
<component1></component1>
</div>
<script>
// Vue.component('component1', {
// template: '<button>{{ message }}</button>',
// data: function() {
// return {
// message: 'I am a test button'
// };
// }
// });
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
});
</script>
</body>
</html>
Ello!
I have an app bar icon and on the click event - I added a function which has the following code:
function homePage() {
WinJS.Navigation.navigate("/home/homePage.html");
}
Now I have two files - homePage.html which is inside /home/ and the js file for the same.
There's a simple button on html of id NextPage.
While in the homePage.js file, I have:
function () {
"use strict";
WinJS.UI.Pages.define("/home/homePage.html", {
ready: function (element, options) {
var button = document.getElementById("NextPage");
button.addEventListener("click", GoToNextPage);
}
});
function GoToNextPage() {
WinJS.Navigation.navigate("/default.html");
}
})();
But when I click the app bar icon - nothing happens :(
So what I plan to accomplish is that when someone clicks an appbar icon on default.html - the user switches to homePage.html (and then when I click the homePage button - it goes back) - but not even the initial page transfer is taking place.
This is embarrassing to ask but I can't just fold my hands and wait for something magical to happen. I have been working on this for an hour - read videos and samples but it's not working at all.
Would appreciate help - I can't figure out what's going wrong. Thanks!
The WinJS.Navigation namespace provides state and history management, but it doesn't actually do the navigation itself. To move from one page to another, you need to define a handler function for one of the events in the WinJS.Navigation namespace - this lets you respond to call to the WinJS.Navigation.navigate method in a way which makes sense for your app.
As a demonstration, here is a homePage.html file which has a NavBar containing a command that will be the trigger for the navigation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NavProject</title>
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/homePage.js"></script>
</head>
<body>
<div id="contentTarget">
<h1>Select a page from the NavBar</h1>
</div>
<div id="navbar" data-win-control="WinJS.UI.AppBar"
data-win-options="{placement:'top'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'NextPage', label:'Next Page',
icon:'\u0031', section:'selection'}">
</button>
</div>
</body>
</html>
Along with the NavBar, I have defined the div element whose id is contentTarget. This is the place in my content where the new file will be loaded when the user clicks the NavBar command.
CLARIFICATION: All of the content that you want replaced needs to go into the contentTarget element. Otherwise you'll get a mix of old and new content displayed.
And here is the JavaScript file which wires it up (this is the homePage.js file which I added a script element for in the HTML file above):
(function () {
"use strict";
WinJS.Navigation.addEventListener("navigating", function (e) {
var elem = document.getElementById("contentTarget");
WinJS.UI.Animation.exitPage(elem.children).then(function () {
WinJS.Utilities.empty(elem);
WinJS.UI.Pages.render(e.detail.location, elem)
.then(function () {
return WinJS.UI.Animation.enterPage(elem.children)
});
});
});
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
args.setPromise(WinJS.UI.processAll());
navbar.addEventListener("click", function (e) {
if (e.target.id == "NextPage") {
WinJS.Navigation.navigate("/nextPage.html");
}
}, true);
};
app.start();
})();
Notice how I have added a handler function for the WinJS.Navigation.navigating event. This event is triggered by a call to WinJS.Navigation.navigate and details of the navigation target are contained in the detail.location property of the event object.
In this example, I clear out any content in my target element and replace it with the contents of the target file and animate the transition from one to the other.
You only have to define one handler for the event. This means that if I have elements in nextPage.html that will lead to navigation, I just need to call WinJS.Navigation.navigate without needing to create a new event handler, like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
WinJS.UI.Pages.define("/nextPage.html", {
ready: function () {
back.addEventListener("click", function () {
WinJS.Navigation.navigate("/homePage.html");
});
}
});
</script>
</head>
<body>
This is next page.
<button id="back">Back</button>
</body>
</html>
I am using jquery jqModal script for popup windows.
I have one html page with two jqModal windows. I would like one to load when the page opens, and another one opens separately via onClick.
My script is not working. The onLoad works (#success), but the onClick (#dialog) opens both up at the same time.
Here is my current script:
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').jqm();
$('#success').jqm().jqmShow({});
});
</script>
here is the updated code u can try
$(document).ready(function() {
$('#dialog').jqm( {trigger:'#dialog'} );
// $('#dialog').jqmAddTrigger('#dialog');
$('#success').jqm().jqmShow({});
});
Let me know if its working for you
Here you need to add trigger when the modal window will open up
The code you presented works without problems for me. Here is the complete snippet I used:
<script type="text/javascript">
$(document).ready(function() {
$('#dialog').jqm();
$('#success').jqm().jqmShow({});
});
function showModal() {
$('#dialog').jqmShow({});
}
</script>
<div id="dialog" class="jqmWindow">test</div>
<div id="success" class="jqmWindow">test</div>
<input type="button" value="Show Modal" onclick="showModal()"/>