Develop Reference

Broken interaction between Qualtrics and D3 javascript in Internet Explorer 11

I'm putting together a d3 visualisation using force layouts for use in in the Qualtrics questionnaire website. Everything seems to be working across the different browsers in a jsfiddle. Its possible to drag exemplars from the exemplar box (African male for e.g.) onto the main canvas. One can right-click on a node in the main canvas to bring up a right-click menu to change the node properties or drag the nodes around the canvas.
javascript too large to paste.
Note that the jsfiddle works in Internet Explorer 11. However, when I add this visualisation to the Qualtrics website it breaks in IE11. Far more SVG elements are added than there is data, as shown in the image below.
Note that this combination of Qualtrics and d3 visualisation works fine in Firefox, Chrome and Safari. Unfortunately the Qualtrics support team doesn't support custom code and I'm not proficient enough in javascript to track this down. Any ideas on what might cause this?
For this to work in Qualtrics:
Add the d3.js library in the Qualtrics header
Uncomment Qualtrics.SurveyEngine.addOnload
Comment out create_d3_interaction(false);
Update 1
I've debugged this a bit more.
In the update_svg_node method I do a selection of the SVG element:
var svg = d3.select('.' + svg_class);
var nodes = svg.selectAll('.' + class_id)
.data(f.nodes());
The problem seems to occur in the selectAll -- for some reason it is not matching the class selection with the data. Note this only happens in Qualtrics and IE11 but works fine in IE11 in the fiddle. Note this is an updated version of the fiddle, but the problem still occurs the same way.
So nodes that should be in the UPDATE class are in the ENTER class for some reason.

SVG problems with Google Chrome

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.

Can I use area maps as a divs and give them style? [duplicate]

I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.

Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.

If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.

Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.

Specific height for div in Mobile Windows 6.1

I always come to stackoverflow to check for answers; however, for the current question I have not found any relevant information yet.
I have a Mobile Windows 6.1 PDA and I want to create a simple HTML page for it. I want specific divs of the page to have a specific height, based on the text that are inside these divs.
Maximum I want 2 rows of text.
The text can contain HTML code. I want to slice the text but do not hurt the HTML code.
Before you think "there are 100 different solutions with CSS or Javascript for this" I would like to mention that 6.1 uses a mixture of IE4 with some features of IE5. The browser supports only CCS1 (so no max-height, no overflow:hidden, no position: absolute, no top, bottom etc).
Also the browser supports a very limited range of Javascript functions. I thought to parse the DOM of Javascript and constantly check if the text inside the div is bigger than 28pt (this is two rows) and cut it. However, most of the DOM functions do not work. createElement() does not work, appendChild either. Only getElementById and innerHTML work.
I found this solution https://code.google.com/p/cut-html-string/ for Javascript, which works perfectly with modern browsers, however, since it contains functions such createElement(), appendChild(), cloneNode() etc. it does not work with IE4. Work-around to the createElement() is the innerHTMl which works perfectly but then the browser reports errors for the DOM functions that the code uses.
P.S: Please do not answer "change PDA etc.". I know that the OS is very old but I have to use it.

Ok so if your only dealing with 1 style of device could you use a javascript viewport sniff maybe and use the inner html adjustments to adjust to a new style sheet so that you can have it work for said device, if you have to program for multiple devices you can create multiple style sheets. I would advise for testing purposes to see if anyone has an android or iOs device with similar screen sizes so you can use something like edge inspect from adobe creative cloud that you can adjust and see the changes.
Someone has a thing on viewport find here
Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)
that may be of use.
Since your dealing with basic javascript you should just be able to change the address of a css link and that may be a solution. If i mistook any of the functionality of the device im sorry however it has been a while since I had a windows mobile 6.x phone.

Copying entire gadget of a website

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).