Per the docs, this should be enough to run Twitter Bootstrap:
<div class="carousel">
<div class="carousel-inner">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
$('.carousel').carousel()
I also included jquery.transitions plugin so I assumed it would degrade in older browsers.
Unfortunately, the slides don't move at all in Firefox 3.6. Why?
It looks like you need to add slide class to your carousel for the simple version to work:
<div class="carousel slide">
Sample carousel has it, and there is a check in the code:
if (!$.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger('slide')
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
Kind of strange they didn't mention it, though.
Related
I working on an app and using Laravel Breeze Vue for the first time. Just some quick background, Laravel Breeze provides some quick scaffolding for authentication. When a user logs in, they are presented with a simple dashboard page. I have added a new link to this page as per below.
app/resources/js/Layouts/Authenticated.vue
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<BreezeNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</BreezeNavLink>
<BreezeNavLink :href="route('client.index')" :active="route().current('client.index')">
Clients
</BreezeNavLink>
</div>
I have also created an Index.vue file at file path app/resources/js/Pages/Client/Index.vue. It looks like below:
<template>
<Head title="Clients" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Clients
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
You're logged in!
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script>
import BreezeAuthenticatedLayout from '#/Layouts/Authenticated.vue'
import { Head } from '#inertiajs/inertia-vue3';
export default {
components: {
BreezeAuthenticatedLayout,
Head,
},
}
</script>
I am using a route resource in my web.php file as per below. I have confirmed that client.index is an existing route via php artisan route:list.
//client routing
Route::middleware(['auth', 'verified'])->group(function() {
Route::resource('client', ClientController::class);
});
I am facing two problems. The first problem is that the link will not render in my navigation links. The second issue is that the Index.vue page will not render as well. I have tried doing npm run dev, npm run watch and clearing caches. None of these have worked. Please provide me with some insight on how to address these issues.
This is closed. I'm using old hardware and it was taking time to pick up the changes. npm run dev performed as expected.
I'm getting stuck in an ecommerce development project using Laravel and Vue. I can't make the images appear dynamically in the index view of the product. I'm able to upload and print the images in the show view and these are stored in storage / app / images.
The problem is that the image_url attribute of a product is nullable so it may or may not have an image and the idea is to show them when they have one.
Here is the code of the component ProductCardComponete.vue that is where I develop the code itself.
<template lang="html">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card">
<header class="bg-dark padding">
</header>
<div class="justify-content-center">
<!-- <img v-for="product in products" v- if="product.extension" :src="'/productos/images/'+product.id+product.extension">
-->
<img :src="'/productos/images/34.jpeg'" class="card-img-top">
</div>
<div class="card-body padding">
<h2 class="card-title">
<a :href="'/productos/'+product.id">
{{product.title}}
</a>
</h2>
<h4 class="card-subtitle">{{product.humanPrice}}</h4>
<p class="card-text">{{product.description}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
product: {
type: Object
}
}
}
</script>
Of course, when I put the route in a static way, it works. But I don't know how I could arrive at the solution to show it dynamically and the way of showing the image if the product has one.
Finally here is a link to the github Repo of the project just in case.
Github Repo
Images should be saved in storage/app/public/ and you should make a symlink so that you can access storage folder in public folder. Otherwise you will stuck in accessing images. Read this official doc.
I have a Laravel / Vue app that I'm building and I've run into a bit of a snag. I have been able to successfully create individual stand-alone components, however when I try to nest a stand-alone component into another component, only the nested component shows up. A bit of code:
CompanyLogo.vue
<template>
<figure class="company-logo" :style="{
width: size,
height: size,
backgroundImage: `url(${src})`
}"></figure>
</template>
LogoUploader.vue
<template>
<div class="logo-container">
<company-logo size="65px" :src="`${company.logo.url}`"></company-logo>
</div>
<div class="logo-uploaded-details">
<p>Last updated: {company.logo.last_updated}</p>
<button class="file-browse-btn">Upload Image</button>
</div>
</template>
What's happening is that when in company.blade.php I simply have
<logo-uploader></logo-uploader>
The app compiles and loads, however only the CompanyLogo shows up on the screen. The entire markup for the logo-uploaded-details section isn't rendered at all.
I have tried adding a require for the CompanyLogo component to the registration for the LogoUploader component, but that didn't work either.
If I split out the components they both show up. The issue is only once they're nested.
Any ideas?
Vue instances and components must have a single root element. In your LogoUploader you have two root elements.
You need to wrap them in a root.
<template>
<div>
<div class="logo-container">
<company-logo size="65px" :src="`${company.logo.url}`"></company-logo>
</div>
<div class="logo-uploaded-details">
<p>Last updated: {company.logo.last_updated}</p>
<button class="file-browse-btn">Upload Image</button>
</div>
</div>
</template>
Hi have created a JSFiddle of my problem here.
http://jsfiddle.net/L7o1nct6/2/
I will also repeat the code here as Stackoverflow is forcing me to do.
JavaScript
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function()
{
$("#fine-uploader").fineUploader({
listElement: $('#listElement'),
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
HTML
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector
qq-upload-drop-area-selector
drag-drop-area" >
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="qq-upload-list-selector" id="#listElement" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
When viewing the JSFiddle example, if you open the debug console, you will see the message "Uncaught Error: Could not find the file list container in the template!".
I am unsure what this means, I thought I could use the listElement property to tell fine-uploader which element to use for this list?
On a side note, if I cut and paste the div with id=listElement and move it adjacent to the div with class=qq-upload-button-selector then this example works fine.
Any help would be appreciated, I have spent hours on this and haven't found an answer for this on stackoverflow either.
A couple issues with your code:
"#listelement" is not a valid html element ID in all browsers.
You are attempting to select an element that does not yet exist in the DOM. It's not clear why you are specifying a list element anyway. Fine uploader should find the list in the template when it renders.
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