I'm trying to show a gif during an Ajax call; it works fine if the div is at the body level but won't appear in a tab panel. I've tried putting the div at the tab-pane, container, row and column levels but it won't show.
Simple html:
<div id="loading">
<img id="loading-image" src="images/page-loader.gif" alt="waiting..." />
</div>
jquery:
$('#loading').hide(); $('#loading').show(); // as required
css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 10px;
left: 24px;
z-index: 100;
}
Try this:
$(document).ajaxStart(function() {
$('<div id="loading"><img id="loading-image" src="images/page-loader.gif" alt="waiting..." /></img></div>')
.prependTo('.tabClass'); });
$(document).ajaxStop(function() {
$('#loading').remove();
});
replacing 'tabClass' with the class of whatever container you want the gif animation to attach to.
I've found this solution to be cleaner & work well.
Related
I would like it if you clicked on one image, another image would pop up as a modal. I would like the modal content to be a separate image from the trigger, but I borrowed this code from W3Schools and it is written for the same image.
I have tried putting a different image file as src in line 4 with modal-content (id=img01). I have tried changing the var img in line 8 to "img01". I have played around with those two lines in different combinations, but no luck.
I tried to make this as concise as possible, but not entirely sure which parts are the issue, so please forgive any extraneous code, and I can give more if you suspect there is something I'm not including.
Any help is greatly appreciated!!! :)
HTML
<img id="myImg" src="graphic.jpeg" alt="">
<div id="myModal" class="modal"> <span class="close">×</span>
<img class="modal-content" id="img01"> </div>
JS
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
var span = document.getElementsByClassName("close")\[0\];
span.onclick = function() {
modal.style.display = "none";
}
CSS
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#img01 {
height: 100%;
width: auto;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
Modal image content is loaded in JS line modalImg.src = this.src.
Try modalImg.src = "sample/url"; instead of that.
Is it possible to make this 2 circles always on the right and left of the bottom of the image? They need to be always one on the bottom left, the second on the bottom right of an image- when I resize the image. (they should always stick to the bottom corners of an image) How to position them like that?
enter code here
Codepen:
https://codepen.io/anami90/pen/KeEqRw?editors=1100
according to your quesrion the circles should appear on the outer column isnot it?
hope this helps:
div {
height: 100vh;
}
.col-3 {
background: lightgreen;
}
.col-6 {
background: pink;
padding: 0;
display: flex;
align-items: center;
position: relative;
}
.circle-left {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
left: 0;
bottom: 0;
}
.circle-right {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
<div class="row">
<div class="col-3">col-3</div>
<div class="circle-left"></div>
<div class="col-6">
<img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
</div>
<div class="col-3">col-3</div>
<div class="circle-right"></div>
</div>
https://codepen.io/anon/pen/zabLoq?editors=1100
I would like to position this 2 circles as it is on this picture below:
enter image description here
I'd like to know how can I code the 3 blocks fader from the Spring.io website. Image here:
It has a dividing line that changes the image gradually as you move it.
This can be done with simple HTML and javascript code. Here's the complete jsfiddle https://jsfiddle.net/zn3b1hov/34/
Basic Idea is very simple.
First, You need 2 SVG images one is colored and another is grayscale. I am using this 2
grayscale-image
colored-image
Now Create 2 absolute div one on top of another and use these images as background.
Then create a slider as wide as the images. I am using HTML range type input
Finally change the top div's width according to sliders value.
Complete HTML, CSS and JS
<style>
#fader-diagram-your-app {
position: relative;
height: 286px;
}
#fader-diagram-modern-java-gray {
position: absolute;
height: 238px;
width: 800px;
margin: 31px auto;
background: url('https://spring.io/img/homepage/diagram-modern-java-gray-9a417697a51646e42df7e9d7f024709d.svg') no-repeat;
background-size: 100%;
}
#fader-diagram-modern-java-color {
position: absolute;
height: 238px;
max-width: 800px;
margin: 31px auto;
overflow: hidden;
width: 200px;
}
#fader-diagram-modern-java-color div {
position: absolute;
height: 238px;
background: url('https://spring.io/img/homepage/diagram-modern-java-color-e10b7eec68b1fe60eefeab0cf20a20da.svg') no-repeat;
background-size: 100%;
width: 800px;
}
#fader {
background-color: #34302d;
width: 6px;
height: 275px;
border-radius: 4px;
position: absolute;
left: 0;
}
#myRange {
width: 800px;
position: absolute;
top: 50%;
}
</style>
<div id="fader-diagram-your-app">
<div class="sidebyside" id="fader-diagram">
<div id="fader-diagram-modern-java-gray"></div>
<div id="fader-diagram-modern-java-color" style="width: 39.6875px;">
<div></div>
</div>
<div id="fader">
</div>
<input type="range" min="0" max="800" value="0" class="slider" id="myRange">
</div>
</div>
<script>
var slider = document.getElementById("myRange");
var coloredImage = document.getElementById("fader-diagram-modern-java-color");
var fader = document.getElementById("fader");
slider.oninput = function() {
coloredImage.style.width = this.value + "px";
fader.style.left = this.value + "px";
}
</script>
I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
Please help, thanks.
Use positioning. The following worked for me...
With zoom to the center of the image (image fills the div):
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.
Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.
Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle: http://jsfiddle.net/MJ5j4/
just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.
Thats pure CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
Just Check out the Fiddle.
MyFiddle
Dave
If you are trying to get it in the middle inside the div, have you tried:
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case.
Either way, I hope it helps.
Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.
Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.
Check out this demo: http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Why didn't you set align of the image center?
Then your code should be:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
And I think it's also problem of the ratio of the image width vs the div block + it's padding and border.
Try to set it balance.
Is it possible to block the UI when using $.mobile.pageLoading(false)?
This feature isn't implemented in jQueryMobile Alpha 1.0a4.1.
I solved the problem adding a overlay div with high enough z-index.
JS:
$(document).ready(function () {
$('body').append('<div id="block-ui"></div>');
$('#ajax_request').click(function(){
$('#block-ui').show();
$.mobile.pageLoading(false);
});
});
CSS:
#block-ui {
display: none;
cursor: wait;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9;
background-color: #CCCCCC;
opacity: 0.5;
}
If you're using using fixed-bars you need to override z-index value:
.ui-header-fixed, .ui-footer-fixed {
z-index: 8 !important;
}