I am trying to display text over image on more info click and hide text from image on hide info button click.
I am developing website in razor. I am trying to display text over image on more info click and hide text from image on hide info button click.
<style>
.portfolioImage {
position: relative;
overflow: hidden;
}
.portfolioImage .footerBar {
position: absolute;
width: 100%;
height: 100%;
position: absolute;
left: 0;
margin-top: -200px;
border-radius: 5px;
}
.portfolioImage:hover .footerBar {
margin-top: 0px;
background-color: #ffb268;
opacity: 0.8;
}
.footerBar {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>
<div class="thumbnail" style="padding:0px;height:200px">
<div class="portfolioImage" id="portfolioImage#(i)">
<div class="footerBar" id="footerBar#(i)">
<table class="table rate-info">
<tr>
<td>First Passenger Fare</td>
</tr>
</table>
</div>
<div id="image_frame#(i)" class="image_frame">
<img alt="100%x200" data-src="#(Url.Content("~/Images/van/"+vanImg+".png"))" src="#(Url.Content("~/Images/van/" + vanImg + ".png"))" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
</div>
</div>
<div class="col-sm-2">
<a id="btncollapseShow#(i)" name="btncollapse#(i)" onclick="ShowHideRates('#(i)','show')" style="color:#4285f4;font-size:small;cursor:pointer;" class="btnExpand" title="#Global.Translate("More info")"> + </a>
<a id="btncollapseHide#(i)" name="btncollapse#(i)" onclick="ShowHideRates('#(i)','hide')" style="color:#4285f4;font-size:small;cursor:pointer;display:none;" class="btnExpand" title="#Global.Translate("Hide info")"> – </a>
</div>
function ShowHideRates(_cellindex, _showHide) {
var _image_frame = "#image_frame" + _cellindex;
var btncollapseShow = "#btncollapseShow" + _cellindex;
var btncollapseHide = "#btncollapseHide" + _cellindex;
if (_showHide == "show") {
$(btncollapseShow).css({ "display": "none" });
$(btncollapseHide).css({ "display": "block" });
// $(_image_frame).addClass("portfolioImage footerBar").css('margin-top','+200');
} else {
$(btncollapseShow).css({ "display": "block" });
$(btncollapseHide).css({ "display": "none" });
// $(_image_frame).removeClass("footerBar");
}
}
Related
I recently updated to Monterey and found out bug in my website. So, I have three tabs, while switching between them other one losses their text, text becomes white, I dunno.
Before, at safari 15.0 all was okay. But Monterey has safari 16.0
Tab is a hyperlink tag
I already searched through different whole css styles:
:webkit-any-link,
::selection,
a:hover,
a:active
Moreover, when I turn off one of the styles, text appears devtools screen if helps
const prodctTabHeadlineBtn = document.querySelectorAll('.device-proudct-tabs__headline-item');
const productTabContent = document.querySelectorAll('.device-proudct-tab');
prodctTabHeadlineBtn.forEach(function (item) {
item.addEventListener('click', function () {
event.preventDefault();
let currentHeadlineBtn = item;
let tabId = currentHeadlineBtn.getAttribute('data-tab');
let cuttentTab = document.querySelector(tabId);
prodctTabHeadlineBtn.forEach(function (item) {
item.classList.remove('active');
});
productTabContent.forEach(function (item) {
item.classList.remove('active');
});
currentHeadlineBtn.classList.add('active');
cuttentTab.classList.add('active');
});
document.querySelector('.device-proudct-tabs__headline-item').click();
});
.device-proudct-tabs__headline-item {
width: 33.3333%;
padding: 25px 0;
position: relative;
font-size: 21px;
font-weight: 700;
color: #706C79;
text-align: center;
transition: all .2s linear;
}
.device-proudct-tabs__headline-item.active {
color: #34303d;
}
.device-proudct-tabs__headline-item.active::after {
content: '';
display: block;
width: 100%;
height: 3px;
background: #00d1d2;
position: absolute;
left: 0;
bottom: 0;
transition: all .2s linear;
}
.device-proudct-tabs__headline-item:hover {
color: #34303d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="device-proudct-tabs__headline">
<a class="device-proudct-tabs__headline-item" data-tab="#tab_1" href="#">
text
</a>
<a class="device-proudct-tabs__headline-item" data-tab="#tab_2" href="#">
text
</a>
<a class="device-proudct-tabs__headline-item d-none" data-tab="#tab_3" href="#">
text
</a>
<a class="device-proudct-tabs__headline-item active" data-tab="#tab_4" href="#">
text
</a>
</div>
Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.
What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div> <div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.
The logic is as so:
To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item
To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().
This is the result:
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
And the rest is just a matter of styling (note: uses Material Icons for the arrow icons). Define two button elements;
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
The "chevron_right" and "chevron_left" are icon names | List of Icons
Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").
A full example (best viewed in full page mode):
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function() {
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140);
$product_carousel.css('width', product_width);
var rotating = true;
$(document).on({
mouseenter: function() {
rotating = false;
},
mouseleave: function() {
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
}
});
});
/* button integration styling (start) */
#left {
left: 10px;
}
#right {
right: 10px;
}
.nav-btn {
position: fixed;
top: calc(50vh - 50px);
z-index: 100;
z-index: 100;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
background-color: white;
box-shadow: 0 0 1px black;
transition: 0.2s;
}
.nav-btn:hover {
background-color: #d1d1d1;
}
/* button integration styling (end) */
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Spectric</h3>
</div>
<div class="author">
<span>Spectric</span>
</div>
<div class="purchased items-center">
<button>Check out</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
I'm new to VueJS. I spent the last two hours trying to animate a slider, and finally I found a solution, but I don't understand why I need to set my image in position absolute to have the slide effect using the transform: translate property. Can someone explain me why?
Here's the working code:
SCSS:
#slider {
margin-top: 20px;
width: 450px;
height: 187.5px;
position: relative;
overflow: hidden;
.layover {
#extend %layover;
}
.wrapper-image-slider {
width: 450px;
height: 187.5px;
position: relative;
overflow: hidden;
.slide-image {
width: 100%;
position: absolute; /* important */
top: 0;
left: 0;
bottom: 0;
right:0;
}
.thumb-text {
position: absolute;
top: 0;
left: 0;
}
}
.left-slide-enter-active, .left-slide-leave-active {
transition: 1s;
}
.left-slide-enter {
transform: translate(100%, 0);
}
.left-slide-leave-to {
transform: translate(-100%, 0);
}
}
HTML:
<div id="slider">
<div class="layover"></div>
<transition-group name="left-slide" tag="div" class="wrapper-image-slider">
<div v-for="(post, index) in slider" :key="post.id" v-if="(activeImageSlider == index)">
<img class="slide-image" :src="post.img">
<div class="thumb-text">
<div class="label">
{{ slider[activeImageSlider].label }}
</div>
<h2>
{{ slider[activeImageSlider].title }}
</h2>
<div class="descr">
{{slider[activeImageSlider].descr }}
</div>
</div>
</div>
</transition-group>
</div>
I don't think you need to use a list transition for this. If you create a computed property that just returns the active slide then you can use a normal transition with the mode 'out-in'.
https://jsfiddle.net/9oj1h8r3/1/
new Vue({
el: "#app",
data: {
activeSlideIndex: 0,
slides: [
{ img: "https://picsum.photos/200/300?random=1" },
{ img: "https://picsum.photos/200/300?random=2" },
{ img: "https://picsum.photos/200/300?random=3" },
{ img: "https://picsum.photos/200/300?random=4" }
]
},
computed: {
activeSlide() {
return this.slides[this.activeSlideIndex]
}
}
})
So I have a chat UI that is a box where messages go, and at the bottom of the box of messages is a text input element. It works fine at the beginning, but once enough messages appear then the text input element scrolls up, along with the messages, and will not stay positioned at the bottom. How can I do this? Any useful thoughts would be appreciated.
<html>
<body>
<div id="chatui">
<div id="chatmsgs"></div>
<input type="text" id="chatbox">
</div>
</body>
</html>
Here is my CSS:
#chatui {
z-index:3;
position:absolute;
bottom:5px;
width: 380px;
height: 150px;
border: 3px solid #8AC007;
margin-left:5px;
overflow:auto;
}
#chatbox {bottom:3px;position:absolute;width:378px;}
#chatmsgs {position:absolute;}
Here is my Javascript:
This just says when you press "Enter" on your keyboard to display the text you typed into the "chatmsgs" div.
$(window).keydown(function(e){
if (e.keyCode == 13) {
if (document.activeElement.id == 'chatbox') {
var msg = document.getElementById('chatbox').value;
document.getElementById('chatbox').value = '';
var ms = '<p>'+msg+'</p>';
$('#chatmsgs').append(ms);
}
}
});
Check out this fiddle to see what I am talking about:
https://jsfiddle.net/ev3uymw6/
You have to add overflow:auto and appropriate height to the chatmsgs div, so that it doesn't grow beyond the size of chatui and make it scroll alltogether.
$(window).keydown(function(e) {
if (e.keyCode == 13) {
if (document.activeElement.id == 'chatbox') {
var msg = document.getElementById('chatbox').value;
document.getElementById('chatbox').value = '';
var ms = '<p>' + msg + '</p>';
$('#chatmsgs').append(ms);
}
}
});
#chatui {
z-index: 3;
position: absolute;
bottom: 5px;
width: 380px;
height: 150px;
border: 3px solid #8AC007;
margin-left: 5px;
}
#chatbox {
bottom: 3px;
position: absolute;
width: 378px;
}
#chatmsgs {
position: absolute;
height: 130px;
overflow: auto;
width: 378px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="chatui">
<div id="chatmsgs">
</div>
<input type="text" id="chatbox">
</div>
</body>
I'd like to add a box containing smileys icons above the comment area which opens using jQuery on click. What I come up with is this:
<div class="emo">
<i href="#" id="showhide_emobox"> </i>
<div id="emobox">
<input class="emoticon" id="icon-smile" type="button" value=":)" />
<input class="emoticon" id="icon-sad" type="button" value=":(" />
<input class="emoticon" id="icon-widesmile" type="button" value=":D" /> <br>
</div>
</div>
css:
.emoticon-smile{
background: url('../smileys/smile.png');
}
#icon-smile {
border: none;
background: url('../images/smile.gif') no-repeat;
}
jQuery:
// =======show hide emoticon div============
$('#showhide_emobox').click(function(){
$('#emobox').toggle();
$(this).toggleClass('active');
});
// ============add emoticons============
$('.emoticon').click(function() {
var textarea_val = jQuery.trim($('.user-comment').val());
var emotion_val = $(this).attr('value');
if (textarea_val =='') {
var sp = '';
} else {
var sp = ' ';
}
$('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);
});
However I have difficulty placing buttons in a nice array and make background image for them (the button values appear before image and the array is not perfectly rectangular. So I'm wondering maybe this is not the best way to render this box.
Any ideas to do this properly?
First show images, on hover hide image and show text. No need for input elements to get text of Dom Node
Something like this:
$(document).ready(function() {
$(".wrapper").click(function() {
var value = $(this).find(".smily-text").text();
console.log(value);
alert("Smily text is '" + value + "'");
});
});
.smily {
background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center;
width: 45px;
height: 45px;
}
.smily-text {
display: none;
font-size: 20px;
text-align: center;
line-height: 45px;
height: 45px;
width: 45px;
}
.wrapper {
border: 1px solid red;
float: left;
cursor: pointer;
}
.wrapper:hover .smily {
display: none;
}
.wrapper:hover .smily-text {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:)</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:(</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:]</div>
</div>
<div class="wrapper">
<div class="smily"></div>
<div class="smily-text">:[</div>
</div>