There's an element that appears on the site, but I can't seem to find it in the inspector of the browser. I would like to hide it somehow.
On this page: http://gdhbau.hu/#bemutatkozas
It is the "BEZÁR" word with white color, next to the "Becsuk" button, when clicking on the "MÉG TÖBB" button (to expand the content).
This problem shows up when I turn on the "Automatically add paragraphs" in the WordPress SiteOirgin editor; but I need to use it, otherwise the content falls apart.
EDIT: This is with the plug-in called: "Collapse-O-Matic"
You will never find it since it's not an element.
It's part of the image in the background http://gdhbau.hu/wp-content/uploads/2018/03/bemu-bg-large.jpg
Related
I am using Google Analytics on a Sharepoint site. On the main page, we have an image in an image carousel that once clicked will bring you to a different page on the site. I have tried everything to track clicks on this image in GTM - click url, click ID, css selector, etc. I can not figure out why my trigger never fires. I have attached the
image, what pops up when I click inspect, and variables that show up with the click in GTM preview... (This is the second half of the variables in preview).Three images total.
Good job on including all the relevant debugging info.
Judging from your inspect, you're looking at the image.
However, judging from your click event inspection, the click lands on an a.
I don't see the a in your DOM on the screenshot, but it may be either dynamically added, or just outside of the screenshot.
No matter. Let's start to carefully debug it. Make a trigger that would be triggered on anything that matches a. That's just a debugging trigger. Make sure it triggers on your image clicks.
Now, let's just make a simple CJS variable that would console.log({{Click Element}}). No need to use it anywhere, just make it. Go to the debug view again, try clicking the banner again and look in the console for something that would look like this:
See that pretty element? Now the wonderful dev console allows you to copy JS path to this element and do whatever you want with it. Mainly, comfortably and quickly test CSS selectors against this element. I suggest changing the selector JS console generated. It should work (unless the page is too dynamic), but it would be fragile. Having the element, however, you'll be able to make your own selectors.
I am making project in Angular 5. When I inspect the CSS there is tag. If we want to change or find out that CSS is coming from which file basically or which line number of that file (like we do in normal html page). How can I find it?
With angular, the CSS is injected straight into the html page during compilation.
Therefor it's not possible to see where the CSS came from with the DevTools.
However, it is possible to see the CSS styles applied to an element, if you want to find out which file it came from, you will have to search the project.(ctrl+shift+f)
If you're using Google Chrome, you can use the developer console. Safari has a similar interface, but I'm not as familiar with that.
To access the developer console on Chrome, use keys Cmd-Option-I and you should see a console pop up on the right of your browser window. Next, if it isn't already selected, select the Elements tab at the top. You should now see the html that your browser rendered into the site.
Next, you'll want to select the element you want to inspect. You can either do this by accessing the nested HTML structure directly, or if you select the mouse icon at the top left of the window, you can select an element on the webpage and it will be expanded in the developer console.
Once you've selected an element (it should be grey/blue highlighted), you can see its styling at the bottom of your tab. The styling is in decreasing hierarchy order: the top elements override the bottom ones. You can see the styling is grouped based off of the id/class that it is applied to and at the top of each section is the file line of from which the styling came. Click that link to see the file!
I have a webpage on which if a tab key is pressed when in the last textbox a side pane from the right slides(like a side menu).
In chrome development tools I can see it is an aside tag with classes control-sidebar control-sidebar-dark but setting DOM break points(subtree & attribute) on the aside tag is not capturing anything.
On looking into DOM it seems like it is not being manipulated at all(which I expected sliding in should be doing) as I do not see the color blink on HTML tags that chrome developer tool shows for the affected elements.
I was expecting the javascript to be handling the sliding in of the aside tag but how could it be determined in this scenario? Could this be due to CSS only animation or something if yes than how to debug that?
I also tried to record in the animation tab of developer tools but it also stays blank.
This is happening on a privileged section of the site so I m sorry for not being able to put code sample or URL.
PS: The template is some modified version of http://www.ampleadmin.wrappixel.com/ampleadmin-html/ampleadmin-rtl/index.html(the navigation panel on right) but it is getting recorded in dev tool animation panel while mine doesnt.
I found out the cause. There are anchor tags inside the panel which get focused on when the tab is pressed from last textbox. There was no animation,CSS or JS involved.
Anchor(A) tags are focus able by default and the panel dont slide in when they are removed.
I see this type of menu all over the Internet as a way to filter out data:
Does it have a specific name? I'm particularly interested in seeing how the pushed in effect is achieved. I've gone through the Chrome developer tools but viewing the CSS applied Chrome only returns a few classes and not the id of the element.
The menu type does not have a specific name as far as I know (although for all effects and purposes it is a set of radio buttons).
The pushed in effect is caused by an inset shadow and darker background color.
Here is a JSFiddle.
That menu is from Google maps.
It is what I might call an "icon" menu.
Buttons are not pushed in.
Instead, the images are swapped in and out depending on what is chosen.
Javascript is used to change the images and the content below the images.
Use Chrome and go to Google Maps. Type in an address and then click Get Directions. Once the buttons appear, right click on one of the button and choose Inspect element. That will show you the code that Googe is using.
The pushed effect is simply an image applied to the element when it's clicked
They're usually done with sprites
Here are some sprites from google
When the image is hovered/clicked a different spot on the image is used as the background for that element.
I'm dynamically generating an imagemap for a chart tool I have.
I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.
So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?
What about using JavaScript (and jQuery) to test it?
http://davidlynch.org/js/maphilight/docs/demo_usa.html
This plugin will highlight image map areas.
You can use FireBug for that:
Right-click your image and choose "Inspect Element with FireBug"
In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
You can now place your mouse over each area tags to see them highlighted over your image
One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.
This solution unfortunately doesn't work in Firefox.
Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.
In Chrome you can select the area of the image map and click on the three little dots
to the left and then select "focus"
Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.