Get firexfox developer toolbar on a different tab or popout - html

I hope the question police have something better to do while I can get some much needed information.
I try to do my HTML and CSS on firefox using the Web Developer Toolbar addon. It saves a lot of time but I have a very simple question. I have searched all the options in the addon. Is there a way to get this thing to pop-out like firebug. Cause it takes up half the screen while doing the page and that becomes a pain really fast.
I know its a very simple question but if you can help me out, thanks!

I played around with it and it seems you are right. It doesn't have a "separate window/tab" feature. But here are two thoughts for what they're worth.
I assume you have dual monitors cuz of your question. There's a [position] icon next to the "Edit HTML" and "Edit CSS" tabs. (it looks like a lil window with a green arrow. Click on it to reposition the editor to the left or right of your browser, then minimize FF and stretch it across your monitors :D haha! but seriously, I tried it and it works perfectly!!
Lame answer: If that doesn't suit you, ask Chris Pederick on the WDT forum: http://chrispederick.com/forums/
Good luck!!

Related

why is my mouse doing weird stuff when i'm coding ? (flickering? blinking, maybe?)

I'm sorry since English is not my first language : and since I can't even describe what's going on in my native language, this is going to be complicated.
I'm coding a website and everything was ok so far. But at some point, I attached a link to an image and used hover in css so the picture "shines" when the cursor is on it. The only problem I have is that, when the mouse is on the picture it kinda "panics?" and starts to changing from normal mouse to the pointing finger really quickly. I also struggle to be able to click on the picture when this happens. (I'm on macOS Monterey 12.2 btw)
Since I know I explained that terribly, here's a YT Video showing my problem.
Thank you and sorry again for the whacky English.
Edit 1: Ok so I'm using Brave Browser, and this problem doesn't happen on Safari when I tried it on there, so I really don't know if it's my browser being weird and if I can fix this in any way

Strange display/rendering issue on Google Chrome that varies by device/OS

They say a picture is worth 1,000 words. Let's hope so.
To be clear, I am unable to see the drop shadow around the document, grayscale on the document ruler, and gray etchings/borders on the menu UI. Basically, everything is whitewashed. I am incredibly bamboozled.
These are the facts as they stand:
This problem occurs on my desktop (Ubuntu/Windows10), but not on my Macbook Pro (Catalina). All OS are using Chrome that I have signed into.
I have disabled all of my Chrome extensions and experienced the same issue.
I have used multiple monitors and experienced the same issue.
I have disabled my Chrome theme and experienced the same issue.
If I were to take a screenshot of just a select portion of the screen, the very act of that bounding box reveals the missing grayscale and shadow! However, when the screenshot is actually taken, everything is whitewashed. Similarly, if I click "Send Feedback" on Google Docs, a menu UI pops up, the rest of the web page is grayed out a bit, and all the missing grayscale and shadow suddenly becomes visible.
This happens on other web pages. The best example I can give is dndbeyond.com - I cannot see the little checkboxes for my spell slots because they are whitewashed and do not have the drop/box shadow.
I hope I've presented the information correctly. I don't know much/anything about what's going on here and I certainly lack the vocabulary to be successful at Googling my answer. Any help would be greatly appreciated. Thank you!

navigation button images disappear on mobile when hit back button in browser

I'm an amateur web designer with HTML experience mostly. I'm building my own website for a hobby, and ran into this snag. I've only recently noticed it though, so I'm wondering if it has anything to do with the recent iOS update?
Like the title says, when I go to my website, everything is fine. Then I click on one of the links to the "Contact" page, let's say (or any of the links that take you to another page), and then hit the browser's back button to go back to the previous page, the button's image I had just clicked on ("Contact" button) has disappeared and I'm just left with the button's name I named it. This repeats for every button I click and then hit back in the browser. This only happens on mobile devices though (I've only had the opportunity to check on an Apple phone and iPad). It doesn't happen on my laptop. I've tried searching for answers to this, but can't find any. I've only just noticed this happening though, which leads me to believe it might be a software update issue? Although it's entirely possible I just never noticed before.
Here is my website so that anyone interested in helping can take a look and let me know what you think might be the problem/solution. Thank you very much for any help you may be able to provide.
https://www.atomicorchard.com/
It's okay on my end. Try optimizing your images and check your JavaScript. The problem may be occurred once that script is being executed. And try adding media queries.

Chrome and div background layers not loading properly

This is a very weird thing that i've experienced . I've been working on a project lately www.bandness.com, which allows music groups and bands to upload their music. The artistic department has been very keen and precise and they've done an incredible work that allows the bands to have gorgeous profiles .
However, when on Chrome (i've noticed this only happens in chrome), when you enter a profile the background image doesn't load properly until you scroll over it or you "select" the div layer or the ones on top of it.
here are some examples of what i'm talking about
you need to select the layer so it works properly, and that is bugging annoying!!
here you have another example
and this is how the website should be seen without the bug in the left screen
Why does this happen?
The website is www.bandness.com, click on any of the groups where it says "TOP 5 GROUPS" or on the group for each song in "TOP 5 SONGS" and you'll probably spot what I'm talking about.
This has happened to me in chrome, on a macbook pro with the latest OS release. As well as in Windows 8. It bugs me because I have NO idea what is causing this and I fear a chrome bug.
How could it be fixed? Any suggestions are appreciated, I thought of using jQuery to make the layer dissappear/appear or something like that... but i'm unsure of whether this will work.
Ok, so I'm posting this as a help for anyone that suffers the same consequences of this bug at any time.Bear in mind the answer implies using jQuery.
As Christopher kindly pointed out earlier, I tried to do $(SELECTOR).hide().show(), but that didn't make it.
Then I decided to try with $(SELECTOR).hide(100,function(){$(SELECTOR).show()}); ensuring that the effect of showing only happens once the div layer has dissapeared.(that way it actually appears and dissappears).
The solution worked, however this should not be needed and it doesn't provide an answer to why this is happening, but it "kinda" makes the trick .
$(SELECTOR).fadeOut(100,function(){ $(SELECTOR).fadeIn()}); makes this happen in a much fancier way. Again as I said this isn't a fix, it's just a workaround that might get you somewhere if you ever suffer this problem!

mobile web, radio buttons vs select/option

A bit of a random questions but here goes.
I am re-developing a website to be mobile friendly and it has a massive form with lots of <input /> tags. as I Was researching similar sites and there solutions I found that <select><option>... are a bit intrusive and radio buttons worked better for me.
As this will go in a report I don't think saying "the best input method is radio buttons as I like then" will cut it somehow. does anyone have any good suggestions on what is the "best" way? OR is there a way of getting a vote going?
any help or direction is (as always) appreciated
Update: As I think of it, smart phones convert a drop-down list into a set of radio buttons and shows the user that in a similar popup/dialog box to the keyboard. is this a good excuse? hehe :)
This is a UI/UX consideration, plus you have to take into consideration if more select/radio options will be added in the future.
If there are more than 3 or 4 selections I would make those elements selects from a UI/UX standpoint.
Mobile browsers have no problem displaying any sized select, there are some jQuery plugins that you can find that will offer alternative interactions.
If more select/radio options are going to be added down the road (from a database for example) then radio buttons won't be a good choice. Nothing like trying to select from 15 radio buttons.
In the end I prefer to let the browser take control of the select and display it to its default setting. Trying to style over or replace a select with a third party solution can get a bit sticky when going cross browser.
Hope this helps to answer your question.