Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
Related
I am trying to change a class of a element and my view gets distorted?
How do I solve it.
I have created the fiddle for the same Jsfiddle
Issue Description:
I have a custom textbox. I have a reference value at top left corner of it.
If I enter value greater or less than the reference value , I show a box asking for reason.
It works perfectly fine, but when I try to add some extra functionality , like changing the color of the div in right top corner of textbox by changing the class of the div , the view is distorted and not as it was expected.
In the fiddle I can commented the code in javascript section at line 73,74,77,78
function changeClassOfCommentToRed(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerGreen");
}
if I uncomment the above line for extra functionality , I get a distorted view as in following image
You only need to remove the classes you want to change:
function changeClassOfCommentToRed(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
$("#"+divId).removeClass("commentCornerGreen commentCornerRed");
$("#"+divId).addClass("commentCornerGreen");
}
And in your CSS you need to address your arrow pseudo element not the element itself:
.commentCornerRed:after {
...
}
.commentCornerGreen:after {
...
}
With this changes, only the color of the arrows is changed, not the color of the box.
Try to specify which class to remove in your removeClass :
removeClass('classToRemove');
If I get what question correctly. I think this commentCornerRed class got width: 0 and height: 0. you can have the same properties as .arrow_box
.commentCornerRed {
position: absolute;
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: transparent #ff0000 transparent transparent;
padding-left: 36px;
cursor: pointer;
}
You can make it like this.
.commentCornerRed {
position: absolute;
background: #bcb476;
border: 1px solid #08090a;
z-index: 1;
margin-left: 50px;
margin-top: -40px;
}
I made a silly mistake. I was passing the wrong id for class name. Got the desired result by passing the right id at line 85 and 87 in javascript section.
changing from
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"r1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"r1");
}
}
to
function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
changeClassOfCommentToGreen(returnIdPrefix(event)+"c1");
}else{
changeClassOfCommentToRed(returnIdPrefix(event)+"c1");
}
}
solved the problem. Thanks people for helping.
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.
The fixed element is an empty div, so it is invisible.
Currently, the fixed element is blocking click events on the item under it.
Is it possible?
This solution is too complicated
https://stackoverflow.com/a/9616491/209942
Possible solution?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Thx
The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.
See this fiddle: https://jsfiddle.net/pv0mygz5/
-- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element.
$('#click-me').on('click', function (e) {
console.log('click triggered');
});
$('.box').on('mouseover', function (e) {
//don't stop event from bubbling
console.log('hover triggered');
});
Could you also include a code snippet that demonstrates your problem?
although IE10 doesn't support it you can use
pointer-events: none;
http://jsfiddle.net/leaverou/XxkSC/light/
In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.
BR,
Saar
You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:
document.querySelector('#under').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
document.querySelector('#notunder').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
#fix {
width: 60px;
height: 200px;
position: fixed;
z-index: -1;
top: 0px;
border: 1px solid black;
}
#under {
display: inline;
}
#fixnozindex {
width: 100px;
height: 200px;
position: fixed;
left: 75px;
top: 0px;
border: 1px solid black;
}
#notunder {
display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>
I am trying to display a hidden div (with a class .details) whenever a mouse hover at an element .tags in a page. This is working but not as expected.
I want the mouse should be able to enter the displayed .details and should even be able to click on its contents as we have here in StackOverflow tags
but the moment the mouse leaves .tags everything disappears. How can I delay the appearance of .details and have it allow mouse to select
its content whenever a mouse hovers over .tags?
HTML code:
<div class = 'tags'>
<div class='details'>
<a href='a.html'> jQuery </a>
<a href='b.html'> PHP </a>
<a href='c.html'> MySQL </a>
<a href='d.html'> Ruby on Rails </a>
</div>
</div>
CSS code:
.details {
background-color: rgb(235,243,243);
border-radius: 7px;
padding: 3px;
width: 240px;
float: left;
position: relative;
margin-top: 5px;
font-weight: 400;
}
jQuery code:
$(document).ready(function(){
$('.details').hide();
$(document).on('mouseover', ".tags", function () {
var $this = $(this);
$this.find('.details').slideDown(100);
});
$(document).on('mouseleave', ".tags", function () {
var $this = $(this);
$this.find('.details').hide();
});
});
Thank you in advance.
Create jsfiddle for answer. The problem is in .parents('.tags'), because $this is already tabs element. And $this.parents('.tags') returns empty jQuery object.
Add this style to your page and see if this helps
.tags {
height: 100px;
width: 200px;
}
the reason is because the .tags div is so small. Even though the .details div populates the .tags div it doesn't force the size of the element to increase.
which is why it is so hard for you to navigate across the .details div
You are hiding the tag that you want to control the mouse over event for.
Also, look at this way of setting up the selector, it makes it far more readable:
$(".tags").on('mouseover', function () {
alert("hi");
});
http://jsfiddle.net/tVEkF/
Sorry for the unclear title, I can't formulate a better concise explanation.
I have a list, and within each list item is a link which opens an othersiwse hidden <div> using the following jQuery:
$('a.showreranks').click(function () {
$('body').append('<div class="overlay"></div>');
$('#rerank_details').slideToggle(300);
return false;
});
rerank_details being the id of the div and showreranks being the class of all the links.
This is the CSS of the div:
#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}
So, you see, the opened div is centered when it's opened. It is then populated with info relating to the list item that was clicked but you don't need to worry about that. What I need help with is the following - I don't want the div to be centered on the screen. Instead I'd like it to be positioned right below the link that was clicked. Note that there could be a lot of links on the page, one below the other and the vertical distances could be irregular. How do I accomplish this?
I think that this is what you are trying to do:
http://jsfiddle.net/SO_AMK/r7ZDm/
The answer has already been accepted, but perhaps this is a cleaner version. The animations are all fixed.
if it doesn't have to be within the normal flow of the DOM just use absolute positioning and the event object.
function(event){
var box = //get a handle to box
box.style.position = 'aboslute';
box.style.left = event.page.x;
box.style.top = event.page.y;
}