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");
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.
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 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;
}
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!