I have a working example with dragenter and dragleave events that highlight an area where the file should be dropped. This example works correctly.
Right now if I just add a single <span> inside of my dragenter region, highlighting does not work correctly anymore (when you hover the image on top of the text - highlighting disappears). As you see dragleave is called multiple times.
All I changed is substituted Drop files here to <span>Drop files here</span>
Also there is knockout code there, but I believe that it has nothing to do with the bug. I understand that the problem is with event bubbling, but
e.stopPropagation();
e.preventDefault();
return false;
does not help. Any idea how to make it work with dom elements indside?
P.S. this is just a simplified example and it looks like I was not able to properly make it (I was thinking that the only way to solve it through JS, and it appears that the way I described it it is possible to solve it with css as well). Sorry for this confusion. Example looks more like this. Not only the Text is inside of the dropable element, but when you drop something, elements appears there. These elements are clickable.
The problem with Malk's solution is that :after element stays on top of these clickable elements and thus making them unclickable.
It looks like you can attach the handlers to an overlay div that is positioned after and on-top-of the span:
<div class="col-md-12" data-bind="foreach: dropZones">
<div class="drop_zone">
<span>Drop files here</span>
<div class="drop_zone_overlay" data-bind="event:{
dragover: function(data, e){ $root.dragover(e);},
drop: function(data, e){ $root.drop(e, $data);},
dragenter: function(data, e){ $root.dragenter(e, $index());},
dragleave: function(data, e){ $root.dragleave(e, $index());}
}">
</div>
</div>
<ul data-bind="foreach: elements" style="height: 100px">
<li data-bind="text: $data"></li>
</ul>
</div>
CSS
.drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold'Vollkorn';
color: #bbb;
position:relative;
}
.drop_zone_overlay {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
http://jsfiddle.net/rWWK5/
EDIT
Actually you do not need to add another element at all. You can create a pseudo-element with CSS :after that should work to cover the content.
.drop_zone {
...
position:relative;
}
.drop_zone:after{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
http://jsfiddle.net/ewng9/
EDIT 2
You can use this technique to cover the contents only when dragging. You just need to change your .css({}) call to toggleClass() and put the :after on the new class.
http://jsfiddle.net/dKsmw/
This will also lets you create an overlay that tints the background elements:
.drop_zone_hover:after{
...
background-color:#0f0;
opacity:0.6;
}
I think Malk's answer is valid. Using an overlay or mask to sit above the drop zone and it's children when you drag over and drop. This prevents the issue you were experiencing with the span
I've created a working Fiddle with your newest example.
Related
I have a jQuery tabs element with different tab heights. The outer div has dynamic height, but I want it to resize smoothly when the inner elements change tabs.
My current CSS is:
.parent{
width:500px;
background:green;
padding:20px;
transition:all 1s;
}
.tab1{
width:300px;
height:100px;
background:red;
}
.tab2{
width:300px;
height:500px;
background:blue;
display:none;
}
.parent button{
display:inline-block;
vertical-align:middle;
}
This fiddle shows the behaviour: https://jsfiddle.net/mh5b91gx/
I've tried using min-height and max-height but couldn't get it done. Can you guys help me out?
The closest thing I could come up with without changing your HTML is this: http://codepen.io/BenCodeZen/pen/rePLpP, but it's janky from a user's perspective and not something I would recommend.
$('#tab1').on('click', function(event) {
$('.tab2').slideUp(400);
$('.tab1').delay(400).slideDown();
/* Act on the event */
});
$('#tab2').on('click', function(event) {
$('.tab1').slideUp(400);
$('.tab2').delay(400).slideDown(400);
/* Act on the event */
});
The main issue with your code is that you're swapping out entire divs in the process. This means that you don't have a unified container to be smoothly transitioning heights. So the first step will definitely be changing your HTML structure to have a single content div which uses JavaScript or jQuery to change the content out.
Here's an example of what it might look like:
<div class='parent'>
<button id="tab1">Tab1</button>
<button id="tab2">Tab2</button>
<div class="content">
<div id="tab1-content" class="tab-content">...</div>
<div id="tab2-content" class="tab-content">...</div>
</div>
</div>
I would definitely recommend taking a look at the Organic Tabs article that #Asta, but let me know if you have any additional questions!
You can check Organic Tabs on CSS Tricks: https://css-tricks.com/organic-tabs/ .
You can try this:
$('#tab1').on('click', function(event) {
$('.tab2').hide('slow');
$('.tab1').show('slow');
/* Act on the event */
});
$('#tab2').on('click', function(event) {
$('.tab1').hide('slow');
$('.tab2').show('slow');
/* Act on the event */
});
Good Afternoon,
I need a little help if possible...
As the title explains, when you hover over a div, i want multiple other divs styles to be changed (different colours at the min). i have currently tried using just pure CSS but finding it quite a struggle. My JSFiddle
As you can see on my JSFiddle, when you hover over the 'red' box, the boxes at either side changes colour to yellow, if you hover over the 'Green' box, it changes colour to yellow, however, if you over over the 'pink' box it changes colour to cyan but also the far left box changes to yellow, which i dont want to happen.
Could anybody help out? I dont mind if i have to use JQuery/Javascript thats not an issue, i just attempted using CSS as i have no knowledge of JQuery/Javascript.
Thank you and i hope it makes sense what i am trying to achieve.
CSS
img{width:100%;}
#container{width:100%; float:left;}
.maintest{width:20%; height:150px; background:red; float:left;}
.maintest:hover{background:#f2f2f2;}
.maintest2{width:20%; height:150px; background:green; float:left;}
.maintest2:hover{background:magenta;}
.maintest3{width:20%; height:150px; background:pink; float:left;}
.maintest3:hover{background:cyan;}
#container:hover .maintest2{background:yellow; border-right:solid 1px black;}
.maintest:hover ~ .maintest3{background:yellow}
HTML
<div id="container">
<a href="#" class="maintest2">
</a>
<a class="maintest" href="#"></a>
</div>
This rule #container:hover .maintest2 {} is causing the behavior you don't want. But this is also giving you the desired behavior of having the "when I hover over red, it changes the other 2 boxes to yellow.
Like the commenters said, this doesn't look possible without using JS.
Quick jquery to do it:
$(".maintest2, .maintest3").hover(function(){
$(this).addClass("yellow-background");
}, function(){
$(this).removeClass("yellow-background");
});
$(".maintest").hover(function(){
$(".maintest2, .maintest3").addClass("yellow-background");
}, function(){
$(".maintest2, .maintest3").removeClass("yellow-background");
});
Documentation on hover event: https://api.jquery.com/hover/
Since you don't mind using jQuery, I will give you a jQuery answer,
$('.box').each(function() {
//this will iterate through each div with class=box
$(this).hover(function() {
//on mouse in
$(this).attr('data-active-box', 'true');
},
function() {
//on mouse out
$(this).attr('data-active-box', 'false');
});
});
.box {
width: 100px;
height: 100px;
display: inline-block;
}
.box[data-active-box='true'] {
background-color: green;
}
.box[data-active-box='false'] {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='box box1' data-active-box='false'></div>
<div class='box box2' data-active-box='false'></div>
<div class='box box3' data-active-box='false'></div>
The js will toggle the data attribute on mouse-in/out. The css will style the div based on the attribute. There's a million ways to do this!
I'm building a new website for myself, looks like this..
HTML
<div id="row1">
<div class="orange" onClick="itemLoad()">
<img src="img/game/wacky.jpg" width="140" />
<p><strong>A Day At The Races (2014)</strong><br>
3 x 8-bit instruments</p>
</div>
<div class="blue" onClick="itemLoad()">
<img src="img/game/dott.jpg" width="140" />
<p><strong>Back to the Mansion! (2013)</strong><br />
fl, ob, cl, bsn, xyl, vibes, vln, vla, vlc.</p>
</div>
.... etc etc etc.
CSS (all boxes have identical CSS except the background colour)
.orange{
width:150px;
height:150px;
background:#F90;
display:inline-block;
margin:10px;
cursor:pointer;
box-shadow:#CCC 4px 4px 4px;
border-radius: 10px;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:1.5;
}
Basically, when you click on one of the boxes, it shows a content DIV telling you about that piece of music, based on the row it's in.
JQuery
function itemLoad(){
if($(event.target).parent().is("#row1")){
$("#row1content").fadeIn("slow");
}else if($(event.target).parent().is("#row2")){
$("#row2content").fadeIn("slow");
}
}
This function works absolutely fine when the boxes are empty, but when they have content in them as you seen in the picture, the function only runs when I click around the padding. I've never had this problem before. Any help would be appreciated :)
event.target is the clicked element, and when you click a child element, that's what event.target is, so it's not consistently giving you the right element, or the right parent element, as event.target does not reference the element the event handler is bound to, but the element the event originated from.
Also, you're relying on the global event, which is not cross-browser.
What you want to do is use proper event handlers, and this
$('.blue, .orange').on('click', function() {
if ( $(this).parent().is("#row1") ){
$("#row1content").fadeIn("slow");
} else if ( $(this).parent().is("#row2") ){
$("#row2content").fadeIn("slow");
}
});
It should be noted that there most definitively is a more dynamic way to do that, giving all the targeted elements the same class, and then fading based on index or position in the DOM, without targeting each element based on the parents ID.
This is what I had in mind :)
function itemLoad(event) {
if ($(event.target).parents().is("#row1")) {
$("#row1content").fadeIn("slow");
} else if ($(event.target).parents().is("#row2")) {
$("#row2content").fadeIn("slow");
}
}
html,
<div id="first">
<a>Come here</a>
</div>
<div id=second">
second div
</div>
css,
#first a:hover{
color:green;
/*i want to do this when hover */
#second{
background:green;
}
}
in here, if the user cursor goes to "come here", i want to change the other element #second's background color.
Is this possible using only css? or do i have to use jquery or javascript event?
#first:hover + #second{
background: green;
}
http://jsfiddle.net/DerekL/8rJmC/
Use ~ if #second is not directly after #first.
Notice that it is impossible to attach the :hover event to a directly using only CSS. The code above attaches it onto #first.
You can do it this way with jQuery if you really have to attach it to a:
$("#first > a").hover(function(){
$("#second").css(...);
}, ....);
So i've got wall of text with links, when hovering over the href it should display a image on the exact same line and always on the left of the full text, so not next to the link itself (meaning background image won't do the trick :( ). I've been tinkering around a bit, but without succes, so hoping you guys can help me out with this one :)
As seen in the second screenshot, "kalender" and "menssana#home" are hrefs and need the same image next to the text. Wether it's javascript or css, any help is appreciated!
Html-example can be found here: http://www.menssanahealth.be/diensten/particulieren/
I would nest a hidden image in the link and create a CSS rule on hover to show the image.
Basically this:
A IMG {
display:none;
}
A:hover IMG {
display:inline;
}
But here is a more fleshed out example using absolute positioning for the image so that it doesn't affect the layout of the link but instead shows up to the left of it.
http://jsfiddle.net/HLKQ3/
You can use CSS :before for this like so
.link:before{
content:'';
width:50px;
height:20px;
background:url('urlToYourFeatherThing.png') no-repeat top left;
position:absolute;
top:0;
left:-20px; // width of image
display:none;
}
.link:hover .link:before{
display:block;
}
Oh, and you may need your .link to be position:relative; so that the leaf is positioned absolutely to the parent.
This has not been tested, if you encounter any problems please let me know.
Good Luck.
#Connor
If you have an span with classname 'leaf' with in the a tag you can write code like below in jquery,
HTML should be like this,
<span class='leaf'> </span><strong>Sauna</strong>
Jquery should be like this,
$("#dienst-content a").hover(
function () {
$(this).find('span.leaf').show();
},
function () {
$(this).find('span.leaf').hide();
}
);
and the CSS,
span.leaf
{
width:50px;
height:20px;
background:url('url-to-leaf-image.png') no-repeat top left;
display: none;
}
Off topic, I have a couple of observations:
the page seems to contain a list of services so using a <ul><li> ... would seem more appropriate markup than <p>-
Some list items have links, others don't it would be more user
friendly to differentiate a list item with a link from a list item
without link -- e.g. use bold text, different color, add an arrow or underline etc
Back on topic:
Using a background image is totally feasible by using a combination of left padding and left negative margin. However if you really don't want to that direction then I would add an extra span within the <a>, and hide it unti the link is hovered.
I've found a solution with jquery :)
You can see it in action here
i've added the following script
<script>
$('<img src="<?php echo get_template_directory_uri(); ?>/images/bloemblaadje.png" class="bloemblaadje"/>').prependTo("#dienst-wrapper a");
</script>
And the css
#dienst-content{
position:relative;
}
.bloemblaadje {
display:none;
position:absolute;
left:0;
margin-left:-60px;
text-align: center;
}
#dienst-content a:hover .bloemblaadje{
display: inline;
}
It might be heavy on a page with alot of links, but this seems the best solution for this design.
Thanks for the many suggestions!