I have the some text loaded in light box with background faded.
i want the print button in the light box so that when user click on that only the contents of light box is printed and printer box opens up.
How to do that??
Have you tried using a print stylesheet?
Basically when it prints use a css stylesheet to hide everything that is not in the lightbox.
CSS Design: Going to Print
When you open up your lightbox you want to add a print stylesheet that hides everything else but what is in the lightbox. When you close the lightbox remove that stylesheet.
Related
I build a website with HTML/CSS & JavaScript and added a modal with Bootstrap 5. I changed the standard "Save changes" button of bootstrap with JavaScript to display a random image inside the modal. When the random image gets displayed inside the modal the one image i have displayed on the website disappears.
Does anyone know how to change the code so that the image on the website does not disappear while the random image gets displayed inside the modal?
I tried to change the position and the z-index of the website image in CSS but it still happened to disappear.
I'm not sure without seeing your code.You can try changing the css of the element when you open and close the modal.
document.getElementById("HtmlElementId").className = "CSS-SelectorNewStyle";
http://77.104.146.223/~thewhi58/
Open site click on image any image there is a title at the bottom
I want it to display the post under it its a excerpt
Code: http://pastebin.com/AdshznDN
This text at bottom of images in lightbox is usualy TITLE added to A tag. Change text there.
When i click a shadowbox link it opens but it's just black. Though when I use a page that doesn't exist the 404 error page does show up. The path to the page is correct
Make sure that the page you are linking to includes the stylesheets.
Mine did the same thing but it turned out the background was just black along with the text. I assume by default somehow. You can verify if this is what is happening by highlighting the box and you can see the text highlighted. If it is there, just include a stylesheet and style the page to make the text display!
At the moment I've got Colorbox setup so that it starts automatically when the page loads, but I need to place it in a div on the page, instead of hovering in the center of the page. How can I do this? Thanks for reading.
You can do insert this javascript snippet into your javascript on document complete, where you bind colorbox.
$(document).bind('cbox_complete', function(){
var divContent = $('#cboxLoadedContent').html(); // Grab the content of cboxLoadedContent div
$('#colorbox').hide(); // Hide colorbox div
$('#cboxOverlay').hide(); // Hide the overlay div
$('#Output').html(divContent); // put the content inside the specified div.
});
What this does is that after the image/page is successfully loaded into colorbox, it will immediately grab that content, hide the colorbox and overlay, and dump that content into the new div.
Yes, you will see opening and closing of colorbox flashing on your screen really quick, but this will do it. If you want more controls, then you customize these events: onOpen or onLoad. See link at bottom of my post to go to colorbox website for more details.
Beside cboxLoadedContent, you can also use #cboxWrapper, or #colorbox divs, depending on how much colorbox information you want to embed in your div.
Please note that by doing this, you will have to rebind the buttons, if you want it to allow navigation inside the div.
You can go to Colorbox Site for more customization options.
I think Colorbox is the wrong tool for what you want. The functionality you want is more like an image gallery. Some ones you might like: Galleriffic or Galleria
I understand I can call window.print() when the page loads to load the print dialog, but can I force the window to be minimised from the point that it's opened and the print dialog is generated? Ideally it would be minimised until the user maximises it. Thanks
Short answer: No.
Abbreviated answer: you'll have every antispam tool against you if you try to open windows and play with then in javascript.
But... you could use the help of #media print {} in css. Add a div with the content you want to print to the page (and load it via Ajax, or using an iframe). By using "#media print" rules in the CSS you can tell the browser to hide the page that the user is seeing in the browser (by including it in a big div and adding a display:none to the print rule) and show the hidden div.
The nice thing of this solution is that you can play with both divs via javascript, for example you could add buttons to show/hide the print div, etc.
you could try to open a new window outside the screen bounds so it's not visible. (x=-10000, y=-2000).
Then, when it's loaded, print it and close it.