Not sure exactly how to put this but here goes. I have a page that I set up to show and hide divs when a certain link is clicked and everything is working fairly well apart from this. when the first two links are pressed, the div that appears becomes linked the same as the last link on the page. Likewise the third is linked the same way and also has underline and white text (as I set up for general links on the site)
The div that shows up when a link is clicked shouldn't be linked at all.
Here's my code:
HTML
<div id="wrapper">
<div id="container">
<div id="shown" class="content">
<div id="list">
<div id="filler"></div>
<div id="a1" class="inactive">WHAT IS LIGHT IT UP?</div>
<div id="spacer"></div>
<div id="a2" class="inactive">WHO</div>
<div id="spacer"></div>
<div id="a3" class="inactive">REGISTRATION FEES</div>
<div id="spacer"></div>
<div id="a4" class="inactive">WHEN</div>
<div id="spacer"></div>
<div id="a5" class="inactive">AWARDS</div>
<div id="spacer"></div>
<a href="javascript:show('shown','id6','a6');"><div id="a6" class="inactive">GLOW DANCE PARTY!</div>
<div id="filler"></div>
</div>
<div id="id1" class="hidden">text 1</div>
<div id="id2" class="hidden">text 2</div>
<div id="id3" class="hidden">text 3</div>
<div id="id4" class="hidden">text 4</div>
<div id="id5" class="hidden">text 5</div>
<div id="id6" class="hidden">text 6</div>
</div>
</div>
CSS
#wrapper{width:94%; float:left; position:relative; left:3%; background-color:rgba(163,207,98,0.7); margin:auto; border-radius:1.2em;}
#container{width:96%; float:left; position:relative; left:2%; margin-top:2%;}
#spacer{background-color:rgba(0,0,0,0.7); float:left; box-shadow: -1px 1px 1px rgba(255,255,255,0.7);}
#filler{height:1.5em; width:100%;}
#list{
overflow:hidden;
float:left;
letter-spacing:1px;
font-family:upc;
font-size:1.35em;
}
#list a:link{text-decoration:none}
.active{
text-shadow: -2px 1px 1px #000;
background-color:rgba(0,0,0,0.5);
color:#A3CF62;
}
.inactive{
text-shadow: -2px 1px 1px rgba(255,255,255,0.5);
color:#000;
}
.inactive:hover{
text-shadow: -2px 1px 1px #000;
background-color:rgba(0,0,0,0.5);
color:#A3CF62;
border-radius:2em;
}
.hidden {display: none}
.unhidden {
margin-top:1.5em;
margin-bottom:1.5em;
display:block;
text-align:justify;
color:#A3CF62;
}
#shown{
float:left;
position:relative;
background-color:rgba(0,0,0,0.5);
border-radius:1.2em;
}
#media screen and (orientation:landscape){
#list{width:20%; text-align: center; position:relative; float:left; right:20%;}
#shown{width:80%; float:left; left:20%;}
#spacer {
width:90%;
margin-top:0.1em;
margin-bottom:0.1em;
margin-left:auto;
margin-right:auto;
height:0.1em;
}
#stretch{display:none}
.unhidden{width:80%; vertical-align: middle; float:left; position:relative; right:10%; overflow-y:auto;}
.active{border-top-left-radius:2em; border-bottom-left-radius:2em;}
}
JavaScript
var old_target,old_trigger;
function show(win, target, trigger){
document.getElementById(win).className = 'content';
if(old_target!==undefined) document.getElementById(old_target).className = 'hidden';
if(old_trigger!==undefined) document.getElementById(old_trigger).className = 'inactive';
document.getElementById(target).className = 'unhidden';
document.getElementById(trigger).className = 'active';
old_target = target;
old_trigger = trigger;
}
The last <a href> element is missing its closing tag, causing the browser's HTML parser to generate unexpected results. To see the unintended effect, select 'Inspect element' from the right-click menu.
Related
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.
<div class="main">
<div class="test" style="width:40px;height:100px"><div>
<div class="test" style="width:20px;height:150px;"><div>
<div class="test" style="width:40px;height:100px;"><div>
<div class="test" style="width:40px;height:100px;"><div>
</div>
.main{
position:relative;
border:1px solid red;
width:140px;
height:400px;
}
.test{
float:left;
border:1px solid silver;
position:relative;
padding:10px;
display:inline-block;
}
Div and its height and width are coming dynamically. I am trying to fit the div width in the layout .2 per on raw.
Please suggest.
The height of the container div should be auto. So, it'll take the optimal space to fit the inner elements.
.main {
...
height: auto;
}
Demo
.main {
border: 1px solid red;
width: 140px;
height: auto;
overflow: hidden;
}
.test {
float: left;
border: 1px solid silver;
position: relative;
padding: 10px;
display: inline-block;
}
<div class="main">
<div class="test" style="width:40px;height:100px"></div>
<div class="test" style="width:20px;height:150px;"></div>
<div class="test" style="width:40px;height:100px;"></div>
<div class="test" style="width:40px;height:100px;"></div>
</div>
If you already use Bootstrap you can use its classes to make 2 items per row
https://jsfiddle.net/3mdrrjf8/1/
<div class="main row">
<div class="test col-md-8 col-xs-6" style="height:100px"></div>
<div class="test col-md-8 col-xs-6" style="height:150px;"></div>
<div class="test col-md-8 col-xs-6" style="height:100px;"></div>
<div class="test col-md-8 col-xs-6" style="height:100px;"></div>
</div>
Demo is here
I want to remove only image and not the whole div on clicking the cross button. I took Reference from here.
$('.remove-img').click(function(e) {
$( this ).parent().remove();
});
Traverse to parent() then .find() image excluding the current image. Then you can use remove()
Use
$('.remove-img').click(function (e) {
$(this).parent().find('img').not(this).remove();
//If you want to remove all images
//$(this).parent().find('img').remove();
});
DEMO
You could select the parent first and then use find().
$('.remove-img').click(function(e) {
$( this ).parent().find('img').remove();
});
JSFiddle
Use both .parent() and .find().
Check out this fiddle.
Here is the snippet.
$('.remove-img').click(function(e) {
$( this ).parent().find("img").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="" style="height:100px; width:200px; margin-right:10px; float:left;">
<img class="remove-img" src="http://www.dlwp.com/Templates/DLWP/Images/popup-close-button.png" style="float:right; vertical-align:top; height:18px; width:18px; z-index:9999;" >
<div style="height:100px; width:200px; border:1px solid #999; float:left; margin: 0 10px 0 0; box-shadow: 0 0 1px 1px #888888;">
<a class="" href="#" title="">
<img src="http://www.mytriptokerala.com/images/Attractions/Backwaters-1858256226.jpg" style="height:100px; width:200px; z-index:999;" id="">
</a>
</div>
</div>
<div id="" style="height:100px; width:200px; margin-right:10px; float:left;">
<img class="remove-img" src="http://www.dlwp.com/Templates/DLWP/Images/popup-close-button.png" style="float:right; vertical-align:top; height:18px; width:18px; z-index:9999;" >
<div style="height:100px; width:200px; border:1px solid #999; float:left; margin: 0 10px 0 0; box-shadow: 0 0 1px 1px #888888;">
<a class="" href="#" title="">
<img src="http://sympol.cusat.ac.in/img/photo_grid/grid-img-07.jpg" style="height:100px; width:200px; z-index:999;" id="">
</a>
</div>
</div>
<div id="" style="height:100px; width:200px; margin-right:10px; float:left;">
<img class="remove-img" src="http://www.dlwp.com/Templates/DLWP/Images/popup-close-button.png" style="float:right; vertical-align:top; height:18px; width:18px; z-index:9999;" >
<div style="height:100px; width:200px; border:1px solid #999; float:left; margin: 0 10px 0 0; box-shadow: 0 0 1px 1px #888888;">
<a class="" href="#" title="">
<img src="http://wikitravel.org/upload/shared//thumb/6/65/Kerala_Backwaters.jpg/350px-Kerala_Backwaters.jpg" style="height:100px; width:200px; z-index:999;" id="">
</a>
</div>
</div>
By using the first option of the function
$('.remove-img').click(function(e) {
var target = e.currentTarget;
$(target).find("img").remove();
});
I want to display the button in div tag on right side.I use the code which I used to display the div content on right side.Now I have a problem that my div tag display on left side.
I want to display login div tag on right side.
I created a layout.I want to display login div tag where I marked as red and named it btn div.I marked current display of div tag in blue color.
CSS
.login {
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
http://jsfiddle.net/mount/q4gxv7y2/
You can use an absolute position for your login div. For that, you also have to set the header position as relative, in order to make position the login div relatively to it.
Position absolute but relative to parent
.header{
position:relative;
background:red;
width:100%;
height:100px;
margin-bottom:300px
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
width:40%;
position:absolute;
right:0;
bottom:0;
background:blue;
}
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
html:
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">
<input type='button' value='right click' class='right-button'>
</div>
</div>
css:
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
border: 1px red solid;
height: 100%;
position:relative;
}
.header{
width: 100%;
height: 100px;
border: 1px green solid;
}
.right-button{
position:absolute;
bottom:0;
right:0;
}
Jsfiddle Demo
You can use something like this:
CSS
.login {
margin:0 auto;
padding:0
text-align:right;
float:right;
width:40%;
}
.ribbon{
float:left;
}
.logo{
float:left;
}
.header {
width:100%;
height:auto; // or specify the max height of content
outline:none
position:relative;
}
HTML
<div class="header">
<div class="ribbon"></div>
<div class="logo"></div>
<div class="login">//btn</div>
</div>
Use position:absolute to achieve this.
HTML
<div class="header">
<div class="ribbon">
</div>
<div class="logo">
</div>
<div class="login">
//btn
</div>
</div>
CSS
.header {
width:100%;
height:40px;
outline:1px solid green;
position:relative;
}
.login{
margin:0;
padding:0px 0px 0 0;
text-align:right;
float:right;
width:40%;
outline:1px solid red;
position:absolute;
right:0;
bottom:0;
}
JSFiddle demo
Side note: Keep in mind that class is only used for objects placed more than once on a page. If an object is only placed once on the page, in your case for example: header, logo, then you should use id instead of class. Biggest reason for this is because id's have a higher specificity score compared to classes. So you can give styles to all objects more controlled.
Something like:
.header {
position: relative;
}
. login {
position: absolute;
bottom: 0;
right: 0;
}
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");