We are trying to get jCarousel work in IE (ver 11) but cant find out how...
When you go to http://cis.gefco-czech.cz/ you can see the first image (or other images) are cut in the middle and right side is white. When this image is shown again, after all slides were shown, this image is magically showing as it is supposed to be.
Do you have any suggestion how to fix this bug?
It works perfect in chrome and safari...
you have markup errors... (validator.w3.org/nu )
first set up ie to record scripting and markup errors.
Tools>Internet Options>Advanced tab, check "Always record developer console messages".... save changes.... Now you can open your dev tool in IE and the Console tab will list otherwise suppressed error messages.
HTML1300: Navigation occurred.
cis.gefco-czech.cz
HTML1423: Malformed start tag. Attributes should be separated by whitespace.
Put a space between the id and class attribute. eg. sb id="123" class="someclass" not
id="123"class="someclass"
Related
Debugging a page where I see that there are two calls made to the page, one is the initial call and one is made when the first has been recieved and the browser parses the document. I am however having trouble finding the source of the second call. I have built the javascript i dev mode so I have sourcemaps but the call seems to be originating from the html code itself. Looking in the Network tab of devtools I see this
in Chrome and this
in Firefox
Firefox seems to identify the Initiator as image but no more details as to what image.
What should I look for in the code to find the source of the call? Is there something else I can do to get more details of where the call is made from?
Update:
Clicking the initator item in Chrome marks the first Doctype line in the document
That the request is recognized as an image is an indication for either an <img> HTML element or a url() CSS function that has a URL that references the document itself instead of an image.
Check the HTML
From my tests, this does not happen when the src attribute is empty but it happens when you set it to an anchor on the page.
So, in order to find the culprit, go to the Inspector (Firefox) or Elements (Chrome) panel, press Ctrl+F (Windows, Linux) or Cmd+F (macOS) and search for img[src^="#"]. That finds all <img> elements that have a src attribute with a value starting with a hash.
Check the CSS
Browsers (incorrectly) send a network request when the CSS url() function is set to an empty string, i.e. url(), url(''), or url("").
To check whether it is set within the style attribute of one of the HTML elements, search for url('') and url() within the Inspector as described above.
If it cannot be found there, you need to search within the style sheets.
Chrome
In Chrome this is possible by pressing Ctrl+Shift+F (Windows, Linux) or Cmd+Shift+F (macOS) while the focus is within the DevTools. Doing so opens a search tool that allows to search across all loaded sources. Type url('') in there and hit Enter. If nothing is found, try it again with url("") and url().
Firefox
In Firefox there's no such global search yet (as of Firefox 85), unfortunately. Though there are two ways other ways to search through the style sheets.
Via the Style Editor
The Style Editor allows you to inspect the style sheets, though you have to search in each one separately by selecting it at the left side and then pressing Ctrl+F (Windows, Linux) or Cmd+F (macOS), typing url(), url(''), or url("") and hitting Enter.
Via the Network Monitor
There's a feature that allows you to search through the network request reponses within the Network Monitor. Click the magnifying glass button, which opens the search tool. In the input field type url(), url(''), or url("") and hit Enter.
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.
My problem is this - when I click the down button on any input control on my form in Chrome a popup window is displayed. I am positive my code does not do it. The fact that it happens only in Chrome makes me think of some misbehaving Chrome plugin/extension.
Anyway, I would like to see the HTML element responsible for this popup. However, I cannot find it in the dev tools and trying to focus on it does not work - the popup closes the moment I click the page.
So, my question - is there a easy way to get hold on this HTML element without clicking the page?
I am using Chrome 23.0.1271.64 with the following extensions (according to the Chrome itself):
Advanced REST client 3.0.30
JSONView 0.0.32
OneClickDownload 1.2 Web
Developer 0.4.1
This looks just like the standard input field suggestion box. I suspect it is not part of the web page. Therefore it won't appear in the DOM and you can't style it, because it is part of the browser not the web page (although it appears over the top of the web page).
You can suppress it by putting the attribute & value autocomplete=off on the form field, although that is from HTML5 and will not work in all browsers just yet. See Is there a W3C valid way to disable autocomplete in a HTML form?
In the Chrome web browser, if you're somewhere in the middle of a webpage, and click there to indicate where you are, and you start searching for a string using ctrl-f, the search always starts from the beginning of the webpage. I used to mostly use Firefox, so this is surprising for me because, in Firefox, this works as expected - the search starts off from where you clicked. Is there any way to get the same behaviour from Chrome?
Thanks in advance.
nope, but it is requested: https://productforums.google.com/forum/?fromgroups#!topic/chrome/h9cZN8WOBhw
I suggest you second the request.
Edit: third it
How do I hide the annoying yellow box that appears under html fields when I hover over elements in the Chrome "Developer Tools" elements panel - it's driving me nuts as I can't see the bottom of my labels etc...
From the posted bug: "https://code.google.com/p/chromium/issues/detail?id=282493". If you hold keyboard Control (Ctrl) key before hovering the element (or command on a mac) the tooltip won't show. Not the ideal solution but it works as long as you know about it
You might want to check Chrome 16 which got an improved element tooltip. Please comment on the bug and mention specific issues that you want to get fixed.
You can pretty easily tweak devtools yourself. Basically, follow these instructions to get started.
Then, inside inspector.js, tweak WebInspector.highlightDOMNode, by applying this small patch.
1150,1151c1150
< // Do not highlight the DOM node.
< //this.highlightDOMNodeForTwoSeconds(nodeId);
---
> this.highlightDOMNodeForTwoSeconds(nodeId);
Fore more info, check out this post on extending Chrome DevTools.