How to hide elements if a page is opened in a popup - javascript

jQuery
$('a.popup').click(function(){
window.open( this.href, 'Page title', 'width=600, height=650' );
return false;
});
HTML
<a class="popup" href="sample.html">
I want to hide the header and footer if my sample.html page is opened in a popup window. Can I add a class name to the <html> or <body> to the popup?, so I can add the CSS rules. Thanks!

from sample.html in the <head> section just check if window.opener exists, e.g.
<script>
if (window.opener) {
/* i'm a popup, add "popup" class to <html> element */
document.documentElement.className += " popup";
}
</script>
then you can set your own CSS style using class .popup, e.g.
header { display: block; }
.popup header { display: none; }

Related

How to debug JS Script in external html file with content loaded do main div - Single Page Application

I am learning a little about SPA.
I wanted to make a simple page where in the main index_test0.html file I have a "content" div.
<html>
<head>
<meta charset="utf-8">
<title>Navigation Example</title>
<!-- The CSS theme for the site. -->
<link rel="stylesheet" href="theme.css" />
<!-- Include jQuery. -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<!-- Navigation links -->
<div id="navbar">
Home
About
</div>
<!-- Dynamic content will be placed here by JavaScript. -->
<div id="content"></div>
<!-- The JavaScript code for dynamic behavior. -->
</body>
</html>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
/* Style the navigation bar links. */
#navbar a {
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
margin: 0px 10px 0px 10px;
padding: 0px 8px 0px 8px;
color: black;
text-decoration: none;
border: 2px solid;
border-color: white;
border-radius: 20px;
}
/* Give the user an affordance that each link is clickable. */
#navbar a:hover {
border-color: black;
}
/* Style the active page link. */
#navbar a.active{
border-color: gray;
}
</style>
<script>
// This script implements simple routing by loading partial HTML files
// named corresponding to fragment identifiers.
//
// By Curran Kelleher October 2014
// Wrap everything in an immediately invoked function expression,
// so no global variables are introduced.
(function () {
// Stores the cached partial HTML pages.
// Keys correspond to fragment identifiers.
// Values are the text content of each loaded partial HTML file.
var partialsCache = {}
// Gets the appropriate content for the given fragment identifier.
// This function implements a simple cache.
function getContent(fragmentId, callback){
// If the page has been fetched before,
if(partialsCache[fragmentId]) {
// pass the previously fetched content to the callback.
callback(partialsCache[fragmentId]);
} else {
// If the page has not been fetched before, fetch it.
$.get(fragmentId + ".html", function (content) {
// Store the fetched content in the cache.
partialsCache[fragmentId] = content;
// Pass the newly fetched content to the callback.
callback(content);
});
}
}
// Sets the "active" class on the active navigation link.
function setActiveLink(fragmentId){
$("#navbar a").each(function (i, linkElement) {
var link = $(linkElement),
pageName = link.attr("href").substr(1);
if(pageName === fragmentId) {
link.attr("class", "active");
} else {
link.removeAttr("class");
}
});
}
// Updates dynamic content based on the fragment identifier.
function navigate(){
// Isolate the fragment identifier using substr.
// This gets rid of the "#" character.
var fragmentId = location.hash.substr(1);
// Set the "content" div innerHTML based on the fragment identifier.
getContent(fragmentId, function (content) {
$("#content").html(content);
});
// Toggle the "active" class on the link currently navigated to.
setActiveLink(fragmentId);
}
// If no fragment identifier is provided,
if(!location.hash) {
// default to #home.
location.hash = "#index_test1";
}
// Navigate once to the initial fragment identifier.
navigate();
// Navigate whenever the fragment identifier value changes.
$(window).bind('hashchange', navigate);
}());
</script>
After pressing the buttons from the menu, the content from the external files should be loaded.
However, I wanted to check if I can load both static content in this way, as in the index_test1.html file:
<html>
<div id="internal_content">
HOME
</div>
<html>
as well as dynamic content, the script of which is stored in an external file - index_test2.html:
<html>
<div id="internal_content"></div>
<html>
<script>
var c = document.getElementById("internal_content");
c.innerText = "ABOUT";
</script>
I think it works.
The problem is that I can't see these 2 external files in my Chrome debug window, so I can't debug the script in index_test2.html.
What should I do?. Or should I make it differently?
you can see those javascript request in development tool's network tab. search specific file name (js file name) on filter. then click request. It will take you to specific js file and can do debug.

Animating the logo automatically with a pop-up info on being clicked

