I have an issue with Google Chrome: 19.0.1084.52 m when I have the Ask Toolbar installed
it breaks the website layout.
See print screen:
Is it usual behaviour that toolbars in Chrome would effect the website?
EDIT: I guess I should wrap everything inside a <div> and move the background-image from the <body> although is there a better option without adding this extra markup?
Website link
A Javascript snippet can disable ask toolbar in chrome. I hope this function spreads quickly!!
function removeAsk(){
if(document.getElementById("apn-null-toolbar") != null){
// mainMenu had a style change for its top positioning, returning it to normal
// perhaps a function can be made which iterates over every element ask has changed
document.getElementById("mainMenu").style.top = "-16px";
// Just remove the iframe and style elements
(elem=document.getElementById("apn-null-toolbar")).parentNode.removeChild(elem);
(elem=document.getElementById("apn-body-style")).parentNode.removeChild(elem);
}
}
Call this method after body onload
<body onload="removeAsk()">
There is no Chrome extensions API for creating a toolbar so mentioned extension must have created it via content script. What it means is that for each page you open, CSS and JavaScript files are injected by this extension to create a DOM element within the page acting as a toolbar. Problem with this solution is that using the content script it is possible to mess up website look or even the way it works.
I ran into this exact same issue with the Ask Toolbar. I basically took out my positioning attributes and top/left/right/bottom 's and replaced with margins. Margin uses less space and it comes out cleaner.
Although i do agree, it's kind of ridiculous to accommodate for a toolbar because the end-user could have anything installed that breaks and gives your layout bugs. Even Skype extensions will break a layout just changing the phone number.
So there's not much you can do, but use margins and keep CSS to a minimum. Just my 2 cents. and if you have to use CSS then stick with margins.
Related
I created a content script Chrome extension toolbar by following #RobW's answer to this question.
I'm now trying to get certain elements to overlay on the rest of the page, but currently they are only showing within the iframe.
For instance, an icon is clicked and shows a notification panel/tooltip. As you can see, it is cut off by the edge of the iframe:
Is there a way to change the CSS of the panel to hover on top of the rest of the page despite being in a separate iframe?
BTW, I made the height of the toolbar 143px, instead of the 43px you might expect of a toolbar, just so the issue would be more apparent.
No, I'm fairly sure you can't do that with an iframe-based approach. That beats the purpose of iframe content isolation - imagine the clickjacking possibilites!
You will need to inject your UI into the document itself.
You probably went with an iframe-based approach because of possible clashes with the page's own CSS, for example. Thankfully, there's a modern tool to help with this - Shadow DOM.
I have a responsive Drupal Zen subtheme that I hacked together about a year & a half ago from some CSS & HTML that a non-Drupal designer handed off to me for my website. I've known that in certain layouts, it is buggy, and needs to be fixed, but I just haven't gotten around to it. After repeatedly reaching out to a local Drupal developer (and offering to pay him), I've gotten tired of waiting, and just need to fix this thing.
My bounce rate for folks on mobile devices is awful.
The URL is http://developcents.com. The homepage looks decent on any device. Internal pages need a lot of help, though, when viewed in certain screen sizes (including mobile devices). Let's use http://developcents.com/blog as an example.
In the below scenario, my question is not how to find the CSS files themselves. Rather, my question is, how can I find the necessary CSS settings using Firebug Lite, so that I can debug the CSS through my browser, instead of having to manually update each CSS file every time I want to test a change?
I can't find the actual CSS-styled divs, blocks, etc... causing the layout to break under certain dimensions. I know how to find, and edit, the CSS within the CSS panel, but I can't track down the specific CSS in this instance.
Additionally, as a secondary question, if you want to provide pointers on what I actually need to change, then please be my guest! But if you point me in the right direction on how I can go figure it out myself, that's fine too. :)
Let's get on to the scenario (which you can easily see by testing it yourself):
When I resize my browser window down to a certain size, the links & tweets section in the left sidebar move over to the right, so that the left side of the navbar aligns with the right side of the header area, while the content spans the full width of the page, except for the left margin, which stays in place but gets wider. Basically everything below the header gets screwed up, and it's easier to see the problems than explain them (so go test it).
Using Firebug Lite in Chrome, I can't seem to find the left margin for the "main" content area (see this screenshot clearly indicating the yellow margin), nor can I find the CSS for the navbar / tweets block (which I presume is some sort of float).
To modify the CSS within Firebug or Firebug Lite just select an element inside the HTML panel or inspect it via its inspector. Inside the Style side panel you'll see all CSS rules applying to the element.
Clicking the name or the value of a CSS property opens an inline editor to allow editing it.
On the right side of each rule you'll see the name of the style sheet, which contains the rule. Hovering it displays you the full URL and clicking it allows you to inspect it within the CSS panel.
You can also edit the styles directly within the CSS panel, which lists all style sheets available on the page.
Note: The changes you do there are not permament, i.e. on the next page reload they are gone! To make permanent changes you need to edit the files on the server.
Also note that I'm referring to the panels within Firebug. The panels within Firebug Lite basically work the same, though may look and work a little bit different. Furthermore Firebug Lite is not maintained anymore, so there's no guarantee that everything is working as expected.
I am building a site using Drupal 7 and have run into a CSS issue. I am trying to wrap everything on this registration page in the center and at the same time reduce the width of the drop down buttons. I believe I've narrowed the problem to my logintobaggan (drupal module) css sheet. But the button "widths" seem to be from the foundation.min.css (according to chrome elements). How would you guys approach this CSS problem? I am relatively new, so please don't be too harsh ;). Thanks!
http://medicaldoctorapps.com/user/register
I would get Firebug or similar in-browser development tool, select the element you are interested in seeing the CSS properties for, and then see exactly which rules are being applied or overridden. You can even modify the CSS right there in the tool until you get want you want.
From such a tool, I can see that the button widths are not explicitly defined, but are basically derived from the amount of padding (5px) around the text string inside the button.
The rules are defined starting on line 41 of this file:
http://medicaldoctorapps.com/sites/all/modules/logintoboggan/logintoboggan.css?mgqhxk
Here is the scenario: I have a div which I pre-load into a page and automatically set it's display property to hidden. I use javascript to pop-up said div. The issue is when clients have CSS disabled they can see the DIV, obviously. What is the best way to have the div (or contents of the div) display only when my javascript function is called?
The best way I could think of is passing the raw HTML to a javascript var and then loading all the HTML using javascript, however, this is a bit slow(theres a decent amount of HTML) which causes the script to break when it tries to reference DIVs that do not exist yet.
any other more elegant solutions?
Thanks
You can wrap html comment tags around it:
<!-- <div>your stuff, which should be invisible</div> -->
Or remove it completely from the DOM
http://plugins.jquery.com/plugin-tags/html-comments
Maybe, here some related stuff
If CSS is disabled, then the only way to hide the div is to remove it from the DOM.
You can set an inline style on the div (not recommended but your case is an exception anyway).
You can use JS/jQuery on page load to hide the div but it'll cause the flicker effect (div wiil be visible momentarily until the JS runs to hide it).
You want to have a div on your page when the page loads so that users without javascript can see it, perhaps to indicate them that some of the site functionalities require JS to work.
If you need to use that div exclusively with JS then having it already on the page is a bad approach imho. You should create it on the fly, at least the content.
This way you will ensure users without CSS won't see it, while still being able to show it for the rest of the people with JS enabled.
Set the height of the div you wanna hide to zero using javascript.
$('#mydiv').css("height", "0px");
I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.
There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.
Thanks!
When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.
// detach iframe
_frame = $(_viewerFrame).detach();
function reattach(frame) {
// append it back to the div it was in (reattaching essentially)
$(_viewerDiv).append(frame);
setButtonStates();
setViewerState();
}
function onOk() {
... // other code
reattach(_frame);
}
function onCancel() {
... // other code
reattach(_frame);
}
// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...
Hope that helps...
This is likely because PDFs are displayed in a plugin, rather than natively in the web browser. CSS will not have an effect on this, because CSS only applies to content rendered in the web browser. Google does have a system that converts PDFs to HTML for display in browsers, at which point there would be no z-index issues, but some formatting may be lost in the process, and of course it is no longer a PDF document. Unless there is some way to tell the PDF plugin itself to lower its z-index (and consider that not all users will be using the Adobe plugin, some may use Foxit or other programs) you may be out of luck.
Try position:relative and z-index adjustment to get it in front of the iframe.
You're showing a pdf in an iframe? I'm guessing it has some sort of flash viewer? If so, then make sure you set the wmode of the flash embed code appropriately.
http://kb2.adobe.com/cps/155/tn_15523.html