I have two div elements, box_1 and box_2:
<div id="box_1" style="position:absolute;top:0;left:0;width:500px;height:500px;border:1px solid gray;z-index:2;">
</div>
<div id="box_2" onclick="alert(1);" style="position:absolute;top:0;left:0;width:300px;height:300px;background-color:red;z-index:1;">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>
Check it >>> demo
How to activate box_2 ? (do not inner #box_1,and z-index less than box_1)
activate == show alert(1) when click box_2
I don't fully understand your question. The way you've got those boxes styled, the only way to get that <div> to be clickable is to give it a "z-index" value larger than 2.
Alternatively, you could give the other <div> a "z-index" value less than 1, or hide it.
If you can't change the markup, then the only thing you can do is catch events on the top <div> and forward them to the covered-up <div>. That's pretty easy with jQuery — just add handlers to the top <div> and use ".trigger" to forward the events.
edit — like this maybe:
$('#box_1').click(function() {
$('#box_2').trigger('click');
return false;
});
Now that's going to catch events from all over the top <div>. You could check the event mouse coordinates to see whether they're inside the bottom <div> before triggering the event.
You've done the right thing except box_1 is transparent so box_2 is showing through. If you give box_1 a background color like blue you'll see it appears on the top.
<div style=";width:500px;height:500px;border:1px solid gray;z-index:2;background:blue;" id="box_1">
</div>
<div style="width:300px;height:300px;background-color:red;z-index:1;" id="box_2" onclick="alert(1);">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>
Related
This is hard to explain but I have draggable and droppable elements on my page. Some of the droppable elements have draggable elements inside them already but most don't.
When you hover over the droppables a back-ground image appears so you know your hovering over it. However, when you move a draggable into another droppable, now hovering over the newly moved draggable a background image appears in the OLD droppable which used to contain it.
if you look here you can see my problem: - try moving one of the yellow boxes around and then hover over it after you've moved it. The background image appears in the initial position.
http://liquidlizard.net/
Can anyone tell me how to sort this out? I'd appreciate it :)
EDIT here's some of the code I'm using
<div id="row-2col0" class="empty"><div class="position"><a href class="bookmark" target="_blank"></a></div></div>
<div id="row-2col1" class="empty"><div class="position"></div></div>
<div id="row-2col2" class="empty"><div class="position"></div></div>
JS:
$('.draggable').draggable({start: function() {var initialposition = ???}});
$('.droppable').droppable({drop: handleDropEvent, accept:'.bookmark'});
function handleDropEvent( event, ui ) {
}
CSS:
.empty:hover{background-image:url(../img/tilehover.png);}
Basically everything has a class 'empty' which shows the background image when the item is hovered over.
The problem is that your dragged element is a child of the div it came from, so when you assign the empty class to that element, because your dragged element is a child of that didv, your CSS rule, .empty:hover comes into play.
To avoid this problem, put a second div inside of each box, like this:
Add a new div inside of the div with the class empty.
So this line: (and all the ones like it)
<div id="row-2col3" class="empty"><div class="position"></div></div>
Changes to this: (I broke it down to make it easier to read.)
<div id="row-2col3" class="empty">
<div class = "elementContainer"> <!-- This is added..-->
<div class = "wordHolder"></div> <!-- ...............-->
</div> <!--................-->
<div class="position"></div>
</div>
Then add this to your CSS:
.elementContainer {
position:relative;
}
.wordHolder {
position:absolute;
width:65px;
height:65px;
}
And finally, replace your CSS rule .empty:hover with elementContainer:hover and it should work!
How and Why it works
To quote w3schools,
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
So using .elementContainer with the relative attribute set serves as our container for our absolutely positioned elements with the class wordHolder. And they do not get in the way because they are removed from the regular flow and all the other elements act as if it did not exist.
You can read more about positioning elements here: http://www.w3schools.com/css/css_positioning.asp
Hope this helps!
Not sure how to solve an issue I'm having at the moment. I'm building a Javascript and PHP powered image gallery. The basic div structure is that I have a div that contains the gallery as a whole, one for the image being displayed, and a div containing a "previous button", and another containing a "next button."
The next/previous buttons are positioned on the left/right side at the bottom of the image container div (the gallery container is set to relative position, the button divs to absolute). By default they are made non-visible using jQuery, and become visible when you hover over the image container div. The issue I'm having is when you hover over the container div, and then over the arrows, the transition effect re-plays and I'm not sure how to fix that using HTML/CSS/JS. My current structure for the divs is
<div id="galleryContainer">
<div id="imageContainer">
<img src="img" />
</div>
<div id="leftArrow"></div>
<div id="rightArrow"></div>
</div>
How do I make it so my fadein/out effect stops acting all bugged when I hover over the next/prev buttons? I've tried a bunch of combinations of using "onmouseover" listeners when I establish the div, to using jQuery listeners, to trying to change up the hierarchy of the drivs. Any help would be appreciated!
Edit: Here is my current jQuery code of what I'm trying to do:
$(document).ready(function(){
$("#imageContainer").mouseover(function()
{
$("#leftArrow").fadeIn();
$("#rightArrow").fadeIn();
});
$("#galleryContainer").mouseout(function()
{
$("#leftArrow").fadeOut();
$("#rightArrow").fadeOut();
});
});
When I put the buttons inside of the imageContainer it still does the fade bug/effect.
You probably want to use $.mouseleave and $mousenter A problem is that the mouseout and mouseover events bubble. Then, your handlers are called when those events are fired on #galleryContainer when it happens in any of its descendants
http://jsfiddle.net/z2Y8a/20/
$("#imageContainer").mouseenter(function() {
$("#leftArrow").fadeIn();
$("#rightArrow").fadeIn();
});
$("#galleryContainer").mouseleave(function() {
$("#leftArrow").fadeOut();
$("#rightArrow").fadeOut();
});
It would not flicker if your arrows are inside of your image container. Or maybe put the show arrow effect in the main gallery container. Basically when your mouse laves the image container, it will trigger the mouseout. When I say leave I mean in code sense, visually it does not leave because you have it positioned differently but in code sense, your mouse left the image container and entered the arrow containers
This is how I interpreted your question without seeing any code.. Let me know.
I added colors to the divs so you can see which is located where.
jsFiddle: http://jsfiddle.net/z2Y8a/19/
<div id="galleryContainer" style="width:200px;height:200px;background:green;">
<div id="imageContainer" style="width:50px;height:100px;background:blue;">
<div style="height:75px;">
<img src="img" />
</div>
<div id="leftArrow" style="width:25px;height:25px;background:red;float:left;display:none;">L</div>
<div id="rightArrow" style="width:25px;height:25px;background:yellow;float:left;display:none;">R</div>
</div>
</div>
<script>
$("#imageContainer").hover( function()
{
$("#leftArrow").toggle();
$("#rightArrow").toggle();
});
</script>
-- EDIT --
$("#galleryContainer").hover(function()
{
$("#leftArrow").toggle();
$("#rightArrow").toggle();
});
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV
I want to enable an effect on my web app where a user clicks an "Edit" icon and a text box elegantly slides out horizontally immediately to the right of the icon. Currently it is sliding out, but not very elegantly, because when I click on the icon for some reason a new row is created in the browser below where I clicked (and all content below is bumped down). The text box slides out, and then bizarrely jumps back up to where I originally wanted it to go, and the new row created disappears.
Please note, however, that if I put the textbox on its own line so that it is fully left-justified against the margin, that it works just fine. But I want it to scroll it to the right of the icon.
This behavior is the same for IE8 and Firefox.
Here is the HTML:
<img src="../images/edit.gif" onclick="toggleNotebox()" style="cursor:pointer"/>
<span id="AddText" style="display:none">
<input name="AddNoteText" id="TextBox" onkeypress="return addNote(event);" />
</span>
And here is the relevant Javascript:
function toggleNotebox() {
var options = {};
$('#AddText').toggle('slide', options, 500);
}
Here is the jsbin.com URL to see this behavior in action: http://jsbin.com/alopu/edit
Try putting a float: left on both elements.
http://jsbin.com/uzoqo
edit: for some reason the above works but if you try to edit it it doesn't show my changes to the code. not sure what happened.
Inline elements, which spans and inputs are by default, don't honour explicit widths. So jQuery's either changing the display of the animated element to block, or wrapping it in a block element so that that element can be animated.
That's why Samuel's change works - floated elements honour widths.
I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>