I'm trying to get this function to work on the website of a project I'm working on. The purpose of this function is to only (physically) print the contents of a child div which is coincidentally referred to as selector #content.
Here's the little bit I've got 'till now:
<script>
function printContent() {
window.open().document.write($("#content").html());
window.print();
window.close();
}
</script>
The function is fired when a person clicks on a "print" hyperlink. The new window will load the contents of the #content div which is parsed from another HTML document:
<div id="content">
<br/>
<div id="Algemeen">
<h3>Algemene informatie</h3>
<fieldset id="profile">
<img id="male" src="./images/Pixers/male_icon.jpg"></img>
<img id="female" src="./images/Pixers/female_icon1.jpg"></img>
</fieldset>
</div>
<div id ="leftbox">
<div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
<div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
<div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
<div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>
<div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
<div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
<div id ="veldbox"><label>Provincie:</label>$!person.province</div>
<div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
<div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
<div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
<div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
<div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
</div>
<div id="rightbox">
<div id ="veldbox"><label>Naam instantie:</label></div>
<div id ="veldbox"><label>Adres instantie:</label></div>
<div id ="veldbox"><label>Postcode instantie:</label></div>
<div id ="veldbox"><label>Tel. instantie:</label></div>
<div id ="veldbox"><label>Fax instantie:</label></div>
<div id ="veldbox"><label>E-mail instantie:</label></div>
<div id ="veldbox"><label>Website instantie:</label></div>
<div id ="veldbox"><label>-:</label></div>
<div id ="veldbox"><label>-:</label></div>
<div id ="veldbox"><label>-:</label></div>
</div>
</div>
It just won't load the styling along with it. All the contents will all just be cropped up in the top left corner. I've tried linking the CSS through JS or by just putting it in the head of the page as suggested on another page. I could be doing this wrong of course. I haven't really tried figuring this out with JQuery yet, so if you have any other solutions that might help me with my problem, I'm happy and open to receive some advice about them.
Thanks in advance!
Build a complete HTML page in the opened window and reference your CSS-file there:
var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();
I do something similiar to the above example but found it doesn't work in all browsers. The following was tested with all the major browsers and works for me. (Remember, some styles can be dependent on parent elements, so if your div is nested inside those elements the styles may not look exactly the same in the print window as on your parent page)
function printWithCss() {
//Works with Chome, Firefox, IE, Safari
//Get the HTML of div
var title = document.title;
var divElements = document.getElementById('printme').innerHTML;
var printWindow = window.open("", "_blank", "");
//open the window
printWindow.document.open();
//write the html to the new window, link to css file
printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>');
printWindow.document.write(divElements);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
//The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome.
setTimeout(function() {
printWindow.print();
printWindow.close();
}, 100);
}
I wanted to have all the styles from the parent page and print. So I wanted to use all the css links in the HEAD.
My solution uses jQuery.
(function print() {
// getting the tag element I want to print
// cloning the content so it doesn't get messed
// remove all the possible scripts that could be embed
var printContents = $('body').clone().find('script').remove().end().html();
// get all <links> and remove all the <script>'s from the header that could run on the new window
var allLinks = $('head').clone().find('script').remove().end().html();
// open a new window
var popupWin = window.open('', '_blank');
// ready for writing
popupWin.document.open();
// -webkit-print-color-adjust to keep colors for the printing version
var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';
// writing
// onload="window.print()" to print straigthaway
popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>');
// close for writing
popupWin.document.close();
})();
I also had the problem with CSS loading after the page rendering, so solution was to read the css file content and write it to the new document:
var w = window.open();
jQuery.get('/styles.css', function (data) {
w.document.write('<html><head><style>');
w.document.write(data);
w.document.write('</style></head><body>');
w.document.write($('.print-content').html());
w.document.write('</body></html>');
w.print();
w.close();
});
I had the same issue. What I am finding is that it is printing before the css has time to render on the page. What I did to find this was do a setTimeout on the print call and all styling was then showing up in the printed document. If I did not do the timeout I found that the styling was not being picked up in the print call.
Just in case any one is trying to make this happen with Angular, please put your CSS file in the assets folder.
This code works for me to make it windows center.
<a href="http://twitter.com/intent/tweet?text=[TWEET_CONTENT_GOES_HERE]"
onclick="window.open(this.href,
'twitterwindow',
`top=${(screen.height - 570)/2}, left=${(screen.width - 570)/2}, width=600,
height=300, resizable=1`); return false;">
Tweet this
</a>
I figured this out and it is currently working in a react app. Here is how I did it...
let head = document.createElement("head");
let style = document.createElement("style");
let content = document.createTextNode("")
content.textContent = document.head.innerHTML;
style.appendChild(content);
head.appendChild(style);
Related
I am using JQuery show and hide function, it works like when you click on image it opens a information log. The information log opens at the top of the page, so I need to make that when you click on the image on bottom on the page it scroll you up to the content.
JQuery what I am using for my hide and show content:
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
Scrolintoview function that I tried to use:
function myFunction() {
var elmnt = document.getElementById("targetDiv");
elmnt.scrollIntoView();
}
Content from witch I am calling both functions:
<a onclick="myFunction()" class="showSingle" target="{$ID}">
//HTML content here
</a>
Content what I am calling to shop up at the top of the page:
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
I tried to combine this two JS function but only jQuery('.targetDiv').hide() works for me.
The problem is that your target div
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
has some id and the classes targetDiv and SlideDiv.
document.getElementById("targetDiv") tries to find an element with the id targetDiv but your element does not have this id, but is has a class with the same name.
You need to find the element by its class which can be done in a few ways:
1
var elem = document.getElementsByClassName("targetDiv")[0];
2
var elem = document.querySelector(".targetDiv");
3
var elem = $(".targetDiv")[0];
I wrote the following script that resets the the Iframe Source, removes a class (.play) and adds an image placeholder when .b-close is clicked. I got it to work but the problem is that I have multiple modals and I would like only like to affect the modal that's clicked. I figured that I should use the '$(this)' DOM element in order to achieve this.
<script>
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
$('.pretty-embed').removeClass('play').empty();
$('.pretty-embed').html(vidImgUrl);
$('.b-modal').click(); /// Just trying to close modal..... $.modal.close();
});
});
})(jQuery);
</script>
Here's is the the Modal that I will be calling. Keep in mind that there will be multiple modals, so I would only like to affect the modal that's clicked
<div id="element_to_pop_up" display: block;">
<a class="b-close">x</a>
<h3 class="pop-hd">Header</h3>
<p>Test Video</p>
<div class="pretty-embed play" data-pe-allow-fullscreen="false">
<iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&rel=1"></iframe>
</div>
</div>
The problem is in your $('.pretty-embed') selector which selects all the embed elements in all modals If I understood your problem correctly. To fix that take the id of the modal and prepend it to the selectors like below:
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
var parent_id = $(this).parent().attr(id);
// Prepend the parent id before the .pretty-embed selector
$('#'+parent_id+' .pretty-embed').removeClass('play').empty();
$('#'+parent_id+' .pretty-embed').html(vidImgUrl);
$('#'+parent_id+' .b-modal').click(); /// Just trying to close modal... $.modal.close();
});
});
Also you can use the same way you did it in the previous lines:
$(this).parent().find('.pretty-embed').removeClass('play').empty();
You can get the current modal with
var current_modal = $(this).parent().find('.pretty-embed');
Then remove the class play, and add your image like this:
current_modal.removeClass('play').empty();
current_modal.html(vidImgUrl);
See your complete code in this jsfiddle
I have one div when I click that div I want to open a child browser.I have the code for child browser but when I click the div it executes the javascript line and I didn't get any url from there.
Please check my code
Div code
<div class="box_padding " onClick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes);return false;" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
when I tried this nothing happening.
So I have tried one more way to solve this issue
function openwindow(){
w=open("myurl",'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
HTML:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
This is also not working.
If you have jquery available you can use this instead of this.href:
$('script').attr('src');
function openwindow(){
w=open($(this).find('script').attr('src'),'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
This seems to work in a preliminary test, native javascript. This would be trivial w/ jquery as a previous poster has shown.
Use the URL as a parameter in the div tag "srcVal".
<div class="box_padding " srcVal="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" onClick="openwindow()" id="column-c-box-1">click me</div>
or this way:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" id="scriptTag"></script>
</div>
Your function slightly modified:
function openwindow(){
var id = document.getElementById("column-c-box-1").getAttribute("srcVal");
//or
// var scr = document.getElementsByTagName('script');
//var id = scr[0].src; // use scr[scr - 1].src if have multiple scripts
var w=open(id,'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
I used "with" because that is in your original code, but I'd caution against it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FStatements%2Fwith
I'm currently utilizing JavaScript to allow users to watch multiple videos on a page. There is one big player at the top of the page, and below it are smaller thumbnails of more videos.
In theory, it works fine. However, there is one major problem: ALL videos load at the same time as the page loads.
See this page for reference. I have assigned JavaScript alerts to each individual videos to exemplify the problem (video1, video2, etc.).
Is there a easy fix, without having to rewrite the entire page, to have the videos load when they are clicked on, not when the page loads? Here's what the code looks like so far:
Javascript that calls the video:
function playVideo(cap, file, streamer, alertmsg) {
var so = new SWFObject('player/player-licensed_5_2.swf', 'ply1', '586', '330', '9');
so.addParam('displaywidth', '586');
so.addParam('displayheight', '330');
so.addParam('allowfullscreen', 'true');
so.addParam('allowscriptaccess', 'always');
so.addVariable('skin', 'player/skins/glow.zip');
so.addVariable('controlbar', 'over');
so.addVariable('plugins', 'captions-1');
so.addVariable('captions.file', cap);
so.addVariable('dock', 'true');
so.addVariable('image', 'landing_img/video.jpg');
so.addVariable('file', file);
so.addVariable('streamer', streamer);
so.addVariable('autostart', 'false');
so.write('player1');
window.alert(alertmsg);
}
The thumbnail for the video:
<div class="mini_player1"> <a href="#" class="vidpic" title="">
<!-- thumbnail-->
<img src="images/1_panda.jpg" alt="Video 1" class="vidpic" />
<span class="play-button"><img src="images/yt.png" alt="Play"></span>
</a>
</div>
<div class="content_mini_player1 cmp">
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
</div>
The script that 'replaces' the content in bigplayer with the new selected video:
jQuery(function ($) {
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20").click(function () {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
});
Any suggestions? Maybe consolidate playVideo and the jQuery function? Any help would be greatly appreciated.
Firstly, in the thumbnail code, there is a random closing </a> tag. Unless there is code you didn't post, I'd suggest removing it.
Secondly, your jQuery can be simplified much further. Currently, you are using the following selector:
$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20")
Wow! That is...wow.
Assign the players a single class they can all relate to across the board, select by that class and then run the each() method i.e.:
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
});
Lastly, when you call a function in a script tag like you are doing:
<script>
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>
This WILL run the playVideo() function. Consolidating playVideo() and the jQuery code would be your best bet i.e. (using the same construct above):
$(".mini-player").each(function() {
var player_content_id = "content_" + $(this).attr("class");
var player_content = $("." + player_content_id).html();
$(".big_player").html('');
$(".big_player").html(player_content);
//Add event handler
$(this).on('click',function() {
playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
});
});
Your inline JavaScript function playVideo is going to be called when the page loads. You will want to remove it from there and do something like this:
<div onclick="playVideo()" class = "mini_player1">
I have a problem with the use of the javascript removeChild function.
Here's my script:
////function to add element by ID////
var i=1;
$("#buttonAdd").live('click',function() {
$("#list1 li:last-child").parent().append('<li>'+
'<label for=njajal[]>njajal'+
'<textarea class="tinymce" name="njajal[]" id="aaa'+i+'"></textarea>'+
'<span><a class="delIt" id="'+i+'"><b>Hapus</a></span></label>'+
'</li>');
tinyMCE.execCommand('mceAddControl', false, 'aaa'+i);
console.log('add '+i);
i++;
});
////Function to delete element by ID/////
function delIt(eleId)
{
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('njajal');
parentEle.removeChild(ele);
}
What is the problem?
Here's the HTML code:
<div id="form">
<form method="post" action="">
<fieldset>
<ol id="list1">
<li>
<label for="njajal[]">njajal
<textarea name="njajal[]" class="tinymce" ></textarea>
</label>
</li>
</ol>
<div id="addOpt">
<a id="buttonAdd" class="bt"><b>Tambah</a>
</div>
</fieldset>
</form>
</div>
Screnshot:
You use jQuery in your first function, so the easiest way to remove that element would be with jQuery:
$('#myElementID').remove();
Here's how you can accomplish the same thing with plain javascript:
var myElement = document.getElementById('myElementID');
myElement.parentNode.removeChild(myElement);
EDIT:
To make things simpler read > as "child of:
From what I can tell the problem is thattextarea > label > li > ol. The only element actually having an id is <ol> so to remove the label (as you show in the image) change delIt to:
function deleteLabelTextArea(){
var elementRemove = document.getElementById("list1").firstElementChild.firstElementChild;
elementRemove.parentNode.removeChild(elementRemove);
}
Old Answer:
As we cannot see the HTML I am not certain what the problem is other than as Marc B has mentioned that 'njajal' is not the parent of eleID. To fix that I would recommend:
function delIt(eleId){
var ele = document.getElementById(eleId);
ele.parentNode.removeChild(ele);
}
The solutions presented till now won't work because tinymce IS NOT the textarea!!
Tinymce gets initialized using the content of a specified html-element - a textarea in this case. After initialization an iframe with a contenteditable body is created where users may edit html content.
In order to get rid of the tinymce editor you need to shut it down first:
tinymce.execCommand('mceRemoveControl', false, 'content'); // your textarea got no id, then tinymce uses 'content' as default editor id
Second, you may remove the initial html elements like label and textarea as the other solutions to your question show.
I just wonder why you have have two tinymce editors on your page?
For me it looks like you might prefer to initialize just one them instead of removing the second one afterwards.