inline click and event handler issue - javascript

I use this code for modal windows with html content - printing
I am having issues with click and responding to events, I have had no response when i click, and sometimes i have to click frequently and refreshing oage then i might get respond.
<span class="print_m" id="closeme"><i class="fa fa-print" aria-hidden="true"></i></span>
jQuery("#closeme").click(function () {
var contents = jQuery("#printContent").html();
var frame1 = jQuery('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
jQuery("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>document class2</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="../wp-content/themes/MCC/style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 50);
});

Related

Print content in div script not working on iPad

I’ve got a piece of JavaScript code that prints the content located inside a specific div( #printthis ). It works great on PC; however, when I try to use it on an ipad, the page is blank except for the “footer” that contains the page name, date, time, and how many pages. The footer is set via the print driver/iPad.
Any way to modify this code to work on both PC and ipad? I haven’t tested on any other devices yet. These are just the devices I use regularly.
<script type="text/javascript">
function printdata(title) {
var thistitle = title;
var contents = $("#printthis").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title><?php if(isset($title)) { echo strtoupper($title) .' '; } ?>LIST PRICE</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
}
</script>
I call this function via <a onclick="printdata()" href="javascript:void(0)">Print</a>

Pop Up Print is not working in android and ipad

this is my jquery code:
jQuery('.print_btn').hide();
var contents = document.getElementById("print_page").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title></title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
frameDoc.focus();
frameDoc.print();
document.body.removeChild(frame1);
}, 500);
jQuery('.print_btn').show();
return false;
I search on google but i did not find any solution so i am posting this question.
I have a pop which is having image and a print button , i want to print the image on click on print button.
This working fine on web browser means on desktop, But it is printing whole page and pop-up image , and on i pad it is printing nothing .
Why this is happening i don't know please help me out.
Unfortunately .print() isn't supported on Android devices. You could however use Googles cloud print API: https://developers.google.com/cloud-print/docs/gadget

Change styles when scrolling down (javascript)

I'm rebuilding my webpage, make it more elegant so I decided that I would modify the top bar when the user scrolls down, make it smaller and hide some elements it has. I have the function that triggers when you scroll down, but for some reason it does nothing.
My HTML:
<div class="maindiv">
<img src="media/cgaline.png" id="cgalinepic" class="cgalinepic">
<a id="right-panel-link" href="#right-panel"><img src="media/menu.png" id="open_menu_button" width="50px" height="50px"></a>
<h2 class="h1-3" id="h1-3">
We are not in danger, we ARE the danger.
</h2>
</div>
I don't know what's going wrong since I dedicate most of my time in php and I find javascript a little hard.
I also tried doing this:
$('#maindiv').style.height = "50px";
But doesn't work neither.
My final javascript code (thanks to Sagi and Ilya Sviridenko):
var div = $('.maindiv');
var pic = $('.cgalinepic');
var menu = $('.open_menu_button');
var text = $('.h1-3');
$(function(){
var div = $('.maindiv');
var pic = $('#cgalinepic');
var menu = $('#open_menu_button');
var text = $('#h1-3');
$(document).scroll(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
div.css("height", "50px");
pic.css({ width : "400px", height : "50px" });
text.hide();
menu.css("top", "0px");
} else {
div.css("height", "140px");
pic.css({ width : "800px", height : "100px" });
text.show();
menu.css("top", "47px");
}
lastScrollTop = st;
});
});
});
You may use jQuery only after DOM is ready. Wrap your JS code like this:
$(function(){
...
});
Final solution, with Sagi code:
$(function(){
var div = $('#maindiv');
var pic = $('#cgalinepic');
var menu = $('#open_menu_button');
var text = $('#h1-3');
$(document).scroll(function() {
div.css("height", "50px");
pic.css({ width : "400px", height : "50px" });
text.css("visibilty", "hidden");
menu.css("top", "0px");
});
});
you are using jQuery already.Just continue to use jQuery API
div.css("height", "50px");
pic.css({ width : "400px", height : "50px" });
text.css("visibilty", "hidden"); // did you mean to hide the text completly? If so use text.hide();
menu.css("top", "0px");

onlick event not working within a window.open

