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/
Related
Is that possible to resize two divs simultaneously using their common edge using html and css only? Is there some Angular2 way to do it?
I tried play with resize:vertical style but without luck:
enter link description here
I was hoping that outer div could limit resizing but it seems I was wrong.
PS I don't want to use jquery or work with elements directly from code because I work with ng2 and it is not a good approach to use such hacks, but I didn't find such functionality in ng2
Try ng2-split-pane. Not sure if this is what you need but there is a quick demo on the page that should clear that up.
It works by inserting a dragging anchor between two divs with the option of orienting them vertically or horizontally.
https://github.com/wannabegeek/ng2-split-pane
Have you tried
display: flex
display: flex-box
I'm trying to create this grid:
I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.
Couldn't find any question that looks like this, has anybody done something like this before?
If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.
well stacking too many dives on top of each other isnt that good idea as i think..
why don't you try using svg instead .. those are made for such a situation ..
but if you still want to be using divs then please show us the code for your project .. :)
Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.
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?
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