This question already has answers here:
Can you make hovered state in Firebug "sticky?"
(5 answers)
Closed 9 years ago.
I'm making a custom CSS theme for Facebook and I'm trying to view the CSS code for the little pop-up that happens when you hover your cursor over someones profile picture. I'm using Firebug to view the CSS code. It's viewable, but I cannot view the CSS code fully, because once I take my cursor off the profile picture, the pop-up disappears, then Firebug doesn't display the CSS code used for it. So is there a way to freeze open the JS so when I take my cursor off it doesn't go away? Or is there anyway to freeze the pop-up open?
Using Google Chrome:
Go to Facebook
Press F12 to open Chrome Developer Tools
Go to the Sources tab (helper screenshot below):
After having clicked on the Sources tab described previously, make sure you DON'T click anywhere on the page. Go hover over a profile picture, and while the pop-up is open, hit F8 and move the mouse a little bit (like 1 pixel).
The page should now be frozen. You can go to the Elements tab, press CTRL+F and search for some text that's inside the pop-up. This way, you will see the corresponding HTML and you will be able to view without constraints the CSS.
If you want to resume, you can go back to the Sources tab, and hit the resume button on the right.
Related
first time here and completely new to coding. I want to track button clicks on my website in Tag Manager. The button is a thumbnail in an image gallery. It's the only video in the gallery and I want to see how popular it is compared to the images. The trigger type is 'All elements' and I tried to use Click Class as a trigger. The problem is that all the thumbnails in the gallery have the same class. So there is no way to identify the video thumbnail. Can't use Click URL either since it's not a link. It doesn't have an ID either. Any tips?
What you need here is to use a more specific CSS selector to the element you're wanting to trigger on. Most modern browsers can help you out there. If you right click the element you want to capture clicks on, you'll have something along the lines of "Inspect Element" as an option.
Chrome Example
In Chrome, this appears at the bottom of the list under "Developer Tools -> Inspect" as I see when I do the same for the Ask Question button on this page.
Firefox Example
In Firefox, this is just the Inspect option at the bottom of the context menu.
Other browsers will generally be similar. Selecting that option will open the Developer console, but will generally auto-select the element you selected from the page. In Chrome (again, other browsers will be similar), right click the element and select Copy -> Copy selector.
This will copy a more specific selector than just the element's CSS ID to your clipboard. You might want to copy this down somewhere temporarily.
Back to GTM - You're right that you want to use the "Click - All Elements" trigger type here. Select the "Some Clicks" option so we can apply a filter to the event. Set the left-most option to "Click Event", the middle option to "matches CSS selector" and the paste the value for the CSS selector you've got in your clipboard. Save that, and you're good to go!
Now, this assumes that you're not doing a lot of dynamic work on your page. The CSS selector your browser gives you will be accurate for that very moment, but it may very well specify classes that change dynamically (e.g. if you're using a single-page application like Angular or Vue), so you might need to tweak it a bit to be generic enough that you can capture the element, but not so specific that it looks for a particular class that might change each pageload.
I'm writing a Firefox (web)extension. I have a browser_action in my manifest.json, with a default_popup. I want my extension to be accessible by all users, including those with vision impairment.
So I'd like to, as I change and develop things, test what it's like to (for example) interact with this feature, using only the keyboard. How do I do this? How do I focus and thus "click" the toolbar button, without a mouse?
Ideally, without actually running special screen reader software every time.
So I'd like to, as I change and develop things, test what it's like to
(for example) interact with this feature, using only the keyboard. How
do I do this? How do I focus and thus "click" the toolbar button,
without a mouse?
You can use commands to set a keyboard shortcut.
_execute_browser_action: works like a click on the extension's browser action
You may also add commands.update() (Firefox 60+) API to let users change that keyboard shortcut.
Thanks for considering accessibility. Just to clarify, because I don't think you meant this, but you can do keyboard testing without a screen reader. Just don't use your mouse :-) Seriously.
In my current firefox, I have an address bar, the search field, then a bunch of plugins on a toolbar.
On a PC (should be similar for a Mac, but Cmd instead of Ctrl):
I can move my keyboard focus to the address bar with alt+d or ctrl+L (cmd+L)
I can move my keyboard focus to the search field with ctrl+k (cmd+k)
Interestingly enough, I could not get my focus on the toolbar. I could have sworn I could tab from the address field, to the search field, to the toolbar, but it's not working now.
If you can get your focus there, then you should be able to use the left/right arrows to move between tools and then space/enter to select the tool.
If you want to play with a screen reader, NVDA is free.
A webpage I'm accessing via Chrome, has a countdown timer which refreshes and updates the page/data every 10 minutes. I would like to edit the page locally to change this update frequency. Using the Developer Tools, I've found the variable which needs changing:
var updatefreq = 600;
However, it seems I'm unable to do any edits. Under Sources in Chrome Developer Tools, I can edit various bits of javascript code, however the page is in .aspx, and I can't seem to edit it. Is it possible to get around this?
Under the sources section of DevTools Click on pause script execution. It's on the right column at the top. It is the button farthest to the left border of the right column that looks like two vertical bars. [The keyboard shortcut is f8]
I have a mobile website that my customers can navigate to through the web. I would like to be able to add an icon shortcut to their phone so that once they click on it they will go directly to the website. I was wondering if there is a way to make this easier? For example, when they visit the mobile website for the first time they click on a button and the script behind this button will automatically download my icon, put it on their smartphone, and link this icon to my mobile website. Can someone advise me on how to do this?
I was just googling this same issue and I found this site... http://socialmedia.biz/2012/02/21/encourage-visitors-to-save-your-site-as-a-mobile-shortcut/
Not sure if it's exactly what you are after, but it sounds about right.
Iphone
Step 1: Make sure Safari is active. Do this in settings.
Step 2: Open Safari and key in-your desired web page
Step 3: Once the site displays on the screen, there is a selection in the very middle at the bottom. Hit it and a screen will come up showing various icons.
Step 4: Find the one with a plus sign at the bottom that says add to screen Select it
Step 5: You will see that now you can just tap that new shortcut to get to the web page.
Why is there no way to show the bookmark panel in Adobe Reader 9?
Looked thru all the menus/properties/preferences.
There is no option to select Bookmarks under
View >> Navigation panels >> (nothing for bookmarks here)
Using Winnovative pdfConverter and trying to convert html code into reports.
Does adobe reader require there to be Bookmarks in the document for the panel to be an option?
Or is this seem feature I need to pay for from adobe?
Yes unfortunately there isn't any option of adding bookmarks in Adobe Reader but there's a way around this. All you have to do is check the first option in Edit -> Preferences -> Documents.
Here's a complete article on how to do just that:
http://www.programmerfish.com/how-to-add-bookmark-in-pdf-adobe-acrobat-reader/
I am providing an answer related to Adobe Reader X (I do not have Adobe Reader 9 to test it). It might be relevant.
There are two options for showing the Bookmarks panel:
Right click on the leftmost sidebar.
You should see the bookmark icon and activate it. If it's not showing, then there are no bookmarks in the document.
I just checked it with two pdfs, one with bookmarks and one without them.
View -> Show/Hide -> Navigation panes. Again, you should see the bookmark icon and activate it.
Item 1 taken from here.
There seems to be no way to ADD bookmarks in AR9. Obviously AR9 is only of interest under Linux. HOWEVER you can display bookmarks if they are already in the document e.g. TOC. They show up under View-> Navigation Panels
In my case dealing with a long document that did not have bookmarks, I simply moved it to a PC with Acrobat on it added the bookmarks (chapters) and they show up perfectly in AR9.
I know you wanted to know how to show the bookmark panel in Adobe Reader 9; however, I am going start here (the answer to your question is at the end of this explanation): To add a bookmark in Adobe Reader 9.0, open the pdf, go to the desired page, right-click anywhere on the page, select Add Bookmark (or press Ctrl+B). You can set a zoom level for the page and it will also be saved with the bookmark. You should then name the bookmark by clicking the bookmark button in the Navigation Panel on the right side of the document. Note: Once you click on Add Bookmark, the Navigation Panel will open on the right side of the document. You can then rename the new bookmark (it will be named Untitled) along with other options. After renaming, you can click on the arrow at top right of the Navigation Panel to close the bookmark section of the panel. You can hide the Navigation Panel Buttons; however, if left open, you can choose a bookmark by clicking on the Bookmarks button (2nd button from top). If you do choose to hide the Navigation Panel, to reopen it you will have to go to the View tab, Navigation Panels, and choose Show Navigation Pane (or press F4 while in the document).