Develop Reference

react card not displaying background

Ive added an animation in CSS, the idea is that when i hover over an image of food it shows me its details as shown:
but when i add a part of css animation code , the card's background becomes transparent.
if i remove the following code it shows the result as described in 1st image, writing this results in 2nd image
.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:2400px;
display:block;
}
Rest of code is uploaded on Github
https://github.com/mareyam/Maryam-s-Restaurant

There is a problem with the z-index values, since your Restaurant component is not a children of your App component. The img components have a z-index of 999, that's why you can see the menu images. But the detail block below doesn't. You can solve it by adding the following CSS rule:
.container-fluid {
z-index: 4;
}
However I recommend avoid using too much z-index, it's very hard to maintain. Always try to solve that kind of issue with a proper nesting of your components.

External html file not filling div

I've tried piecing together examples from searches, but can't quite get what I want to do to work. After trying for 3 days, I figured I'd reach out for help.
My goal is to open a hidden div and then load another page (from the same site) within it filling up the entire div. Ideally, I would like to be able to select any number of these external html files and have them load into that hidden div. Right now it is partially working, but the external html is only filling a portion of the div. It does the same thing for my local files.
Basically I would like to click any one of a number of links > open hidden div > load selected link > close and hide div > click different link > open hidden div again > load new link.
Here is what I have so far:
$(function () {
$('a#linkid').click(function () {
$('div#pagecontent').html('<object data="http://www.jsfiddle.net">');
$('div#overlayframe').slideToggle("slow");
});
});
<div id="overlayframe">
<div id="pagecontent"></div>
<div id="exitoverlayframe">exit
</div>
</div>
page link
#overlayframe {
position:fixed;
top:2.5%;
left:2.5%;
width:95%;
height:95%;
z-index:1000;
display:none;
background-color:red;
}
#exitoverlayframe {
position:absolute;
bottom: 0px;
right: 0px;
}
The demo provided is just loading jsfiddle into the div. What I'm looking to do is load an html file from the same domain. Not sure if that is important information or not.
Here is a demo of what I have so far

Demo
The object is taking default dimensions.
Add this to your css.
object{
height:100%;
width:100%
}

loading indicator autocomplete

I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.

Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}

Adding bullet-like buttons to scrolling slideshow

So I want to add bullet-like buttons at the bottom of the slideshow, but I can't find a tutorial, so thought you guys could help me out. Here is an example: http://line25.com/wp-content/uploads/2011/jquery-slideshow/demo/index.html

Use a CSS background on your links:
...
CSS:
.someClass {
background-image:url(/images/...); <--path to your image
background-repeat:no-repeat;
display:block;
height:20px;
width:20px; <--- set sizes to match your image.
}

HTML/CSS "Pop-Up" Window and Disabled Background

This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
How is that done? And what is it called?

it's done by creating an overlaying div on the fly in JS, like:
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..

You want to create a "modal box" or "lightbox". Examples:
http://fancybox.net/
http://www.huddletogether.com/projects/lightbox2/

thickbox
eg: http://jquery.com/demo/thickbox/

For images and stuff i use prettyphoto
For text popup Dialog
this is all done with the use of jquery a javascript

You can use smoothbox, along with mootools.