I have a small chatbox at the bottom of my page which seems to be inheriting CSS style from bootstrap.min.css and that chatbox is transparent which is a nuisance because the underlying text on the page shows through and what is worse, is that hyperlinks on the page are over-riding clickable areas in the chatbox for opening, closing and submitting messages.
I have tried adding CSS style to the chatbox for opacity and rgba. Even tried adding a background image but to no effect.
I have since modified the chatbox to display an iFrame from a different site that does not use bootstrap.min.css.
But even the iFrame page is affected by transparency. I can remove the transparency setting in bootstrap.min.css but that will not solve my bigger problem... I am intending to use this chatbox on several sites and may not have control of the site's CSS.
So I need a way to override the parent site's CSS just for the chatbox.
If that is impossible, then I can weed out the transparency from bootstrap.min.css that is used on my own sites. However I do wonder what is the point of such transparency when it is useless here...
It's a z-index problem which is common when integrating iframes, apply z-index: 2000; (or whatever number as long as it comes on top) on your chatbox div so your chatbox will still stay upfront.
Since you haven't posted any code, I'm not sure if you've tried this or not, but you can use the !important value to override Bootstrap's styles in your custom CSS. For example:
background-color: white !important;
Related
I have a webpage where the bottom part is occupied by an iframe that I made transparent to view the overlapped elements.
Although the transparency is working well, the overlapped links are not clickable unless I switch pointer-events to none in the iFrame (which obviously solves the problem by another). I tried making a div into the iFrame, covering the "menuless" part, with pointer-events set to all but it doesn't seem to work. I also have to keep in mind the chat component is sticky.
This question is old, but for anyone who stumbles across it...
iFrames represent another entire DOM wrapped in the parent DOM. Things like CSS pointer-events don't typically work on iFrames or function the same way across browsers.
You can try to impact all content INSIDE the iframe using iframe > * {pointer-events: none;} but if the iframe content crosses domains, it likely won't work.
pointer-events: all; is intended to work with SVGs only not other DOM elements.
The proper solution for the OP is to either scale the iFrame to only the size of the content OR don't use an iFrame at all.
Other options to embed content:
HTML <embed> - Docs
HTML <object> - Docs
Web Components HTML Imports - Recently deprecated but there's a polyfill
None of these are great solutions but depending on the problem they may work.
Finally, you can use a Javascript call to fill the content of an element with external content. This is essentially what "Single Page" Apps built using React/Angular/Vue are doing behind the scenes. Note: If you go this route be sure to pay attention to CORS headers if the content is coming from a different domain.
You can use z-index through css:
The z-index creates a list of the concerned elements in css and the element with the highest number, so for example:
#elmnt {
z-index: 10
}
#anotherElmnt {
z-index: 20
}
The #elmnt will have a less importance and will be putted behind the #anotherElmnt that has a higher z-index in case of overlapping.
I've been experiencing a strange issue.
I've made these buttons using div tags, they have rounded edges and the color of their borders is defined in CSS. To make them point to somewhere I surrounded them with <a> tags. The problem is, when the link points to something previously visited, the divs border turns white. Normally, I'd just inspect the element in Chrome to see which CSS rule does that but as soon as I navigate to that element, the border fixes itself to the color it's supposed to be.
This happens in Chrome but not in IE or Firefox.
Also, I'm using Joomla 1.5 and Artisteer to make the template (although I did modify it a lot).
As a temporary solution I used onclick JavaScript linkage to make the button work but I don't think that would go too well with search engine crawlers.
Do you have any ideas what could be wrong?
In chrome developer tool you have options to view elements on hover etc. If you haven't assigned styles for a:active, a:visited etc you should. If you'd like more help please post your code into jsfiddle
I am trying to program a TAB based paging.
My problem is each Tab contains a different background, so when I click on the hyperlink, the new background DOES NOT load, BUT the content loads.
Any ideas?
Code here
http://jsfiddle.net/rgarimella/AnBEc/1/
Tested your jsfiddle, adding !important to your css rules does the trick: http://jsfiddle.net/AnBEc/2/
Edit:
Depending on what effect you are looking for you could also remove the .ui-content part of each rule (so that it's just #services) that would apply the background to the whole page and not just the content part: http://jsfiddle.net/AnBEc/3/
I've looked everywhere and can't find an answer for this, I think possibly because nobody has had the same problem, or possibly because it's a very specific problem.
The problem I'm having is, that linked images on the site I'm working on, have a small border underneath when hovered over, this is in all browsers (apart from IE 7, which the site was designed originally in). This is due to setting a:hover as having a background. Despite setting no borders, margins and padding to images, it's still not happy for some reason.
I only have 2 ways to solve it, set a class with no background on certain a tags, or display the linked image as a block. Unfortunately both these solutions aren't suitable, because the site has hundreds of pages, and possibly thousands of linked images, using a class means finding them all! Using display block will break some of the displays of images, such as the when they're centered nicely in a p tag.
If you want an example of it not working for me, the homepage of the site in question is http://www.tameside.gov.uk, look at the social media icons in the top right, they're all getting the background hover treatment.
If anyone could help I'd be really grateful.
Thanks,
The image icons are PNG and have a transparent background. That is why you can see the background.
You can change the icons to have white background (same them as JPEG) and you will no longer see the background.
A faster fix would be to add a new CSS rule that apply only to the a tags inside the social media div:
.banner_container .social a {
background: none !important;
}
I have a small gallery of thumbnails. When I place my mouse pointer over a thumbnail image I'd like to have a full size image pop up in a div in the top right of the screen. I've seen this done using just CSS and I'd like to go down that route rather than use javascript if possible.
Pure CSS Popups2, from the same site that brings us Complexspiral. Note that this example is using actual navigational links as the rolled-over element. If you don't want that, it may cause some stickiness regarding versions of IE.
The basic technique is to stick each image inside a link tag with an actual href (Otherwise some IE versions will neglect :hover)
Text <img class="popup" src="pic.gif" />
and position it cleverly using absolute position. Hide the image initially
a img.popup { display: none }
and then on the link rollover, set it up to appear.
a:hover img.popup { display: block }
That's the basic technique, but there are always going to be major positioning limitations since the image tag dwells inside the link tag. See the link for details; he uses something a little more tricky than display: none to hide the image.
CSS Playground uses pure CSS for this type of thing, one of the demos is surely to help you and as it's all CSS just view source to learn - you probably want to use the :hover pseudo class but there are limitations to it depending on your browser targeting.
Eric Meyer's Pure CSS Popups 2 demo sounds similar enough to what you want.
Here are a few examples:
CSS Image gallery
Cross Browser Multi-Page Photograph Gallery
A CSS-only Image Gallery: Explained
A CSS-only Image Gallery: Example
This last one acts upon click. Just to be complete in behaviours.