I have used a loading image in my application which will fire when i move from one page to another if the next page takes some time to load
here is my css
.divWaiting {
position: fixed;
background-color: #FAFAFA;
z-index: 9999 !important;
opacity: 0.8;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding-top: 20%;
}
Now i have a click event for which it will fire
$scope.progress = false; //false by default within the controller but making it true inside
$scope.openFloorChartDetails = function (_building, _floorchart) {
$scope.progress = true;
$location.path(rootDir + 'floorChartDetails/' + projverservice.Id + '/' + _building.buildingId + '/' + _floorchart.floorChartId);
}
and in the concerned html page am calling it like this:
<div class="divWaiting" ng-show="progress">
<div>
<img ng-src="{{rootDIR+'CustomScripts/image/3.gif'}}" />
</div>
</div>
It is working fine when for the first time am clicking, the image is coming. But from the next time the page is getting loaded just like that without the image coming.
Am not getting what the problem is
Related
Apologies if I incorrectly use some terminology here, or don't know the terms to properly describe this but...
Easy Part- I would like to create a Wheel style slider, displaying three pictures, with the main "selected" one being forefront and the other two sitting scaled down, behind them but quickly and easily clickable and viewable.
Hard Part- I would like which ever picture is set in the forefront main portion of the slider wheel to have information displayed, page width, regarding that specific toggled picture and that picture only. Then when you toggle to a different slide/picture ONLY information regarding that would then be placed below the slider/toggle wheel.
I would think my starting point would be to grab some code for the toggle/slider picture wheel. Then somehow create some sort of event trigger type coding for whichever picture is highlighted, coupling that with some sort of html hide/show coding.
I attached some bad sketches to help me visual depict what I am saying.
Any insight is welcome, even if it is some keywords to help me narrow down my google searching and find some resources. Slide & Page Layout Sketch
Thanks & Cheers
Sounds like you're going to need some CSS and JS to make this work.
First, you're going to need your HTML layout. I have a wrapper for the entire carousel (.container). I have the left and right arrows as well as a second wrapper for the images.
For the text below the carousel, I have a second element (.content) which holds three elements, each correlating to the images. The text is only shown when .shown is applied to the element.
<div class="container">
<div class="left"><</div>
<div>
<div class="img img-left"></div>
<div class="img img-center"></div>
<div class="img img-right"></div>
</div>
<div class="right">></div>
</div>
<div class="content">
<div class="text">
Amazing Sunset
</div>
<div class="text shown">
Fall Leaves
</div>
<div class="text">
Misty Sunlight
</div>
</div>
For CSS I choose to make the .container position: relative so that I could use position: absolute on the children. I have 3 classes for the images. img-left, img-right and img-center. These can be animated. The arrows are simply centered vertically
.container {
position: relative;
height: 85vh;
}
.img {
position: absolute;
z-index: 2;
height: 75vh;
width: 121vh;
max-height: 300px;
max-width: 511px;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
transition: transform 0.3s, z-index 0s linear 0.15s;
}
.img:nth-of-type(1) {
background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg') center/contain no-repeat;
}
.img:nth-of-type(2) {
background: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg') center/contain no-repeat;
}
.img:nth-of-type(3) {
background: url('https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706__340.jpg') center/contain no-repeat;
}
.img-center {
z-index: 5;
}
.img-right {
transform: translateX(200px) scale(0.7);
}
.img-left {
transform: translateX(-200px) scale(0.7);
}
.left, .right {
position: absolute;
z-index: 7;
top: 50%;
font-size: 48px;
font-family: monospace;
transform: translateY(-50%);
user-select: none;
}
.left {
left: 32px;
}
.right {
right: 32px;
}
.content {
height: 15vh;
}
.text {
display: none;
text-align: center;
font-size: 32px;
}
.text.shown {
display: block;
}
JavaScript is where things start to get more interesting. I created a function called nextImage() which takes a boolean representing the direction to switch. First, it gets the currently centered image and then based on that image gets the next and previous element siblings. In the event that the centered image happens to be the first or last element, either next or pre will be undefined. That is handled next. Once that is done the CSS classes are reassigned based on the direction.
function nextImage(forward) {
let currentCentered = document.querySelector('.img-center'),
next = currentCentered.nextElementSibling,
pre = currentCentered.previousElementSibling;
//pre and next may not be elements if currentCentered is the frist or last element.
if (!next) { //Centered Element is the frist
next = pre.previousElementSibling;
} else if (!pre) { //Centered Element is the last
pre = next.nextElementSibling;
}
if (forward) {
//Move the previously centered image to the right
currentCentered.classList.remove('img-center');
currentCentered.classList.add('img-right');
//Move the previously left image to the center
pre.classList.remove('img-left');
pre.classList.add('img-center');
//Move the previously right image to the left
next.classList.remove('img-right');
next.classList.add('img-left');
} else {
//Move the previously centered image to the left
currentCentered.classList.remove('img-center');
currentCentered.classList.add('img-left');
//Move the previously left image to the right
pre.classList.remove('img-left');
pre.classList.add('img-right');
//Move the previously right image to the center
next.classList.remove('img-right');
next.classList.add('img-center');
}
//Update the text
let currentText = document.querySelector('.text.shown'),
newText;
if (forward) {
//Get the previous element;
newText = currentText.previousElementSibling;
//If it doesn't exist get the last element
if (!newText) {
newText = currentText.nextElementSibling.nextElementSibling;
}
} else {
//Get the next element;
newText = currentText.nextElementSibling;
//If it doesn't exist get the frist element
if (!newText) {
newText = currentText.previousElementSibling.previousElementSibling;
}
}
//Apply class change
currentText.classList.remove('shown');
newText.classList.add('shown');
}
Adding onclick="nextImage(false)" to the left arrow and onclick="nextImage(true)" to the right arrow now lets you navigate with them.
Since you said you'd like the pictures so be clickable I've added a second function which lets you scroll to the given image. It gets the next and previous elements and makes sure they are actual elements. Then it called the nextImage() function based on if next or pre is the centered image.
function switchImage(imgEle) {
let next = imgEle.nextElementSibling,
pre = imgEle.previousElementSibling;
//Make sure they are actually elements
if (!next) {
next = pre.previousElementSibling;
}
if (!pre) {
pre = next.nextElementSibling;
}
if (next.classList.contains('img-center')) {
nextImage(true);
} else if (pre.classList.contains('img-center')) {
nextImage(false);
}
}
All you have to do now is add onclick="switchImage(this)" to each of your image elements.
Adding this all together you should get something like this snippet below
function nextImage(forward) {
let currentCentered = document.querySelector('.img-center'),
next = currentCentered.nextElementSibling,
pre = currentCentered.previousElementSibling;
//pre and next may not be elements if currentCentered is the frist or last element.
if (!next) { //Centered Element is the frist
next = pre.previousElementSibling;
} else if (!pre) { //Centered Element is the last
pre = next.nextElementSibling;
}
if (forward) {
//Move the previously centered image to the right
currentCentered.classList.remove('img-center');
currentCentered.classList.add('img-right');
//Move the previously left image to the center
pre.classList.remove('img-left');
pre.classList.add('img-center');
//Move the previously right image to the left
next.classList.remove('img-right');
next.classList.add('img-left');
} else {
//Move the previously centered image to the left
currentCentered.classList.remove('img-center');
currentCentered.classList.add('img-left');
//Move the previously left image to the right
pre.classList.remove('img-left');
pre.classList.add('img-right');
//Move the previously right image to the center
next.classList.remove('img-right');
next.classList.add('img-center');
}
//Update the text
let currentText = document.querySelector('.text.shown'),
newText;
if (forward) {
//Get the previous element;
newText = currentText.previousElementSibling;
//If it doesn't exist get the last element
if (!newText) {
newText = currentText.nextElementSibling.nextElementSibling;
}
} else {
//Get the next element;
newText = currentText.nextElementSibling;
//If it doesn't exist get the frist element
if (!newText) {
newText = currentText.previousElementSibling.previousElementSibling;
}
}
//Apply class change
currentText.classList.remove('shown');
newText.classList.add('shown');
}
function switchImage(imgEle) {
let next = imgEle.nextElementSibling,
pre = imgEle.previousElementSibling;
//Make sure they are actually elements
if (!next) {
next = pre.previousElementSibling;
}
if (!pre) {
pre = next.nextElementSibling;
}
if (next.classList.contains('img-center')) {
nextImage(true);
} else if (pre.classList.contains('img-center')) {
nextImage(false);
}
}
.container {
position: relative;
height: 85vh;
}
.img {
position: absolute;
z-index: 2;
height: 75vh;
width: 121vh;
max-height: 300px;
max-width: 511px;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
transition: transform 0.3s, z-index 0s linear 0.15s;
}
.img:nth-of-type(1) {
background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg') center/contain no-repeat;
}
.img:nth-of-type(2) {
background: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg') center/contain no-repeat;
}
.img:nth-of-type(3) {
background: url('https://cdn.pixabay.com/photo/2015/09/09/16/05/forest-931706__340.jpg') center/contain no-repeat;
}
.img-center {
z-index: 5;
}
.img-right {
transform: translateX(200px) scale(0.7);
}
.img-left {
transform: translateX(-200px) scale(0.7);
}
.left, .right {
position: absolute;
z-index: 7;
top: 50%;
font-size: 48px;
font-family: monospace;
transform: translateY(-50%);
user-select: none;
}
.left {
left: 32px;
}
.right {
right: 32px;
}
.content {
height: 15vh;
}
.text {
display: none;
text-align: center;
font-size: 32px;
}
.text.shown {
display: block;
}
<div class="container">
<div class="left" onclick="nextImage(false)"><</div>
<div>
<div class="img img-left" onclick="switchImage(this)"></div>
<div class="img img-center" onclick="switchImage(this)"></div>
<div class="img img-right" onclick="switchImage(this)"></div>
</div>
<div class="right" onclick="nextImage(true)">></div>
</div>
<div class="content">
<div class="text">
Amazing Sunset
</div>
<div class="text shown">
Fall Leaves
</div>
<div class="text">
Misty Sunlight
</div>
</div>
I am learning Vue and really enjoying it. I have a tab that I want fixed to the bottom of the browser window when the page loads. When a user clicks the tab, it will slide up to show some content.
Everything is working great. I am able to have the tab stick to the bottom of the page - and click events are working great as well.
The problem I am having is that I need to calculate the height of tab (and div) to set the CSS property correctly. When the page loads, you can see the tab slide down into place. I would like to hide the tab until everything has been calculated and it's in the correct place.
Here is what I'm using:
app.js
new Vue({
el: '#info',
delimiters: ['${', '}'],
data: {
active: false,
inactive: true,
styles: {
'bottom': 0
},
},
methods() {
toggle: function (event) {
event.preventDefault();
this.active = !this.active;
this.inactive = !this.inactive;
}
},
mounted() {
let tabHeight = this.$refs.infoTab.clientHeight;
let boxHeight = this.$refs.infoBox.clientHeight; // 473px
this.styles.bottom = -boxHeight + 'px';
}
});
HTML
<div class="info not-active" id="info" #click="toggle" ref="infoTab"
v-cloak
v-bind:class="{ active: active }"
v-bind:style="styles">
<!-- content -->
</div>
style.css
[v-cloak] {
display: none;
}
/* more classes */
.info {
width: 100%;
position: fixed;
&.inactive {
bottom: -100%;
}
&.active {
bottom: 0 !important;
}
}
I know I am close, I just don't want users to see the tab slide into place. It should just be there. I tried using the created hook, but clientHeight is not available.
Any suggestions are greatly appreciated!
I think you can solve this just using CSS, no need to use any of Vue's lifecycle hooks, I made a pen with a vanilla JS example:
let infoNode = document.getElementById('info');
infoNode.addEventListener('click', () => {
if (infoNode.style.top) {
// clear inline top style
infoNode.style.top = '';
} else {
// set top to client height + 2 * border thickness
infoNode.style.top = `calc(100% - ${infoNode.clientHeight}px - 4px)`;
}
});
#info {
font-size: 16px;
width: 200px;
border: 2px solid hsl(0, 0%, 80%);
padding: 8px;
border-radius: 4px;
cursor: pointer;
position: fixed;
/* 100% height of the viewport subtracting:
tab height: padding, margin, & font size */
top: calc(100% - (8px + 8px + 24px));
/* we center the tab horizontally here using
50% the width of the viewport - 50% the fixed
width of the tab */
left: calc(50% - 200px/2);
transition: top 0.5s;
}
.title {
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
display: block;
}
p {
margin: 0;
}
<div id="info">
<span class="title">Click on Me</span>
<p>
This is the content of the tab, isn't it great? I think so too, and it can be of any arbitrary length!
</p>
</div>
Basically the trick is to use calc with top instead of -100% with bottom for your positioning, then your tab is initially rendered in the correct position and you don't have to worry it being out of place when a visitor first loads your page.
I created a draggable element by setting its draggable attribute. When I drop the element, there is an animation of the element snapping back to its origin position:
How can the snap-back animation be disabled? I tried calling preventDefault() on the dragend event, but it had no effect on the animation.
The following snippet shows the basics:
document.getElementById('test').addEventListener(
'dragend', evt => {
evt.preventDefault();
}
);
#container {
border: 1px solid black;
min-width: 300px;
min-height: 200px;
position: relative;
}
#test {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 25px;
left: 40px;
}
<div id="container">
<div id="test" draggable='true'></div>
</div>
Not every browser will show the dragged #test jumping back to the original position.
In order to prevent the animation, you need the drop event to fire. For the drop event to fire, you need to call preventDefault() in the handler for dragover.
document.addEventListener('dragover', function(e) { e.preventDefault() })
Example in MDN docs shows the same thing: https://developer.mozilla.org/en-US/docs/Web/Events/drop#Example
An old blog post describing the quirks of HTML5 Drag and Drop API: https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
As was said earlier, you need to explicitly describe onDragOver handler on the parent's container (where you will drop your draggable element) and put .preventDefault() on event to prevent this animation.
Here is a simple React code example for better understanding of this mechanic (you can position the box inside the container by dragging it):
App.jsx
import './App.css'
const App = () => {
function handleDragOver(e) {
e.preventDefault()
}
function handleDrop(e) {
let box = document.getElementById('box')
if (box) {
box.style.top = e.clientY + 'px'
box.style.left = e.clientX + 'px'
}
}
return (
<div className="container" onDragOver={handleDragOver} onDrop={handleDrop}>
<div id="box" draggable></div>
</div>
)
}
export default App
App.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
}
#box {
width: 100px;
height: 100px;
background-color: lightgreen;
position: absolute;
}
My motive is to create a progress image while postbacking to the server in mvc3 view. when ever process is running the progress image with background div should popup. the popup should not allow to access controls on the page. for example i have dropdown in my view, when i post back back progess image should come and i should not allow to click on dropdown.
i have tried many ways all are working if it is not postbacking but while postback is happending i am able to click on actual page controls. but i should not allow to click. any help?
the code which i tried is...
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: #f7f7f7;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="loader.gif" alt="" />
you should use jquery UI dialog box for it and set opacity.
you can find some examples here
http://jqueryui.com/dialog/#modal-confirmation
I'm trying to make an upvote/downvote the same way that it's done on SO and Reddit, from what I can see they use arrow images as backgrounds and then position it, but I'm a CSS newbie and I need someone to walk me through it.
You could do it by adding a different picture to the background, one for every state of the button. There is however a cleaner, easier, more modern way of achieving this result: Sprites.
A sprite is an image that is saved as a part of a larger image. One of the biggest advantages of using sprites is the reduction of round-trips to the server for all the images to just one request for the Sprites. The element to display a picture has the image as background. The background is moved relative to the element so the element displays only part of the image. Like when you move a photo-frame over a poster (or in this case: moving the poster under the frame)
At SO they make an image that contains all the states for the button. They give the element for the button (a span in this case) a fixed width and height and add the background to it with CSS. Then toggle a class for the state (on or off) with javascript on the click event. Now the only thing you have to do in CSS is change the position of the background with CSS classes:
for (const btn of document.querySelectorAll('.vote')) {
btn.addEventListener('click', event => {
event.currentTarget.classList.toggle('on');
});
}
.vote {
display: inline-block;
overflow: hidden;
width: 40px;
height: 25px;
cursor: pointer;
background: url('http://i.stack.imgur.com/iqN2k.png');
background-position: 0 -25px;
}
.vote.on {
background-position: 0 2px;
}
Click to vote (using sprites): <span class="sprite vote"> </span>
You can easily add more states to the sprites like 'hover' and 'active' just the same way. SO even puts all the images for the whole page in a single image. You can verify this with firebug or the Chrome developer tools. Look for 'sprites.png'.
Update (2020)
It's been 10 years since I answered this question and in this time,
the landscape has changed. Now you can use inline svg as well to achieve this effect. I've updated the code snippet to use svg. This is how stackoverflow currently does this.
It works by toggling the color property of a surrounding span element on button click. The span element contains an inline svg image of an arrow. The fill property of the path that makes up the arrow is initialized with currentColor, which instructs it to take whatever is the current text color.
for (const btn of document.querySelectorAll('.vote')) {
btn.addEventListener('click', event => {
event.currentTarget.classList.toggle('on');
});
}
.vote {
display: inline-block;
cursor: pointer;
color: #687074
}
.vote.on {
color: #f48024
}
Click to vote (using svg):
<span class="vote">
<svg width="36" height="36">
<path d="M2 10h32L18 26 2 10z" fill="currentColor"></path>
</svg>
</span>
You can do it by using two simple images ... design two images in some image editors like Photoshop, if u don't have MSPaint...
CSS code is
#voting{
width:30px;
height:40px;
}
.upvote{
width:30px;
height: 20px;
cursor: pointer;
}
.downvote{
width:30px;
height: 20px;
background: url('downvote.jpg') 0 0 no-repeat;
cursor: pointer;
}
HTML code :
<div id="voting">
<div class="upvote"></div>
<div class="downvote"></div>
</div>
I'm doing project on django, and I'm trying to implement up-vote and down-vote on many posts, I've taken #Jan's code partly and finished it.
vote.html
<span onclick="like_function({{user_answer.pk}})" id="like-{{user_answer.pk}}" class="vote_up_off"></span>
<div id="counter-{{user_answer.pk}}">0</div>
<span onclick="dislike_function({{user_answer.pk}})" id="dislike-{{user_answer.pk}}" class="vote_down_off"></span>
vote.css
/* like dislike button */
.vote_up_off {
display: inline-block;
overflow: hidden;
width: 40px;
height: 25px;
cursor: pointer;
background: url(' https://i.stack.imgur.com/nxBdX.png');
background-position: 0 -25px;
margin-left: 5px;
}
.vote_up_on {
background-position: 0 2px;
display: inline-block;
overflow: hidden;
width: 40px;
height: 25px;
cursor: pointer;
background: url('https://i.stack.imgur.com/nxBdX.png');
margin-left: 5px;
}
.vote_down_off {
display: inline-block;
overflow: hidden;
width: 40px;
height: 25px;
cursor: pointer;
background: url('https://i.stack.imgur.com/vWw7n.png');
background-position: 0 -1px;
margin-top: 3px;
}
.vote_down_on {
display: inline-block;
overflow: hidden;
width: 40px;
height: 25px;
cursor: pointer;
background: url('https://i.stack.imgur.com/vWw7n.png');
background-position: 0 -28px;
margin-top: 3px;
}
vote.js
function like_function(answer_id) {
var like_button = document.getElementById('like-'+answer_id);
var dislike_button = document.getElementById('dislike-'+answer_id);
var counter_element = document.getElementById('counter-'+answer_id);
let current_counter = parseInt(counter_element.innerText);
//check if dislike is on(true) or off(false)
let dislike_state = false
if (dislike_button.className == "vote_down_on") {
dislike_state = true
}
else {
dislike_state = false
}
//if dislike is checked
if (dislike_state) {
current_counter += 2;
dislike_button.className = 'vote_down_off'
counter_element.innerText = current_counter
like_button.className = 'vote_up_on'
}
// if dislike is not checked
else {
if (like_button.className == 'vote_up_off') {
like_button.className = "vote_up_on"
current_counter += 1;
counter_element.innerText = current_counter
}
else {
like_button.className = "vote_up_off"
current_counter += -1;
counter_element.innerText = current_counter
}
}
}
function dislike_function(answer_id) {
var like_button = document.getElementById('like-'+answer_id);
var dislike_button = document.getElementById('dislike-'+answer_id);
var counter_element = document.getElementById('counter-'+answer_id);
let current_counter = parseInt(counter_element.innerText);
//check if like is on(true) or off(false)
let like_state = false
if (like_button.className == "vote_up_on") {
like_state = true
}
else {
like_state = false
}
//if like is checked
if (like_state) {
console.log('это тру лайк (лайк нажат)')
current_counter += -2;
like_button.className = 'vote_up_off'
counter_element.innerText = current_counter
dislike_button.className = "vote_down_on"
}
//if like is not checked
else {
if (dislike_button.className == 'vote_down_off') {
dislike_button.className = "vote_down_on"
current_counter += -1;
counter_element.innerText = current_counter
}
else {
dislike_button.className = "vote_down_off"
current_counter += 1;
counter_element.innerText = current_counter
}
}
}