I was wondering is it possible to customize the tooltip that we get after setting the title attribute in an img tag? Now I get a standard rectangle with blue background with text on it and what I'd want to get is my own image (lets say something that looks like a cloud) with text on it. Is it possible with css or js?
You need javascript for that. try this here or here
Or you can roll your own. But basically there is no way to do it directly in html (dont know about htm5/css3).
Create your own! You can simply create a hidden div in your HTML, then when someone hovers over the image, show your div instead.
If you would like to create a custom tooltip, I would recommend this. It shows you, in detail, how to create your own tooltips in js, which are CSS driven and can be easily reused.
Additionally, if you are using a framework, things get even easier. For example there are numerous jQuery tooltip plugins. These allow you to make your tooltips appear on the mouseover of any element.
I'll recommend Tooltipster. Really easy to use, can be used on any element that supports the title attribute and has many cool features and looks.
Related
Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??
CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.
I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.
I have a map which is a png file. I use getBoundingClientRect() with 2 div containers to check for overlapping divs througout my game. (Works fine to check for collison).
I was wondering if it's possible to outline a specific part of an image or wherever the transparency starts so I can then add a onclick event to that part of the div so the user cannot click outside of the map.
Hope this kind of makes sense.. If you need any more information let me know. Thanks
I think this is what you are looking for:
http://www.outsharked.com/imagemapster/
You add an area tag with the coords you need, then you can apply something over it. I recommend you this plugin since it's very powerful, easy to use.
I need to write an web page where users can select a free seats in a different halls for an events. I prefer not to use flash and make it using only javascript. Is there any library or example that can help me do it?
Edit: I'm asking how to create a client-side UI
I don't know a library, but this actually might be a case of using image maps in a semantically-correct, compatible way. The <map> and area tags are valid even in HTML5, and provide you the convenience of the DOM.
I am actually after this too for interfacing to civiEvent, however, this seems to be nebulous 'roll your own' territory for some reason.
The following script + tutorial might give you some mileage:
http://dayg.wordpress.com/2008/04/17/php-101-a-simple-seat-reservation-system/
Please update this thread with whatever you find!
If you want to go fancier than an image map, you can create a table with one chair per each cell as the physical arrangement looks. You can change each chair's picture according to the state of the seat. You could get fancy and have the chairs image change to a highlighted color, say yellow, when they hover over it.
Image transitions are done very easily with JQuery, a Javscript library. Here's some resources for rollover images with JQuery : http://webdevel.blogspot.com/2008/04/rollover-images-with-jquery.html
The bad part about this is arranging the chairs, but JQuery is the easy part and it will make your page look fancier and more user friendly. Because with an image map, the actual image can't really change itself to show that seat 4321 has been taken (but you can certainly divulge this information via other means)
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)
I'm making this search component that I can just load using javascript and have it work wherever I load it. The idea is that it does an AJAX-search, so I don't want to code that up every time I put one on the page.
So maybe on pages that I want to put it on that would look like this:
var searchBox = new Search(inputBox);
Ideally, I wouldn't really want to have to link a style sheet everytime I do this. I'm just wondering if performance takes a big hit if I just create tags and add attributes like this:
$('<div></div>').css({
'background-color': #002323, etc.
});
I feel like its only slightly more verbose, but it will be much easier to manage and use.
Or do you know a better way of doing this?
Maybe this question is brushing the surface of a bigger problem, which is about making CSS object-oriented. I don't want it messing up other things on the page if there are css attributes with the same name. Everything else I do is object-oriented. Are there any CSS solutions or methodologies for this?
Two things come into mind:
If you ever want to change the style, you will have to do it in javascript, possibly at several places.
Obviously, applying styles one by one instead of just adding a class is slower.
CSS was designed to make your life easier and honestly I think it wouldn't be very wise to not to use it, unless you have some javascript style framework that does a better job.
It seems to me that it rather depends on how much CSS you need to apply to this search component, and whether you need to be able to skin it for different sites. Assuming your javascript is all held in one external file, is it a big problem to create a basic CSS file to go with it, and use the script to dynamically insert a <link> to the CSS file above other <link> elements in the document?
That way you can reuse and skin it very easily, overriding the styles set in the default CSS for any particular site just by adding the appropriate selectors to that site's stylesheet. If you set them all with jQuery, it'll be much harder to change the skin.
The main problems of your search component are obstrusive JS and probably non-accessible tool (except if you took the ARIA road).
The one you're talking about is secondary.
You should use carefully named classes, I wonder what can be easier to manage than a class="warning" (background-color: #FE0114; ? no way)