on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?
Thanks
You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.
This is actually an effect that is pretty simple to create.
First, there is a hidden div in the HTML for the Tooltip.
<div class="popup" style="display:none;">Hidden Content Here</div>
Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).
$(".tooltip").hover(function(){
$(this).children(".popup").fadeIn(); // Other effects can be used to show the Tooltip
},
function() {
$(this).children(".popup").fadeOut();
});
The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.
it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover
Related
I'm making windows javascript emulation. Right now, I'm creating program windows. They have code like this:
<div class="program" draggable="true">
...more imgs
<img src="./res/img/closeButton.png" title="Close">
<iframe src="./programs/fileExplorer" width="900px" height="500px" class="programBorder"></iframe>
</div>
I need to make whole div draggable (on top bar) and resizable (side and bottom bars full, top only small part). It would be really cool to get it done without javascript (css only), but it is OK to do it with javascript/JQuery
Use jQueryUI instead, http://jqueryui.com/dialog/ it has both draggable and re-sizable options readily available, else you can go through the library and implement the same logic.
Draggable elements
It is currently impossible to make draggable elements without using css+html only. What you could do is just use jQuery to solve this. Alternatively, you could see this answer to another question that explains how to make draggable elements without jQuery.
Resizable elements
This one is indeed possible to do with CSS only, and it's quite simple. Just use resize:both on the element. This table shows the browser support for CSS-only resize, so you should probably consider that when making your site. You could also use jQuery as a fallback for IE.
Here is a demo for the different types of resizing there are.
I have a normale jpg-photo and 2 textlink. When the user mouseover textlink 1 I would like to show a transparent png-photo on top of the jpg-photo, and when the user mouseover textlink 2, I would like to show another png-photo on top of the jpg. On mouseout the png should disappear again.
Possible? And can it be done with CSS alone or do I need javascript to?
Thanks in advanced.
Yes it is possible with JQuery, JS or CSS, depending on your requirements.
Good script to use is here:
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
You can use hover CSS selector to solve such kind of problems depending upon html layout of your page
#11:hover img {
display:inline:
Add other blocks
}
Your request can be done easily using the power of jQuery :)
I made something using jQuery and you can find it here
http://jsfiddle.net/xrmqq/
It is close to what you want to do.
I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.
The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin
Creating a website using simple html(not html5) and css but got stock in mouseover effect. Need to show some text with background image when user mouseover a link. Following is an example..
NORMAL:
OVER:
I don't think it is possible to create the effect with simple CSS. My question is what is the most effective way to create the over effect and how? Javascript, DHTML or other language...
Thanks in advance...Rex...
Rex,
I think you would find jQuery very useful. jQuery is a javascript framework, very easy to use. www.jquery.com
You can achieve your effect with pure javascript, but again I think you will find using a javascript framework much easier, since your coming from actionscript.
For your particular instance I would make a div absolutely positioned. To show the div on mouseover you can use the jQuery $("#div_id").show(); and on mouseout use .hide();
Here is a basic tutorial for using show hide on events with jQuery.
http://www.learningjquery.com/2006/09/slicker-show-and-hide
Good luck!
You can use javascript to show a hidden div which is having text written inside it.
use javascript's onmouseover and onmouseout events to do this.
However have you tried using href:hover property of css to achieve this?
I am using this layover plugin to display content: http://jquery.com/demo/grey/ I know there must be a simple way to add a drop shadow border to the layover, similar to: http://fancybox.net/ but I can't figure out what the best method would be. Any suggestions?
Check out the liquidCanvas plugin. It makes it very easy to add drop-shadows (and other things like gradients and borders) to any element.
There is a full write-up and tutorial at http://www.caffeinedi.com/2009/11/02/using-jquery-and-liquidcanvas-to-add-drop-shadows-borders-rounded-corners-and-other-effects-to-your-website-even-in-ie6-and-ie7/