I was expected the circle to be 1,2,3 and 4 but the output is 4,1,2 and 3. I don know whether is the position: absolute; that cause it happen. Kindly to receive any feedback.
<template>
<q-page class="column flex-center">
<q-card class="my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<div
v-for="index in 4"
:key="index"
class="circle"
:style="`background-color: ${[index]}`"
>
{{ index }}
</div>
</q-card>
</q-page>
</template>
<script setup></script>
<style lang="scss">
.my-card {
width: 200px;
height: 200px;
}
.circle {
position: absolute;
top: 20px;
right: 0;
background-color: $positive;
width: 20px;
height: 20px;
border-radius: 50% !important;
z-index: 1;
}
.circle:nth-child(2) {
top: 40px;
background-color: $negative;
}
.circle:nth-child(3) {
top: 60px;
background-color: orange;
}
.circle:nth-child(4) {
top: 100px;
background-color: grey;
}
</style>
https://stackblitz.com/edit/quasarframework-bybqfg?file=src%2Fpages%2FIndexPage.vue
.circle:nth-child(n) selects an element satisfying the following conditions:
has class circle
is the n-th child of its parent.
Your DOM looks like this:
.q-card__section // :nth-child(1)
.circle: content 1 // :nth-child(2)
.circle: content 2 // :nth-child(3)
.circle: content 3 // :nth-child(4)
.circle: content 4 // :nth-child(5)
You'll likely get the expected result by wrapping .circles in a separate container:
.q-card__section // :nth-child(1)
div // :nth-child(2)
.circle: content 1 // :nth-child(1)
.circle: content 2 // :nth-child(2)
.circle: content 3 // :nth-child(3)
.circle: content 4 // :nth-child(4)
Related
I'm trying to make it so that when you click on the button with the class .booking__button, the block scrolls up under the header. Position should not change, only scroll. This is done so that the search results of the booking module, which, would be visible to the user. I found the code that does the scrolling, but it works with the exact number, now 100px, but you understand that this distance will be different for everyone, depending on the height of the screen.
document.querySelector('.booking__button').addEventListener('click', () => {
window.scrollTo(0, 100);
});
body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #002164;
}
.hero {
min-height: calc(100vh - 100px);
background: #fff;
}
.booking__module {
display: flex;
justify-content: center;
align-items: center;
background: #BC0B3C;
}
.booking__search {
height: 600px;
background: #ccc;
}
.booking__button {
height: 20px;
margin: 40px;
}
.others {
height: 200vh;
}
<header class="header"></header>
<main class="hero"></main>
<section class="booking">
<div class="booking__module">
<button class="booking__button">booking</button>
</div>
<div class="booking__search"></div>
</section>
<section class="others"></section>
One approach is below, with explanatory comments in the code. Note that while I changed the background-color of the <header> element, that's simply to visualise the functionality and is not at all required:
// we pass a reference to the Event Object ('evt') to the function:
document.querySelector('.booking__button').addEventListener('click', (evt) => {
// we retrieve the closest ancestor <section> element of the element
// to which the event-handler is bound, and retrieve the 'top' property
// of its bounding-client rect:
let {top} = evt.currentTarget.closest('section').getBoundingClientRect();
// we then scroll to that value:
window.scrollTo(0, top);
});
body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
/*background: #002164;*/
background-color: hsl(200deg 70% 70% / 0.4);
}
.hero {
min-height: calc(100vh - 100px);
background: #fff;
}
.booking__module {
display: flex;
justify-content: center;
align-items: center;
background: #BC0B3C;
}
.booking__search {
height: 600px;
background: #ccc;
}
.booking__button {
height: 20px;
margin: 40px;
}
.others {
height: 200vh;
}
<header class="header"></header>
<main class="hero"></main>
<section class="booking">
<div class="booking__module">
<button class="booking__button">booking</button>
</div>
<div class="booking__search"></div>
</section>
<section class="others"></section>
JS Fiddle demo.
References:
Element.closest().
Element.getBoundingClientRect().
Event.
Event.currentTarget.
EventTarget.addEventListener().
Window.scrollTo.
I created a grid of items using this library and it works flawlessly. In my items, i have a very simple bootstrap grid with some forms, inputs and other content, the problem is that a lot of times while using the content inside of the bootstrap grid, i move the entire item.
I was wondering if there is a way to disable dragging only inside of the so that when i use what's inside of the container, the item is not moved, but if i want to move the item i can drag it by grabbing it outside the container.
Here is my code:
<template>
<grid-layout :layout.sync="layout"
:col-num="1"
:row-height="30"
:is-draggable="draggable"
:is-resizable="resizable"
:vertical-compact="true"
:use-css-transforms="true"
>
<grid-item v-for="item in layout"
:static="item.static"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
<div class="container">
<div class="row">
<div class="col-sm-7">Here is some content...</div>
<div class="col-sm-5">Here is some other content.. </div>
</div>
</div>
</grid-item>
</grid-layout>
</template>
<script>
import { GridLayout, GridItem } from "vue-grid-layout"
export default {
components: {
GridLayout,
GridItem
},
data() {
return {
layout: [
{"x":0,"y":0,"w":6,"h":4,"i":"0", static: false},
],
draggable: true,
resizable: true,
index: 0
}
},
methods: {
itemTitle(item) {
let result = item.i;
if (item.static) {
result += " - Static";
}
return result;
}
}
}
</script>
<style scoped>
.vue-grid-layout {
background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.vue-grid-item .resizing {
opacity: 0.9;
}
.vue-grid-item .static {
background: #cce;
}
.vue-grid-item .text {
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
.vue-grid-item .no-drag {
height: 100%;
width: 100%;
}
.vue-grid-item .minMax {
font-size: 12px;
}
.vue-grid-item .add {
cursor: pointer;
}
.vue-draggable-handle {
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
background-position: bottom right;
padding: 0 8px 8px 0;
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
cursor: pointer;
}
</style>
So basically i should not be able to drag or move the item from inside the container. Any kind of advice is appreciated. Thanks in advance!
Since you asked you probably already solved your problem, but the easy way to avoid moving the entire item is to declare an attribute of grid-item where dragging is not allowed.
<grid-item class=""
drag-allow-from=".vue-draggable-handle"
drag-ignore-from=".no-drag"
:autoSize="true" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
<div class="vue-draggable-handle"></div>
<div class="no-drag"></div>
</grid-item>
Thoses two attributes are in fact css class reference.
.vue-grid-item .no-drag {height: 100%;width: 100%;}
.vue-draggable-handle { position: initial; width: 5px;height: 5px;top: 0;right: 0;padding: 0 8px 8px 0;background-origin: content-box;box-sizing: border-box;border-radius: 10px;cursor: pointer;color: #005B60 !important;}
You can either set static to true which would not allow you to drag/resize the grid or add an element draggable in your layout and set it to false where you will be able to only resize the grid.
layout: [
{"x":0,"y":0,"w":6,"h":4,"i":"0", static: true},
] // If you want to lock the grid (no resize/no dragging)
or
layout: [
{"x":0,"y":0,"w":6,"h":4,"i":"0", draggable: false},
] // you will be able to resize but drag
<grid-item
:key="item.i"
v-for="item in layout"
:is-draggable="item.draggable"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
I want to be able to log the height of each of the .slide-text-overlay elements, but no value seems to be showing. The simple for of loop should loop through each class and just log the html of that class and then the height - but the height isn't logging; instead, just an empty line in the console.
Any ideas what I'm doing wrong here? Thanks for any help
var overlays = document.querySelectorAll('.overlay');
for (let overlay of overlays) {
console.log(overlay);
console.log(overlay.style.height);
}
.overlay:first-of-type {
color: red;
width: 100px;
height: 50px;
background: orange;
}
.overlay:nth-of-type(2) {
color: blue;
width: 100px;
height: 75px;
background: pink;
}
<div class='overlay'>
overlay 1
</div>
<div class='overlay'>
overlay 2
</div>
Use the offset Height in JS
var overlays = document.querySelectorAll('.overlay');
for (var i=0; i < overlays.length; i++) {
console.log(overlays[i].offsetHeight)
}
.overlay:first-of-type {
color: red;
width: 100px;
height: 50px;
background: orange;
}
.overlay:nth-of-type(2) {
color: blue;
width: 100px;
height: 75px;
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='overlay'>
overlay 1
</div>
<div class='overlay'>
overlay 2
</div>
Documentation:
https://www.w3schools.com/jsref/prop_element_offsetheight.asp
The class in the querySelector should be overlay
var overlays = document.querySelectorAll('.overlay');
for (let overlay of overlays) {
console.log(overlay);
console.log(overlay.style.height);
}
.overlay:first-of-type {
color: red;
width: 100px;
height: 50px;
background: orange;
}
.overlay:nth-of-type(2) {
color: blue;
width: 100px;
height: 75px;
background: pink;
}
<div class='overlay'>
overlay 1
</div>
<div class='overlay'>
overlay 2
</div>
Try this:
var overlays = document.getElementsByClass('.overlay');
for (let overlay of overlays) {
console.log(overlay);
console.log(overlay.style.height);
}
I have a responsive slider with elements below. I've tried using margin-top on the element below and margin-bottom on the image. In both cases, when the view-port reduces, the image and the other elements part company...ie the gap widens. I've tried px, vw and vh as the unit for the margin.
Is there a technique to resolve this?
The code is:
<div id="slider">
<div class="container">
<div>
<img class="slider_img" src="images/hands-coffee-cup-apple_1920x965.jpg"/>
</div>
<div>
<img class="slider_img" src="images/macbook-apple-imac-computer-39284_1920x965.jpg"/>
</div>
<div>
<img class="slider_img" src="images/ipad-tablet-technology-touch_1920x965.jpg"/>
</div>
</div>
</div>
<div class="promises_hdr">Our promise to you</div>
<div class="promises">
<div class="promise">
<img class="promise_img" src="images/iconfinder_ecommerce.png"/>
<div class="promise_hdr">Get Noticed, Get Customers</div>
<div class="promise_txt">
<p>The progression from the Get Noticed Online step to the Create Customer step goes through 2 other stages. These are Convert and Close. Inward Marketing: webThemes understands.</p>
</div>
</div>
#slider{
width:100%;
height: 100vh;
position: relative;
}
.container {
max-width: 100%;
height: 100%;
margin: auto;
position: absolute;
}
.container div {
display: inline-block;
width: 100%;
height: 940px;
display: none;
}
.slider_img {
width: 100%;
height: auto;
z-index: -1;
}
.promises_hdr {
font-family: "Century Gothic", Sans-serif;
font-size: 2.3em;
color: #0150E2;
position: relative;
text-align: center;
margin-top: 4vw;
}
$( document ).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 4000);
});
Try to use % value for the margin as well. It's the most confident way to resolve many problems in CSS, especially in tweaking site's responsiveness.
I have this code:
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background: red
}
.menu2 {
display: none;
}
<div id="main">
<div class="menu1">COntent 1</div>
<div class="menu2">Content 2</div>
</div>
How to: When I'm scroll down div .menu2 display sticky in top as css
.menu2 {
height: 30px; background: blue; position: fixed
}
My code: http://jsfiddle.net/rh1aLnxs/
Thanks
this can be accomplished with css's position:fixed, as long as you don't need additional behavior regarding the parent div (position:fixed is ignorant to the parent in css)
here's an example:
.menu1 {position:fixed; height: 30px; background: red; max-width: 500px; width:100%}
http://jsfiddle.net/rh1aLnxs/
If you need for example, for menu1 to go away when the user scrolls below main, then you need to use jquery's scroll event and handle the positioning manually (http://api.jquery.com/scroll/)
try this:
var headerTop = $('.menu1').offset().top;
// var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
if (scrollTop > headerTop) { // Check to see if we have scrolled more than headerBottom
if (($(".menu2").is(":visible") === false)) {
$('.menu1').hide();
$('.menu2').fadeIn('slow');
}
} else {
if ($(".menu2").is(":visible")) {
$('.menu2').hide();
$('.menu1').fadeIn('slow');
}
}
});
#main {
max-width: 500px;
height: 900px;
margin: auto;
background: green
}
.menu1 {
height: 30px;
background-color: red
}
.menu2 {
background-color: blue;
max-width: 500px;
width: 100%;
top: 0;
display: none;
/*display: none*/
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="menu1">Content1</div>
<div class="menu2">Content2</div>
</div>
Here are some improvements on your fiddle along with a simplified version of the script to add/remove a fixed class on scroll.
http://jsfiddle.net/rh1aLnxs/2/
jQuery(window).bind("scroll", function() {
if (jQuery(this).scrollTop() > 100) {
jQuery(".menu1").removeClass("no-fixed").addClass("fixed");
} else {
jQuery(".menu1").removeClass("fixed").addClass("no-fixed");
}
});
#main {max-width: 500px; height: 900px; margin: auto; background: green}
.menu1 {height: 30px; background: red}
.menu2 {display: none}
#main {
width:100%;
position:relative;
}
.no-fixed {
position: relative;
}
.fixed {
position: fixed;
width:100%;
max-width: 500px;
}
<div id="main">
<div class="menu1"></div>
<div class="menu2"></div>
</div>