Is there a standard popup window with ajax spinner in twitter bootstap? Although it should be, I haven't found anything about it.
This is what worked for me on an Ajax call using Font Awesome (as recommended in the accepted answer) and tweaking out the modal style a bit:
<!-- CSS -->
<style>
#spinner-modal .modal-dialog,
#spinner-modal .modal-content,
#spinner-modal .modal-body {
background: transparent;
color: rgba(255,255,255,1);
box-shadow: none;
border: none;
}
</style>
<!--[ SPINNER MODAL ]-->
<div class="modal fade" id="spinner-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<h3><i class="fa fa-cog fa-spin"></i> Working...</h3>
</div>
</div>
</div>
</div>
<!--[ JS ]-->
<script>
$('#search-form-input').autocomplete({
source: '/search.php',
minLength: 2,
select: function(event, ui) {
$('#spinner-modal').modal('show');
var url = '/a/results/index.php?i=' + ui.item.item_id;
window.location.href = url;
}
});
</script>
You can use bootstrap modal plugin http://twitter.github.com/bootstrap/javascript.html#modals for loading ajax content in popup.
There isn't a bootstrap way to have spinner, but you can do it at your own before showing modal popup.
Related
What I am trying to do is to Design a new Vue/Inertia Login / Register modal on the frontend for the standard Vue scaffolding that comes with Laravel Breeze.
Exactly what I am trying to achieve is this:
Login / Register Button -> Clicked and a modal opens
The modal contains a header section where there is a "Login" tab and a "Register" tab, by default the login tab is selected. It then contains a body section that is a panel that switches between the "login.vue" file and the "register.vue" file.
It is from my understanding that I need to do the following:
Create a Vue file for the button that creates the modal that includes a vue file that houses the tabs and switching panel, that call the "Login" & "Register" Vue files.
I hope my understanding of the way that the Vue3.js framework handles things is correct.
I am very new to Laravel, and to Vue, so please bear with me.
My file structure is as follows
resources | js | Pages | Auth -> Login.vue (standard code in file)
resources | js | Pages | Auth -> Register.vue (standard code in file)
resources | js | Pages | Modal -> LoginRegister.vue
<script>
import Register from "./Auth/Register.vue";
import Login from "./Auth/Login";
export default {
data: function () {
return {
tabs: ["Login", "Register"],
selected: "Login",
};
},
components: {
Register,
Login,
},
};
</script>
<template>
<div>
<button
v-for="tab in tabs"
:key="tab"
#click="selected = tab;"
:class="['tab-btn', { active: selected === tab }]"
>
{{ tab }}
</button>
<component :is="selected" class="tab"></component>
</div>
</template>
or alternatively I have tried this code in the LoginRegister.vue too
<style>
.tab-btn {
padding: 6px 10px;
background: #ffffff;
cursor: pointer;
margin-bottom: 1rem;
border: 2px solid #cccccc;
outline: none;
}
.active {
border-bottom: 3px solid green;
background: whitesmoke;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<script>
import Login from "./Auth/Login.vue";
import Register from "./Auth/Register.vue";
import PrimaryButton from "#/Components/PrimaryButton.vue";
export default { components: { Login, Register } };
</script>
<template>
<div>
<PrimaryButton v-on:click="showModal = true"
>Login / Register</PrimaryButton
>
<modal v-if="showModal" #close="showModal = false">
<div
class="modal fade"
id="myModal"
tabindex="-1"
role="dialog"
aria-labelledby="LoginRegisterModal"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Login / Register</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a
href="#tab1"
aria-controls="home"
role="tab"
data-toggle="tab"
>Login</a
>
</li>
<li role="presentation">
<a
href="#tab2"
aria-controls="profile"
role="tab"
data-toggle="tab"
>Register</a
>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<Login></Login>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<Register></Register>
</div>
</div>
</div>
</div>
</div>
</div>
</modal>
</div>
</template>
I still have not worked out how to create a button that will launch this in a modal yet too, I know I am a long way off, but I would really appreciate guidance.
I found a solution which works well... the following code.
<script setup>
import { computed, onMounted, onUnmounted, watch } from 'vue';
const props = defineProps({
show: {
type: Boolean,
default: false,
},
maxWidth: {
type: String,
default: '2xl',
},
closeable: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['close']);
watch(() => props.show, () => {
if (props.show) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = null;
}
});
const close = () => {
if (props.closeable) {
emit('close');
}
};
const closeOnEscape = (e) => {
if (e.key === 'Escape' && props.show) {
close();
}
};
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => {
document.removeEventListener('keydown', closeOnEscape);
document.body.style.overflow = null;
});
const maxWidthClass = computed(() => {
return {
'sm': 'sm:max-w-sm',
'md': 'sm:max-w-md',
'lg': 'sm:max-w-lg',
'xl': 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
}[props.maxWidth];
});
</script>
<template>
<teleport to="body">
<transition leave-active-class="duration-200">
<div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="show" class="fixed inset-0 transform transition-all" #click="close">
<div class="absolute inset-0 bg-gray-500 opacity-75" />
</div>
</transition>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
<slot v-if="show" />
</div>
</transition>
</div>
</transition>
</teleport>
</template>
Then use headless ui for the switching tabs, works well.
when I use one image inside the container carousel div the image occupies 100vw. But when I add multiple images inside the container it was supposed to be overflown but rather images get shrunk and act weird. I tried the same thing with regular HTML tag and it works perfectly.
My question is how to make a carousel in Next js without using any library where on each slide there is only one Image covering 100% view width.
#code
<div className="embla" >
<div className="embla__container">
<Product_3
src="/lifestyle/14.jpg"
details="Discover the support you need to power through gaming marathons."
name="CHAIRS"
/>
</div>
</div>
#CSS part
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
}
.embla__slide {
width:100vw;
height:10rem;
display: flex;
flex-shrink: none;
}
#Product_3 component
function Product_3({ src, name, details }) {
return (
<div className="product_3">
<div className="product3_img">
<Image src={src} layout="fill" />
</div>
<div className="product2_details">
<h3 className="product2_name">{name}</h3>
<div style={{fontSize:"2rem",color:"#999999",margin:"1rem 0 2rem 0"}}>
{details}.
</div>
<button className="learn_more product2_btn">Learn More {">"}</button>
</div>
</div>
);
}
I have a project where I count the number of times a video was viewed. But I notice that the video view is not being counted on mobile and the modal is not showing but instead the video automatically goes to full screen. I have my code here can someone take a look at it to see what I am doing wrong? I will be adding comments so you that you can understand what's going on.
/*This the video once the video is click it opens to a modal and the
video automatically plays.
*/
<video class="video1" id="cx" preload="auto" align="middle" data-
toggle="modal" data-target="#mymodal" data-user-id="{{$users->id}}"
data-video-src="{{$users->intro_video}}"
data-video-views="{{$users->clicks}}" style="
cursor:pointer; "><source src="{{$users->intro_video}}#t=15"
playsinline alt="Video Unavailable" id="" ></source>
</video>
//This the modal
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mymodal" class="modal fade" role="dialog" style="padding-
top:3%;">
<h1 class="close" data-dismiss="modal" style="color:white;
position:relative; right:20px;">X</h1>
<div class="modal-dialog">
<!--modal content-->
<div class="modal-content" style="align-items: center;">
<div class="modal-body" style=" height:300px; width:100%;
background:black; display:flex; justify-content: center;">
<video class="video2" id="video_source" src="" preload="auto"
align="middle" style="
cursor:pointer; " autoplay="true">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
//This is my controller where it will increment the click every time the
video is click
public function index(Request $request){
$requested_id=$request->input('requested_id');
$video = User::where('id', $requested_id)->increment('clicks');
}
//Last but not least this is javascript for the ajax request
once the modal shows the request is going to be sent to increment the video count
$('#mymodal').on('show.bs.modal show', function (event) {
var button = $(event.relatedTarget);
var user_id = button.data('user-id') ;
var video_src = button.data('video-src');
var video_views = button.data('video-views');
var modal = $(this);
modal.find('#video_source').attr('src', video_src);
modal.find('#video_views').text(video_views);
// send ajax request to increment video count. Just send request_id
$.ajax({
method: 'GET',
url: 'getmsg',
dataType: "json",
contentType: "application/json",
data : {
requested_id: user_id
},
success: function(data){
}
});
})
when there are many contents then the contents are going outside the window box but i want to show all the contents within that box n if there are many contents then a scrollbar will be shown by which i can keep the contents within the box..can anyone help me fixed this?any help would be appreciated.
html page:
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
//$(document).ready(function()
//{
//var hei=$('#notificationsBody').height();
//});
function myFunction2() {
$.ajax({
url: "all_notification.php",
processData:false,
success: function(data){
$('#notificationsBody').height();
$("#notification-latest").html(data);
},
error: function(){}
});
}
</script>
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
You do not need any java script for this...
just put your html content into another div and give it height, width and overflow: scroll;
<div style="height:500px; width: 200px; overflow: scroll;">
<div id="notificationsBody" style="overflow: auto;height:348px;">
<div id="notification-latest"></div>
</div>
<div id="notificationFooter">
<a onclick="myFunction2()" href="">See All</a>
</div>
</div>
Now the internal content will not get outside and if overflow then scroll.
So, I'm putting together the framework for a web app that allows people to swipe horizontally between views. I'm looking for a layout similar to that of ubersocial, an app for android. I've tried a few different frameworks over the last couple of days (including the beginnings of a custom framework, which won't work due to poor overflow:auto support on mobile). JqMobi seems to get me closest.
Here's some code:
<script>
//jqMobi & jqUI scripts omitted for brevity
var carousel;
var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
scroller = $('newContainer').scroller();
}
window.addEventListener("load", init_carousel, false);
</script>
<div id="jQUi">
<div id="header"></div>
<div id="content">
<!--scrolling="no" because I don't want the whole carousel to move-->
<div title="Main" id="main" class="panel" data-tab="navbar_home" scrolling="no">
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="newContainer" style="width: 100%;height: 100%; overflow: auto;>
<!--Lots of Content-->
</div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>
</div>
</div>
</div>
So I've got my carousel working for all devices and I was able to get perfect functionality in iOS 5. However, Android (2.2, 2.3, & 4.0) is not giving me a scrollable div for my .MainView elements, nor are older iOS devices. The best I can get is the carousel on a panel that scrolls, but the elements within the panel won't scroll together. This makes me wonder if the iOS 5 success I've had was just support for overflow:auto.
Anyway, I've looked at the following docs:
jqMobi CheatSheet = (http://www.appmobi.com/amdocs/lib/jqMobi_Cheat.pdf?r=9170)
jqMobi Kitchen Sink = (http://jqmobi.com/testdrive/#webslider)
jqMobi API Doc = (http://api.jqmobi.com/#jqUi)
But I've had trouble really getting the answer I'm looking for. Using the documented methods, I can't really seem to get anywhere. It seems like if I could get an independently scrollable div into a .MainView element without breaking the carousel, I'd be good to go. Suggestions?
/*****************FIXED*****************/
After a tangled web of confusion and frustration, I eventually got it to work by adding a second buffer to the .MainDiv elements so that the scroller doesn't affect the carousel.
I also had a bad run-in with iOS 5 (which, as you may recall, worked before) which probably could have been fixed by simply adding overflow:auto to the .MainView elements and giving them a fixed height. I tried disabling nativeTouchScroll first, and the scrolling is actually pretty good, so I'll stick with that instead of adding a browser detect conditional.
<script>
//Native touch disabled or iOS 5 breaks.
$.feat.nativeTouchScroll = false;
var carousel;
//var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
}
$.ui.ready(init_carousel);
var scroller;
$.ui.ready(function ()
{
//Fetch the scroller from cache
scroller = $("#containerContainer").scroller();
});
</script>
<style>
.MainView
{
height: 100%;
overflow: hidden;
}
</style>
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="containerContainer"><div id="newContainer"></div></div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>
Posted in the forums at appMobi - but we are a US based company in the Eastern Standard Time Zone - so we were asleep while you were working on this...glad you wrote the following :)
Not that anyone seems to care