Is it possible for a webpage to change its content based on the button you clicked to get to that page? - frontend

Let's say there's two buttons on a homepage that both link to the same page. Is there a way to exclusively show a certain part of the page if you click on one button and show a different part if you click the other button?
If this is not an option, would it be possible to store the information of which button is clicked to get to the page?
I'm really quite in the dark on this and barely know how to formulate the questions i am asking, so finding an answer on google is quite difficult. Thanks in advance for any help.

Yes,sure. Just add different parameter to the link on the buttons e.g. page.html?type=1, page.html?type=2. On the target page read the value of the parameter and modify the page accordingly.

Related

How to implement scroll to a section/fragment on click in Liferay?

I want to implement scrolling to a particular section on click in Liferay, but I have no idea how to add functionalities in Liferay.
I have created a page using multiple fragments and in the top of the page I have headers of the sections and on click of a header the page should be scrolled to that particular section.
Attached page screenshot link below for reference
The easiest way to scroll to some place on the page is to place an anchor there, e.g. with <a name="scrollTarget"/>. In your navigation, you'll just link to this by Scroll to Target and you're set.
Of course, this can be done a lot fancier, with an animated scroll etc, but the basic start is this. There's nothing Liferay-specific hidden here - pick any of the more fancy methods, create fragments with the proper markup, and make sure they're used on your page.

How to create a user-impaired accessible website: surfing without a mouse?

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

SharePoint default modal dialog box not showing buttons

I've been doing searches trying to find help on this, but so far all I have found is how to set options for popping up a SharePoint modal dialog box from custom code.
However, I haven't created any custom web parts to display modal dialogs. What's happening, is if someone clicks the upload document button in a library, the upload document modal dialog comes up, but the ok and cancel buttons are half off of the bottom of the box. Users can click on them, but it just doesn't look very good.
I started playing with the CSS to make the modal dialog box bigger to reveal the buttons, and that works for the most part, but the real problem is the grant user permission dialog box.
When that is clicked, it doesn't show the ok and cancel buttons, and maximizing the dialog box doesn't reveal them. The user has to hit tab about 5-10 times before the focus moves to the ok button and is then clickable.
I would post an image, but I don't have enough reputation to do so.
Has anyone come across this? It seems very strange that the out of the box setting would have this problem.
The CSS that I use to adjust the height and width of the modal dialog is:
.ms-dlgFrame, .ms-dlgContent, .ms-dlgBorder, .ms-dlgFrameContainer
I'm just trying to set the height/min-height values, but I haven't had much luck.
We're using Internet Explorer 11 to view the pages.
Stevangelista actually pointed me in the right direction, I wish I could mark comments as answers, and since I'm new I can't upvote the comment, but here's the solution:
I am using a customized master page, and that comment had me take a look at the elements in the page.
Since the master page is being used in the dialog boxes as well, I used the s4-notdlg class to remove parts that weren't needed in the dialogs. Those parts were pushing the buttons below the bottom of the screen.
I'm not a css expert, so there may be ways of keeping those parts and still have the buttons accessible, but the particular issue I was trying to fix was resolved by using the s4-notdlg class to objects in my custom master page.

how to click on ext JS drop down menu items using watir

I have the ext js drop down menu as shown in the image.
is there any watir method to click on this button?
its respective HTML code is in the image.
thanks,
Naveen Kandakur
See my answer to How to click a strange link looks like button in watir which appears to the the exact same code, and thus gets the same answer.
for which btw I have code that works on the sample site that appears to be the same control, and is why we constantly ask people if there is a site we can access that has the control on it, because nothing works as well as a real example when you are trying to figure out what makes these custom controls tick.

Pop-up and font colour based problems in a form which is designed in Share Point.

I am designing a system in Share Point via Share Point Designer. We have a form in my Share Point site. Users have to fill some fields in the form and send it to the approval committee. We cannot upload anything to the servers. The design is site based. Our problems are:
1- I want to add small (?) icons for the descriptions of that field. When the user click on the (?) icon for "brief description" field a pop-up or another window will be opened and perhaps it will say:
Enter a description of the requested thing.
Be as specific as possible.
2- I want to change the font colors of the fields in the form. The share point brings them black as default. Such as I want to see the "Brief description:" and "Status:" as purple instead of black.
Brief description: .....
Status: .....
3- I want to add an agreement pop-up to the new form which will be open just after clicking "send" button in the form. The pop up will say: "Are you sure that you read the procedure" . The user has to click "Yes" to continue sending the form. Otherwise It will return to previous screen again.
Use jQuery. You can upload the scripts to a document library and do pretty much whatever you want to the html after it is rendered by SharePoint.
For making changes from a custom form, JSAPI may be useful. Alternatively you can hide a regular form and manipulate it with a popup.

Resources