Develop Reference

How to up my div inner overflow-x:auto;?

How to show my div inner overflow scroll? i need show this div. I did position absolute and z index but not showing div. it is showing inner parent div. Someone help me? Thanks a lot :)
<div class="otobus_alan">
<div class="otobus">
<a href="" class="koltuk">Koltuk
<div class="ekstra_div">
Test
</div>
</a>
</div>
</div>
.otobus_alan {
width:600px;
height:200px;
overflow-x:auto;
position:relative;
margin-top:100px;
z-index:1;
}
.otobus {
float:left;
display:block;
width:1000px;
height:180px;
background:red;
position:relative;
z-index:1;
}
.ekstra_div {
position:absolute;
display:none;
z-index:2;
padding:25px;
background:blue;
width:50px;
height:50px;
top:-40px;
left:100px;
}
.koltuk {
float:left;
background:white;
}
.koltuk:hover .ekstra_div {
display:block;
}
https://codepen.io/musti_nation/pen/RyZBoe

merge all divs as a single image and upload it to server as a jpg file

I am having the divs bellow:
<div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url('https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallpaper.jpg'); background-repeat:no-repeat;">
<div style="width:100px; height:100px; position:absolute; top:30px; left:100px; z-index:10; background-image: url('https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif'); background-repeat:no-repeat;"></div>
<div style="width:100px; height:100px; position:absolute; top:30px; left:300px; z-index:10; background-image: url('https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif'); background-repeat:no-repeat;"></div>
<div style="width:200px; height:30px; position:absolute; top:210px; left:300px; z-index:10; font-size:40px; color:#000; text-align:center;">SOME TEXT</div>
</div>
is there any possibility to merge them as a single image and upload it to server?
I tried html5 canvas but a lot of times it returns a blank image.
Is it possible to do this with another way?
It's important to keep the z-index of each div and position
Thank you all

First get html2pdf https://github.com/spipu/html2pdf
require_once dirname(__FILE__).'/../vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;
use Spipu\Html2Pdf\Exception\Html2PdfException;
use Spipu\Html2Pdf\Exception\ExceptionFormatter;
$html_content = '<div style="width:800px; height:420px; position:absolute; top:0px; left:0px; z-index:10; background-image: url(\'https://3t27ch3qjjn74dw66o1as187-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/052516-800x420-vege-Wallpaper.jpg\'); background-repeat:no-repeat;">
<div style="width:100px; height:100px; position:absolute; top:30px; left:100px; z-index:10; background-image: url(\'https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif\'); background-repeat:no-repeat;"></div>
<div style="width:100px; height:100px; position:absolute; top:30px; left:300px; z-index:10; background-image: url(\'https://myanimelist.cdn-dena.com/images/useravatars/2793079.gif\'); background-repeat:no-repeat;"></div>
<div style="width:200px; height:30px; position:absolute; top:210px; left:300px; z-index:10; font-size:40px; color:#000; text-align:center;">SOME TEXT</div>
</div>';
## get html2pdf https://github.com/spipu/html2pdf
$html2pdf = new HTML2PDF('P', 'A4');
$html2pdf->writeHTML($html_content);
$file = $html2pdf->Output('temp.pdf','F');
# CONVERT PDF TO IMAGE
$im = new imagick('temp.pdf');
$im->setImageFormat( "jpg" );
$img_name = time().'.jpg';
$im->setSize(800,600);
$im->writeImage($img_name);
$im->clear();
$im->destroy();

Way to not display webpage in Internet Explorer until after javascript is allowed?

