I am trying to setup a carousel for my home page with a carousel with some full screen images and parallax effect on them. I am new to quasar but have used vuetify quite often but recently switched to Vue3 so figured I would try out quasar. However, I am struggling to do this. I see there is a slot for QCarouselSlide but I am not sure how to tie into that for this parallax.
My code so far is as follows:
<template>
<q-page padding="false">
<q-carousel
v-model="slide"
swipeable
animated
navigation-position="left"
navigation
padding
style="height:100vh"
class="bg-purple text-white rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
</q-carousel>
</q-page>
</template>
<script setup>
import { ref } from 'vue'
const slide = ref('style')
</script>
Please refer following codepen.
https://codepen.io/Pratik__007/pen/rNrrRxj
<q-carousel-slide :name="1" class="column no-wrap">
<div class="row fit">
<q-parallax
src="https://cdn.quasar.dev/img/parallax2.jpg"
>
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</q-carousel-slide>
Related
im not a coder by any description so please excuse my lack of knowledge.
Im trying to make a basic web page with a floating chatbox style whereby when you click an icon, ( the icon represents words ) the text is filtered into the chatbox.
Im trying to make a communication page for my autistic nephew and he uses something called the PECS system and its a series of pictographical cards on a velcro board which he uses for sentence construction, its pretty basic and only works when he's got the kit with him.
MY aim is to make a web app of some kind ( but just starting with a simple web page to test it on him and see if he's interested in it ) so that anyone can access it on a tablet or phone and talk to him, or indeed he can talk to his friends at school.
there are already some platforms out there and apps, but they just don't quite hit the spot, plus they are expensive to run being subscription models.
my code is this below
<html>
<head>
<title>Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
// some sample icons but need to figure out a way to handle large numbers of feeligs-emotions-actions etc
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
<div class="chat-box"></div>
</div>
</div>
</div>
// chatbox elemt, should be floating when page scrolls as he clicks an icon
<style type="text/css">
.chat-box {
position: relative;
float: right;
background-color: #3fae96;
border: 1px solid #0b0b0b;
padding: 10px;
margin-right: 50px;
}
</style>
<script>
// references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
const chatBox = document.querySelector(".chat-box");
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// filename without extention to the message, causes text overfill othewise
const fileName = event
</script>
</body>
</html>
my problem is i can't get the text from the image click into the chatbox.. nor can i seem to make it 'float' and im pretty much at the end of my knowledge and don't know where to go next. the box is on the right but its not filling with any image names..
the idea is each image he click populates the chat box.. it works in a basic format where it puts the raw text at the bottom, but when i added the chat box function it all stops :(
Many thanks
So this was where i started from once i had the images "clickable" so i went to try and include the chat box feature but this is where im stuck
<html>
<head>
<title>PECS Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>PECS Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
</div>
</div>
</div>
<script>
// Get references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
// Add an event listener to each pictograph
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// Add the filename without extention to the message
messageDisplay.innerText += event.target.src.split('/').pop().split('.')[0];
});
});
</script>
</body>
</html>
i was experimenting with this idea Floating panels left and right CSS and im not getting far with it so i went to a w3 school page and was looking at examples and i think im out of my depth.
I have a multi-stage dropdown component that works, but unfortunately is applied to all divs that share the same className. I.e: all items drop down when one is clicked - when I obviously just want the one clicked.
Ive tried other solutions that involve mapping, using (this) and also selecting the div by id via document query then iteration with for loops but nothing has worked. Mainly because even if I can isolate the div (say with useRef e.g.), trigging the function inherently involves applying the style change to all divs with the same classname. With this in mind, I'm pretty sure I need to change the initial css hook. Alternative is obviously to give each dropdown item its own css class which I feel would be too repetitive to even try.
Here is my code (for berevity Ive just included the dropdown and not scroll up, also just one of the items - html is identical for the other 7 items:
const [content, Toggle] = useState(styles.CT007Content)
const [TrackList, Drop] = useState(styles.songContainer)
const [artwork, Slide] = useState(styles.artworkContainer)
const [title, Darkmode] = useState(styles.releaseTitle)
const [arrow, Unlock] = useState(styles.arrow)
const open = () => {
if (arrow==styles.arrow){
Unlock(styles.arrowChecked);}
if (title==styles.releaseTitle){
Darkmode(styles.releaseTitleClicked)};
if (TrackList==styles.songContainer){
Drop(styles.songContainerOpen)};
if (content==styles.CT007Content){
Toggle(styles.CT007ContentOpen)};
if (artwork==styles.artworkContainer){
Slide(styles.artworkContainerOpen)};
html
{/* item 1 of 10 */}
<div className={styles.Release} id="CT007">
<div className={styles.releasesHeader} id="CT007">Releases (2014-2018, 2022)</div>
<div className={title} onClick={open} id="CT007">CT007
<div className={arrow} id="CT007">></div>
<div className={arrow} id="CT007">></div>
<div className={arrow} id="CT007">></div>
</div>
<content className={content} id="CT007">
<div className={TrackList} id="CT007">
<div className={styles.trackContainer} onClick={changeStyle} id="CT007">
<audio controls className={audiostyle} src="/TEX86.mp3" id="CT007">
{/* <source src="/TEX86.mp3" type = "audio/mpeg"/> */}
</audio>
<div className={styles.trackText} id="CT007">
<h4>You'll Never Get Rich</h4>
</div>
</div>
<div className={styles.trackContainer} id="CT007">
<audio controls className={audiostyle} id="CT007">
<source src="" type = "audio/mpeg"/>
</audio>
<div className={styles.trackText} id="CT007">
<h4>Death by Dole</h4>
</div>
</div>
</div>
<div className={artwork} id="CT007">
<svg src=""/>
</div>
</content>
</div>
To iterate, the functionality works fine, I just dont want it applied to all divs when only one is clicked. Many thanks in advance. Im sure it is something obvious but I am new to react, any help would be appreciated
documentQuery Selector, wrapping hook in a function for each div OnClick, mapping/for looping
Hello I am trying to implement my menu that I have created with css in all views, for example in my home view I want to invoke it as I saw an example on the web like this:
<template>
<Fragment>
<menu></menu>
<div class="portada">
<menu></menu>
<div id="desarrollofrontend">
Test Menu
</div>
<div class="text">
<h1>Test Menu Home</h1>
<h3>Description home</h3>
</div>
</div>
</Fragment>
</template>
<script>
import menu from '../components/Head/menu.vue'
export default {
components: { menu }
}
</script>
But so far nothing works for me, I'm really new to this
This is my view of my home page, I have my menu created with scss, in the <menu> </menu> tags it is how I saw some examples on the web but it does not work for me
Any recommendations to make it work?
There is a question just like this, but the answer wasn't very clear and I don't have enough "points" to comment on it.
I read https://react-bootstrap.github.io/components/buttons/ and some other documents but am unable to find my answer.
I used this article as my guide: https://www.pluralsight.com/guides/how-to-position-react-bootstrap-popover
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
.
.
.
render() {
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
return (
<div className='toggle container '>
<div className='form-row justify-content-center'>
<div className='col-6'>
<section class='inline-block'>
<span class="badge badge-pill badge-primary ml-2">1</span>
<h3>
Choose System Type:
</h3>
<div id="element1">
<OverlayTrigger trigger="hover" placement="right" overlay={popover}>
<Button variant="outline-primary" circle><i class="fas fa-question"></i></Button>
</OverlayTrigger>
</div>
</section>
</div>
</div>
</div>
I'd like my popover button to be a circle, but I can't find documentation on how to do that.
Can someone explicitly help me using the ? Perhaps something else? Examples help immensely. Here is a screenshot of what it looks like now...
You can set className="rounded-circle" to your button component and it will be circle.
More about similar border classes:
Bootstrap documentation
Hello MarionetteJS Gurus,
I have what is probably a very simple problem, but I can't wrap my head around how to solve it. I have an application with 2 regions and 1 layout, and I'm utilizing the Ratchet CSS library for prototyping. Functionally, the goal is simple: display a list of contacts in one view, with a header and search bar. If the user selects a contact, remove the search bar and retain only the header.
The problem appears to be the wrapping divs that are required to swap views in and out. The Ratchet CSS needs the header bars to be directly above the content section in order to properly dock them at the top of the viewport, but Marionette's regions and layouts (at least with my configuration) are preventing this from happening. Perhaps I could better structure my views?
JSFiddle of the resulting output: http://jsfiddle.net/VB7py/3/ You'll notice that the header/search area overlaps the content area.
menuRegion contains a footer menu, and mainRegion contains a layout consisting of a header region, a search region, and a "main content" region. Below are some snippets of my code:
Regions
var App = new Marionette.Application();
App.addRegions({
headerRegion: "#header-region",
menuRegion: "#menu-region",
mainRegion: {
selector: "#main-region",
regionType: MainRegion
}
});
Layouts/Views
List.Layout = Marionette.Layout.extend({
template: "#contacts-layout",
regions: {
headerRegion: "#header-region",
searchRegion: "#secondary-header-region",
contactsRegion: "#contacts-region"
}
});
List.Search = Marionette.ItemView.extend({
tagName: "div",
template: "#contact-list-search",
className: "bar bar-standard bar-header-secondary"
});
List.Header = Marionette.ItemView.extend({
template: "#contact-list-header"
});
Templates
<!-- Application Layout -->
<script type="text/template" id="contacts-layout">
<div id="header-region" class="bar bar-standard"></div>
<div id="secondary-header-region">
</div>
<div id="contacts-region" class="content"></div>
</script>
<script type="text/template" id="contact-list-header">
<nav class="bar bar-standard"><h1 class="title">Contacts</h1></na>
</script>
<script type="text/template" id="contact-list-search">
<input type="search" placeholder="Search" />
</script>
<script type="text/template" id="menu-template">
<nav class="bar bar-tab bar-footer">
</nav>
</script>
The wrapping divs inside the regions did not seem to be a problem. However, you need to set those bar specific css classes to the regions instead of it's nested elements. Like:
<div id="header-region" class="bar bar-standard">
<div>
<nav>
<h1 class="title">All Contacts</h1>
</nav>
</div>
</div>
<div id="secondary-header-region" class="bar bar-header-secondary">
<div>
<input type="search" placeholder="Search">
</div>
</div>
See: http://jsfiddle.net/Cardiff/7Wd6W/
You could pre-set those classes on your region elements or add these specific classes on region initialization, see: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#instantiate-your-own-region