I'm working with Dreamweaver CS3. The question here is what part of the code (listed below) do I need to replicate to have my secondary nav bar utilize the on-click action?
FYI...DW has two menu options or auto insert items...one for roll over images and one for "navbar". DW will only allow you to use the 'navbar' item once per page
the nav bar option builds all the rollover actions for you (listed below)
the "rollover" option ONLY builds normal and over, but no click
I guess I really have two questions...the first is what part of the code do I need to insert manually, the second is what does the "MM_nbGroup" code mean?
"../photogallery.html" target="_top" onClick="MM_nbGroup('down','group1','photoMainNav','../images/buttons/photography_down.gif',1)"
onMouseOver="MM_nbGroup('over','photoMainNav','../images/buttons/photography_over.gif','../images/buttons/photography_over.gif',1)" onMouseOut="MM_nbGroup('out')"><img src="../images/buttons/photography.gif"
Thanks for any help on this in advance!
For anyone wondering the same thing, here's what I've found so far...
The 'insert' bar provided in DWCS3 doesn't allow for two 'inserted' menu bars on one page. However, the 'Behaviors' palette will allow you to add effective roll-overs with the "Set Nav Bar Image" option. Unfortunately (as far as I can tell) DWCS3 is not as smart as Adobe's GoLive was, in that it won't automatically fill in the appropriate items if you name your files correctly. Even still, you should name your images accordingly (xxx_over, xxx_down, etc) to keep it straight in your own head.
As for the MM_nbGroup question, best I can tell this is WYSIWYG code that ships with DWCS3 (the kind of stuff that really mifs some of you developers, sorry guys), as it names items by group # and doesn't seem to have any real relevance in the lexicon of html. I could be mistaken on this however, and am open to enlightenment on the topic if anyone can offer.
Related
Sorry if my query's a bit noobish, a uwp beginner here.
I'm trying to morph the hamburger template from template10 and an existing project of mine. Basically, I'd like to have a certain page with the hamburger menu being invisible, and display my own navigation buttons on the page (an intro page). Upon navigation away to any other page the menu will be visible again.
I tried changing Hamburger's visibility state as an experiment, but it seems to be affecting the content as well. Is what I'm talking about possible with this control and I'm missing something obvious? Or I'd have to manage shell usage in app.xaml and load my intro page without the shell?
Many thanks for the creation of the t10 btw (Jerry, Daren and everyone else), me being confused in this thing doesn't at all diminish my appreciation
There are a few options for you here. IsPaneOpen will only work for you depending on the DisplayMode you choose. But if I were to guess, it's HamburgerMenu,.IsFullScreen that you are really wanting to use here.
You can change the SplitView mode to Inline and set IsPaneOpen to false. That will hide the Pane.
I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement
I'm putting the final touches on an application that Ive been working on for quite a while and while I understand how to restyle existing components by using inheritance Im coming up blank in my search on how to accomplish this last thing.
I want to apply a custom color/image behind the text or icon representing the current activity I am in. This would be similar to how the tabs have the highlight underneath them while selected. I am already using the tabs and have figured out how to change the image resource that is the little underline in the tab bar. Now I just need to accomplish the same look for the action items.
Ive overlooked the actionbarsherlock library for the past day and a half but I dont see anywhere that I could do what I want to accomplish. I have to imagine that such a thing can be done but like I said before so far Im coming up short. Any help would be much appreciated.
I figured out a simple way to do what I asked earlier. I just created a square shape in xml, put text over it, assigned it the gradient and color I wanted and assigned it to that action item I wanted highlighted in the activity i was in.
I have recently picked up Microsoft Office Visio 2010 in the interest of drawing out the execution flow of a software application I am planning. So far I have enjoyed the program, and it has helped me significantly to figure out exactly what interactions and events I will need for the program even before I begin coding it. However, there is one gripe I have with the software, as I add new elements to the diagram, Visio tends to try to combine routes as often as possible. This can make it difficult at times to see exactly where some of the routes are pointing. For example:
Example 1: Example 2:
In Example 1, You can see that there are three routes, each with a different label. Originally, these labels would overlap each other as well. I figured out this can be turned off in the "Page Layout" dialog, so it's a little better than it was, but the beginnings and ends of the route are still combined. Here it's not really an issue, but it could be as shown in Example 2.
What's pointing where in Example 2? The line coming in from the left is pointing at the diamond on the bottom, and then there are three routes coming out the top of the diamond. This is the problem I'm trying to solve. It's not shown in these examples, but putting labels on those three routes in Example 2 puts the labels all on that long stretch of vertical, which makes it impossible to tell which label corresponds to which line.
Is there a way to prevent the lines from overlapping like this? I have fully explored the "Page Setup" dialog, but none of the options available there seem to allow this behavior. The only solution I was able to find online was to draw all the routes manually, but this would mean I cannot use the "Re-Layout Page" feature, and it could be rather time-intensive if Visio decides to do it often.
Update: While messing around with some more settings trying to find a solution to this, I came up with a great example showing just how bad this can get. Now, this is an extreme example, and if your diagrams look like this you're probably doing it wrong, but it clearly shows that it can quickly become impossible to tell what the source and destination for each line is.
After many more hours of searching for ways to make routes either not overlap or play nice, the only solution I've found that keeps being recommended is to re-arrange the routes manually. Changing things like snap settings and page layout options do help to some degree, but not completely. Hopefully the next incarnation of Visio will handle this better. Oh well, it's still a great tool and has definitely helped me visualize execution flow.
This may not be the solution for you but in my network diagrams, I can perform the following.
In Visio 2010 click Design tab, now click Connectors, and select curved.
It separates the lines but again it might not look right for a flow chart.
I'm having the exact same issue and have not found a satisfactory solution.
I've tried all the permutations of snap/glue settings, layout behaviour and connector behaviour with no success.
The best solution I've found so far is to manually add multiple connector points to your source and destination and use those to connect your shapes. Make sure 'no overlap' is specified for your connectors. You can then use the automatic align/layout tools and get something reasonably unambiguous.
You do lose the benefits of dynamic glue but you can mitigate that by deleting connection points (ie from one side of a shape) to force Visio to use your custom connections. You'll also have to disable 'glue to geometry' in the snap/glue options.
http://office.microsoft.com/en-au/visio-help/add-move-or-delete-connection-points-HP001231166.aspx
Please update this question if you find a better solution.
Huh. Most of the time, I have trouble getting my lines to overlap nicely :).
You might try changing some of the Snap & Glue settings:
On the View tab, in the Visual Aids group, click the dialog box launcher (the little two-headed arrow). In the Snap & Glue dialog box, I'd try changing the Snap to setting for Shape geometry.
I cna't tell if you're talking about doing this from code or not, but I've found the Design -> Layout -> Re-Layout option takes care of this.
Similarly to Alex I've found adding my own glue points to shapes and removing the default ones helps enormously. So does making sure one has appropriate settings under Page Setup | Layout and Routing:
Style: Right Angle
Separate: All lines
Overlap: No Lines
Appearance: Straight
Spacing: I found all these distances especially important
Being aware of the setting for each connector under Developer | Behaviour | Connector | Reroute, how that setting changes from "Freely" to "On Crossover" when a connector is rerouted manually is also important. Sometimes I find it necessary to set a particular connector to "Never". Also useful is the ability to select all the connectors (and NOT the shapes) with Select by Type when forcing Visio to reroute.
I'm doing this with Visio 2013's ERD diagrams and I've noticed that whilst I have defined my own connection points now on each entity it is usually best not to actually select them but let Visio dynamically select the "best" one - then if I re-arrange the entities the re-routing still works. One curiosity I've noticed is that Visio's connectors do not align with my connection points at the bottom of each entity but (since I deleted the OotB connection point at the bottom of the entity at any rate) is spacing the connectors appropriately. Along the top and down the sides the connectors are dynamically attached in the same places as my connection points.
I still sometimes have problems with connectors being placed under/inside/through entities (so a connector running through/inside/under a shape) [with ERD's especially with self-referential relationships] despite Developer | Behavior settings on both the connector and the shape seemingly to prevent that. Those are often the ones I have to route manually and set to re-route "Never".
[Visio 2016]
Not a complete solution, just an aid to manual re-routing, ...
Add "Connection Point" to the two shapes. Each connection line will then have its own route, ... though some overlapping might still occur.
Being graphically challenged, here is how I accomplish it, ...
Select the one of shapes (I have to also zoom in to get better placement control).
Select the X in the [Home] menu bar.
The selected shape will have small bumps for any shape connection points.
Press and hold the Ctrl key and hover on the boarder of the shape, the mouse cursor will change to show where a point would be added.
Ctrl-Click to add a connection point. Here I added 10 or so points.
Add additional connection points to the other shape and move the connectors to use unique points on the two shapes. Your connectors will be (more or less) separated.
For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!