I'm using colorbox, and I want to be able to click on the webpage behind the colorbox while it is open.
Is it possible?
The idea of lightbox-like "windows" is that they shadow the website while they are open.
But you can add the following to your CSS to hide the overlay:
#cboxOverlay { display: none !important; }
This will allow you to click on the site even with the colorbox being shown.
Related
I have a WordPress website where I activated a protection for disallow image drag and drop because this allow visitor to drag and save on the Desktop images...
As soon I activate the option to disallow image drag is disabled also the possibility to drag the live helper chat widget that I have on footer right bottom of the screen.
I want exclude this element from the protection so user can move (drag) the widget of the chat. Any help or suggestion, please?
I know usually in the web is not liked protection like disable right click etc... but let me decide this on my website, I AM looking now for a solution to allow this x-frame option to be draggable again also with the active protection.
Thanks, any help will be very appreciated.
OK I do not find how to solve this issue but I found that disable block to prevent image drag and put this code:
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
img {
pointer-events: none;
}
Solve my issue by making the image not draggable.
I have no captcha recaptcha control at the bottom of the page. Whenever pops up a verification window asking to enter captcha text, the page scrolls to the top which is annoying.
I have to scroll to the bottom again to enter the captcha text and then click on verify button. Is there a way to avoid page from scrolling when the verfication pop up shows up ?
https://lh4.googleusercontent.com/-EuuF3cHwDs8/VO4I8YrEmaI/AAAAAAAAAEw/-_hWmUDkOJo/s320/2015-02-25_2309.png
Apparently there was a bug on Google's end which they claim to have fixed.
Others, such as myself, continued to see this problem and discovered it was being caused by setting html to height: 100%. Remove this line or set it to auto.
html {
height: auto;
}
I am using the MediaElement.js Wordpress plugin in order to play MP3s on my homepage.
But on Internet Explorer 8 I have trouble with the plugin.
Instead of the play button and the volume button, it only shows a blocky rectangle.
I have tested on two different computers with the same result.
You can test it here: http://www.alatarmusic.com/noise-reduction/
It works fine with Firefox and with Safari on my iPhone. And I know, that other sites show up fine in my Internet Explorer. For example, the player on MediaElementJS.com looks correct. It seems, something is wrong with my homepage?
But what could be the reason for this?
Was having the same issue in IE7 as well as IE8:
The fix for me was making sure the filter style was reset:
filter: none;
Your style-sheet contains the following CSS:
.post .content button{background:linear-gradient(top,#ffffff 0%,#e9e9e9 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
Beautified:
.post .content button {
background: linear-gradient(top,#ffffff 0%,#e9e9e9 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
}
The last property, -ms-filter, is a proprietary CSS extension by Microsoft, which is only parsed by Internet Explorer.
The color #ffffff is white, and the color #e9e9e9 is light gray.
Because the effect does only work in Internet Explorer, only IE users will see a light-colored rectangle instead of a play button.
Setting the filter to none gives back the button:
This markup does probably effect other buttons in your Wordpress blog, so removing it might not be an option. Instead, you can add filter:none to the CSS for .mejs-button; e.g.:
.mejs-button{
filter: none;
}
SETUP:
Using Google Apps Script's UI (doGet) with tabPanel option. At the bottom of each panel is a "previous" and "next" button to navigate through the tabs.
ISSUE:
When activating a navigation button the viewing area remains at the bottom of the screen.
QUESTION:
What code can be used to jump to the top of the screen? (i.e. window.scrollTo(0,0)
Unfortunately, there's no way to interact with the browser like this. But you can control the window scrolling if you wrap up all your GUI inside your own scroll panel, instead of using the browser's one.
Then, you can use the myScroll.setScrollPosition(y).setHorizontalScrollPosition(x).
using HtmlService with IFRAME mode...
$("html, body").animate({ scrollTop: 0 }, "slow");
I'm debugging a website for missing images. The website heavily uses GWT hence the source code is not so verbose. I started debugging it with firebug and found out that the tags are all greyed out in the firebug DOM source. If I edit the image tag in firebug console, say by adding just a space, then the image tag is not greyed anymore hence showing up on the page.
Can someone here please point out why the image tags are greyed out in firebug and how to resolve this issue.
Note: there are other images in the page which are working just fine, even they are generated using GWT in the same way.
Most likely - the image is hidden (via CSS probably). Click on the tag to see the styles applied to it - most likely you'll see display: none or something of similar effect.
As to why the image(s) are hidden - either the CSS rules got mixed up and resulted in such behaviour (Firebug should help with the investigation) or it's part of the application logic (hide the progress bar when not needed, etc).
In my case my image was grayed (greyed) out in firebug due to the image having its height and width to 0 px so effectively it was hidden on the screen. so i deduce that grayed out means its not visible on the screen.
I had the same issue with social networks icons, and it was also Ad-Blocker (under Firefox) causing it.
The alternative text of the icons had alt="Facebook" (Twitter, Instagram) in it. Changing that to alt="Facebook_xxx" was enough to solve the issue.
I was having the same problem. Firebug was showing my container element, which had an img, as grayed out. The element was displayed in Firefox (and other modern browsers), but not in IE8.
Knowing I was setting display:none; and later in the script making it block, wasn't my issue... adding a missing width and height in the style was the fix for me.
For me, it was a matter of explicitly setting the width and height on my div (that holds my img) inside the container div. I did not have width and height on my absolutely positioned div. As soon as I added that the grayed out was solid in Firebug. Also fixed my missing div problem in IE8! (Which was what set me on the debugging path in the first place)
IE8 likes width and height set, where all other modern browsers didn't care and still displayed the div. Firebug showed the element grayed out, but Firefox the browser displayed the div element just fine.
#slidesContainer {
position: relative;
width: 871px;
height: 275px;
padding: 8px 8px;
overflow: hidden;
}
#slidesContainer div {
position: absolute;
width: 871px;
height: 275px;
display: none;
}
As an FYI for other people, I was having this problem and couldn't figure it out - Firebug correctly greyed out the invisible images. I am running the AdBlock Plus add-on and it was hiding the images because they were in a folder called ads. The giveaway was that the images has classes added with random string e.g. class="auwhaezfynjjayjvlasn". I changed the name of the ads folder and voila, visible and not not greyed out in Firebug any more.
Another FYI - my FILE was named xxx-ads.swf and the file would NOT display in Firefox or Chrome but worked fine in Safari, IE and Opera.
I am running Adblock plus in Firefox and Chrome.
It seems to me that as a general software practice, Adblock is trying to be too smart in it's detection. Cost me about 2 days of debugging. Grrrr.
Thanks goodness i finally found this forum.