<div class="wrap">
<div class="col"/>
<div class="col"/>
<div class="col"/>
<div class="col"/>
<div class="col"/>
<div class="row"/>
<div class="row"/>
<div class="row"/>
<div class="row"/>
<div class="row"/>
</div>
and this col & row are overlapped like this
I want to give hover effect to both elements.
I tried with jQuery event handler
but the behind one is a
dynamically generated node
so I tried something like this
$('html').on('mouseover', '-behindOne-', (e) => {
console.log(e);
});
but event.target was higher overlapped node
and event.current was html
and this was undefined
what should I do?
I want to effect background-color change.
I want use hover event at same time.
each hover event works well
but at the center of that Pic
only effect on higher one (z-index)
also i can't do like this
.wrap:hover .col {}
.wrap:hover .row {}
it should only effect on mouseOvered col and row
I want this!~~
if you want to hover effect on both of them
.col:hover{
//change somethings
}
.row:hover{
//change somethings
}
but this code may help just for css tricks.
you can try also with jquery like
$( ".col" ).mouseover(function() {
//change somethings
});
$( ".row" ).mouseover(function() {
//change somethings
});
and please explain what do you want to change exactly with hover effect
PLUS div-->
//this is html block
<div class=plus>
<div class="col"/>
<div class="row"/>
</div>
//this is css block
.plus div:hover{
background-color:black
}
Related
What should I do if I have multiple elements in HTML foreach and I need to make them all a toggle slider what opens div block with specific information about the element and I need to add close button too if a user wants to close the div. Sorry, I don't have any code to show because I did not find anything that suits my needs. The main idea is to have a product page with products that are displayed on a page using foreach... Then when you click on a product toggle div block is opened with information about a product. What should I search and what to use, I can't find anything because I am limited with my knowledge. Sorry for terrible English.
You can easily control the visibility of an element either within the div you're clicking or after it using a class you toggle. Here's an example controlling the div after one of the divs that controls the toggle:
document.getElementById("container").addEventListener("click", function(e) {
var toggleDiv = e.target.closest(".toggle");
if (toggleDiv && this.contains(toggleDiv)) {
toggleDiv.classList.toggle("closed");
}
});
.closed + .detail {
display: none;
}
<div id="container">
<div class="toggle closed">Product A</div>
<div class="detail">Details about Product A</div>
<div class="toggle closed">Product B</div>
<div class="detail">Details about Product B</div>
<div class="toggle closed">Product C</div>
<div class="detail">Details about Product C</div>
</div>
The key bits there are:
Hiding the details via CSS with the adjacent sibling combinator (+)
Toggling the class on the toggling div
I used event delegation to hook up the handler, but you could instead hook it up to each individual div if you preferred. Note that the Element#closest method I used is relatively new, you may need a polyfill or a loop on parentNode instead.
From what i have understood.
You need to toggle div elements using button tag and the button u click will show that particular div element.
<div id="container1" class={container1 ? "show" : "hide"}>
container1
</div>
<div id="container2"class={container2 ? "show" : "hide"}>
container2
</div>
<div id="container3"class={container3 ? "show" : "hide"}>
container3
</div>
and three button tags to call toggle function to show the three div element.
<div class="container">
<button name="container1" onclick=(toggle())>Container1</button>
<button name="container2" onclick=(toggle())>Container2</button>
<button name="container3" onclick=(toggle())>Container3</button>
</div>
toggle function
function toggle(e) {
if(e.target.name === 'container1'){
container1 = true;
}
else if(e.target.name === 'container2'){
container2 = true;
}
else if(e.target.name === 'container3'){
container3 = true;
}
}
css part
.show{
display: block;
}
.hide{
display: none;
}
I have parent div with class a "very-big-div" that nests another "container-div" that by its turn also nests another child divs. The very big div's made to act like a button and the div that come right after it is a container that appears when I click the very big div.
<div class="very-big">
<div class="container">
<!-- Some other more nested divs that has anchors and buttons -->
<div class="friend-request">
<div class="button-div">
<button class="accept">Trigger</button>
<button class="refuse">Trigger</button>
</div>
</div>
</div>
</div>
The problem is 2 things first: the css problem has not yet been solved
I assigned a hover pseudo class for the "very-big-div", and whenever I hover the "container-div" the hover properties(background-color) is applied to the "very-big-div". This is not what I intend to make, I want to only hover "very-big" div for the hover to apply.
.very-big{
background-color:green;
}
The second problem is : I have a jquery that deals with the container so it is toggled on/off by the "very-big-div"
$(document).ready(function(){
$("#container-div").hide();
$("#very-big-div").click(function(){
$("#container-div").toggle();
});
});
the container has both anchor and button tags whenever I click the an anchor or a button inside the container it is toggled to close itself, and that is not what I want, what I want is just when I only press the "very-big-div" the toggle is activated.
Same as #Jhecht has given the answer, I have just inherited his to mine.
You can stop propagation of the click of child element that trigger toggle by using target and excluding all the child elements of your .very-big container as:
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
Code Snippet:
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
This works for me, but I am not sure if it is what you need.
Please add in the minimum HTML, CSS, and Javascript needed to fully recreate the error you are seeing.
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
console.log(e);
var current = $(e.toElement);
if (current.is('.container')) {
e.stopPropagation();
return false;
}
$('.container').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
I have a homepage with 4 buttons. When hovered over a button, a menu appears behind the buttons. When you hover over another button, a different colored menu appears in it's place.
Currently, I can get the buttons to show the menus, but when I hover onto the menus (and hover off the button) I lose the menu.
Here's my simple code:
Jquery at top:
$(".mybutton").hover(
function () {
$(".mybox").fadeIn();
},
function () {
$(".mybox").fadeOut();
}
);
$(".mybutton2").hover(
function () {
$(".mybox2").fadeIn();
},
function () {
$(".mybox2").fadeOut();
}
);
And my HTML:
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
<div class="mybutton2">
/* Button 2 image here */
</div>
</div>
So I need some way to keep the box that fades in active when it is hovered over. I was thinking of not doing the callback for the fadeout, and somehow only doing the fadeout if they fade off the .mybox DIV or if they hover over another button. But it's a little unclear to me how to accomplish that.
Thanks in advance.
you need to include your menu and the button inside a container and have a hover event on the container. this way your menu will be visible as long as you're hovering over the container.
here's what you need to do.
declare the container like this with your menu and button both inside it.
<div id='container'>
<div class="mybox box">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
<div class="buttons">
<div class="mybutton">
/* Button image here */
</div>
</div>
</div>
here's what you need to do in jquery.
$(document).ready(function() {
$("#container").hover(
function() {
console.log($(".mybox").fadeIn());
$(".mybox").fadeIn();
},
function() {
$(".mybox").fadeOut();
}
);
});
here's a working JSFIDDLE with 2 buttons
It's because you're no longer hovering over the button and instead going to a different element "mybox" so you could rearrange the html structure for it to work by keeping the menu in the button class like so:
<div class="buttons">
<div class="mybutton">
/* Button image here */
<div class="mybox">
<div style="position: absolute;">
Item 1
Item 2
</div>
</div>
</div>
</div>
this should keep the menu active as long as the curser is in there.
I don't recommend this as a UI design pattern for various reasons (one of them being the complexity of implementing it); you could instead consider changing it so that the menu appears when the user clicks.
Having said that, here's a way to do it. Get rid of your existing fadeOut() calls and add this:
$("body").on("mousemove", function(e) {
var $hovered = $(e.target);
var $myButton = $(".myButton");
var $box = $(".myBox");
if ( $hovered.is( $myButton ) ) return;
if ( $hovered.is( $box ) ) return;
if ( $.contains( $box.get(0), $hovered ) ) return;
$box.fadeOut();
});
...and similar for button2. The basic principle is this - whenever the mouse moves, we check whether the mouse is hovering over the button, or the box, or over an element contained in the box (using $.contains()). If not, we hide the box.
I have three links, which will, onClick, show a different container (containing a chart). This is the HTML code for this:
<div class="col-xs-8">
<a class="select fs-11 uppercase active rentedref-chart" href="#">Rented</a>
<a class="select fs-11 uppercase directref-chart" href="#">Direct</a>
<a class="select fs-11 uppercase main-chart" href="#">Personal</a>
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;display:none;"></div>
<div id="main-chart" style="width:100%;height:180px;display:none;"></div>
</div>
As you can see, only the first chart is shown on page load. In order for my users to see what charts they like, they can click the anchor links.
My jQuery code for this is:
$('.rentedref-chart').click(function (){
$(this).addClass("active");
$('.directref-chart').removeClass("active");
$('.main-chart').removeClass("active");
$('#directref-chart').hide();
$('#main-chart').hide();
$('#rentedref-chart').show();
});
$('.directref-chart').click(function (){
$(this).addClass("active");
$('.rentedref-chart').removeClass("active");
$('.main-chart').removeClass("active");
$('#rentedref-chart').hide();
$('#main-chart').hide();
$('#directref-chart').show();
});
$('.main-chart').click(function (){
$(this).addClass("active");
$('.directref-chart').removeClass("active");
$('.rentedref-chart').removeClass("active");
$('#directref-chart').hide();
$('#rentedref-chart').hide();
$('#main-chart').show();
});
Now, the switching between containers is working fine. My problem is, that the #rentedref-chart, #directref-chart and #main-chart all have width:100%;
The problem occurs, when the users switch to one of the containers/charts that is hidden. It will make the chart 100% of the page width, and not the container width.
How can I do, so the width is 100% of the container? (Like the first #rented-chart is on page load?)
EDIT - SHOWING MORE CODE:
This is the HTML structure:
<body>
<div class="wrap">
<div class="col-xs-2">other content</div>
<div class="col-xs-10 no-padding">
<div class="col-xs-8">
<a class="select fs-11 uppercase active rentedref-chart" href="#">Rented</a>
<a class="select fs-11 uppercase directref-chart" href="#">Direct</a>
<a class="select fs-11 uppercase main-chart" href="#">Personal</a>
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;display:none;"></div>
<div id="main-chart" style="width:100%;height:180px;display:none;"></div>
</div>
<div class="col-xs-2">other content</div>
</div>
</body>
Remove the display:none from the charts and hide them on document ready. This allows the chart to be rendered at the correct size then hidden.
HTML
<div id="rentedref-chart" style="width:100%;height:180px;"></div>
<div id="directref-chart" style="width:100%;height:180px;"></div>
<div id="main-chart" style="width:100%;height:180px;"></div>
JavaScript
$(function () {
$('#directref-chart').hide();
$('#main-chart').hide();
});
Alternatively if this is an option don't render your chart until it is selected for the first time. Use jQuery .one() to achieve this.
$('.directref-chart').one("click", function() {
//Render chart code.
});
You no need to use the display:none there
Html
<div id="directref-chart" style="width:100%;height:180px;"></div>
<div id="main-chart" style="width:100%;height:180px;"></div>
Jquery
$(document).ready(function(){
$('#directref-chart').hide();
$('#main-chart').hide();
});
Do position:absolute for each element which have width:100%
This will work if there's no position:relative ( with specified width ) in whole .col-xs-8's parent and your .col-xs-8 with position:absolute and width:100% will fit the screen width.
The CSS :
body{ padding:0; margin:0 }
.col-xs-8{
position:static;
height:200px
}
#rentedref-chart, #directref-chart, #main-chart{
position:absolute;
left:0;
top:auto;
bottom:auto;
}
You should set .cols-xs-8's height until the content under .cols-xs-8 element shown.
I updated my fiddle before. http://jsfiddle.net/6gg5o9gm/6/
There are many ways you can do it...
What I would suggest is create a class "asideanddntdisplay"
<style>
.asideanddntdisplay
{position : fixed; left : -5000px;}
</style>
Before creating the chart :
$("#directref-chart, #main-chart").show().addClass("asideanddntdisplay");
After the charts are created:
$("#directref-chart, #main-chart").hide().removeClass("asideanddntdisplay");
I believe this will work for you.
I have two menu icons, both classed .menuentry, with the IDs #topicicon and #searchicon, in a menubar. Beneath them are two larger divs, #topiclist and #searchform, both initially set to display:none;.
What I would like to do is click each menu icon and display the corresponding larger div underneath, as well as getting rid of the other larger div if it has been display previously.
So, for example, when I click #topicicon, it displays #topiclist and hides #searchform.
The code is being used on this website, in the menubar at the top: http://bonfiredog.co.uk/bonfog
And this is the code that I am using.
HTML:
<div id="topicicon"><img src="topic_icon.png" /></div>
<div id="searchform"><img src="search_icon.png" /></div>
<div id="topiclist"></div>
<div id="searchform"></div>
CSS:
#topiclist {
display:none;
}
#searchform {
display:none;
}
jQuery:
$("#topicicon").click(function(){
$("#topiclist").css("display", "visible");
$("#searchform").css("display", "none");
}, function(){
$("#formlist").css("display", "hidden");
});
Not working as of now...
You have to make two click handlers for #topicicon and #searchform and use .hide() and .show() as shown :-
$("#topicicon").click(function(){
$("#topiclist").show();
$("#searchform1").hide();
});
$("#searchform").click(function(){
$("#topiclist").hide();
$("#searchform1").show();
});
and you are using two div's with same id's i.e searchform so change the id of second searchform div to say searchform1 and try above code.
You could avoid having to write multiple click handlers, and reuse across different components with the following:
$(function () {
$('.showRelated').click(function () {
var relatedId = $(this).data('rel');
$('.related').hide(); // hide all related elements
$(relatedId).show(); // show relevant
});
});
.related {
display: none;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="topicicon" class="showRelated" data-rel="#topiclist"><i class="fa fa-newspaper-o"></i></div>
<div id="searchicon" class="showRelated" data-rel="#searchform"><i class="fa fa-search"></i></div>
<div id="topiclist" class="related">Topic List</div>
<div id="searchform" class="related">Search Form</div>
"visible" is not correct value for display propriety. You should add "display: block", or "display: inline-block", or "display: inline" or any other value that is admitted by display propriety.