New on StackOverFlow - Just have a simple question.
Could you please let me know why it is not changing the color of Div element when the condition is true for the If Statement. .MeTest's display property is Block - Also, no error messages are in the Console.
Here is my test code :
var x = document.getElementsByClassName("MeTest");
if (x[0].style.display == 'block')
{
document.getElementsByClassName("haveIt")[1].style.backgroundColor = "red";
}
#MeTest {
position: fixed;
height: 200px;
width: 200px;
background-color: #fdacc3;
}
div {
background: #4dd329;
border: 1px solid white;
height: 200px;
width: 200px;
display: block;
}
.MeTest {
display: block;
}
<div class="MeTest"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 400px;"></div>
Thanks!
You have only one element with the class name haveIt. So you should make the following change:
document.getElementsByClassName("haveIt")[0]
Furthermore, in orde the condition you check to be true, you should define a style with display block for the div with class MeTest.
var x = document.getElementsByClassName("MeTest");
if (x[0].style.display == 'block')
{
document.getElementsByClassName("haveIt")[0].style.backgroundColor = "red";
}
#MeTest{
position: fixed;
height: 200px;
width: 200px;
background-color: #fdacc3;
}
div{
background: #4dd329;
border: 1px solid white;
height: 200px; width: 200px;
display: block;
}
.MeTest{
display: block;
}
<div class="MeTest" style="display: block;"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 200px;"></div>
PS: I changed the value of top from 400px to 200px, in order to be seen when you run the snippet.
Update
I see that in my first question about statements, you changed to
display to Block in the HTML DOM - When I call that element in the Css
stylesheet and change the Display to Block, it doesn't work that way.
Any thoughts why it is happening?
It doesn't work since the display property of the element is imposed by the style sheet, it's not a value included in the style attribute of the html element. That you can do in this case, it to make use of getComputedStyle method like in the below snippet.
var x = document.getElementsByClassName("MeTest");
var display = window.getComputedStyle(x[0],null)
.getPropertyValue("display");
if (display == 'block'){
document.getElementsByClassName("haveIt")[0].style.backgroundColor = "red";
}
#MeTest{
position: fixed;
height: 200px;
width: 200px;
background-color: #fdacc3;
}
div{
background: #4dd329;
border: 1px solid white;
height: 200px; width: 200px;
display: block;
}
.MeTest{
display: block;
}
<div class="MeTest"></div>
<div class="testThis" style="float: right;"></div>
<div class="haveIt" style="position: fixed; top: 200px;"></div>
For info regarding the Window.getComputedStyle please have a look [here].1
var x = document.getElementsByClassName("MeTest")[0];
if (getComputedStyle(x).getPropertyValue("display")== 'block')
{
document.getElementsByClassName("haveIt")[1].style.backgroundColor = "red";
}
Related
In my div is the overlay of another absolutely positioned div. However the text is still going beyond the div.
var mainDiv = ".myclass";
var mainDivP = ".myclass p";
$(window).on("load",function(){ multiLine_ellipsis(mainDiv, mainDivP); });
function multiLine_ellipsis(mainDiv, mainDivP) {
$(mainDivP).each(function(index) {
var divh = $(mainDiv).height();
if ($(this).outerHeight() > divh) {
var returnText = $(this).text().replace(/\W*\s(\S)*$/, '...');
console.log(returnText);
$(this).text(returnText);
}
});
}
.myclass {
color: #FFFFFF;
font-family: "my-font";
font-size: 28px;
padding: 15px;
height: 100px;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
.myOverlay {
background-image: url("https://dksa1a9fhenpv.cloudfront.net/website/images/overlay.png");
position: absolute;
width: 100%;
z-index: 1;
bottom: 0;
height: 100%;
}
.outerDiv{
width:231px;
height:173px;
position:relative;
}
p{margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerDiv">
<div class="myOverlay">
<div class="myclass">
<p>jadu's best Accommodation/ abcd hddndehd lfjhgs</p>
</div>
</div>
</div>
I should get ... at the end of the statement but i am not getting it.
Your CSS hides the rest, just change font-size to 30px you will see some part of the hidden part.
When clicking the 'test' div, it opens up the div price-list-test in a popup way like this:
However, I am stuck on trying to get the div to pop up on the 'right' alignment of the element rather than left, like this:
How can I achieve this?
$(document).ready(function() {
$(".test").each(function() {
$(this).click(function() {
var leftpos = $(this).offset() - window.screen.width;
$(this).children().css("left", leftpos.left);
$(this).children().css("display", "block");
});
})
});
.price-list-test {
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
.test {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
Open
<div class="price-list-test">
Test
</div>
</div>
Make 'test' class position relative, after that set 'price-list-test' left : 0%
.test {
postion: relative;
}
.price-list-test {
left: 0 %;
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
I have the following code for an image slider. It is a bit complicated because i want to use the slider code for multiple slider elements on the page. See below the code for one slider:
The problem i am having is described at the bottom.
$(document).ready(function(){
$('.vertical_img').first().addClass('display currentvertical_img').removeClass('invisable');
$('.horizontal_img').first().addClass('display currenthorizontal_img').removeClass('invisable');
$('.diagonal_img').first().addClass('display currentdiagonal_img').removeClass('invisable');
// image slider interaction with user
$('.right').click(function(){
next($(this).data('id'));
});
$('.left').click(function(){
previous($(this).data('id'));
});
});
function next(img_class){
var count;
$('.current'+img_class).animate({left: 0}, 500, function(){
console.log("animated?");
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class);
if($('.previous'+img_class).is(':last-child')) {
count = $('.'+img_class).first().data('num');
$('.'+img_class).first().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).next().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).next().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
});
}
function previous(img_class){
var count;
$('.current'+img_class).removeClass('display current'+img_class).addClass('invisable previous'+img_class).animate({right: 0});
if ( $('.previous'+img_class).is(':first-child')) {
count = $('.'+img_class).last().data('num');
$('.'+img_class).last().removeClass('invisable').addClass('display current'+img_class);
}
else{
$('.previous'+img_class).prev().addClass('display current'+img_class).removeClass('invisable');
count = $('.previous'+img_class).prev().data('num');
}
$('.'+img_class+'_slider').text(count+'/4');
$('.previous'+img_class).removeClass('previous'+img_class);
}
.main_image_slide_container{
position: fixed;
left: 50px;
right:50px;
width: 500px;
height: 500px;
}
.image_slide_container_all_text_wrapper{
width: 100%;
height: auto;
overflow: overlay;
}
.image_slider_title{
float: left;
}
.image_slider_counter{
float: right;
}
.main_image_slide_container .image_slider_counter{
display: none;
}
.image_slide_container_all_text_wrapper .image_slider_counter{
display: block;
}
.slider_images_wrapper_window{
width: 100%;
height: auto;
position: relative;
}
.image_slider_controls{
position: absolute;
z-index: 10;
width: 50%;
height: 100%;
}
.left{
left: 0;
cursor: default;
}
.left:hover{
cursor: url(../../data/cursor_left.png) 40 30, move;
}
.right{
right: 0;
cursor: default;
}
.right:hover{
cursor: url(../../data/cursor_right.png) 40 30, move;
}
.slider_images_container{
width: 100%;
height: auto;
}
.slider_images_container img{
position: relative;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main_image_slide_container">
<div class="image_slide_container_all_text_wrapper">
<div class="image_slider_title big_text font">Gravient Vertical</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div>
</div>
<div class="slider_images_wrapper_window">
<div class="image_slider_controls left" data-id="vertical_img"></div>
<div class="image_slider_controls right" data-id="vertical_img"></div>
<div class="slider_images_container">
<img class="vertical_img invisable" data-num="1" src="https://www.geeky-gadgets.com/wp-content/uploads/2010/06/google-mac-linux1.jpg">
<img class="vertical_img invisable" data-num="2" src="https://images.techhive.com/images/idge/imported/article/ctw/2012/10/19/samsung_chromebook_338-100391696-orig.jpg">
</div>
</div>
<div class="image_slider_counter big_text font vertical_img_slider">1/4</div> <!--mobile counter -->
</div>
So my current problem is that the images are not animating to the left. And i dont know why.. I am pretty sure my animate syntax is correct. I copy pasted it from the jquery website.
All suggestions and tips are welcome.
If something is not clear please let me know so i can clarify it!
You have missed the invisable css. Here is the working Example.
jsfiddle
I have a inputfield and I need to give two trigger. One is dropdown arrow and Another is cancel ("X") image. Here I am creating my inputfield.
My JS
var input = document.createElement("input");
input.className = 'styled-select';
input.style = 'width:30%' ;
input.id = "SearchInput";
input.type = "text";
input.title = "Madd";
input.onclick = TableExpand; // This happening when I clicking on Inputfield
My CSS for Inputfield
* {
box-sizing: border-box;
}
.styled-select {
width: 100px;
height: 20px;
border: 1px solid #95B8E7;
background-color: #fff;
vertical-align: middle;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(combo_arrow.png) no-repeat right white;
position:relative;
border-radius: 5px 5px 5px 5px;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
I need two trigger as I mentioned Arrow and Cross. I am able to give arrow by using background image but don't know how to give Cross image.
Also How I will use this as a trigger. I mean When I click on Cross and Dropdown one it leads me to the one function where I can write my code.
You can put the triggers as absolutely positioned elements on the input field. This way, you can add separate click events on these triggers to be able to perform whatever you want when they are clicked.
Here is an example of what you are trying to achieve:
HTML:
<div id="container">
<input type="text" id="textfield" />
<div id="triggers">
<img class="trigger" src="https://cdn3.iconfinder.com/data/icons/musthave/128/Stock%20Index%20Up.png" id="arrow" />
<img class="trigger" src="https://cdn3.iconfinder.com/data/icons/musthave/128/Remove.png" id="cross" />
</div>
</div>
CSS:
#container {
position: relative;
width: 600px;
}
#textfield {
height:30px;
width: 100%;
}
.trigger{
width: 20px;
}
#triggers {
position: absolute;
right: 0px;
top: 5px;
}
JS:
$(document).ready(function() {
$("#arrow").click(function() {
$("#textfield").val("Arrow was clicked.");
})
$("#cross").click(function() {
$("#textfield").val("Cross was clicked.");
})
})
Here is a working version:
https://jsfiddle.net/1j760ztn/
Your cross and dropdown should be separate buttons. And the javascript you need to listen for them goes like this.
<input type="text" id="theText"><button id="cross"><button id="dropdown">
<script> var cross = document.getElementById('cross'); cross.addEventListener("click", function(){ document.getElementById('theText').innerHTML = 'clicked X' }); </script>
I'm trying to make a chat HTML template. But I'm having some problems to make scrolleable the messages area.
My structure is like this:
Chat header: to the top with the title of the chat or name person.
Chat input message: to the bottom you can write.
Chat visible area: total height - (chat header height + chat input message height).
Messages: Must increment it height but always be at the bottom of the chat visible area, to read the last message.
All this structure lives with other html elements, is not fullscreen.
My HTML structure is like this:
<div id="chat-1" class="chat-ventana">
<div class="chat-header">
<h4>Header</h4>
</div>
<div class="chat-mensajes-contenedor">
<div class="chat-mensajes-contenedor-general">
<div class="mensaje-contenedor">
<!-- messages content -->
</div>
</div>
</div>
<div class="chat-textarea">
<textarea class="form-control" placeholder="Type your message"></textarea>
</div>
</div>
And my CSS looks is this:
.chat-container {
height: 70vh;
min-height: 400px;
}
.chat-ventana {
position: relative;
display: inline-block;
width: 65%;
float: left;
}
.chat-ventana, .chat-mensajes-contenedor {
height: 100%;
}
.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
padding: 15px 15px 20px 15px;
}
.chat-header {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.chat-mensajes-contenedor {
position: relative;
overflow-x: hidden;
overflow-y: scroll;
height: 400px;
}
.chat-mensajes-contenedor-general {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.chat-ventana, .chat-mensajes-contenedor {
height: 100%;
}
.chat-mensajes-contenedor {
height: calc(100% - 46px);
}
.chat-mensajes-contenedor, .chat-mensajes-contenedor-general {
padding: 66px 20px 25px 20px;
}
.chat-textarea {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.chat-textarea .form-control {
resize: none;
height: 46px;
padding: 10px 20px;
}
I see if I set .chat-mensajes-contenedor-general to position: relative; it becomes scrolleable but I can't position it to the bottom.
I think I get what you're after.
And it's probably obvious but since you didn't say we can't use javascript you can of course employ a little of it (using jQuery in the case below) to achieve the same end result:
[JSFIDDLE]
function returnScrollHeight() {
return this.scrollHeight;
}
$('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);
$('textarea.form-control').on('keyup', function (e) {
if (e.ctrlKey && e.keyCode === 13) {
$('.mensaje-contenedor').append('<div class="line">' + this.value + '</div>');
$('.chat-mensajes-contenedor').scrollTop(returnScrollHeight);
this.value = '';
}
});
I couldn't come up with a non-js solution in the brief time I tried. Hopefully someone else will come along and give the pure html/css answer.
Here is a fiddle: https://jsfiddle.net/gLahjk5z/3/
I changed the position styles to position: relative and altered some of your height elements.
I then added this Jquery function to run on document ready:
$(document).ready(function() {
var bottom = $(".mensaje-contenedor").height();
$(".chat-mensajes-contenedor").scrollTop(bottom);
})
To make messages always appear at the bottom use this CSS:
.chat-mensajes-contenedor-general {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mensaje-contenedor {
align-self: flex-end;
}