I'm trying to check to see if an overflow exists in a div element, but I cannot get it to work. Below is my JavaScript and a link to a jsfiddle with the whole thing. Any help would be appreciated!
var el = $('.container_element');
if(el.scrollWidth < el.offsetWidth){
// your element have overflow
$("nav#sub").css("background-color","red")
}
else if (el.scrollWidth > el.offsetWidth)
{ $("nav#sub").css("background-color","grey")
//your element don't have overflow
}
.box
{
height:55px;
width:280px;
padding:13px;
line-height: 57px;
color:#fff;
display:inline;
text-decoration:none;
text-align:center;
white-space:no-wrap;
border-right:1px solid white
}
.box:hover {
background:#007FEB;
}
.container_element
{
white-space:nowrap;
margin-left: 10px;
overflow:hidden;
display:block;
}
.inner_container
{
width:100%;
}
#lefty,#righty {
width: 35px;
display: none;
height: 57px;
text-align: center;
color: #fff;
line-height: 57px;
cursor: pointer;
font-size: 24px;
}
#lefty {
float:left;
}
#righty {
float:right;
}
nav#sub {
background:#4C75C6
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="sub" class="clearfix">
<div id="lefty"><</div>
<div class="container_element">
<div class="inner_container">
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>
<div class="box">Four</div>
<div class="box">Fiveddddddfivefive</div>
<div class="box">Six really lreerere</div>
<div class="box">Seven really really long</div>
</div>
</div>
<div id="righty">></div>
</nav>
jfiddle example
First, You declare a JQuery object and you are using it like a regular javascript object.
If you want to use regular javascript in your IF statements you need to declare your el object like this :
var el = document.getElementsByClassName("container_element")[0];
and your IF statements like this :
if(el.offsetWidth < el.scrollWidth){
// your element have overflow
$("nav#sub").css("background-color","red");
}
else {
//your element don't have overflow
$("nav#sub").css("background-color","grey");
}
But if you want to use a JQuery object, you need to declare your el object like this :
var el = $('.container_element');
and your IF statements like this :
if($(el).prop("offsetWidth") < $(el).prop("scrollWidth")){
// your element have overflow
$("nav#sub").css("background-color","red");
}
else {
//your element don't have overflow
$("nav#sub").css("background-color","grey");
}
Also in your IF statements, you have to test if offsetWidth < scrollWidth not scrollWidth < offsetWidth to know if your element have overflow.
You're trying to access native DOM API methods through the jQuery API.
The jQuery API is an unnecessary abstraction of the DOM API, if you can use the DOM API then there's no need for jQuery. See: http://youmightnotneedjquery.com
Element.clientHeight and Element.clientWidth are much more reliable than Element.offsetHeight and Element.offsetWidth.
Here's a simple example using just the DOM API, no sugar necessary.
var wrps = document.querySelectorAll('.wrp');
for(var i in Object.keys(wrps)) (function(wrp, inr, ovr){
if(wrp.scrollWidth > wrp.clientWidth) ovr.push('x');
if(wrp.scrollHeight > wrp.clientHeight) ovr.push('y');
inr.textContent = ovr.join(' and ') +
['no overflow',' overflows',' overflow'][ovr.length];
})(wrps[i], wrps[i].firstElementChild, []);
body { font-size:0; margin:0 }
.wrp { width:25%; height:38px; overflow:auto; display:inline-block; font-size:16px; text-indent:5px }
#inr1 { width:100%; height:100% } #inr2 { width:200%; height:100% }
#inr3 { width:100%; height:200% } #inr4 { width:200%; height:200% }
<div class="wrp"><div id="inr1"></div></div>
<div class="wrp"><div id="inr2"></div></div>
<div class="wrp"><div id="inr3"></div></div>
<div class="wrp"><div id="inr4"></div></div>
Related
I want to show the div if another div class is loaded.
Show nanobar only if selected class is loaded, in other case nanobar will become hidden
css code sample:
.nanobar {
height: 75px;
width: 100%;
background: #fef9c7;
border:1px solid #fce181;
color:#333;
padding:10px;
margin-bottom:10px;
font-size: 1.2rem;
display:none;
}
HTML code sample:
<div class="nanobar">
<span>Content</span>
</div>
<div id="category_container" class="content-padding {if $category} selected{/if}"> </div>
any help in this regards will be appreciated.
The code checks if the second div has a selected class. If so, the first div will be displayed, otherwise the first div stays hidden.
let divElements = document.querySelectorAll('div');
if (divElements[1].classList.contains("selected")) {
divElements[0].classList.replace("hide", "show");
} else {
divElements[0].classList.replace("show", "hide");
}
.nanobar {
height: 75px;
width: 100%;
background: #fef9c7;
border:1px solid #fce181;
color:#333;
padding:10px;
margin-bottom:10px;
font-size: 1.2rem;
}
.hide {
display: none;
}
.show {
display: block;
}
<div class="nanobar hide">
<p>Hello</p>
</div>
<div class="apple jason selected hide">
<p>Jason</p>
</div>
Note: Removed the display property from nanobar class and made it into it's own class. Makes it easier to hide and show an element, as well as being able to reuse it for other elements.
You can read more about classList here
First check if you can find selected class:
var selected = document.getElementsByClassName("selected");
Then check if this variable has more then one element.
if (selected.length < 1) {
// Hide your nanobar
} else {
// Show it
}
This is not the full solution, if you still have troubles, ask in comments.
In javascript I have a variable which contains some value which i get from JSON.
var a =recipe[0].step[1].processingTime;//here processing time is stored in var a
I want to display this value by showing a description box, when I hover my mouse over a small div id in HTML.
<tr>
<td>Recipe 0</td>
<td>
<div id="p1"><div>
</td>
</tr>
How to do that? Can anyone please show me a easy solution.
If you only want the simple native html tooltip you can just set the elements title atrribute. For example the ones that get shown when you hover over the SO voting arrows
document.getElementById("p1").setAttribute("title",recipe[0].step[1].processingTime);
Demo
var text = "13ms";
document.getElementById("p1").setAttribute("title",text);
#p1 {
width:80px;
height:80px;
background:#323232;
}
<div id="p1"></div>
If however you are wanting a fancier one, you can do this with a little javascript and using css :hover, :after, attr css function, and the content property.
Give your div (or whatever element) a css class like below:
.withTooltip:hover:after {
content:attr(data-tooltip);
display:block;
padding:10px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
}
:hover will cause the style to applied only when the element is
hovered over.
:after will create a pseudo-element
conent you can use to set the text that the pseudo-element will display
attr will take the passed attribute name and get the value of that
attribute
Then use javascript to set the attribute to your saved text (in this case using data-tooltip)
document.querySelector("p1").dataset.tooltip = recipe[0].step[1].processingTime;
//or
document.querySelector("p1").setAttribute("data-tooltip",recipe[0].step[1].processingTime);
Demo
var someData = ["13ms","100ms","8ms","67ms"];
var elements = document.querySelectorAll(".withTooltip");
for(var i=0; i<elements.length; i++){
elements[i].dataset.tooltip = someData[i];
}
.box {
width:50px;
height:50px;
background:#86DDFF;
margin:10px;
position:relative;
display:inline-block;
}
.withTooltip:after {
content:attr(data-tooltip);
display:block;
padding:10px;
position:absolute;
right:-40px;
top:0px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
opacity:0;
transition:all 0.3s;
z-index:100;
pointer-events:none;
}
.withTooltip:hover:after {
opacity:1;
}
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
Here's a vanilla javascript version:
var a = "something to show";
function showProcTime(elem) {
elem.addEventListener("mouseout", clearProcTime);
elem.innerHTML = '<div class="popupBox">' + a + '</div>';
elem.style.backgroundColor = "#EFEFEF";
}
function clearProcTime(e) {
var elem = e.target;
elem.removeEventListener("mouseout", clearProcTime);
elem.innerHTML = "";
elem.style.backgroundColor = "#CCCCCC";
}
.popupBox {
display: block;
width: 200px;
height: 20px;
position: absolute;
top: 20px;
left: 20px;
background-color: #EFEFEF;
border: 1px solid;
padding: 10px;
}
<div id="p1" style="background-color:#CCCCCC;display:inline-block;width:200px;height:20px;" onMouseOver='showProcTime(this)'>roll over me
<div>
You could use jQuery:
var a =recipe[0].step[1].processingTime;
$('#p1').mouseenter(function(){
$(this).html(a)
}).mouseout(function(){
$(this).html('');
});
Have you tried jquery hover method? http://www.w3schools.com/jquery/event_hover.asp
and if you are using simple javascript try this: http://www.w3schools.com/jsref/event_onmouseover.asp
I think this is simple:
<html>
<script>
var a = 'the processing time you got from json';
function displayTitle(e){
e.title = a;
}
</script>
<body>
<table border>
<tr>
<td>Recipe 0</td>
<td onMouseOver='displayTitle(this);'>
<div id="p1"><div>
</td>
</table>
</body>
I would like to have some help about the transition of a div in CSS or JavaScript.
I have a <div> with dispay:none;.
With some JS, i change the display option on display:block.
All is working correctly.
But i would like to know how to make a transition when the <div> appear on the screen.
Like the player Spotify when you want to search something.
Thanks for you help.
And really sorry for my BAD english !
You can do it with a JQuery like this:
$(function() {
var open=false;
$('.menubar span').click(function(){
if(open==false){
$('.search').css('left','50px');
open=true;
}
else{
$('.search').css('left','-100px');
open=false;
}
});
});
.menu{
position:fixed;
left:0;
top:0;
width:50px;
height:100%;
background:#222021;
z-index:4;
}
.menubar{
width:50px;
height:100%;
color:white;
font-family:arial;
}
.search{
position:absolute;
left:-100px;
top:0;
width:100px;
background:lightgrey;
height:100%;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s ;
-webkit-transition:.3s;
transition:.3s ;
}
.search input{
margin:0;
width:75px;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
<div class="menubar">
<span>Home</span>
</div>
</div> <div class="search"><input type="search"></div>
Click "Menu" in the menu bar, and the search bar slides out, click again to hide it.
To use JQuery, you have to include the jquery library:
include this in <head>:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Or download it from:http://jquery.com/download/
Then, just use the script like normal JS, in a <script> tag.
EDIT:
With your problem in the comments below, #navbar had a static position, which means z-index will not work for it:
#nav-bar {
background-color: #23232C;
bottom: 0px;
left: 0px;
top: 0px;
width: 220px;
height: 100%;
margin-top: -17px;
z-index: 99;
position: absolute;
}
The following answers uses CSS Style Declarations to accomplish the transition effect.
if you declare the transition: all 1s style on an element. If the style property changes on that element your browser's (user-agent's) graphic device will calculate and update the frames (or visual changes) that occur between the two states (initial state, and end state). However, the property that is being changed must be scalar; that is, both the initial value and new value are scalar (like 0% being set to 100%). Additionally, if you're changing a property that is not scalar, but affects the rendering of other properties.. they will skip the transition effect (aka display:none being set to display:block).
Note: Instead of changing the inline style on the elements using Javascript, we're going to instead change the class of those elements; meaning, the following styles represent visual states, which we'll toggle between..
Again, the transition style declaration (or rather, the graphic device) will handle the incremental rendering of the frames between these two states.
Code Sample of changing 4 style properties (explicitly)
var str = 'hide';
var btn = document.querySelector("button#toggler").addEventListener('click', function(ev)
{
var elms = document.querySelectorAll('div.block');
for (var i = 0, lng = elms.length; i < lng; i++)
{
elms[i].className = elms[i].className.replace("hide", "").replace("show", "").replace(" ", "");
elms[i].className = elms[i].className + ' ' + str;
}
str = (str === 'show') ? str = 'hide' : 'show';
});
.block {
display:block; position:absolute;
top:0;
left:0;right:80%;
bottom:0;
background-color: rgba(0,0,0);
border:0.1em solid black;
min-width:5em;
transition: left 2s, opacity 2s, right 2s, background-color 1s;
}
.wrapper
{
display:block;position:relative;background-color:whitesmoke;
min-height:10em;
width:auto;
}
.show {opacity:1;left:0%;right:80%;background-color:rgb(255,0,0);}
.hide {opacity:0;left:80%;right:0%;background-color:rgb(0,0,255);}
<button id="toggler">Toggle Block</button>
<div class="wrapper">
<div class="block"></div>
</div>
The following is a fairly more complex slider, which ulitmately uses the same principal for rendering the transitions.
$("div.slide > button.show" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slidePrev = slide.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
slidePrev = slidePrev.prev();
slidePrev.toggleClass("hide").toggleClass("show");
})
$("div.slide > button.hide" ).on('click', function (ev)
{
var slide = $(ev.target).closest(".slide");
slide.toggleClass("hide").toggleClass("show");
var slideNext = slide.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slideNext.toggleClass("hide").toggleClass("show");
slideNext = slideNext.next();
slidePrev.toggleClass("hide").toggleClass("show");
})
html, body {display:block;position:relative;margin:0 auto;padding:0;height:100%}
div.wrapper {position:relative;
left:0;right:0;top:0;bottom:0;
width:auto;
background-color:whitesmoke;
display:block;
overflow:hidden; height:100%;
}
button {line-height:2em;padding:0.2em;display:block;}
div.slide {
display:block;
position:absolute;
border:0.2em solid black;
background-color:white;
top:0;
bottom:0;
right:0;
left:0;
opacity:1;
transition: left 1s, opacity 0.5s;
}
div.slide:nth-child(1) {
left: 1em;
z-index: 1;
}
div.slide:nth-child(2) {
left: 3.5em;
z-index: 2;
}
div.slide:nth-child(3) {
left: 6em;
z-index: 3;
}
div.slide:nth-child(4){
left: 8.5em;
z-index: 4;
}
div.slide.hide {
opacity:0.3;
left: 59%;
}
div.slide.show {
opacity:1;
}
div.show > button.show {display:none;}
div.hide > button.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div class="slide show">
<button class="show">show</button>
<button class="hide">hide</button>
</div>
</div>
So I have multiple elements with class name ml, all different widths because of different text contents (not set in CSS).
for example:
<li><a class="depth ml" title="">Login</a></li>
I would like to append a new width to all of them, +=5px of the element's inner width
I've tried doing this, using jQuery:
var elems = document.getElementsByClassName('ml');
for ( var i = 0; i < elems.length; i++ ) {
var num = 5;
var curr_width = elems[i].width();
elems[i].style.width=(curr_width+num)+'px';
}
Nothing happened.
I tried using offsetWidth and clientWidth
var curr_width = parseInt(elems[i].offsetWidth);
but it added almost 40px, which I don't know where those came from. There isn't even padding or margins on those elements.
I just want the element's inner width appended.
Can anyone suggest a solution, or see why the jQuery isn't working?
EDIT:
Here is the markup:
<body>
<div id="master_container">
<div class="container">
<div id="body">
<header>
<div id="homelink"></div>
<div id="links" class="topmenulist">
<ul id="nav" class="title">
<li><a class="depth ml" title="home">Home</a></li>
<li><a class="depth ml" title="BBTV1">BBTV1</a></li>
<li><a class="depth ml" title="BBTV">BBTV</a></li>
<li><a class="depth ml" title="About us" style="">About us</a></li>
</ul>
</div>
</header>
and the relevant CSS:
.depth {
position: relative;
font-size:25px;
text-decoration:none;
letter-spacing:2px;
text-transform:uppercase;
color: rgba(42,41,36,1.00);
}
.depth:before, .depth:after {
content: attr(title);
color: rgba(255,255,255,.1);
font-size:25px;
text-decoration:none;
letter-spacing:2px;
position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after { top: 2px; left: 2px }
/*_______________ NAVIGATOR _________________*/
#links {
position:relative;
left:469px;
top:80px;
width: 489px;
height:53px;
padding:0px;
padding-left:0px;
z-index:9999;
}
.topmenulist #nav {
list-style:none;
padding:0;
padding-top:10px;
}
.topmenulist #nav li {
float:left;
display:block;
position:relative;
text-indent:0px;
margin-left:0px;
}
.topmenulist #nav li a {
margin:0px;
padding:0px;
display:block;
font-size:25px;
text-decoration:none;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(41,17,3,0.60);
text-wrap:suppress;
}
note: .ml has no css
Just to point out, you're using pure JS -which is very brave of you ;) anyway, with jQuery, you could try something like below:
$(window).load(function() {
$(".ml").each(function() { // this is kindof sugary way of doing for loop over array of elements - which is $(".ml")
var $this = $(this); // the current jQueried .ml element
var currentWidth = $this.width(); // get width of current element, width is a jQuery method: https://api.jquery.com/width/
var newWidth = currentWidth + 5; // increment the width
$this.width(newWidth); // pass in the new width as the parameter.
});
});
In your code:
var curr_width = elems[i].width();
resolve to an undefined value, because DOM object doesn't have width property (only jQuery object have this one).
So the next statement (curr_width+num) is incorrect because you want to add an undefined value with a number.
I want to change a CSS property of a class using JavaScript. What I actually want is when a <div> is hovered, another <div> should become visible.
.left,
.right {
margin: 10px;
float: left;
border: 1px solid red;
height: 60px;
width: 60px
}
.left:hover,
.right:hover {
border: 1px solid blue;
}
.center {
float: left;
height: 60px;
width: 160px
}
.center .left1,
.center .right1 {
margin: 10px;
float: left;
border: 1px solid green;
height: 60px;
width: 58px;
display: none;
}
<div class="left">
Hello
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
<div class="right">
Hello2
</div>
When hello1 div is hovered, bye1 div should be visible and similarly bye2 should appear when hello2 is hovered.
You can use style property for this. For example, if you want to change border -
document.elm.style.border = "3px solid #FF0000";
similarly for color -
document.getElementById("p2").style.color="blue";
Best thing is you define a class and do this -
document.getElementById("p2").className = "classname";
(Cross Browser artifacts must be considered accordingly).
// select element from DOM using *const*
const sample = document.getElementById("myid"); // using CONST
// or you can use *var*
var sample = document.getElementById("myid"); // using VAR
// change css style
sample.style.color = 'red'; // Changes color, adds style property.
// or (not recomended)
sample.style = "color: red"; //Replaces all style properties. NOT RECOMENDED
Use document.getElementsByClassName('className').style = your_style.
var d = document.getElementsByClassName("left1");
d.className = d.className + " otherclass";
Use single quotes for JS strings contained within an html attribute's double quotes
Example
<div class="somelclass"></div>
then document.getElementsByClassName('someclass').style = "NewclassName";
<div class='someclass'></div>
then document.getElementsByClassName("someclass").style = "NewclassName";
This is personal experience.
Consider the following example:
If you want to change a single CSS property(say, color to 'blue'), then the below statement works fine.
document.getElementById("ele_id").style.color="blue";
But, for changing multiple properies the more robust way is using Object.assign() or, object spread operator {...};
See below:
const ele=document.getElementById("ele_id");
const custom_style={
display: "block",
color: "red"
}
//Object.assign():
Object.assign(ele.style,custum_style);
Spread operator works similarly, just the syntax is a little different.
Just for the info, this can be done with CSS only with just minor HTML and CSS changes
HTML:
<div class="left">
Hello
</div>
<div class="right">
Hello2
</div>
<div class="center">
<div class="left1">
Bye
</div>
<div class="right1">
Bye1
</div>
</div>
CSS:
.left, .right{
margin:10px;
float:left;
border:1px solid red;
height:60px;
width:60px
}
.left:hover, .right:hover{
border:1px solid blue;
}
.right{
float :right;
}
.center{
float:left;
height:60px;
width:160px
}
.center .left1, .center .right1{
margin:10px;
float:left;
border:1px solid green;
height:60px;
width:58px;
display:none;
}
.left:hover ~ .center .left1 {
display:block;
}
.right:hover ~ .center .right1 {
display:block;
}
and the DEMO: http://jsfiddle.net/pavloschris/y8LKM/
This is really easy using jQuery.
For instance:
$(".left").mouseover(function(){$(".left1").show()});
$(".left").mouseout(function(){$(".left1").hide()});
I've update your fiddle:
http://jsfiddle.net/TqDe9/2/
You can do so using jQuery like this.
$('.left, .right').on('mouseenter', function(e) {
if ($(this).attr('class') == 'left1') {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
} else if ($(this).attr('class') == 'left1') {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
}
})
or you can use it like this
for first requirement
$('.left').on('mouseenter', function(e) {
$('.left1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})
for second requirement
$('.right').on('mouseenter', function(e) {
$('.right1').css({
/* 'visibility': 'visible', */
'display': 'block',
})
})