I have built a simple page that displays text and various formatted elements and also a photo gallery. The photo gallery has a horizontal scrollbar beneath a larger image. The scroll area contains thumbnails that are loaded into the larger image area after they are clicked on. This works fine in Chrome, Firefox, and Safari.
However, in Internet Explorer the JavaScript is blocked initially and the user must allow it to run. Prior to the JavaScript being allowed by the user the page is displayed in the background but the formatting for the photo gallery is incorrect because it relies upon the currently blocked JavaScript (the larger images that are currently hidden are displayed down the page and it looks bad). Is there a workaround where I do not display the webpage at all until after the JavaScript is unblocked or perhaps another easy solution?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index</title>
<style type="text/css">
body {
/*font-size:12px; modify this within each element*/
}
#wrapper {
width:950px;
height:800px;
margin-left:5px;
margin-top:5px;
border-top:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:5px solid #000000;
border-left:5px solid #000000;
padding:0px;
}
#topwrap {
width:950px;
height:50px;
}
#topturqsq {
float:left;
width:250px;
height:50px;
background-color:#7ECCC0;
}
#topartdeco{
float:left;
width:698px;
height:48px;
background-color:#FA8072;
padding:1px;
}
#aptname{
float:left;
width:248px;
height:149px;
border-bottom:1px solid #bbb;
vertical-align:top;
}
#contactbanner{
float:left;
width:690px;
height:29px;
border-bottom:1px solid #000000;
text-align:right;
font-size:20px;
padding-right: 10px;
padding-top:10px;
font-family:arial,helvetica,sans-serif;
}
#photogallery{
width:698px;
height:555px;
border-bottom:1px solid #bbb;
float:left;
}
#maintext{
font-size:15px;
font-family:arial,helvetica,sans-serif;
}
ul{
list-style-type:none;
margin:10;
padding:0;
vertical-align:top;
position:relative;
}
a{
display:block;
color:#000000;
text-decoration:none;
}
#leftnav{
position:relative;
width:248px;
height:600px;
font-size:20px;
float:left;
font-family:arial,helvetica,sans-serif;
}
#leftwrap{
position:relative;
float:left;
width:249px;
height:750px;
border-right: 1px solid black;
}
#linkDiv{
width:698px;
height:120px;
overflow:auto;
white-space:nowrap;
border: 1px solid black;
float:left;
padding-top:15px;
}
#divLinks{
float:left;
}
#container1,#container2,#container3,#container4,#container5,#container6,#container7,#container8{
width:500px;
height:375px;
margin:0 auto;
padding-left:95px;
padding-top:20px;
padding-bottom:20px;
}
</style>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById('container'+idInfo).style.display = 'block';
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="topwrap">
<div id="topturqsq">
</div>
<div id="topartdeco">
<img src="images/artdeco.png" width="349" align="left"> <img src="images/artdeco.png" width="349" align="right">
</div>
</div>
<div id="leftwrap">
<div id="aptname">
<img style="position:relative; top:15px; left:0px;" src="images/banner.png" width="248" >
</div>
<div id="leftnav">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Nearby</li>
<li>Photos</li>
<li>Lease</li>
<li>Contact US</li> <br>
<li><span style="text-align:center;display:block;text-decoration:underline">Floor Plans </span></li>
<li>2 Bedroom</li>
<li>1 Bedroom</li>
<li>Corporate</li>
<li>Efficiency</li>
</ul>
</div>
</div>
<div id="contactbanner">
<img src="images/phone.png" height="20" > Call us: (555) 555 - 5555
</div>
<div id="photogallery">
<div id="divLinks">
<div id="container1"><img src="images/Chrysanthemum.jpg" width="500" height="375" border="1"></div>
<div id="container2"><img src="images/Desert.jpg" width="500" height="375" border="1"></div>
<div id="container3"><img src="images/Hydrangeas.jpg" width="500" height="375" border="1"></div>
<div id="container4"><img src="images/Jellyfish.jpg" width="500" height="375" border="1"></div>
<div id="container5"><img src="images/Koala.jpg" width="500" height="375" border="1"></div>
<div id="container6"><img src="images/Lighthouse.jpg" width="500" height="375" border="1"></div>
<div id="container7"><img src="images/Penguins.jpg" width="500" height="375" border="1"></div>
<div id="container8"><img src="images/Tulips.jpg" width="500" height="375" border="1"></div>
</div>
<script type="text/javascript">
window.onload = function() { showDiv('1'); }
</script>
<div id="linkDiv">
<img src="images/Chrysanthemum.jpg" width="120" height="90">
<img src="images/Desert.jpg" width="120" height="90">
<img src="images/Hydrangeas.jpg" width="120" height="90">
<img src="images/Jellyfish.jpg" width="120" height="90">
<img src="images/Koala.jpg" width="120" height="90">
<img src="images/Lighthouse.jpg" width="120" height="90">
<img src="images/Penguins.jpg" width="120" height="90">
<img src="images/Tulips.jpg" width="120" height="90">
</div>
</div>
<div id="maintext">
<strong>heading</strong>
<blockquote>bunch of text</blockquote>
</div>
</div>
</body>
</html>

