Ok, here's the thing.
I've done a webpage which contains forms and so I added buttons as elements and this works great. I created their own css classes and use graphics as background images for each of them. All working great (these are submit buttons btw)
Anyway, I've also got a jQuery script from before that takes all a href hyperlinks and add content from a set div from an external file and adds to a div in my current page, all in one animation. But this would probably not work with form buttons?
In any case I need to be able to have these buttons work as traditional hyperlinks anyway. So what do I do?
I thought about using css-buttons alltogether, but I'm not able to have them stack vertically. Using float left or right just put the buttons outside of their parent containers (probably a different fix for that).
But in any case, using css buttons, that wouldn't work as a submit button for the forms anyway would it? Should I perhaps use both form buttons and css buttons? What do you do?
<button> elements.
You should never use links to submit data, users with javascript disabled won't be able to use them, crawlers can submit data accidentally, etc...
Related
I have a group of <buttons> that I would like to act similarly to radio buttons. When a button is clicked, I need it to stay active, and when another button in that set is clicked, it needs to be made inactive and the new button needs to become active. I am using React.
I've tried different solutions and none have worked. Is there a way to do it with vanilla JS or React? Should I just use jQuery?
You can try some npm package that provides Radio Componenet to achieve this. You can search for packages and use the one you like. I am currently using Mantine which provides a lot of React components.
However, This is the one that I made. Take a look at it. Here is the link.
https://codesandbox.io/s/cold-water-ij5bfx?file=/src/App.js.
I'm using the Google SaveToDrive button on my webpage as shown here: https://developers.google.com/drive/savetodrive
However, the g-savetodrive button always shows up in a fixed size that does not match the rest of my UI/layout. Are there any parameters to it that we can change the size of the button?
I tried other possibilities that I saw in +1 and Google SignIn buttons also (like data-size, data-width, data-height), but none of them worked.
The short answer is: not easily.
The google api embeds the icon in an iframe, which means you'd have to do some fiddling with jquery to apply any style rules to the button.
see: How to apply CSS to iframe?
To make matters worse the img source is very small. Stretching it yields a very fuzzy image that I wouldn't recommend. At the very least you'll want to find a large drive image and use that instead.
I think your best bet is creating a custom button that emulates googles class and id tags. Hopefully you can reverse engineer the button click and hook your custom button up to the same functionality.
I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.
I am creating a small form where the user
Enters some text in an input box
Chooses from a bunch of options
regarding the actions that need to
be taken with the data
Clicks a submit button
Disconnect does something similar in a better way:
you can click on any of the five divisions here. This is wonderful because it makes it easier for users to perform the same task and simplifies choose and click to click.
What technology is used to display such a menu?
A nice way of doing this is - which doesn't need javascript - is to use radio buttons, but make them invisible. The clickable text and icon go inside of the label for each radio button, so you can click the label or icon to select the radio button.
This ensures a few important things:
Only one item can be selected
The selection is passed back with the form
The browser's native form handling still works
Accessibility options still work
You do have to be careful to make the labels obviously clickable, since you lose the visual cue of having the radio buttons visible.
IE6 & 7 also require a hack - they have a weird behaviour that a display:none or visibility:hidden radio button or checkbox cannot be selected by clicking its label.
Here's an example: http://www.spookandpuff.com/examples/clickableToggles.html
(I haven't included the icons - you can easily add these by setting them as the background in CSS for each item (don't use <img> tags).
Edit Oh man - I just read the question properly! Sorry, you want the behaviour to be 'choose' rather than 'choose and submit'... An easy way to do this is to add some javascript to the inputs to have them auto-submit the forms when they're selected. I've updated the example to show this.
Looks like JavaScript: https://github.com/disconnectme/disconnect.me
i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.