On stackoverflow.com when you enter the tags for your question you can hit the space button and it gets a blue box around it with an X. I want to use that in my website how can i do that?
You can try out this custom JQuery Pluggin
Related
So basically, I want to know the making process of bellow mentioned link and image, or any another option to get it from anywhere else.
https://www.techcompose.com/
I'm developing a web app using Angular and Semantic-UI.
I'm using Semantic-UI's Popup to show stylish tooltips when users hover some elements.
Anyway I have to add title attribute to be compliant with A11Y (WCAG 2.0) and to make screen readers to read the text content of title attribute.
As you can figure out in this way I get double tooltips for some elements.
Do you know a way to make title attribute to keep text and to stop it from displaying popup?
I don't want remove the text so I can't use removeAttr method provided by jQuery...
There's no way to disable the default browser behaviour, which is to show the title attribute as a "tooltip" in the browser itself.
You'll need to resort to some javascript, it could even be as simple as setting the title to blank on hover, and replacing it on mouse out....
onmouseover="this.setAttribute('data-title', this.title);this.title = ''"
onmouseout="this.setAttribute('title', this.getAttribute('data-title')"
This will set the title to be blank (therefore "disabling" the tooltip), and store it in a data attribute. then on mouseout it will put the title back (meaning your semantic-ui stuff will still work). You will need to integrate this at the correct point in your code of course.
I downloaded a PSD file containing buttons that i want to use on my website. Problem is i don't know how to access them for use on the website. How would i extract these buttons? or is there a better way to do it? here is a screenshot of the psd open in photoshop.
You can use this Slicer application:
http://testslicer.codeborg.com:9080/
I tried it and it works perfect. You must upload .png file and then set the slice lines. You must have clicked on the layer if you want to slice it. Try it, it's really simple.
I tried Nedoma's link and here is output:
First step: I crop your image nad add some lines
Second: I used Split function
It looks there are more functions but they works only when you're using transparent background.
If you want to hide text layers before processing in this tool, there is link to Photoshop script http://slicer.codeborg.com/hide-text-script.html
You could use the rectangular marquee tool, cut out the button you want, then create a image based off the button you just cut out. This will essentially give you the button you want, then in your website just have your button be that image.
If you are having trouble saving the individual button images, you need to learn how to use the slice tool
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'm dynamically generating an imagemap for a chart tool I have.
I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.
So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?
What about using JavaScript (and jQuery) to test it?
http://davidlynch.org/js/maphilight/docs/demo_usa.html
This plugin will highlight image map areas.
You can use FireBug for that:
Right-click your image and choose "Inspect Element with FireBug"
In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
You can now place your mouse over each area tags to see them highlighted over your image
One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.
This solution unfortunately doesn't work in Firefox.
Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.
In Chrome you can select the area of the image map and click on the three little dots
to the left and then select "focus"
Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.