I have been making a simple website with AngularJS and D3JS and created a custom circle mesh library (very crude). It all works fine in Firefox but it doesn't work in Chrome. The website is up at petoknm.github.io . In my homepage I have this circle mesh thing that displays the circles. But when I transition (directly) to another page with this circle mesh (programmming page) it starts behaving differently. And when I go from programming to home it starts to ignore the clipPath on the first two images (two probably because of the two images in the programming page). The svg is identical (I checked only the first three 'a' tags with the images and the first three clipPaths) to the correct svg that was there first... I don't know what happens.
This is a screenshot just after first loading the page
http://i.stack.imgur.com/2fAI6.png
This is a screenshot after coming from the programming page
http://i.stack.imgur.com/JLO3r.png
As you can see the clipPath is still in the svg and "shown" by Chrome but is not actually used (or is ignored).
Please help, I have no idea why it happens and why it's no problem for Firefox
I'll make an educated guess and say it's because your programming page is reusing ids "#clippath0" and "#clippath1". Because it's a single page site and you are replacing the parts of the DOM that contain those references, perhaps there is a bug in Chrome where it getting confused over what they point to.
Try using different sets of ids for each page and see if that fixes it. Maybe you could add different prefixes for each page (eg "#homeclippath0" and "#programmingclippath0").
It does seem like a bug in Chrome though. Perhaps you might want to report it.
Related
I am currently building a site. When I refresh the page (as seen below), the two boxes with the brown outline start out at what seems to be 100% width, but then they re-size after about 1-2 seconds, and there is a small gap on the right hand side.
I'm pretty sure this isn't happening via the CSS, as there is a delay and I've looked through it all myself and can't find anything.
I am using Google Chrome's Developer Tools - is there any way that I can view any related JavaScript being ran on refresh that may be affecting these elements?
You can use a chrome extension to quickly turn off javascript. If the problem dissappears, you know that javascript is causing the problem. If the problem is still there, then it is a CSS issue (which I think is the case, but we can't solve that for you as you didn't provide the code).
here is a link to the javascript switcher extension:
https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje
When I want to simulate a website and I know there is some effect done via Javascript, e.g. the mouse hovers over a menu category, the sub menu automatically drops down and changes the menu category's background color.
But how can I know in exactly which line in which Javascript file this effect is triggered? This leads to a follow-up question: when I debug a page using Firefox's built-in debug tools, are all JS files of this page downloaded to my local machine? Does this mean that when I'm sure about some Javascript effect taking place, I can find that code on my machine?
Yes, your browser downloads every Javascript file. That doesn't help to find the source of the effect you're interested in, however. You can just do that in your debugger.
To find the file that causes the effect you're interested in, make a copy of the page and comment out Javascripts until the effect disappears. For maximum efficiency, use binary search -- comment out half of the files to see if it's in those, if not comment out the other half, then comment out half of the remaining, etc. (Dependencies will make it a little more complicated, but you'll figure it out.)
To find the line, once you have it down to a file, put a breakpoint at the top and step through with the debugger until you see your effect occur.
I'm just learning three.js and so far everything has been going good except for when it comes to textures. Whenever I try to apply a texture it doesn't work. And that's when I'm basically copying and pasting tutorial codes to tweak and all I'm doing is changing the image to one I have. The weirdest part is when the pathname is incorrect, it displays the object (in this case, the floor plane) all black as expected but when it is correct, nothing is displayed except the axes for direction. The tutorial is here. It's lesson 1 (though I've gotten to lesson 6 using plain colors as substitutes for textures), and the source code isn't on the page; you need to right click and view the page source. The part where the code applies the checkerboard texture is near the end in the section called 'floor'. Also, I even tried seeing if it was because it didn't load before it rendered but that's not the case.
Thanks
I'm trying to render a menu containing check boxes something using JQuery according to a defined template in a div. I have a search box which will narrow down the menu.
There is something strange happening. When I have huge list of menu items (around 5000 items), it renders fine initially. Then if I type something and narrow down the result, it works fine. But when I press backspace and go back to the full list of items, the div gets displaced for a second and reappears in the correct position.
I have no clue of whats happening. Any pointers on where to look to debug will be helpful. Thanks!
Take a look at the Chrome Developer Tools. There's a ton of things in there you'll probably never use, but for this task I'd have a look at the elements tab and also the scripts tab to pause JavaScript events and inspect the DOM elements' styles.
This is a generic answer to a generic question though. If you're using Firefox, check out Firebug, but I prefer Chrome's tools and find them better integrated and user friendly, mostly from having used them a lot more.
I am new to web design so I wanted to learn more by looking at other websites and using their techniques. Now I am currently using blogger platform and wanted to copy an entire gadget from another blog http://gmailblog.blogspot.com/. I am trying to copy the right floating sidebar gadget to by blog.
To do so, I think I will have to copy the CSS codes, html codes and javascript if it is used. Is there a simple way to find all those codes and copy those to mine? I did try using the inspect element function of google chrome but was unsuccessful.
Any help?
Inspection elements are probably your best way to go, but a decent grasp of CSS and HTML would be required to get you started on that. Toggling styles on and off to see what happens is a good way to start poking into existing solutions.
When it comes to JavaScript parts of a feature, the inspection tools will probably not get you all that far.
For deeper introspection, you could always save a local copy of the entire webpage, remove bits and pieces, and see at which points the feature breaks; keep the things that seem to be required, and continue until you seem to have stripped the site down to the bare minimum to keep your feature working. From there you can move on to see if you can understand what the different parts of the remaining code does.
For your specific gadget, some key aspects include:
#gadget-dock has the style position: fixed that keeps the element's position in place as the user scrolls up and down the page.
#gadget-dock has the style right: -40px which keeps the element all but out of sight, by default.
#gadget-dock:hover has the style right: 0 which overrides the aforementioned style and moves the element into sight when hovered.
#gadget-dock also have a lot of CSS3 transitions that define the sliding motions that appear when changing from one position to another (i.e. when the value for right is changed).