I'm trying to achieve an onclick event once window.open has opened. So that when the user clicks a button in the new window it works.
The onclick event works if it's not within the newly opened window.
<div class="show-dialog" id="content">
<script type="text/javascript">
var c = document.getElementById("content");
function resizeText(multiplier) { if (c.style.fontSize == "") {c.style.fontSize = "1.0em"; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; }
</script>
Make text bigger
Make text smaller
</div>
The javascript function enables clicking the links and increasing or decreasing the text. The open.window function opens the new window which is good and is working fine but within my window.open example the onlick event doesn't trigger. So I can't use the function :(
<span class="Show">Show<i class="fa fa-external-link-square fa-left"></i></span>
$(".Show a").click(function() {
var e = $(this).parent().next("div.show-dialog").html();
var t = window.open("", "mywindow1", "width=950,height=550,scrollbars=yes,toolbar=yes,menubar=yes");
t.document.write("<html><head>");
t.document.write("<style>body{font-size:2em;}</style>");
t.document.write("<script type='text/javascript'>
var c = document.getElementById('content');
function resizeText(multiplier) {
if (c.style.fontSize == '2em')
{ c.style.fontSize = '2em'; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + 'em';
}
</script>");
t.document.write("</head><body>");
$(t.document).find("body").html(e);
t.document.write("<a href='javascript:void(0);' onclick='resizeText(1)' id='plustext'>Make text bigger</a>
<a href='javascript:void(0);' onclick='resizeText(-1)' id='minustext'>Make text smaller</a>");
t.document.write("</body>");
t.document.write("</html");});
Any help would be greatly appreciated :)
In the end I managed to get the onclick even to work within the window.open.
I also was intergrating a function to increase and decrease the font-size within the window.open onclick.
// Creating window to open for text that are in div with class name show-dialog
$(".Show a").click(function() {
// Varible grabs content of show dialogs
var activityContent = $(this).parent().next("div.show-dialog").html();
// Establish varibale to create buttons to increase text
var userGUI = "<div class='userGUI'><a href='javascript:void(0);' onclick='resizeText(1)' id='plustext'><i class='fa fa-plus-square-o fa-2x'></i></a>
<a href='javascript:void(0);' onclick='resizeText(-1)' id='minustext'><i class='fa fa-minus-square-o fa-2x'></i></a><br>Increase / Decrease font size.</div>";
// Created variable for the window.open
var inWindow = window.open("", "mywindow1", "width=950,height=550,scrollbars=yes,toolbar=yes,menubar=yes");
// Writing to the inWindow variable
inWindow.document.write("<html><head>");
inWindow.document.write("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>");
inWindow.document.write("<title>Hello world</title>");
inWindow.document.write("<style>body{font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 1.8;}a{color:#663366;}a:hover{color:#844484;}.userGUI{float:right;}</style>");
inWindow.document.write("</head><body id='content'>");
$(inWindow.document).find("body").append(userGUI);
$(inWindow.document).find("body").append("<br><br>");
$(inWindow.document).find("body").append(activityContent);
inWindow.document.write("</body><script type='text/javascript'>
// Increase font size function
function resizeText(multiplier) {
var c = document.getElementById('content');
if (c.style.fontSize == '')
{ c.style.fontSize = '1.175em'; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + 'em';
}</script></html>");
inWindow.document.write("");
inWindow.document.close();
});
The html to this is in my question above ^.

trying to make light box, getting Jquery Syntax error

I am trying to get a light box to display when you click a tag on the page. Basically it the js is trying to take the href and use it to get the width. (not the best at js and jquery) so any help is gonna be very much appreciated.
error im getting:
Error: Syntax error, unrecognized expression: #?w=500, a[name=?w=500] # http://code.jquery.com/jquery-latest.js:4680
html
<a href="#?w=500" rel="diff" class="poplight">
<h1 class="blue">diff</h1>
</a>
<div id="diff" class="popup_block">
<p>text in light box</p>
</div>
Jquery:
<script type="text/javascript">
$(document).ready(function() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
window.alert('2 test in the popup function ');
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('Close');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() - 80) / 2;
var popMargLeft = ($('#' + popID).width()) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=90)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=90)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
This isn't a direct answer, but did you do know that you can create your own attributes?
<a popupwidth="500" rel="diff" class="poplight">
<h1 class="blue">diff</h1>
</a>
would work fine:
$('a.poplight[popupwidth]').click(function() {
//...
var popWidth = $(this).attr('popupwidth');
//...
}
Your HTML editor might complain, but this is perfectly legal HTML and will function fine. In case you want to be XML-compliant, you can create your own XML Schema and reference it via a namespace.
Schema
<?xml version="1.0" encoding="utf-8"?>
<xs:schema id="XhtmlAddons"
targetNamespace="http://somekindofid/XhtmlAddons.xsd"
elementFormDefault="qualified"
xmlns="http://somekindofid/XhtmlAddons.xsd"
xmlns:mstns="http://somekindofid/XhtmlAddons.xsd"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:attribute name="popupwidth" type="xs:int" />
</xs:schema>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:addon="http://somekindofid/XhtmlAddons.xsd">
<!-- ... -->
<a addon:popupwidth="500" rel="diff" class="poplight">
<h1 class="blue">diff</h1>
</a>
<!-- ... -->
</html>
jQuery*
$('a.poplight[addon\\:popupwidth]').click(function() {
//...
var popWidth = $(this).attr('addon\\:popupwidth');
//...
}
Please note, however, that jQuery does not natively support XML namespaces so you may run into trouble if you do anything advanced. The first example above (without the namespaces) is preferred unless your really, really need XML compatibility for other reasons.
UPDATE
If you are validating against HTML 5, you should NOT use the schema. Just prepend your custom attribute with "data-":
HTML
<a data-popupwidth="500" rel="diff" class="poplight">
<h1 class="blue">diff</h1>
</a>
jQuery
$('a.poplight[data-popupwidth]').click(function() {
//...
var popWidth = $(this).attr('data-popupwidth');
//...
}
See HTML 5 data- Attributes by Jon Resig

Categories