I'm trying to create a Lightbox for Image.
You can see Perfectly working demo of this code here https://jsfiddle.net/hibbard_eu/zwk954Ln/
It's working fine for me except it's not showing the cross symbol to get back to previous page.
Here's the code:
<a href="http://saccc567.com/Shows/2014/SACCC_Show/100_0000-Banner_01.JPG"
data-lightbox="gallery-1"
data-title="<a class='add' href='#' data-id='#1'>Add/edit caption</a> 
<span class='divider'>|</span>
<span class='caption'>A banner with some cars</span>"
id="1">
<img src="http://saccc567.com/Shows/2014/SACCC_Show/Thumbs/100_0000-Banner_01.JPG">
</a>
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#lightbox").on("click", "a.add", function(){
var new_caption = prompt("Enter a new caption");
if(new_caption){
var parent_id = $(this).data("id"),
img_title = $(parent_id).data("title"),
new_caption_tag = "<span class='caption'>" + new_caption + "</span>";
$(parent_id).attr("data-title", img_title.replace(/<span class='caption'>.*<\/span>/, new_caption_tag));
$(this).next().next().text(new_caption);
}
});
</script>
How can I show the cross sign to return back?
Or is there any better example for this on jsfiddle?
I want to make a popup text box that shows source codes from the textarea in the popup as a web page wile at the same time it will not show the print button codes in the textarea because that text is meant to be as functions for the popup only. As you can see my textarea content has both javascript and html who needs to be hidden from the textarea, but at the same time needs to be inside the text area for the popup to work.
This means I can not put them outside the textarea because then that function will not show in the popup window who will show everything that is in the textarea of the web editor editor unless the popup is made to target a div that holds the textarea and and not the textarea directly. Even so that presents a problem as the textarea will not anymore be converted into a web page when getting the popup.
I am using this textarea for my popup:
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="The is Source Codes here"><script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script></textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t = document.form1.textfield.value;
win.document.write(t);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
So now what I want is for the print button codes to not be visible in the textarea, but that they are visible as a print button when the popup button is run. So that the print button adds to the visible source codes added into the box by the web designer.
UPDATE
When I posted this question I found no answer no were on the entire internet.
After fiddling with it for a long time I posted the question here. And by luck I found an answer of how to do it after a few minute of after posted the question. I will not delete the question since I am the FIRST on the internet to find and answer to this question.
Solution:
I solved the problem by simply making a hidden textarea linked to the input popup javascript who is also linked to the visible textera. That way what ever is put inside the visble textarea will come up in the popup and so will also the function from hidden in the hidden textarea come on the same popup when clicked on the "Preview" button.
You can put any HTML, CSS or JavaScript code inside the visible and inside the hidden textarea wile having all the input codes hidden from the visible textarea it but active when the popup is turned on.
<form name = "form1">
<textarea name="textfield" cols="107" rows="31" id="CodeExample" wrap="soft" style="font-size:12px; font-family: Arial, Helvetica, sans-serif; color:#ffffff; background-color:rgba(0,0,0,0.8); resize: none;" placeholder="Put your Source Codes here">
</textarea>
<textarea hidden="on" name="textfield2" cols="1" rows="1" id="CodeExample2">
<script language="Javascript">
function printit(){
if (NS) {
window.print() ;
} else {
var WebBrowser = '<OBJECT id="WebBrowser1" width=0 height=0 CLASSid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";
}
}
</script>
<script language="Javascript">
var NS = (navigator.appName == "Netscape");
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3) {
document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()" style="margin-bottom: 0px; font: bold 11px Arial, Sans-Serif;"></form>');
}
</script>
</textarea>
<br>
<!-- Run Textarea field in popup BEGIN -->
<script type="text/javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings);
if (window.focus) {win.focus()}
var t1 = document.form1.textfield.value;
var t2 = document.form1.textfield2.value;
win.document.write(t1);
win.document.write(t2);
}
</script>
<input type = "button" value = "Preview" name = "preview" onclick = "NewWindow('','myPop','500','400','yes')">
<!-- Run Textarea field in popup END -->
</form>
NOTE:
If you are making a web editor online as I am with preview function then it all of a sudden it is making sense. Because you will want to preview your codes that you text inside the textarea box and when previewing you will also want that the textarea box shows some extra buttons such as print the preview you made. Perfect to test a design or a page and such and then print it out by the click of one button on the popup generated by the textarea box. Look at the solution I found and test it yourself and see what I mean and why. It will work with any HTML, CSS and JS source codes.
Test it yourself if you do not understand why it was needed and how it works.
I'm using a show/hide javascript code.
You can find an example here http://ledonnedelre.com/test.htm
Basically if you click the ? on the top left, an help box appears. And after you can close it clicking again the button.
What i need is to have the help box already opened when you open the page.
I guess i should change something in this code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('?');
}else{
//change the button label to be 'Hide'
toggle_switch.html('NASCONDI');
}
});
});
});
</script>
It's a CSS issue. Set
display: block;
on the hidden element.
With reference to this link and this, I printing a report using javascript as
<!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
var data = 'Sample Report<br />Sample Report<br />Sample Report<br />';
var data = data+'<br/><button onclick="window.print()">Print the Report</button>';
myWindow=window.open('','','width=800,height=600');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Print Preview" onclick="printpage()" />
</body>
</html>
But after printing, the print button still remains at the hard copy. So how to hide the print button in hard copy when printing by using the above function?
Give your button a class, e.g. class="noprint". Then Add a stylesheet for print media to your CSS:
#media print {
/* style sheet for print goes here */
.noprint {
visibility: hidden;
}
}
Details: http://www.w3.org/TR/CSS2/media.html
I just solved this with the following css after assigning id to print button.
<style type="text/css">
#media print {
#myPrntbtn {
display : none;
}
}
</style>
And my button as follows.
<input id ="myPrntbtn" type="button" value="Print" onclick="window.print();" >
Also, you can run javascript function with the following actions...
Hide the button
Print the page using window.print();
Again Show back the button
Piece of code...
<script type="text/javascript">
function printMyPage() {
//Get the print button
var printButton = document.getElementById("myPrntbtn");
//Hide the print button
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Show back the print button on web page
printButton.style.visibility = 'visible';
}
</script>
Reference Hide Print button while printing a web page
how to format the data caption
I am planning to display three different names for a single image
after i click the cube light box opens and the caption comes with div tag
but i wanted to display it one by one on the light box
its working fine without light box
$data = '';
$('[data-caption]').each(function(){
$data += '<div>' + $(this).data('caption') + '</div>';
});
$('body').append('<div id="more-info">' + $data + '</div>');
http://jsfiddle.net/ZrpLT/52/
<body>
<div class="row">
<div class="span10">
<div class="melonhtml5_gallery">
<div data-caption="<div>Paul Scholes</div> <div>Wayne Rooney</div> <div>Sir Alex Ferguson</div>" data-image="http://www.defie.co/designerImages/thumbnails/inventory.png"></div>
</div>
</div>
</body>
http://jsfiddle.net/ZrpLT/63/
This requires updating the Gallery class to use .html instead of .text when the caption is appended specifically in the onClick function on the line:
var m = $("<div>").addClass("caption").html(g ? g : ""),
As long as you are able to do that, you can get this to work for you.