> <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<button id="open-popup">Open popup</button>
<div id="my-popup" class="mfp-hide white-popup">
Inline popup
</div>
<style>
#open-popup {padding:20px}
.white-popup {
position: relative;
background: #FFF;
padding: 40px;
width: auto;
max-width: 200px;
margin: 20px auto;
text-align: center;
}
</style>
<script type="text/javascript">
$('#open-popup').magnificPopup({
items: [
{
src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
title: 'Peter & Paul fortress in SPB'
},
{
src: 'http://vimeo.com/123123',
type: 'iframe'
},
{
src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
type: 'inline'
},
{
src: '<div class="white-popup">Popup from HTML string</div>',
type: 'inline'
},
{
src: '#my-popup',
type: 'inline'
}
],
gallery: {
enabled: true
},
type: 'image'
});
<script>
</body>
</html>
How can I make a logo float to the right automatically when clicked and make a pop out appear with some info.
Right now I used a button but I want to use a logo..so how can I put in the image instead of the button and also the pop up to appear when clicked on that logo image.
To use an image as the trigger for the pop-up window, it looks like you're using the id "open-popup." You can remove the button and add an image or put an image in the button (I like buttons, but you have to take measure to unstyle it) - so a <a> tag - or whatever you like + add the id of "open-popup."
..button id="open-popup">...
...$('#open-popup').magnificPopup({...
As far as moving the logo on click... you can add a class with jQuery/JavaScript and that class can do the animation.
jQuery
$('.element').on('click', function() {
$(this).addClass('active'); // $(this) refers to the element clicked in this case
});
styles
.element {
transition: .5s; // set speed (look up other options)
}
.element.active {
transform: translate(50%, 0); // random movement example
}
There are many different pop-up / light-boxes. If magnificPopup isn't enjoyable, try another.

print a document using javascript

Hi I need to print a document without buttons.Can anyone please guide me to accomplish this task.
I have a button to print in button click onclick() event I have used window.print() to print those data .But In a print preview It shows the page including those 4 buttons.i do not want those buttons I need only those data.
for more information I have adde the image below
add a wrapper to non-printable stuff i.e buttons in your case. check below code :
<head>
<style type="text/css">
#printable {
display: none;
}
#media print {
#non-printable {
display: none;
}
#printable {
display: block;
}
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Hope it helps.
Use CSS #media print or a print stylesheet to hide the button when it is printed. That way it will be hidden on the printout whether the button is used to print or not.
<style type="text/css">
#media print {
#printbtn {
display : none;
}
}
</style>
<input id ="printbtn" type="button" value="Print this page" onclick="window.print();" >
Refer #media print
Additional reference
You can specify different css rules for printing. Either you can use the #media print {} scope like this:
#media print {
/* Add your custom css rules here */
input {
display: none;
}
}
Or you can specify an entirely different css file to use like this (if you want to change your black background and white text to something more printer friendly):
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
1 Give your print button an ID:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>`
Adjust your script the way that it hides the button before calling
window.print():
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>
To simply print a document using javascript, use the following code,
print(){
let w=window.open("www.url.com/pdf");
w.print();
w.close();
}

chrome extension popup same tab still not working

I used the code I found here.
But it´s still not working out to open my link out of the popup.html in the currently active tab.
popup.html
<!doctype html>
<html>
<style>
body {
min-width: 156px;
max-width: 100%;
position: relative;
vertical-align:middle;
}
div {
margin:1px 1px 1px 1px;
}
</style>
<head>
<title>I-Serv Switcher</title>
<script src="js.js"></script>
</head>
<body>
<script src="js.js"></script>
<div style="width:50px; height:50px; background-color:blue; float:left;">Click.</div>
</body>
</html>
As you can see there is a little blue div. when i add target="_blank", then google opens in a new tab. But adding the following .js should take the link out of the clicked div with href and open it in the active tab.
js.js
var hrefs = document.getElementsByTagName("a");
function openLink() {
var href = this.href;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var tab = tabs[0];
chrome.tabs.update(tab.id, {url: href});
});
}
for (var i=0,a; a=hrefs[i]; ++i) {
hrefs[i].addEventListener('click', openLink);
}
the permission "tabs" is given in the manifest.json
What am i doing wrong ?
Did I forget something ?
Your code executes at the moment the <script> tag is read.
The rest of the DOM is not constructed yet; document.getElementsByTagName("a") is, therefore, empty.
To fix this, you need to wrap your code in a DOMContentLoaded event:
document.addEventListener("DOMContentLoaded", function() {
var hrefs = document.getElementsByTagName("a");
/* ... */
});
Note that you can easily debug your popup by right-clicking your extension's button and selecting "Inspect popup"

Pop up menu on click of the button

I need a functionality, where on click of the button, i need to slide up a menu and at the same time on move out of the button or of the popup menu, the menu has to be closed(slideDown).
I have multiple buttons in the page, which contains the menu, so on moving to another button on clicking menu will be opend or moving out to some other elements in DOM also i need to close the Menu.
Please suggest.
Using CSS and Jquery you can set menu css to
display:none
then just
display:block
it when button is clicked. or you can also use
Toggle
I believe you want to create a menu and a button that will show and hide from this;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
if( $(this).text()=="Open")
{
$(this).text("Hide");
}
else
{
$(this).text("Open");
}
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="flip">Open</button>
<div id="panel">Menu!</div>
</body>
</html>

Categories

Resources