I am trying to debug a legacy web application that uses bootstrap.js to raise a modal and gray out the page underneath. Warning, I am NOT a JS/HTML/CCS dev, but apparently this is mine now.
The code working properly depending on the iframe. When the iframe consists of standard html, it seems to work fine. When the iframe consists of this strange sort-of HTML produced by WebFocus (that only renders properly in IE).
Anyway, when the modal opens, the following changes are made to the DOM:
This div tag is added to the body element:
<div class="modal-backdrop fade in"></div>
The associated styles are these:
/*media all*/
.in.modal-backdrop {
filter: alpha(opacity=50);
opacity: 0.5;
}
/*media all*/
.fade.modal-backdrop {
filter: alpha(opacity=0);
opacity: 0;
}
Also, the open-modal style is applied to the body element like so:
<body class="modal-open">
With the associated style:
/*media all*/
.modal-open {
overflow: hidden;
}
Now I would expect that the modal-backdrop style to have to apply to something other than an empty div tag for it to work. How does that work? Why would it work when applied to one type of iframe but not another.
The iframe is as follows:
<iframe name="Report Content" width="100%" height="400" title="Webfocus HTML Report" id="htmlReportFrame" src="/path/to/webfocus/report?reportParam=123456" onreadystatechange="readyStateChange()" onload="return readyStateChange();">Your
browser does not support IFRAMES</iframe>
The report reference by the iframe (/path/to/webfocus/report?reportParam=123456) returns this:
<html>
<head>
<title>Figure 1</title>
<style type="text/css">
<!--
#media screen {
.spacer { height:792pt; }
}
#media print {
.spacer { height:792pt; }
}
.x1 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
color:#000000;
}
.x2 {
white-space:nowrap;
font-family:Arial;
font-size:9pt;
font-weight:bold;
color:#000000;
}
.x3 {
white-space:nowrap;
font-family:Arial;
font-size:9pt;
font-weight:bold;
color:#000000;
text-align:left;
}
.x4 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
text-align:center;
}
.x5 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
}
.x6 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
}
.x7 {
white-space:nowrap;
font-family:Arial;
font-size:7pt;
font-weight:bold;
color:#000000;
}
.x8 {
white-space:nowrap;
font-family:Courier New;
font-size:12pt;
}
.x9 {
white-space:nowrap;
font-family:Courier New;
font-size:12pt;
}
-->
</style>
</head>
<body>
<div style="position:relative" class="spacer">
<div style="position:absolute;top:216pt;left:104pt;width:434pt;height:1pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
font-size:1pt"></div>
<div style="position:absolute;top:237pt;left:104pt;width:432pt;height:1pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
font-size:1pt"></div>
<div style="position:absolute;top:218pt;left:104pt;width:1pt;height:21pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
"></div>
<div style="position:absolute;top:218pt;left:536pt;width:1pt;height:21pt;background-color:#000000;
border-top:#000000 1.00pt solid;
border-bottom:#000000 1.00pt solid;
border-left:#000000 1.00pt solid;
border-right:#000000 1.00pt solid;
"></div>
<IMG SRC="file:///C:/orange_purple25x12.gif" style='position:absolute;left:108pt;top:222pt;width=25pt;height=12pt;' >
<IMG SRC="file:///C:/blueline5025x12.gif" style='position:absolute;left:252pt;top:222pt;width=25pt;height=12pt;' >
<IMG SRC="file:///C:/yellowlavender25x12.gif" style='position:absolute;left:396pt;top:222pt;width=25pt;height=12pt;' >
<div style="position:absolute;top:221pt;left:136pt; text-align:left;">
<span class='x5'>Category 1</span></div>
<div style="position:absolute;top:221pt;left:280pt; text-align:left;">
<span class='x6'>Category 2</span></div>
<div style="position:absolute;top:221pt;left:424pt; text-align:left;">
<span class='x7'>Category 3</span></div>
<div style="position:absolute;top:0pt;left:36pt; text-align:left;">
<span class='x2'> </span></div>
<div style="position:absolute;top:11pt;left:36pt; text-align:left;">
<span class='x3'>Figure Name</span></div>
<div style="position:absolute;top:23pt;left:297pt; text-align:left;">
<span class='x4'>United</span></div>
<IMG SRC="file:///C:/IBIUniqueName0.png" style='position:absolute;left:36pt;top:33pt;' >
<div style="position:absolute;top:28pt;left:36pt; text-align:left;">
<span class='x8'> </span></div>
</div>
</body>
</html>
It looks like standard html, except that it reference local image files (for example file:///C:/IBIUniqueName0.png) that don't exist. I believe that they are being delivered to the browser using some sort of strange mime type, but I don't know how.
I can post more code, but I need to remove sensitive information.
Related
I have a problem connecting 2 divs with dotted line, and I was trying to do this with ::after and ::before but without success. You can check my structure at:
JS fiddle code
and image of what I want to achieve:
Is this possible? If yes, then what should I add or change in my code?
Thanks.
Best regards,
Using :before/:after and border-radius you can achieve this (strictly with css). I included an example below.
https://jsfiddle.net/m3zoz34f/8/
.box-top-right{
position: relative;
}
.box-top-right:after{
content: ' ';
border-bottom-right-radius: 175px;
width: 106%;
position: absolute;
border-bottom: 2px solid red;
right: 0;
bottom: -175px;
height: 185px;
border-bottom-style: dashed
}
.box-bottom:before{
content: ' ';
width: 66%;
border-top: 2px solid red;
height: 135px;
position: absolute;
top: -125px;
border-top-left-radius: 150px;
border-top-style: dashed;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
Please check below:
P.S.: No Js, Just Css
.container{
position:relative;
}
.line{
position:absolute;
left:65px;
top:250px;
right:0;
width:420px;
border-bottom: 1px solid #000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(-45deg);z-index:1;
}
.box-top, .box-bottom{
position:relative;
width:100%;
min-height:400px;
}
.box-top-left, .box-top-right, .box-bt-left, .box-bt-right{
float:left;
}
.box-top-left, .box-bt-right{
width:65%;
background-color:red;
color:white;
min-height:190px;
text-align:center;
padding-top:10px;
}
.box-top-right, .box-bt-left{
width:30%;
border:2px solid black;
margin-left:2%;
min-height:90px;
text-align:center;
padding-top:10px;
}
.box-bt-left{
margin-left:0;
margin-right:2%;
}
.box-bt-right{
background-color:gray;
}
<div class="container">
<div class="box-top">
<div class="box-top-left">
This is top left box
</div>
<div class="box-top-right">
This is top right box
</div>
</div>
<div class="line">
</div>
<div class="box-bottom">
<div class="box-bt-left">
This is bottom left box
</div>
<div class="box-bt-right">
This is bottom right box
</div>
</div>
</div>
please fiddle I work on for you ... its little advance JS
but you can reuse it every where .
https://jsfiddle.net/m3zoz34f/6/
if you want to add new lines over here in html add
<div id="svgContainer" style="margin: 50px 50px;">
<svg id="svg1" width="0" height="0">
<path id="myNewPath" d="M0 0" stroke-width="0.3em" style="stroke:#555; fill:none; " />
##### over here add new <path like the one up and put special name ID
</svg>
</div>
then in the JS
function connectAll() {
// connect all the paths you want!
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
}
see this
connectElements($("#svg1"), $("#myNewPath"), $("#fromLine"), $("#toLine"));
#myNewPath : path name you put in html
#fromLine : ID or class of the first block
#toLine : ID or class of second block ....
and you can link as much blocks as you want
its responsive BTW .
Basically, my code right now keeps a few of the divs I have on my website hidden and then when you click on a link, it makes the divs appear.
I need help so that it so that when I click one link and a div appears and I click on another link, the previous one disappears.
So let's say I click the link 'About', the div appears, good. Then I click on 'Help' and that div just appears OVER 'About' making things messy.
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
^That is my code, here is a sample of it in my website:
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
The class 'content3' is just styling in my css file.
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-650px;
margin-left:auto;
margin-right:auto;
}
UPDATE:
Sorry, I should elaborate more..
I need to be able to basically click a first link and have it show a box of text.
and then click a second link that will hide that box of text associated with the first link and show a new one that is associated with the second link.
This is my FULL code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}}
</script>
</head>
<body>
<div class="title">
<p class="text_header">Benjamin Midyette</p>
<p style="margin-top:-50px">Computer/Network Engineer, Web Developer</p>
</div>
<div class="content" align="left">
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
</div>
<div id="Resume" class="content2"></div>
<div id="link" class="hidden" style="position:absolute; left:300px; margin-top:-700px;">
<img alt="A Link" src="pictures/link.png" height="420" width="420">
</div>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('http://www.nsgaming.us/pictures/nebula.png');
background-repeat: no-repeat;
background-size: 100% auto;
background: url('http://www.nsgaming.us/pictures/nebula.png') fixed 100% 100%;}
/*Text styling*/
.text_header {
font-size:72px
}
.title {
margin-top:-30px;
margin-left:auto;
margin-right:auto;
text-align: center;
color:#ffffee;
width:600px;
border-radius:8px;
background-color:#000000;
background:rgba(0,0,0,.9);
padding-bottom:1px;
}
/*Top Button styling*/
.button {
border:2px solid black;
background: #3B3B3B; /*#8C8C8C*/
padding: 3.5px 5px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
color: white;
font-size: 18px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
}
.button:hover {
background: #770819;
color: #ffffff;
text-decoration:none;}
.button:active {
background: #590819;}
.content {
margin-top:40px;
border: 1px solid black;
border-radius:8px;
Opacity:0.8;
background:#222222;
width:175px;
height:400px;
padding-left:20px;
padding-top: 0px;}
.content2 {
background-color:#222222;
border-radius:4px;
width:800px;
height:650px;
padding:5px;
padding-left:40px;
margin-top:-401px;
margin-left:auto;
margin-right:auto;
}
.content3 {
background-color:#FFFFFF;
width:750px;
height:600px;
padding:5px;
padding-left:40px;
margin-top:-635px;
margin-left:auto;
margin-right:auto;
}
.hidden {
display: none; }
.unhidden {
display: block; }
container {
align:right;}
opener {
align:left;}
You could do like this, if you want to display and hide particular div on click of button.
<style>
.hidden{
display:none;
}
.unhidden{
display:block;
}
</style>
<script type="text/javascript">
function unhide(clickedButton, divID) {
var item = document.getElementById(divID);
if (item) {
if(item.className=='hidden'){
item.className = 'unhidden' ;
clickedButton.value = 'hide'
}else{
item.className = 'hidden';
clickedButton.value = 'unhide'
}
}}
</script>
<body>
<div id="about" class="hidden">
<div class="content3">
<p>This is the about section.</p>
<p>It is currently still being worked on.</p>
</div>
</div>
<input type="button" onclick="unhide(this, 'about') " value="unhide">
</body>
UPDATE: Pass the other div id which you want to make disappear on click of div one. Please update your code with below's code.
SCRIPT
<script type="text/javascript">
function unhide(divID, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
</script>
HTML
<p style="padding-top:20px">
This is a link<br><br>
About
</p>
I don't understand your question properly. But if you are trying to make different div elements visible upon clicking different links, then this is what you should do:
<div id = "anchor-div">
<ul>
<li> <a id="about-anchor" href="javascript:;"> About</a> </li>
<li> <a id="help-anchor" href="javascript:;"> Help </a> </li>
</ul>
</div>
<div id="content-div">
<div id="about-content"></div>
<div id="help-content"></div>
</div>
$(document).ready(function(){
//if you wish to keep both the divs hidden by default then dont forget to hide //them
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#help-content").show();
$("#about-content").hide();
});
});
Also don't forget to add jQuery library.
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");
I have the following layout (Parent div, two child divs)
wanted to make this layout responsive for browser's width, so anytime the user changes the browser's width this layout should occupies the same area of screen
also, I wanted to middle-text the content, I've tried vertical-align: middle;, display: table-cell;
any suggestions?
Markup here
this is your solution html with css
<html>
<head>
<title>test</title>
<style>
.main{
width:97%;
border:1px solid #000;
height:100px;
padding:1%;
}
.subone{
width:30%;
border:1px solid #000;
float:left;
height:100px;
margin-right:2%;
}
.subtwo{
width:67%;
border:1px solid #000;
float:left;
height:100px;
}
</style>
</head>
<body>
<div class="main">
<div class="subone">
</div>
<div class="subtwo">
</div>
</div>
</body>
</html>
I have created you a fluid layout, with your divs. You do not need to use media queries.
And also to use
vertical-align:middle;
you must put
display:table;
on the parent div and you must not float the divs inside.
You can check this example
will it be helpful???
use diplay:table; for parent and display:table-cell for childs..decalare parents width in percentage with overflow:hidden;
HTML::
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
CSS ::
.parent{
display:table;
width:80%;
border-spacing:4px;
border:2px solid black;
overflow:hidden;
}
.first{
text-align:center;
display:table-cell;
border:2px solid black;
width:100px;
height:200px;
}
.second{
text-align:center;
display:table-cell;
border:2px solid black;
height:200px;
}
FIDDLE
I have copied the javascript of iscroll-lite from here
html code
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
The content of desc tag is going to overflow
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
USING iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
On scrolling,I just get the following
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.
I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0
Please,Guide me!!
This is answered here.
The concept was implementing with the tags such as <ul> and <li> within the <wrapper> and <scroller> div.
Excellent answer!