I'm in the process of updating my website and I am trying to optimise the website as much as possible. One of the things I'm trying to do is remove excess text and duplicate text/code.
I have around 20 pages and each page includes a button that pops up my privacy policy using the function below.
The page also imports .css for the pop up which includes mark up and script.
<!-- Begin Footer -->
<div class="mainText">
//site name etc
</div>
<div class="popup" onclick="myFunction()">
<div class="privacyButton">
Privacy Policy
</div>
<span class="popuptext" id="myPopup">
<!-- Policy Content -->
//html content like <p></p> and <strong> etc</strong>.
<!-- End of Policy Content -->
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<!-- End of Footer -->
How can I place this in a separate file and load it from the external file to save me having so much text on every page?
I've tried THIS to use a jQuery, but it doesn't work because of the nature of the pop up.
I've also tried placing only the content (which would still be better than nothing)
<!-- Policy Content -->
//html content like <p></p> and <strong> etc.
<!-- End of Policy Content -->
...in a separate .html file using
<link rel="import" href="/movedContent.html">
...but upon loading, it doesn't adopt the css from the popuptext class.
I'm unsure where to go from here or what to include in any external file in order for importing this on each page. Thanks.
Related
I don't know if it's possible but I'm trying to open a page by clicking on an HTML element. I detail below.
I have a web page in HTML with a source code from a third party tool (a code with products for affiliate purchases). So when the user clicks on one of the products in this code he is redirected to the third party merchant. Let's imagine the code as follows:
<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div>
<!-- my page content -->
</body>
What I would like is that if the user clicks on a product, my site opens a page too, with a text like "Were you able to find your products? We would be interested in your feedback".
That's how I tried it but without success :
<head>
<script async defer src="[linkremoved]"></script>
</head>
<body>
<!-- my page content -->
<a href ="comments.html" target="_blank">
<div>
<!-- Partner code -->
<div data-gyg-href="[linkremoved]" data-gyg-locale-code="fr-FR" data-gyg-q="Neuhausen"></div>
</div></a>
<!-- my page content -->
</body>
If it's what im thinking the easiest way to do that is just by using javascript, example below.
// If you want to redirect user without opening a new tab, use this
// window.location.href="https://example.com";
// But if you want to open a new tab, use this
// window.open("https://www.example.com", "_blank");
function noNewTab() {
window.location.href="https://example.com";
}
function newTab() {
window.open("https://www.example.com", "_blank");
}
function localFile() {
// First we will need to get the url of your webpage
let currentUrl = window.location.origin;
// To what file redirect?
let redirectFile = "test.html";
// And redirect. We will need to add / before the file path
window.location.href = currentUrl + "/" + redirectFile;
}
<div onclick="noNewTab()">
<p> Example product. Click on me! (No new tab) </p>
</div>
<div onclick="newTab()">
<p> Example product. Click on me! (New tab) </p>
</div>
<div onclick="localFile()">
<p> Example product. Click on me! (Change file, not url) </p>
</div>
With new tab it depends on browser if it allows to show it. On the modern browsers there is popout asking for access
A possible approach is to use target="_blank" along with a click handler, like
Visit W3Schools
If you need to trigger this programmatically, then you can:
window.open(yoururl);
//Your further code...
I think that you should try to use span instead of div tag or maybe a p tag
<a href ="comments.html" target="_blank">
<span>
< HERE IS THE PARTNER CODE >
</span>
</a>
I am working on an Angular project and stuck on this bug for a very long time. Not able to find anything on the web and couldn't find any solution to it by myself.
Description :
I have an HTML document both with different UI as One is feed and One is Login/Signup. I have arranged this template in my app.component.html . Attaching Code below
<app-pageloader></app-pageloader>
<app-header></app-header>
<app-login *ngIf = "router.url == '/login'"></app-login>
<!-- <router-outlet></router-outlet> -->
<div *ngIf="router.url != '/login'" class="view-wrapper">
<!-- Container -->
<div id="main-feed" class="container">
<!-- Content placeholders at page load -->
<!-- this holds the animated content placeholders that show up before content -->
<!-- Feed page main wrapper -->
<div id="activity-feed" class="view-wrap true-dom">
<div class="columns">
<!-- Left side column -->
<div class="column is-3 is-hidden-mobile">
<app-left-sidebar *ngIf="router.url != '/login'"></app-left-sidebar>
</div>
<!-- /Left side column -->
<!-- Middle column -->
<div class="column is-6">
<app-postarea></app-postarea>
<router-outlet></router-outlet>
<app-loadmore></app-loadmore>
</div>
<!-- /Middle column -->
<!-- Right side column -->
<div class="column is-3">
<app-right-sidebar></app-right-sidebar>
</div>
</div>
</div>
</div>
<app-modals></app-modals>
</div>
Now you see my feed template starts from Container and Pageloader and the app header are common in both the interfaces. In my feed template, there are multiple components that only need to load once i.e when we refresh. They are Leftsidebar, Post Area, and Right sidebar and different pages like feed and home are being routed with the help of router outlet.
In the Login Page, there is no need for such things I mentioned above.
Now I want that when I switch to /login. It should only load the login component and No other component should load and when I switch to /feed. All components should load below the container.
I have used the URL approach as of now and will be using accessToken local storage condition to hide and show the component.
This solution is working it is only hiding the component from the main page but it is also loading them in the background making unauthorized API calls.
So now I want that if I switch to /login only the login part should load and if I switch to feed or home or blogs then alongside with router outlet all component should load like sidebars and postarea.So that it only make calls when component is called.
If you have ever come across this problem and solved the problem. Help me too. Thank you.
Assuming the idea is that only logged in users ever get to see anything, you should probably target the *ngIf to display only with authenticaed Users like:
*ngIf="isAuthenticated()" or *ngIf="user && user.id"
or something along those lines. In fact, it's best to use a Route Guard to immediately reroute any non-authenticated users to your login.
Aside from all that, your component is getting activated even before the router.url is a thing. You might try:
*ngIf="router.url && router.url!= "" && router.url != '/login'"
I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?
Here is code in copy/paste way:
<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>
<div>
<!-- inner page contents -->
</div>
<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>
Keep the tool bar html in separate file, and include where ever you need.
<ng-include src="'views/toolbar.html'"></ng-include>
Also if you needed add a controller for all functionality. This will help you to reuse your code.
you can check how components are made
and make component <toolbar></toolbar>
Hello!!
i have a question and i haven't found any solution for it anywhere...
So, I have a button that link to internal div page (#page2) with a very long list, I need that the internal div page will be "loaded" before the transition will start...
Here is a very simple Sample Code:
<!-- Page #1 -->
<!-- ... -->
<div data-role="content">
<p>View internal page: goto Page 2</p>
</div>
<!-- ... -->
<!-- Start of Page #2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<ul><li>...</li>
<li>...</li>
<!-- About 300+ of: <li>...</li> -->
</ul>
</div>
So, Clicking over The link to #page2 should give you jquery mobile "Loading..." And after it "loaded" the content the transition should begin..
The reason Im doing it in the same page it that im inserting to the page#2 div dynamically all facebook friends (Long list), and it take a long time from the Click and until the transition begin...
Here is a nice example of what i need:
http://www.mpdtunes.com
Just go to: Live Demo-> Login -> Click Artists...
Any suggestions are welcome!
Thank you very much!!!!
Basically you want to do this:
Use button like this:
goto Page 2
Add a click event to it:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#to-page2', function(){
// Load internal page content
});
});
Where #index is an id of your button containing page.
Show loading animation aka ajax loader
setTimeout(function(){
$.mobile.loading('show');
},1);
SetTimeout is needed because web-kit browsers have a problem with dynamically triggered ajax loader.
Load your internal page content. Now if you are using 1 HTML page with multiple pages you can append new content to listview immediately. This is because listview is already loaded into the DOM. If you are using several HTML pages then store your page content into localstorage variable.
Hide ajax loader, again with setTimeout.
Start page transition with:
$.mobile.changePage("#page2");
If you have 1 HTML page then this is it. If you have stored your page content inside a localstorage then you will need to load it during the pagebeforeshow event of a second page, like this:
$(document).on('pagebeforeshow', '#page2', function(){
// Load internal page content from local-storage and append it
});
Last step is listview page content initialization. For that look at my other answer, just look for a topic regarding listview.
Background
I am trying to add a Facebook Comment box into my Mediaskin php file, but when I use the code below the box appears on every page.
Code
<!-- /debughtml -->
</div>
<br />
<center><div class="fb-comments" data-width="800" data-num-posts="100" data-colorscheme="dark"></div></center>
<!-- /bodyContent -->
Question
How can I make the facebook comments appear only on read pages (pages with index.php?title= in the URL, but without &action=edit at the end of the URL?