I have an html page where we have images,text and two buttons
1.print page for printing the page
2.Hide/Show(toggle button) for hide/show below the image.
image in the page are generated dynamically using remote service.
In Google-Chrome
When I click Hide/Show button to hide image and click print button,print preview page comes on the same page.
Then I cancel print page and back to page.
Then I again click Hide/Show button to show image
here the problem is that image is not shown on the page.
Using firebuglite I found that inline css style like width and height for image are 0 and hence image is not shown on the page.
How can I manage the css style for image after print preview and this problem occurs only in Chrome.
Please help.
here is CSS Browser Selector using javascript:
http://rafael.adm.br/css_browser_selector/
you can use that,then add the class:
.chrome #btn{
height:30px !important;
width:100px !important;
}
Related
I don't want the scroll to be opened when clicking the image for Lightbox
Error link : https://cdn.pbrd.co/images/HSzC8Ly.jpg
Source Code download link : https://lokeshdhakar.com/projects/lightbox2/
Problem solved.
The height is taking a very high value. This height comes from the lightbox.js file. The overflow problem is troubleshooted when you do height:100% in the css class
Add the following line to the .lightboxOverlay class in css.`
.lightboxOverlay {height:100% !important; /* for Lightbox Scroll hide */}
You need to add the option disableScrolling to prevent the page from scrolling while Lightbox is open:
lightbox.option({
'disableScrolling': true
})
I have been trying to set up a simple lightbox for my trip reports on my website. I finally got Lightbox JS to work on my site (I had issues getting Lightbox 2 to load up) but I also use AllWebMenus and when you select the first lightboxed image the menus shows up on top of the photo. Any idea how I can set it up that the menu does not show up on top of the image?
Here is a link to my test page.
Thanks
Just add z-index: 9999 to the div #lightbox
I have a Panel that I'm using as a modal dialog box, and as such the contents should be hidden from view while the page is loading. However, if I use CSS to set the div's display:none or visibility:hidden then the YUI show() & hide() methods don't work properly (eg, clicking the button to call up the modal dialog greys out the screen, but the referenced div does not appear). Can anyone point me towards the best way to do this?
Thanks!
Try adding yui3-widget-loading to the container div. When Y.Panel is instantiated, it will remove this class. You can then define .yui3-widget-loading { display:none; } so it is not visible during page load.
I wrote code that simply generates a table gridview. The last column provides a print button option for each record. if the user clicks the print button a pop up window is displayed with background image and three pieces of data. it looks great on the screen but when you print the form, everything will print (data) but the background image. Any suggestions? thanks.
For this issue you can use Frédéric Hamidi solution and change the browser settings or you can do the following with CSS.
wrap your code in div tags and call the background image as an img object. and set the background color to white. for some strange reason this does the trick and users will not need to change the browser settings to print an image.
#container {
width:500px;
height:393px;
background-color: #FFFFFF;
}
<div id="container">
<img src="image.png" style="position: absolute;">
<table>
<tr><td>test</td></tr>
</div>
The browser ultimately decides whether or not to print background images. For instance, under Internet Explorer, you need to enable that feature in the Advanced tab of the Internet Options dialog box.
I have an asp.net usercontrol that contains a jQuery UI Dialog Control.
All works as expected execpt the grey tranparent overlay (to make the form modal) only appears on the hidden div below the form where the dialog is triggered from.
Is it possible to target this overlay to the parent div? or is this not the right solution.
I have tried the blockUI plugin (and removing the Dialog style to prevent its overlay showing), but although it "looks" right on screen it disables all the controls including the ones in the dialog popup.
Any ideas?
Added: Screenshot
alt text http://www.freeimagehosting.net/uploads/e0555a0ec5.jpg
It might be a z-order issue. Can you post a screenshot to make it easier to understand. Also please post the high level HTML you are using on the aspx page.