Hello (I am not a programmer so bear with me)
I am using drupal 7. My boss loves the KWICKS slider. I have gotten this to work but only with images using views-kwicks module.
I would like to be able to have text(teaser) placed over the images in the slider with a link to the corresponding page when clicked, like http://demo.themesmania.com/creative/kwicks-slider
How should I go about doing this? Thank you!!
the markup used in that link is:
put this inside your <li></li> of kwicks:
<div class="slide-description">
<h4>At vero eos et accusamus et</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti</p>
</div>
then use this css:
.slide-description { background-color:#000;
bottom: 0;
cursor: pointer;
display: block;
font-weight: normal;
left: 0;
line-height: normal;
padding: 16px 20px;
position: absolute;
width: 760px;z-index: 2;}
Related
I code a simple react-native messaging application with kind of message baloons containing 2 text elements: a message text and message time. A message text can be multiline and the time text has fixed width.
However, i ran into the problem that I could not arrange the time text element in the same level as the last bottom line of message text.
My goal is to get a component with behavior similar to easy-to-do HTML example but I don't know how to implement such in flex-box model in RN.
.container {
width: 300px;
background-color: #ff0000;
border-radius: 10px;
padding: 10px;
}
.time {
width: 50px;
text-align: right;
background-color: #00ff00;
display: inline-block;
float: right;
}
.separator {
height: 10px;
}
.clear{
clear: both;
}
<p>when the bottom line of message is not long enough that time can be fit into the same line</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. Praesent id posuere tortor. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
<div class='separator'></div>
<p>when the bottom line of message takes more space, the time text takes additional line at bottom</p>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. </span>
<span class="time">12:37</span>
<div class="clear"></div>
</div>
Any help would be appreciated.
This might not be the answer you were looking for but I'd suggest using a UI component library such as Nativebase if you're getting started, it's good practice and you surely don't want to build everything from scratch. They have lots of components you can take advantage of and have lots of example on how to implement them. You should also check out material design - https://material.io/
I'm experiencing a bug while using Boostrap(4)-Vue.
Namely, when transitioning between slides the image scrolls up and the page 'jumps' as can be seen below. I've copied exactly the source code in the reference provided.
The bug persists in both Chromium and Firefox, both for desktop (large) view and for mobile.
Any idea would be appreciated.
Vue component:
<template>
<b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ababab"
:interval="4000"
img-width="1024"
img-height="480"
v-model="slide"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd">
<!-- Text slides with image -->
<b-carousel-slide caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58">
</b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
src="https://picsum.photos/1024/480/?image=55" alt="image slot">
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
eros felis, tincidunt a tincidunt eget, convallis vel est. Ut pellentesque
ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
</template>
<script>
import data from '#/data'
export default {
name: 'Home',
data () {
return {
slogan: data.slogan,
welcome: data.welcome,
servicesList: data.servicesList,
slide: 0,
sliding: true,
selected: ''
}
},
methods: {
expand (sect) {
sect.expanded = !sect.expanded
},
onSlideStart (slide) {
this.sliding = true
},
onSlideEnd (slide) {
this.sliding = false
}
}
}
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.selected {
background-color: aquamarine;
}
</style>
i am trying to create a full width slider for only images with text. My slider is full width but needs a specific height (example 400px)because it is going to be displayed as the banner of my website.
The problem is that the images look blurry and i dont know the proper size or perhaps the code to prevent this.
This is what i have so far as for my html and the images's size
<div class="wrapper">
<div class="full-width">
<div class="inner">
<div class="slide">
<div>Lorem ipsum dolor sit amet, consectetur. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/sports" width="1020" height="400">
</div>
<div class="slide">
<div>Nullam dictum magna sapien, sed adipiscing nibh. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/city" width="1020" height="400">
</div>
<div class="slide">
<div>Donec malesuada hendrerit velit, sed consequat. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/cats" width="1020" height="400">
</div>
<div class="slide">
<div>Maecenas augue dui, rhoncus a blandit non. <br>Curabitur molestie elit et ultricies vehicula.</div>
<img src="http://lorempixel.com/1020/400/business" width="1020" height="400">
</div>
</div>
<div class="controls">
<
>
</div>
<div class="slide-nav"></div>
</div>
</div>
as for my css:
.full-width {
overflow: hidden;
position: relative;
background: #fff;
}
.full-width,
.full-width .slide img {
width: 100%;
}
.full-width:hover {
background: transparent;
}
.full-width .inner {
overflow-y: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter: alpha(opacity=00);
-moz-opacity: 0;
opacity: 0;
}
.full-width .slide {
float: left;
overflow-x: hidden;
position: relative;
}
.full-width .slide img {
height: auto;
}
.full-width .slide div {
color: #fff;
position: absolute;
padding: 0 5%;
left: 0;
width: 90%;
text-align: right;
font-size: 32px;
}
.full-width .slide div p {
float: right;
text-align: left;
padding: 10px;
margin: 0;
background: rgba(0, 0, 0, 0.8);
}
.full-width .controls a {
position: absolute;
top: 50%;
margin-top: -46px;
display: block;
background: rgba(0, 0, 0, 0.5);
text-decoration: none;
color: #fff;
font-size: 40px;
padding: 0 10px 2px 7px;
line-height: 40px;
*display: none;
}
.full-width .controls a.left {
left: 0px;
}
.full-width .controls a.right {
right: 0px;
}
.full-width .slide-nav {
*display: none;
font-size: 75px;
margin: 0 auto;
line-height: 50px;
font-family: 'Helvetica', Arial, sans-serif;
}
.full-width .slide-nav span {
cursor: pointer;
color: #ccc;
}
.full-width .slide-nav span.current {
color: #333;
}
.lt-ie9 .full-width p,
.lt-ie9 .full-width .controls a {
background: url('bg-trans.png') repeat;
_background: #333;
}
what i need to know if it is a matter of adjusting only the image size although i tried that already and didnt worked or if it remains in the code.
thanks in advance for any help!
If the images are getting blurry at larger sizes, you will need to produce an image with the dimensions of the maximum area you want it to cover. This way when it is at full size the quality will be clear.
When you decrease the screen size, the image size will likely be decreasing too. In my experience it is better to start large and scale to a smaller size to preserve the clarity of the image, so you should approach it that way.
If the problem is that it is not scaling correctly because the proportions are off because of the fixed height, then you will need to produce images with the correct proportions to support the size you need. This is most easily done with image editing software like Photoshop rather than making adjustments in HTML.
I've created tooltips that are absolutely positioned and have divs inside of them that have max-width: 200px;. The text within the divs are not wrapping to the next line, however. They're going outside of the container even though there are spaces in the text, so it's not a word-break issue. See image below:
Edit: The tooltips are pulling in the text from their trigger element's title attribute and that seems to be the problem. If the content is hard-coded, the text wraps just fine.
Here's the HTML:
<div class="tooltip">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada, lectus eget gravida eleifend, odio libero hendrerit elit.</div>
</div>
And the CSS:
.tooltip{
padding: 10px;
position: absolute;
background: #303030;
font-size: .9em;
color: #ccc;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.4);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.4);
box-shadow: 0 5px 10px rgba(0,0,0,.4);
}
.tooltip div{
max-width: 200px;
border: 1px solid red; /* See where element is */
}
This seems so obvious, but I cannot think of what the issue is. Any help would be appreciated.
Thanks
It probably has something to do with the way you're injecting the text into the .tooltip element. Try something like this (using jQuery):
$('.trigger').on('click', function() {
$('.tooltip div').html($('.trigger').attr('title'));
});
http://jsfiddle.net/DyxkA/
Visit this URL using Safari or Chrome browser:
http://aspspider.net/sunlight1000/two_col_div_layout_w3valid.htm
Set the width of the browser’s window to make sure the height of the Green box is greater than the height of the Red box. Then grab the lower edge of the browser’s window and drag it to the lower edge of the Green box and play around it. You will notice the Red box disappears when the lower edge of the browser’s window goes higher than the lower edge of the Green box. Then continue to shrink up the height of the browser’s window and the Red box will appear again. You will notice the Red box appears again exactly at the moment the lower edge of the browser’s window reaches the low edge of Red box. The Red box never disappears in other browsers (IE, FF and Opera). Is this a bug in Safari or some kind of “feature”? In any case I will be highly appreciated if someone suggests me a workaround to avoid disappearing of the Red box in Safari.
Here is the code of above mentioned page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2 Column Fixed Liquid CSS Layout</title>
<style type='text/css'>
.wrapper
{
width: 100%;
min-width: 300px;
}
.wrapright
{
float: left;
width: 100%;
background-color: Blue;
}
.right
{
margin-left: 160px;
background-color: Lime;
}
.left
{
float: left;
width: 150px;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapright">
<div class="right">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH
EUISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT.
</div>
</div>
<div class="left">
<div style="background-color: red;">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, ...
</div>
</div>
</div>
</body>
</html>
I'm not sure if this would work for your final layout, but based on the demo layout: seems like the negative 100% margin could be causing the issue. The behavior appears to be the same if you take away the float and margin declarations and do a position: absolute on the .left div. As long as the container is relatively positioned, I think you'll get the same end result.