I guess in theory you could * { display:none; } to hide everything, then bring it back when JS is accepted.. assuming that version of IE supports the wildcard (*) in CSS.
Update: Since you're doing this with the header.. I'm just going ot assume it has an ID of header..
<div id="header" style="display:none;">CONTENT</div>
<script type="text/javacript">
window.onload = function(){
var h = document.getElementById('header');
h.style.display = 'block';
}
</script>

slideDown menubar slides down other document

I made a menubar using a <div> tag. When it is clicked the <div> below it slides down, and another content below those two <div>'s should stay in its place, but it goes down too.
You can see picture here
As you see in this picture when I click to slide down <div> , the other <div> in bottom of that goes down too. How to fix it?
HTML
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
}
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
}
jQuery
$(document).ready(function(){
$('#slide').click(function(){
$('#panel').stop().slideToggle(570);
});
});

You can make a few position changes in your CSS, and place your second <div> inside your first. top:100% mean's that your second div will animate from the bottom of your first div:
HTML
<div id="slide">click to slide down
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#slide{
text-align:center;
border:solid 1px #101010;
width:500px;
height:30px;
background:#cccccc;
position:relative;
}
#panel{
position:absolute;
top:100%;
box-sizing:border-box;
text-align:center;
border:solid 1px #101010;
width:100%;
height:200px;
display:none;
background:#ff0000;
}
JSFiddle

Try this:
HTML
<div id="menu_container">
<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
</div>
<div>this is another div</div>
CSS
#menu_container { position:relative; }
#panel { position:absolute; top:100%; left:0; }

Replace your code with this
#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
z-index: 10;
position: absolute;
}

Fadeout Each div separately

I have some divs with unique ids and same class mbox. These divs holds some info. At the bottom of each div I have a div with same class to all divs removeme.
How is it possible when I am clicking the div with class removeme to fade out the div with class mbox? But only mbox and not the other next to it
My Html:
<style>
.mbox{
width:300px;
height:280px;
float:left;
margin-left:5px;
margin-right:10px;
margin-bottom:10px;
background-color: #E0E0E0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #CACACA;
}
.removeme{
width:200px; height:45px; float:left; background-color: #F00;
}
.title{
width:290px;
float:left;
margin-left:5px;
margin-top:5px;
text-align:center;
color:#333;
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
font-weight:bold;
}
.photoholder{
width:200px;
height:150px;
float:left;
margin-left:50px;
margin-top:8px;
background-color:#FFF;
}
.imgclass{
float:left;
margin-left:10px;
margin-top:5px;
}
</style>
<div class="mbox" id="1">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<div class="mbox" id="2">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<script type="text/javascript">
$('.removeme').click(function () {
$(this).fadeOut("fast");
});
</script>
Check my demo: http://jsfiddle.net/fWtm6/9/

You can use .parent() to get the parent element (in this case you need 2 to get the parent .mbox
$('.removeme').click(function () {
$(this).parent().parent().fadeOut();
});
http://jsfiddle.net/kkd3r/
EDIT: After a second look at the jQuery API .parents() would be a better idea as it traverses all the parent elements so you can explicitly filter out elements by class or id no matter how far it is up the tree
$('.removeme').click(function () {
$(this).parents('.mbox').fadeOut();
});
http://jsfiddle.net/kkd3r/1/

Try this, Hope it will answer your question..
$('.removeme').click(function () {
var str=$(this).parent().closest(".mbox");
$(str).fadeOut("fast");
});

Replace this line
$(this).fadeOut("fast");
with this
$(this).closest('.mbox').fadeOut("fast");