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.
Related
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 was wondering how you on a website make an info button for images. Like after you click the info button, there is a box beside the mouse telling you what image your mouse is hovering over. This would be for this website: http://108.171.192.123:8123/ . I want (on the click of a button) for it to tell you what block is what.
Note:
- the several images can't be made into a bit map
- any code snippets that might help are useful
- any website language I will accept (e.g. I can learn it if I need to).
- huge thanks to those who answer.
- the website is a map of my minecraft server (it will be blank ATM tho)
Dynamic MouseOver effects are achived by using JavaScript. I would recommend to learn jQuery, a widley used JavaScript library, which allows to animate your static html.
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...
Where can I read more about creating linked slides like at the top of nytimes.com, slate.com, yahoo.com, nyu.edu, etc. I assume it's javascript, but I'm not sure what it's called, so I'm not sure how to look it up. I want to create a box at the top of a website with blocks of html text which slide in sequence if the user clicks next or after a certain amount of time.
Where can I read more about this?
The jquery cycle plugin is exactly what you are looking for.
http://jquery.malsup.com/cycle/
Specifically, checkout the advanced demos with paging.
If you want to use Javascript then you can use jcarousel and then animate the carousel with setTimeout
But you really need to know some javascript to do this
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.