Here is the issue I am having:
One of my webpages overflows on the x-axis, meaning I have to scroll left or right which in effect causes other issues.
I started disabling all the css stuff for that page, but I still continue to see the scroll bar at the bottom.
How do I find out which element/html code is causing this? There are literally hundreds of lines of code.
Thanks
Bruce
If you're using a WebKit-based browser, try the Web Inspector. If you're using Firefox, try using Firebug.
Regardless, either of those tools should have some way that lets you see the HTML of the page. In both of these tools, when you hover over the element in the inspector, it will highlight the element on the page. If you just move your mouse down over the elements, you might see one pop out of the confines of the page. If that doesn't find it, you could try right clicking on areas of the normally-out-of-view part and clicking Inspect Element. If you get some specific element, that might be causing the problem.
Depending on the browser you are using, there are multiple methods via an 'element inspector'. A helpful bookmarklet that I have found is XRAY. Simply enable the inspector or bookmarklet and simply highlight the designated area that you wish to inspect.
Related
So, one of the things I hate about the Chrome Dev Tools is this:
Basically, when the html is deeply nested the elements tab starts to wrap lines to try and fit everything in the panel, instead of using an horizontal scrollbar, which would make much more sense here.
I can't believe such an awkward layout is intended, it's literally unreadable... is there a setting to prevent this?
Found a setting in the DevTools that solved this issue:
If you uncheck Word wrap everything should be fine.
The setting is located here: DevTools Settings > General > Elements > Word wrap
Enabling word wrap technically solves the problem, but leads to another equally annoying situation, the "horizontal scroll hell" mentioned by user karvonen.
But it turns out Mozilla devtools avoids both problems quite ingeniously by only adding a horizontal scrollbar when the nested elements get too far. I switched to Mozilla devtools just for that:
My website sometimes bugs, making it impossible to scroll the page using the mouse wheel, touchpad or finger. Dragging the scrollbar, pressing space or pressing page-up/down does work.
Any suggestions on what it could be, or how one would go about fixing such a bug?
There dosn't seem to be any specific action or page connected to the bug, it only happens about once every other day, and has happened on several devices, OS-es and browsers (even iPads and Android, IE11 and firefox).
Even hard-refreshing the page, or browsing to another page on the same domain dosn't fix the bug.
I've tried disabling Javascript in my browser, clearing all site data, scrolling with the touchpad instead of mouse, have checked the "html" and "body" elements for CSS rules that might block scrolling and even removed all html from the page and replaced it with mockup html.
I know the question is vague, with no example code, and I can't give an URL.
If anyone can point me in a direction, or have any tips, please help.
I do face the same situation, and what I do in such situations is:
Press the mouse wheel.
Move the cursor up and down on the page, still holding the wheel, till the page scrolls.
Let go of the mouse wheel.
You will now be able to scroll using the mouse wheel.
P.S: I'll edit this answer after some time with pictures and more explainations, till then, this should work.
Is there a way to force inspect element via Chrome to ignore a certain element?
I've often had a need to put an overlay over the entire site (say for development purposes) and the only problem is my development workflow suffering due to "inspect element" always targeting that top level element.
I guess another way to ask this question is, how do I place an overlay (site PSD) over a live site, without it affecting my inspector workflow?
Thanks for any suggestions!
I just tried :before, which allows text selection / doesn't appear in the inspector, but it's still caught.
Was just looking at my old answers, and not sure if it's just new chrome behavior or what, but Chrome's inspect element respects pointer-events: none;
I imagine you're talking about using the right-click option to inspect element or the magnify glass to select an object on the page. I don't think there is a way to prevent it from working that way without a little work on your part.
You could have a button that turns on and off that overlay locally for you (or a JS snippet that you can run in the console to delete the overlay).
You could select the overlay and then in the inspect element portion of the tools right-click the object and delete the node (as long as it isn't the parent of all the other content). Then you can select the object on the page.
Or you can just inspect the element (the top one) and then drill down in the DOM tree in the inspect element tab of Chrome to your element. One nice thing though, if you do it this way when you refresh it should take you back to that element in the inspect element tab (unless it's really complex with iFrames loading on the page, in which case it won't do that).
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.
I was wondering, normally chrome extensions appear in their little area below their icon, but how would I make one that has it's own little space on a side of the browser, like FireBug lite does for chrome? Where it pushes the page up and docks at the bottom.
I have seen the sidebar in the 'experimental.sidebar' chrome api, but I don't want to use it because you have to start chrome with the command line switch --enable-experimental-extension-apis, and not many people would do that.
Basically, until sidebars graduate from experimental status, you use a content script to set a big margin or padding on one side of body or html, inject a position: fixed element into the current page overlaid on that margin, and then draw to that.
Anything that needs to persist between pages gets stored by the extension and you re-create the pseudo-sidebar every time a page is loaded.
See the Firebug Lite or StumbleUpon extensions for examples.
People usually use DOM manipulation. You can take a look at FireBugs source to see how they did the DOM. It is quite slow, but until the sidebars go out of experimental, that is the only way to do it right now.