I am interested in knowing how the following link is able to list items/links in the form of an explorable tree - I am referring to the PAGE TREE structure in the left hand side div/section.
https://www.securecoding.cert.org/confluence/pages/viewpage.action?pageId=637
I want to know how what all things/items/urls that have to appear under the parent node are determined. I mean how does this happen?.
Any inputs are most welcome.
Thanks,
Pavan.
What Guille and Banana said is correct. Plus if you use the Inspect option in your browser while testing out the tree, it'll show part of what they are using is
style="display:none"
and
style="display:block"
That's a hint to get you started but yeah like they said, lots of plugins out there to use or ways for you to program it.
Also as a quick suggestion, Bootstrap comes with a tree option along with many other features.
Related
I need to navigate through a menu and select a submenu.
I'm using click element xpath as below:
//*[#id="gomenu68e1884541"]//nav/div/ul/li[3]/div/ul/li[2]/a
But it does not help me because the id is dynamic and changes every time, When I access the application
How can I navigate a menu-> submenu?
For more details on this, refer below mentioned image.
Can anyone help?
I've finally got it to work (even on the third level of the menu) using these commands:
Wait Until Page Contains Element
Sleep
Mouse Over
Click Link
And a mix of different xpath:
xpath=//*[#class="dropdown"]//a[contains(., 'Alumnos')]
xpath=//*[#class="dropdown"]/li[3]/div/ul/li[1]/div/ul/li[1]/a
Thanks everyone for your help
I have had the same issue with Xpath. js, vagy angular etc. based websites which are generates the content dinamically simply not works. I have spent a lot of time on my previous automation project, to find a sulution for this: building own xpath. Means not just Insect Element in Chrome and other browsers, you have to build them by yourself, while learning how the code and website works. This the the method you should follow:
get familiar with the front-end client's code
learn xpath
build your own xpath
You have to find out how you can reach the wanted element, without using #ids. Use css classes which are rarely changing that randomly, and find out the relations between your element. You have to use the following-sibling and text() and other less famous xpath selectors. I would suggest to you this
to get familiar with xpath. There wasn't any other way for me, but in the end I had an amazing, well formatted variable files, contains all the element's xpaths.
Im attempting to re-create the following layout seen in the screenshot below.
I wanted to ask whats the best way to go about creating the menu and content section.. im not quite sure on how to join the selected menu option with the content section, any advice would be great
Also should i use ul/li for the menu?
And the top menu bar (where is says create) should i use a big div, with each item as spans inside?
thanks for any help
In order to recreate this layout, you will need to learn a variety of concepts.
First, how to style an unordered list ( <ul><li> ) to work as navigation.
Second, you will need to learn how to position elements, either through using float:left|right or position:absolute|relative.
Finally, and perhaps most importantly, you will need to learn how to use either Google Chrome's Developer Tools or Mozilla Firefox's Firebug, as these are indispensable tools for reading and writing html/css. Specifically, you will need these tools in order to inspect the code for other websites to see how they implemented their design. This is perhaps one of the best ways to learn code (at least it was for me).
Providing a detailed description of how to do all of this would take too long and really detract from the valuable learning experience you will get from googling, fiddling around in the original source code, and trying to recreate it in your own site. If at any point in that stage you have trouble implementing something, then by all means come back to stackoverflow and ask for help :)
I just did a quick search for my question and couldn't find anything directly on point.
I'm still very new to HTML and was wondering if someone could tell me how I could add a picture to my website and set the code so that if I click on it, it enlarges the picture in a new window.
I'm going to be adding around 600+ pics to my website so I was also wondering if there's a way to write the code once and have it apply to all the pics I add.
Thanks in advance,
- Danny B.
There's many many ways in which you could do this. The basic HTML for inserting an image with a link to a new window will be:
<a href="enlarged.html" target="_blank">
<img src="photos/photo-name.jpg" />
</a>
But it is a fair bit more complicated if you want to be able to dynamically display a large number of photos. If you want to code this yourself, you'll want to look into using something like PHP to output the HTML code automatically for 600+ images. Then instead of pointing the link for each to a new page, you might want to consider having the images load in a cool way, such as a javascript lightbox/colorbox some of the other answers suggest.
One possible alternative solution might be to look for some pre-created photo album script. I don't have any experience of these so I'll let someone else make some suggestions on that.
There are several ways to do this, but I'm assuming you'll have a simple site with lots of images on one page, and you'd like the images to zoom open "in a cool way".
Check out this: http://colorpowered.com/colorbox/
... click on View Demonstration and then see the various photo handling options.
This needs just some basic HTML and minimally configured Jquery. Very simple to use and produces a nice effect.
Google around using the keyword lightbox. Most of the solutions are ready-to-use Javascripts. Just include once, assign some IDs/classes, execute during onload and that's it. I personally have good experiences with Lightbox2 and jQuery Lightbox plugin.
I decided to go w/ target="_blank" -- Lightbox2 seems like it'd be great, but I'm really not sure how to use it and where to put all the code. The instructions I've found for it still assume the user has some standard knowledge in the field, that of which I do not currently possess. So, I'll stick to the target/blank approach until I can get more familiar w/ coding and then I'll upgrade to Lightbox.
Once again, I want to say thanks to everyone. You guys always respond quickly and accurately.
With much appreciation,
- Danny B
The simplest way would be to add a link to it, and set the target attribute to target="_blank". The link should point to the image itself. This would regularly open a new tab though, if you want a whole new window, you should tryhref="javascript:window.open('myimage.png','_blank','toolbar=no,menubar=no,resizable=yes,scrollbars=yes')",which would open a new, standalone window. If you're looking for fade/resize effects and such, try one of the other answers posted.
I've been given the task of doing some work customizing an artist's space in MySpace. It seems that you sort of hack the HTML you want into your edit profile page (which has several empty boxes). The MySpace page, it seems, is already HTML so you can only hack into that. Suggested "tweaks" include incomplete HTML code (e.g., a <DIV> tag without a </DIV> tag to supress certain sections) and stylesheet pieces that you can "place anywhere" (meaning somewhere on your edit profile page). And the best one is that sites that offer layouts say, "Layout Code - Copy and Paste the code at the bottom of your 'I'd Like to Meet' Section!"
This cannot possibly be this lame, can it?
Is there any coherent guide to customizing MySpace pages for programmers/HTML designers? Is there a coherent DOM (including things like .contactTable etc.)? Could it be that all the tweaks are just hacks people have figured out from looking at the generated HTML?
Thanks!
This shouldn't be too hard if you whip out Firebug and do a bunch of "Inspect > click on page > edit CSS in Firebug's editor" work to see what you can learn about the structure of the page. Then mock it up to roughly how you want it and note down which elements and which styles need work and figure out how to get that set up in the profile editor.
Try approaching this from the point of view of a challenge. On the upside, MySpace allows you access to the DOM so you can screw with all sorts of things. On the downside, their choice of HTML composition is somewhat arguable.
You hit the nail on the head with your final question. The MySpace DOM is a disgusting set of nearly-infinitely nested tables. Normally, people edit the page by finding those sites that let you "cut and paste" and use their generated CSS since they've already done the hard work for isolating the proper elements.
Good luck... unfortunately, you are really going to need it. =/
Your fears are correct. MySpace "customization" is a bunch of hacks. Good luck.
You can a lot of information in this link: http://spiff-myspace.blogspot.com/
I think the same of the others answers: customize MySpace page is a difficult and complex task.
Regards,
Is there any sort of free control which does what the Occupation field does on http://monster.ca? That is allow for grouping of the options in a drop down box with expandable sections? I just learned about the optgroup tag which is close to what I want, but not quite.
It is just a mock up of a drop down control.
The down arrow is an image, all the remainder is made of divs, the drop down list itself being a big div with overflow containing lot of controls with JavaScript to manage all of this (like collapsing sections).
So you can do that yourself, with a bit of work, and lot of help from a good JavaScript framework...
Basically what the developers at Monster.ca are doing, is emulating a select-control using a div-element with scrollable content.
Take a look at the "overflow" CSS-property.
You can't do this with a traditional <select> control, and I doubt there are ready-made components that fit the bill. If you do want to make this yourself, and don't want to buy into a toolkit like extjs or dojo (which would probably make it easiest to build this), I can recommend the following tree library, as it is very simple to use and BSD licensed: http://www.silverstripe.com/tree-control/
Try this, not sure if the interface is any good for your purposes:
http://flooble.com/scripts/hier.php