What is the html container or element on the mymsn pages? - javascript

If you log in to mymsn, you are able to customize the content and layout of your webpage. What I want to know is what kind of container are they using? Do they use an html element, or is it javascript or something else?
There are a bunch of boxes with a title, menu option, and minimize and delete buttons. Inside the boxes are unordered list links to topics of that particular subject.
Since I don't have 10 reputation I can't post an image of what it looks like.

If you look at the source code, you can see that this is just HTML elements like div used as containers for all the news dynamically added via JavaScript.
Check it by right clicking on any element in the page and select inspect element, you will see all the scripts running the page and handling interactions.

Related

Is there any way putting dropdown in gojs panel?

Is there any way we can integrate HTML controls like dropdown in goJS panel. I can see we can have text box inside panel and checkboxes as well. But i can't find dropdown.
There's currently no way to add arbitrary HTML to a GoJS panel, but you could fashion elements to work like a drop-down.
It may be better to bring up HTML elements when you click on a node, which might suit you. The custom context menu sample does that (but with right click context menus).
Another example of showing HTML elements over a Diagram is the data visualization sample, though this works on mouseOver instead of click, the idea should be similar.

url changing anchor links in polymer

I have 2 Polymer pages sharing one navigation menu structure. Only one menu item links to page two, the others are linking to id's on page one. How would I write the menu links from page two to id's on page one with JavaScript?
(Hashtags in a links are not relative to URLs in custom Polymer elements, and neither same page anchor links like p1 nor url changing links like work therefore.)
This seems to be a general problem with custom elements, and there is not much documentation on how to fix this in the Polymer-project page, therefore.
I have got help with same page id linking, but unfortunately am still really struggling with JavaScript, and have no idea how I would go about referencing a target element on a previous page by DOM methods, and attaching the necessary event-listeners and scroll functions.
This JS Bin from Frankie Fu is showing how to do this with same page links, but I would need to do it with url changing links.
My pages are therapie-jetzt.de/index.html and therapie-jetzt.de/Aktuelles.html (page two). The menu items are all linking to id's on page one, except for "Aktuelles", which points to page two. So what I need to do is point all other menu items in the menu on Aktuelles.html to the corresponding paragraph id's in the first page, index.html.
I guess I would have to start with getting and storing the previous page, say with document.referrer, put it in a variable, and query my id's, and then go on from that? But that wouldn't work, as I can only query nodes in the current dom/window object, right?
The easiest way would probably be to not load a second page at all and just hide the other content away when the menu item Aktuelles is tapped...
Lex

What is the most simple and visually good way to imitate html elements selection like in winform designer?

I doing kind of special purpose html editor.
I have an TreeView of html tags hierarchy on the page.
I want to make html elements selection when I change selected node in TreeView.
For example, if I selected div or table or button in TreeView, I want to make that element look like selected on the page shown right near TreeView.
How could I do that? Changing element bgcolor is kinda not good in rare cases, when element do not support it. Would be perfect to show bold rectangle around selected element, but I don't know how.
I know how to invoke JS from WebBrowser, I ask about JS solution. Some ideas for what function like that would do:
function SelectObject(element_id)
{
}
I want smething like that:
If you're happy with background color change, use it. For elements which does not "support" background change, use element-type-specific thing, which you can implement later.
Or, you should use an overlay. There's an article how to find out position of elements http://www.codeproject.com/Articles/35737/Absolute-Position-of-a-DOM-Element

Dynamically generate radio input for each element of jQuery slideshow

I'm using the jQuery slideshow plugin, and my 'slideshow' div naturally contains a handful of images. My objective is to add the ability for a user to rate the image, using either a radio or select widget.
Since I'm not using a sophisticated back end, the widget for each image must be generated on the fly in jQuery.
Each of the child elements of the slideshow div are naturally imgs, so it isn't clear to me how to append a form field to it using jQuery.
Thanks much in advance.
Wouldn't mind some html to give you a better answer:
try:
$('img').after('<input type="radio">'); //with realtion to your image
$('img').parent('div').after('<input type="radio">'); //with relation to the parent div
For starters...you could also try .appendTo, .add, .append...it depends on your container and how you want it displayed....Post some html for an exact answer. maybe even .before, .prepend, etc...again depending on what you really want to do...
I agree with karim, look those tags up to see which is best for you (i.e. do you want it in your div after your div, etc.)

Highlighting active panel in CSS without JavaScript

I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.

Categories