Develop Reference

Change DIV display value using Javascript/Jquery function

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

Intro.js: highlighted area doesn't work as expected

I'm using the very interesting javascript library intro.js.
However, in my application, the highligted area becomes almost completely white.
I'm guessing that this is some CSS conflict, but what can I do to determine the cause of this problem?

Extracted from issue #109 (https://github.com/usablica/intro.js/issues/109):
.introjs-helperLayer {
background: transparent;
}
.introjs-overlay {
opacity: 0 !important;
}
.introjs-helperLayer:before {
opacity: 0;
content: '';
position: fixed;
width: inherit;
height: inherit;
border-radius: 0.5em;
box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
opacity: 1;
}
.introjs-helperLayer:after {
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 1000;
}
This will solve your problem. Hope it helps as it did for me! Shout to #weili1977 and #exoJSON who provided the answer in GitHub.

The problem can be fixed by setting absolute position for parent element:
.introjs-fixParent {
position: absolute !important;
}

This is common for users using table row element. I solve mine by adding these lines to css.
.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }

I managed to get a useable result with this:
.introjs-helperLayer {
mix-blend-mode: overlay !important;
}

I set the target element position to absolute (in corresponding CSS) and it works now!
see here - http://prntscr.com/1dl0db

I didn't see any jsFiddle or any online example of your problem but I try to answer your question in this way:
It's seems you're using another UI library like ExtJs or something,
make sure you don't have any CSS conflicts.
Try to change
data-intro and data-step in another element, for example if now
you have the data-intro and data-step in the form element,
change it to an upper element or a div.

In the Introjs.css, setting the z-index to 1 for the introjs-helperlayer class fixes this issue. However, I do not know the full implication of this change.

Are you trying to highlight a Table Row ()? If so I experienced this problem too. Someone posted a fix in the github issues section: https://github.com/usablica/intro.js/issues/146

Javascript - make popup div open below clicked link

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;
}

Javascript "object" not retaining css values

I'm defining a javascript "object" via the following function:
function Window(vars) {
this.div = $("<div/>", {
id: vars.id,
class: vars.styles + " box text",
css: {
top: vars.top,
left: vars.left
}
});
this.div.appendTo( $("body") );
// more stuff happens..
As you can see, the Window has a div property, which is a jQuery object. In it's instantiation, I declare the CSS classes box and text. text is not important, it's just font stuff. Here's the CSS for box, however.
.box {
z-index: 1;
position: absolute;
background: #222222;
min-width: 10%;
text-align: center;
padding: 5px;
}
.nav-extension {
z-index: 3;
padding: 8px;
background: #000000;
position: absolute;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
box is absolute at z-index 1, and another div with nav-extension is somewhere else on the page, also absolute and at z-index 3. However, when I add the Window object to my page, it appears above anything with nav-extension. All other CSS attribues, like background, still work.
I've tried altering the z-index where I instantiate the div in the "css" section I'm already using, but that didn't work either. What gives?
Edit
Also, I've inspected both the div with box and the one with nav-extension with Firefox, and the "Style" tab indicates they still have their intended z-index (not overridden).
#2: Changed vars.class to vars.styles.

Could you give us some DOM, please? It appears that that your box and the nav-extension-div are in different contexts. A non-static position sets up a new context, relatively to which all z-indexes inside are processed. A simple fiddle to demonstrate: http://jsfiddle.net/3KTyz/
<body>
<style>
.box { z-index:1; }
.nav-extension { z-index:3; }
</style>
...
<div id="context" style="position:relative"><!-- or absolute or fixed -->
...
<div class="nav-extension"><!--
will be positioned +3 relatively to other elements in #context
-->...</div>
</div>
<div class="box"><!--
will be above #context, which has (implicit) z-index:0
-->...</div>
</body>
To make nav-extension appear above the box, you will either
set #context (or one of its parents) to a z-index higher than the one of box or
move the nav-extension-div outside any context

class is a reserved word in JavaScript and cannot be used as a property or a variable name, maybe this is the culprit.

the box-shadow 'follows' the Jquery Slide Down effect

I made this tiny video (please ignore if background noises)
http://www.screenr.com/Qvts
its 13 seconds but only need to see the animation going on in second 5; (or go keepyourlinks.com and wait few seconds untill you can se the same box and click)
The css -the item has both clases-
.keepeos .top {
border-radius: 0.2em 0.2em 0.2em 0.2em;
color: #000066;
font-size: 40px;
height: 120%;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
right: 10%;
top: -4px;
width: 120%;
}
.caja_con_sombra {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
And the javascript (posted the full script but commented on the only, in my opinion, relevant line.
<script type="text/javascript">
var variable;
function check_more(id){
var nID=$(".item_lista_links:first").attr("id"); //get the newest item's id
var tid= nID.replace('link', '');
$('#are_more').load('/includes/router.php?que=check_more&last='+tid+''); // check if newer
}
function buscar_nuevos(){
var nID=$(".item_lista_links:first").attr("id");
var id= nID.replace('link', '');
variable = setInterval('check_more('+id+')',15000); //start checking
}
function ver_nuevos(id){ // when found news and retrieving
clearInterval(variable);
$('#are_more').html(''); //clear div
/*THIS is basically the only relevant javascript line, i think */
$('#load_more').slideUp(100).load('/includes/router.php?que=load_more&last='+id+'',
function() {
variable = setInterval("check_more(139125)",15000);
$(this).slideDown(600); //start checking
return false;
});
}
</script>
So how can i prevent this shadow to expand the whole vertical animation?

I'm still not exactly sure what's going on, but I know how to fix it (at least for now). It might be due to the element sliding in mixed with a height issue in jquery for elements that are children in the sliding element, but I'm not sure. Either way:
Knowing that, here is a fix. In estilo.css , find
.keepeos {
height: auto;
}
Change that to:
.keepeos {
height: 18px;
}
This will work against you if that ever becomes multi-lined, so if you need to in the future, maybe you can switch the tag while sliding and then switch it back when it's done.