Creating a Better Tabbed Interface in Django - javascript

I've been trying to create a tabbed interface using Django. The current effort (which works fine) is having each template have the header hard-coded in, with the selected tab given the "selected" CSS attribute. Of course, this is a massive violation of DRY and I'm looking to remedy it.
My current idea is adding a jQuery script to the page that looks at all the tabs and sets one to "selected" if it's text matches the beginning of the title for the page. Is there a better way to do this without using JavaScript and just pure CSS?

Update: The below link is broken now, however Django now has in built feature for comparing URLs now. Check this bug for more details.
You can create a template tag to implement it have a look at this http://gnuvince.wordpress.com/2007/09/14/a-django-template-tag-for-the-current-active-page/
You can implement something similar for your case.

I usually just pass in the selected tab in the context in each view that utilizes the tabs, and select the tab in a common header based on that value.

Related

is there a way to change elements of a page before opening it

I have designed a page to be used as a tool. I am getting some challenges here since my experience is very little in the field and im only new.
- my goal is to change values of an element on a page that is not open yet.
- is there a function i can make on current page to change the values of the element on the next page to preset it to some static numbers or some of them are dynamic
I dont know how to manipulate something that is not open yet, i dont even know if that's something possible. I was able to change elements on my open current page, but dont know how to change something on the next page if i click on one of the links
Park Property Management
Millgate Manor
Weston Towers
Kingston
Region Of Peel
so i expect to click on one of the links and when the link opens some elements in the links i need them to be filled with some values that are static always
You can't directly influence the content of another page with JavaScript in the current page. That would have very big security concerns.
However, you could indirectly influence the content if you have access to the source for both pages, and can add JavaScript to both of them. Then, as some comments suggested, you can for example use search paramaters in the link url to pass along information.
(Search parameters are the stuff that comes at the end of a url sometimes and looks something like ?name=john&id=555)
You can read more about about working with search parameters in JavaScript here:
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Don't get discouraged! You're capabilities will grow as you try to make things work. (That's almost the only time they will grow.)
A word of caution!
Please be very careful when using search parameters to modify or display content on a page as there are some real security concerns involved. Never display anything from the search parameters directly on the page without validating the input first. A good way to handle dynamic content based on search parameters, at least if you know the possible options available, is to have some if .. else statements or maybe a switch block that you try to match the search parameters against, and simply not display anything at all if the content of the parameter does not match any input that you're expecting.

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

JavaScript accordion behavior when it won't expand - set an href?

I have a JavaScript accordion on this site that features within it, the primary functionality for the site. It is based off of this post.
When someone has JavaScript disabled or for whatever reason the panels aren't expanding, is there a way to set it so that clicking on them will act as a traditional hyperlink?
That way users can still be directed to content that they need and the site isn't "broken" for them.
You can use the noscript tag to provide content for those that have JS disabled. That should work no matter what plugin you're using.
Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
So, basically, you can really go creative and build a separate menu for non-JS users.

Where does WordPress store custom post types?

I've downloaded a theme on WordPress, installed it and added a few pages etc. I'm wanting to add a bit of functionality to it so i've decided to add a sticky menu using jQuery. I've installed the relevant scripts and got the plugin working.
The theme I downloaded off themeforest allows end users to create a 'section', Which is basically a custom content type that can break parts of the page up. So on my homepage I've broken up parts of the page in to sections, but I want to add the sticky to a particular section, so when you scroll down to it, the section remains in view at all times.
To use the sticky plugin i either need to apply a class to the parent div or wrap the parent div in tags. So my question is, is there any way to actually edit the code of a custom content type? I know that WordPress works on a template basis, so every time you create a page, post etc. it's just stored in the database. But surely there must be a way to edit the code of a particular page.
I hope i've made sense. For anyone wanting to know what i'm on about heres the link -
www.gogoblondie.com
The website is still in development, but it's the black section with that i want to stick as the user scrolls.
Arran
Based on your markup structure and needs :
jQuery('nav').closest('.section').sticky({topSpacing:0});
Will work.

Accessible javascript alternatives to select elements

I am developing some javascript code that will replace a standard select element with a javascript controlled dropdown menu which will redirect users to a particular page. The standard select element must work when JS is disabled
An example of what I want to achieve is here: www.play.com
What I have noticed with this site is that they simply position the select element behind the javascript alternative. This means that both controls are available to screen readers and keyboard users.
Does anyone have any experience of setting such functionality up and have any suggestions for the best methods to ensure accessibility?
Plain links would be your starting setup, as they work to take users to new pages without any additional scripting required.
You can put them in a container ul, and then use javascript in a 'progressive enhancement' way to turn the list into a dropdown (by re-writing the html) for the people who've got it turned on. This way, a user without javascript turned on will have no problems, and the majority of users will see your drop-down menu.
Even better, don't use a select menu for navigation. It's not really semantically correct, and requires more work to make it operable and robust.
Try something like the Suckerfish drop-down menus which are based on nested lists: http://www.htmldog.com/articles/suckerfish/ or if you want a bit of jQuery fun: http://users.tpg.com.au/j_birch/plugins/superfish/#sample1

Categories

Resources