I'm trying to show a spinner before a carousel loads and also when you click left and right controls of the carousel. Currently I'm able to show a spinner before page load using the following code..
//HTML code
<script src="js/jquery-1.11.3.min.js"></script>
code just after body tag
<div id="loader">
</div>
//CSS code..
#loader{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);
}
//JS code..
$(window).load(function(){
$("#loader").delay(1000).hide(0).fadeOut("slow");
});
Using the above logic now I'm trying to display a spinner of smaller size and transparent background every time user clicks the left/right controls of the bootstrap using the below code..
HTML code..
<div id="carouselObject">
<div id="carousel-example-generic" class="carousel slide" data-pause="true" data-interval="5000000"> <!--data-interval= 5000 seconds-->
<div class="carousel-inner" role="listbox" id="carouselinner">
</div>
<a class="left carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="prev"-->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" onclick="loadPrevSlide()" id="leftcarouselbutton"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#/carousel-example-generic" role="button"> <!--data-slide="next"-->
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" onclick="loadNextSlide()" id="rightcarouselbutton"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="carousel_spinner">
</div>
CSS code...
#carousel_spinner{
z-index:999999;
display:block;
position:fixed;
top:0;
left:0;
width:50%;
height:50%;
background:url(../images/loader.gif) 50% 50% no-repeat;
}
JS code..
function loadNextSlide(){
$("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
}
The above code shows a small spinner on the top left side on page load and when I click on the right control of carousel no spinner is shown.. Can't understand where I'm going wrong..Please help..
Bootstrap Doc:
According to bootstrap documentation Carousel offers following events:
slide.bs.carousel
Occurs when the carousel is about to slide from one item to another
slid.bs.carousel
Occurs when the carousel has finished sliding from one item to another
What you need:
is to put your spinner code inside:
$("#carouselObject").on('slide.bs.carousel', function () {
//show spinner here
});
And then hide that spinner code in slid event:
$("#carouselObject").on('slid.bs.carousel', function () {
//hide the spinner here
$("#carousel_spinner").delay(1000).hide(0).fadeOut("slow");
});
P.S: The above code is not tested but it will take you where you are heading
Related
I'm designing a web app with some popup buttons and the functionality is working fine but the buttons are displaying empty.
I've placed 2 x png files in a folder named 'images', ok.png and cancel.png.
The code i'm using from the Tizen tutorial is below;
https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/creating-popup-buttons
<div class="ui-page ui-page-active" id="main">
<div class="ui-content">
<a href="#sideBtnPopup" class="ui-btn" data-rel="popup" id='testPopup'>Test popup</a>
<li><p id="okOutput"></p></li>
<li><p id="cancelOutput"></p></li>
</div>
<style>
.btn-icon-cancel::before {-webkit-mask-image: url(./images/cancel.png)}
.btn-icon-ok::before {-webkit-mask-image: url(./images/ok.png)}
</style>
<div id="sideBtnPopup" class="ui-popup">
<div class="ui-popup-content">
Press as passing boat or pin
</div>
<div class="ui-popup-footer ui-grid-col-2 ui-side-button">
<button class="ui-btn btn-icon-cancel btn-cancel" id="sideBtn-1" onclick="cancelButton()">Cancel</button>
<button class="ui-btn btn-icon-ok" id="sideBtn-2" onclick="okButton()">OK</button>
</div>
</div>
<script>
function okButton() {
document.getElementById("okOutput").innerHTML = "Ok Pressed";
tau.closePopup();
}
function cancelButton() {
document.getElementById("cancelOutput").innerHTML = "Cancel Pressed";
tau.closePopup();
}
</script>
</div>
I've tried moving the css code into the css file. I've also tried a few other things to set the url of the image, I've tried resizing the image down to the size of the button but no luck.
To be clear, the buttons work fine but the images don't display in the buttons, they are simply blue ovals with black background.
Any help would be greatly appreciated.
If You want to use -webkit-mask-image You need to set background-color and -webkit-mask-size as well.
Just update your <style> tag to following:
<style>
.btn-icon-cancel::before {
-webkit-mask-image: url(./images/cancel.png);
-webkit-mask-size: 100%;
background-color: #fff;
}
.btn-icon-ok::before {
-webkit-mask-image: url(./images/ok.png);
-webkit-mask-size: 100%;
background-color: #fff;
}
</style>
replacing #fff with desired icon color.
My code is this with included FontAwesome 4.7
Js code:
$('#icon').click(function(){
$(this).attr("class", "fa fa-iconA");
Html code:
<i id="icon" class="fa fa-iconB" aria-hidden="true"></i>
I wish that the iconA - iconB swap after click is animated, like fadeout/fadein.
How can I do? Is it the right way to swap between 2 icons after a click?
You cannot fadeIn, FadeOut icon like this by changing their class.
In order to create a fadeIn and FadeOut effect, you need to play with opacity.
Please try below example
jQuery('.icon').click(function(){
jQuery('.icon').toggleClass('hidden');
})
.icon-wrap{
position:relative;
background:#333;
height:25px
}
.icon-wrap .icon {
color:#fff;
position:absolute;
left:0;
top:0;
transition:linear all 0.5s;
cursor:pointer;
}
.icon-wrap .icon.hidden{
opacity:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ICON Example
<div class="icon-wrap">
<i class="fa fa-twitter icon icon1"></i>
<i class="fa fa-facebook icon icon2 hidden"> </i>
</div>
Click on icon to see effect
I did a simple toggle button to hide and show. My coding skills in Javascript/Jquery are very bad.
In desktop view the description is showing perfectly fine.
(Picture in Desktop view.)
, while in mobile there's a button to toggle hide and show the description.
(Picture in Mobile View.)
.
However, when I toggle hide the description in mobile view it disappear in desktop view when i dragged the browser. Only when I toggle show in mobile, it likely to show on the desktop. How do I make it appear?
Javascript:
//Script
<script>
$(document).ready(function () {
$(".toogle-button").click(function () {
$(".toggleholder").slideToggle("slow");
$(this).find("i").toggleClass("fa-chevron-down");
});
});
</script>
Html:
//html
<div class="toogle-button">Introduction<i class="pull-right fa fa-chevron-up fa-chevron-down"></i></div>
<div class="toggleholder">
<div class="desc-holder">
<p>
<p><b>Subject:</b></p>
<span class="side-text">Design</span>
</p>
<p>
<p><b>Description:</b></p>
<span class="side-text">This quiz is to test your knowledge on HTML basic foundation.</span>
</p>
</div>
<div class="user-holder">
<p><b>Assigned By:</b></p>
<div class="profile-holder">
<div class="avatar-holder">
<img src="/include/images/default/avartar_32.png" class="avatar32" />
</div>
<div class="username">Admin Asriah Asadi</div>
<div class="clearfix"></div>
</div>
</div>
Css/Less:
.toogle-button {
display: none;
margin-top: 15px;
padding: 10px;
background-color: #055eac;
#media only screen and (max-width: #screen-xs-max) {
display: block;
}
}
I suggest you to use the event handler window.resize, and what do you do on new scale:
$(window).resize(function()
{
var desktop_mobile_breakpoint = 768; //or whatever else!! it should be you #screen-xs-max...
//when you drag your window
if ($(window).width() > desktop_mobile_breakpoint) $('.toggleholder').show(); //desktop: we show it
else $('.toggleholder').hide(); //mobile: we hide it
});
I'm using a few things from bootstrap in my template, like glyphicon's and a navbar. Which is on my "forum.php". Now when I want to delete a topic, I want a javascript popup to show up which is working just fine. But through that popup I can see bootstraps navbar and glyphicon. How do I fix this?
forum.php
<table class="overview">
<tr class="row1">
<td class="col1">
<button>
<span class="glyphicon glyphicon-eye-open">
</span>
</button>
</td>
</tr>
</table>
<button onclick="showDiv()">Delete category</button>
css.css
#popup_container {
width:100%;
height:100%;
opacity:.99;
top:0;
left:0;
display: none;
position:fixed;
background-color:#313131;
overflow:auto
}
#prompt-delete {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
}
popup.php
<div id="popup_container">
<div id="prompt-delete">
<h2> my popup</h2>
<button onclick="closeDiv()">Close</button>
</div>
</div>
Javascript.js
function showDiv() {
document.getElementById('popup_container').style.display = "block";
}
function closeDiv() {
document.getElementById("popup_container").style.display = "none";
}
When popup is showing, through that div, on the background I see the glypicon of bootstrap without being faded into the background. It shows without opacity.
The rest of the page is faded with the opacity defined in the css.
Change The z-index of your pop-up to 1.
How can I make if click .a(bluearea) then .menu fadein,
but click .apic(apic is inside a) run fancybox and menu not fadein?
http://jsfiddle.net/e5Tdv/12/
jQuery
$('.apic').fancybox({});
$('.a').not('.apic').click(function(){
$('.menu').fadeIn();
});
HTML
<div class="a">
<a class="apic" rel="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
</div>
<div class="menu">menu</div>
CSS
.menu{
display: none;
}
.a{
background: blue;
}
You can check where user clicked (event target) and fade when not clicked on image, for example:
$('.apic').fancybox({});
$('.a').click(function(e){
$('.menu').hide(); // This is just to see that it works
if ($(e.target).is('div')) {
$('.menu').fadeIn();
}
})
See in action - http://jsfiddle.net/Qeay5/