I have the CSS declare bellow:
#loadingBox-holder
{
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
filter: alpha(opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
opacity:0.7;
-moz-opacity: 0.7;
z-index: 1000;
background-color:#000;
}
#loadingBox
{
position: fixed;
left: 40%;
top: 50%;
z-index: 1000;
height: 36px;
width: 138px;
border:1px solid #ccc;
background:#fff !important;
padding:5px 5px 10px 10px;
opacity:100;
/*-moz-opacity: 100 !important; */
}
and HTML:
<div id="loadingBox-holder" style="">
<div id="loadingBox">
<p>Please wait...</p>
<img src="../Images/loading.gif" alt="" />
</div>
</div>
The code above is a loadding indicator. My problem is the loadingBox-hold is gray transparent but I want the loadingBox is normal not transprent. I add the css bellow:
filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity:1;
-moz-opacity: 1;
However the child div still transparent.
Where is my mistakes and how to fix that ?
Thanks !
If you are using position fixed then moving loadingBox out of holder would not make any difference in the final output and it'll fix your opacity issue.
<div id="loadingBox-holder" style="">
</div>
<div id="loadingBox">
<p>Please wait...</p>
</div>
DEMO
Related
I would like to add 3 div elements in a top section of a card where currently there is an image. I would like to add an image, logo and text message in place of that image. What can I do???
Thanks in Advance,
Here's my code
1)HTML
<div class="card">
<b-card no-body
style="width: 20rem;"
img-src="https://placekitten.com/380/200"
>
<b-list-group class="group">
<b-list-group-item>Anvay Joshi</b-list-group-item>
<b-list-group-item>Computer</b-list-group-item>
<b-list-group-item>A-1103</b-list-group-item>
<b-list-group-item>30-11-1997</b-list-group-item>
<b-list-group-item>anvay.joshi#viit.ac.in</b-list-group-item>
<b-list-group-item>9766583977</b-list-group-item>
</b-list-group>
<b-button href="#" variant="primary">QR Code</b-button>
</b-card>
2)CSS
.group {
text-align: center;
}
.header{
text-align: center;
}
.card {
margin: 25px 120px 25px 240px;
border: none;
}
My Actual output looks like as shown
/Users/anvayjoshi/Desktop
My expected output is the top part of the card as shown
/Users/anvayjoshi/Desktop
Please help me !!!!!
Instead of using the img-src attribute on b-card, you can just add a new b-list-group-item.
Here's a jsfiddle demonstrating that, and an image of the result.
new Vue({
el: "#app",
data: {
}
});
.image {
float: left;
}
.logo {
float: left;
margin-right: 10px;
margin-left: 10px;
margin-top: 20px;
}
.text {
float: left;
width: 100px;
}
.group {
text-align: center;
}
.header {
text-align: center;
}
.card {
margin: 10px;
border: none;
}
<div id="app">
<div class="card">
<b-card no-body style="width: 20rem;">
<b-list-group class="group">
<b-list-group-item>
<img class="image" src="https://placekitten.com/100/100" />
<img class="logo" src="https://placekitten.com/50/50" />
<div class="text">
Vishwakarma Institute of Information Technology
</div>
</b-list-group-item>
<b-list-group-item>Anvay Joshi</b-list-group-item>
<b-list-group-item>Computer</b-list-group-item>
<b-list-group-item>A-1103</b-list-group-item>
<b-list-group-item>30-11-1997</b-list-group-item>
<b-list-group-item>anvay.joshi#viit.ac.in</b-list-group-item>
<b-list-group-item>9766583977</b-list-group-item>
</b-list-group>
<b-button href="#" variant="primary">QR Code</b-button>
</b-card>
</div>
</div>
Using $xpath = new DOMXpath($doc) by no means I could not get div (and its children) if it is placed under anchor.
In XPath:
html[1]/body[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/a[1]/div[1]/div[2]/div[1]/div[2]/img[1]
I evaluated elements one by one starting from body and when I reached the anchor it was the last tag in XPath that could be read.
I know this is not the best practice to place block elements into anchors but this html page is not mine and I cannot modify it.
Please advise if there is any trick to get it?
.....<div class="main-image">
<a title="" style="outline-style: none; text-decoration: none;" class="jqzoom" rel="gallery1" data-active="1" href="files/product/images/239_image_raw.jpg">
<div class="zoomPad">
<img style="opacity: 1;" title="" src="files/product/images/239_image.jpg" alt="ABSOLUTE SUMMER 8 VITA BASSA" height="320" width="240">
<div style="top: 97.6167px; left: 80px; width: 148px; height: 153px; position: absolute; border-width: 1px; display: none;" class="zoomPup"></div>
<div style="position: absolute; z-index: 5001; left: 239px; top: 0px; display: none;" class="zoomWindow">
<div style="width: 312px;" class="zoomWrapper"><div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div>
<div style="width: 100%; height: 320px;" class="zoomWrapperImage">
<img src="files/product/images/239_image_raw.jpg" style="position: absolute; border: 0px none; display: block; left: -169.782px; top: -206.257px;">.....
I will answer to myself :)
I took xpath from google chrome, but I did not take into account that what you see in browser is not necessary to be the same with html source as the browser shows content after javascript processing.
......
I want to display a simple form inside fancybox overlay, which also works nice on smaller screen. i've set up an example on here http://design.imago.ee/test/fancybox-form/index1.html
Initially i set the form width to be 450px, at 620px screen size im setting the form width to 100% and after i have done it, fancybox window collapses width wise and the form is not displayed properly. Interestingly that doesnt happen with regular text content (second button in the example). I know that i could just change the width manually with media queries, but it isnt really a good solution. Can anyone help? Thank you.
It's not very elegant solution but will give you an idea and porbably put you closer to your goal
Change in fancybox css
.fancybox-inner {
overflow: hidden !important;
}
Script
Calculate width of window and adjust the width of content, use setInterval so any change in width will be adjusted dynamically.
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
Demo
$(document).ready(function () {
$('.fancybox').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
},
title: {
type: 'inside'
}
}
});
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
});
.fancybox-inner {
overflow: hidden !important;
}
* {
margin: 0;
padding: 0;
}
/* =========================== Layout styles =================== */
body, html {
height: 100%;
}
body {
font: 14px/1.4'Open sans', sans-serif;
overflow: hidden;
background-color: #fff;
padding: 20px 4%;
}
.centered-wrap {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
a.fancybox {
display: inline-block;
vertical-align: top;
background-color: #59a3d3;
color: #fff;
padding: 4px 7px;
border-radius: 2px;
text-decoration: none;
}
h1 {
font-size: 23px;
font-weight: 600;
margin-bottom: 15px;
}
p {
margin-bottom: 20px;
}
.content {
padding: 20px 30px;
}
input[type="text"] {
border: 1px solid #ccc;
height: 30px;
font: 13px/30px'Open sans', sans-serif;
box-sizing: border-box;
width: 100%;
padding: 0 7px;
}
#form {
width: 450px;
padding: 30px;
}
#form .row {
margin-bottom: 10px;
}
#form .col {
float: left;
}
#form .col1 {
width: 25%;
}
#form .col2 {
width: 75%;
}
#form label {
display: inline-block;
vertical-align: top;
padding: 6px 10px 0 0;
}
/* ======================= media queries ======================= */
#media screen and (max-width: 620px) {
#form {
width: 100%;
text-align: center;
padding: 5px;
}
#form .col {
float: none;
width: auto;
text-align: center;
margin-right: 10px
}
#form label {
}
}
/* ======================== clearfix =========================== */
/* Force Element To Self-Clear its Children */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<div class="centered-wrap">
<p><a class="fancybox" href="#form">Fancybox with form</a></p>
<div style="display: none;">
<div id="form" class="content">
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
</div>
</div>
</div>
Fiddle Example
Note: Adjust the fiddle view screen to see how form width adjust itself with the change of screen size.
I'm working on a digital textbook feature that would allow the student to click a link to open up a simple div form for them to input their answer to that specific question. The pop-up form is just simple HTML/CSS with some jQuery UI to hide, show, and make it draggable. Here's the twist. I've got multiple questions that each need to be attached to a unique div. No problem, I thought. I'll just set each a href to link back to a unique ID that I've assigned within the DIV. Problem is, I can't seem to target the proper DIV with its corresponding a href. Instead the same set of questions appear no matter which link is clicked. This seems super simple and I'm probably overcomplicating it. What can I do here?
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
Draw Conclusions What kind of person is Carsten? How do you know?
Use Text Features What can you learn about an active volcano from the photograph?
Where the first a href needs to open the first div and the second a href opens the second div, etc., etc.
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};
$(function() {
$("#draggable").draggable();});
Thank you for your advice and for ironing out my poorly written method. It seems you've got it working.
I've since discovered a jQuery Mobile solution that is much easier than what I was trying to pull together.
For future viewers, it would simply look like this.
Draw Conclusions
Use Text Features
<div data-role="popup" id="popup1" class="ui-content" data-position-to="window">
Close
<p>What kind of person is Carsten?</p>
<input type="text"/>
<p>How do you know?</p>
<textarea></textarea>
</div>
<div data-role="popup" id="popup2" class="ui-content" data-position-to="window">
Close
<p>What can you learn about an active <mark><b>volcano</b></mark> from the photograph?</p>
<textarea></textarea>
</div>
The logic here makes a lot more sense to me and there's the added benefit of ensuring it will work properly on mobile devices. Then if you want to make it draggable, just drop in:
<script>
$(function() {
$(".ui-content").draggable();
});
</script>
And then if you want it to be draggable on mobile (remember, jQuery UI isn't natively supported on mobile), you'll have to call up a hack of sorts. I like Touch Punch.
You may run into issues with form inputs when using Draggable combined with Touch Punch, but that's a story for another thread.
Here is a demo: http://jsfiddle.net/ebNsz/
I've set id:s for the question-div:s and target them with the 'href' attribute in the 'a' elements. Not sure what you wanted to do with the 'slideFadeToggle' function, so i used 'fadeToggle' instead.
HTML:
<div id="q1" class="messagepop">
<form method="" id="form1" action="/answers">
<label for="answer1">What type of person is Carsten?</label><textarea name="answer1" class="answer"></textarea>
<label for="answer2">How do you know?</label><textarea name="answer2" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<div id="q2" class="messagepop">
<form method="" id="form2" action="/answers">
<label for="answer1">What can you learn about an active volcano from the photograph?</label><textarea name="answer1" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<p>Draw Conclusions What kind of person is Carsten? How do you know?</p>
<p>Use Text Features What can you learn about an active volcano from the photograph?</p>
jQuery: (jsFiddle doesn't support .draggable(), so i commented out the first line and added the second.)
$(function() {
/* $("div.messagepop").draggable().hide();*/
$("div.messagepop").hide();
$("a.toggle").click(function(e)
{
e.preventDefault();
var targetpop = $(this).attr('href');
$(targetpop).siblings("div.messagepop").fadeOut();
$(targetpop).fadeToggle();
});
$("a.close").click(function(e)
{
e.preventDefault();
$(this).closest("div.messagepop").fadeToggle();
});
});
CSS:
.messagepop {
position: absolute;
top: 20%;
left: 50%;
z-index: 50;
margin-left: -197px;
text-align: center;
width: 394px;
height: 335px;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
}
label {
display: block;
}
textarea {
width: 75%;
height: 5em;
margin: 0 0 1em 0;
}
I need to hide 300px from the top in an iframe. I have tried to hide it with overflow: hidden in css, but it's not working in an iphone or an ipad. How can I solve that?
My HTML-code
<div class="iframe-wrapper">
<div class="iframe-content">
<iframe src="http://my_url" width="940" height="900" frameborder="0" scrolling="no" </iframe>
</div>
</div>
My CSS
.iframe-wrapper {
position: relative;
overflow: hidden;
width: 940px;
height: 600px;
}
.iframe-content {
position: absolute;
top: -300px;
}
I've made a demo from your code and along with my suggestion it seems to be working:
html:
<div class="iframe-wrapper">
<div class="iframe-content">
<iframe src="http://www.google.com" width="400" height="500" frameborder="0" scrolling="no"/>
</div>
</div>
css:
.iframe-wrapper {
position: relative;
overflow: hidden;
width: 400px;
height: 300px;
border: 5px solid orange;
margin: 20px;
background: red;
}
.iframe-content {
position: absolute;
top: -300px;
}
iframe { background: blue; }
Demo - http://jsfiddle.net/MteRS/
I changed the widths/heights so it would fit into the jsfiddle output panel a bit better.