IF function in jQuery function - javascript

I have been trying to run an overflow check if I hover on a div. But I use jQuery for the hover function and in the next function there's just simple Javascript. It's not working because I assume one can't use the if then function inside a jQuery function... but then I need the action that if I hover over the div the if then function should be executed. Can someone help me please? =)
So it's jQuery (hover) -> JS (check overflow) -> jQuery (add to div (here: "...read more..."))
HTML:
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
CSS:
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
JS:
$('.hover_cap').hover(
if (function checkOverflow(hcd) {
var curOverflow = hcd.style.overflow;
if (!curOverflow || curOverflow === "hidden") hcd.style.overflow = "visible";
var isOverflowing = hcd.clientWidth < hcd.scrollWidth || hcd.clientHeight < hcd.scrollHeight;
hcd.style.overflow = curOverflow;
return isOverflowing;
}) {
function() {
$(this).append($('<a>...read more...</a>'));
},
function() {
$(this).find("a:last").remove();
}
}
}

Here is a snippet for you:
When you hover the outer div, if the inner div's text is overflowed append a 'readmore' button to the outer div.
When you unhover the outer div, if there is an appended 'readmore' button remove it.
function isOverflowed(element){
return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
$(document).ready(function(){
$('.hover_cap').hover(function(){
var $this = $(this);
var $textContainer = $this.find('.hcd');
$textContainer.css('overflow','auto');
var isOverflowing = isOverflowed($textContainer[0]);
$textContainer.css('overflow','hidden');
if(isOverflowing) {
$this.append($('<a>...read more...</a>'));
}
}, function(){
var $this = $(this);
var lastA = $this.find("a:last");
if(lastA) {
lastA.remove();
}
})
})
.hover_cap {
width:150px;
max-height: 17.5ex;
border: 1px solid red;
}
.hcd {
line-height:2.5ex;
max-height:12.5ex;
margin: 10px;
border: 1px solid green;
overflow: hidden;
}
.readmore {
padding: 0px 10px 10px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover_cap">
<div class="hcd">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
<br/>
<br/>
<div class="hover_cap">
<div class="hcd">
Short text, no overflow
</div>
</div>

Related

How to set a variable for the parent's css class using the parent's variable for its id?

So what I want to do first is to set a variable for the parent using the id of it. Then I want to use this variable to find the css class of the parent and set a new variable again. It's important use the variable for the parent's id because later I want to change HTML style of this class with the specific id. My JS works fine without "var parent = parentid.find('.parent');"... I don't know what's wrong.
var parentid = document.getElementById('1');
var parent = parentid.find('.parent');
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
jQuery's .find() doesn't include the selector itself into it's search, you have to use .closest() (begins with the current element) instead:
var parentid = $('#1');
var parent = parentid.closest('.parent');
$(parent).css('background-color', 'gold');
.parent {
width: 150px;
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="1">
The CSS 'background-color' property is PINK.
</div>
In your example, as long as the element only has a single class, you can just reference className
var parentid = document.getElementById('1');
var parent = document.getElementsByClassName(parentid.className)[0];
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>

Why doesn't Javascript add height with the ex unit?

I wanted JavaScript to add height to the current height in css and it works with the px unit but doesn't with the ex unit. Anybody who knows a solution to this?
HTML:
<div class="parent">
<div class="child">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>
CSS:
.parent {
width:150px;
height:100px;
float:left;
background:red;
}
.child {
line-height:2.5ex;
max-height:5ex;
margin:2.5ex;
background: green;
overflow: hidden;
}
JavaScript:
$(document).ready(function(){
var child = $(".child");
var height = parseInt(child.css("max-height").split("ex")[0]);
height = height + 10 ;
child.css({"max-height": height});
});
You should do it like this: child.css({"max-height": height + 'ex'});
You'll have to add ex when you set the CSS property. From the jQuery docs:
If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.
$(document).ready(function(){
var child = $(".child");
var height = parseInt(child.css("max-height").split("ex")[0]);
height = height + 10 ;
child.css({"max-height": height + "ex"});
});
.parent {
width:150px;
height:100px;
float:left;
background:red;
}
.child {
line-height:2.5ex;
max-height:5ex;
margin:2.5ex;
background: green;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
</div>

Random <divs> onclick

I'm trying to make a simple game where
you start with 9 circles
when you click on a circle with a thicker border it's going to increment a score and cause new circles to be drawn randomly.
I've already worked on counting stuff but I have a problem, because wherever you click (I mean whatever div) it sums up points. I don't have an idea about how to deactivate div's which do not have a thicker border.
Please tell if this is a good programming approach.
HTML
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h1> Wyniki </h1>
<p> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. </p>
</div>
<div class="col-md-8">
<h1> Gra </h1>
<div class="wynik">
<h2> Rezultat </h2>
<p id="zliczenie"> </p>
</div>
<div class="points"> </div>
</div>
<div class="col-md-2">
<h1> Profil </h1>
<p> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. </p>
</div>
</div>
</div>
</body>
CSS
body {
background-color: #ecf0f1;
margin : 2% 2%;
}
.wynik{
border : solid 1px blue;
}
.point {
width : 100px;
height : 100px;
border : solid 1px #000;
border-radius : 100%;
text-align : center;
cursor : pointer;
float : left;
margin : 20px;
}
.point:hover {
color : red;
border-radius : 0%;
}
.points{
width : calc(140px * 3);
margin : 5px auto;
}
JS
window.onload = start;
function start()
{
var div_value = "";
for (i = 0; i < 9; i++)
{
var element = "div_number" + i;
div_value = div_value + '<div class="point" id="'+element+'" onclick="c('+i+')"> Klik </div>';
if((i+1)%3 == 0)
{
div_value = div_value + '<div style="clear:both;"> </div>';
}
}
document.getElementsByClassName("points")[0].innerHTML = div_value;
esthetic();
random_show();
}
// IT SHOWS 1 RANDOM DIV TO START THE GAME
function random_show() {
var a = Math.floor((Math.random() * 8));
var x = document.getElementById("div_number" + a).style.border="10px dotted";
}
var liczby = [];
// IT DROWN LOTS AND COUNT THE SCORE
function c(i)
{
var a = Math.floor((Math.random() * 8));
this.i = a;
var z = document.getElementById("div_number" + i);
var y = document.getElementById("div_number" + a);
if(y.style.border = "10px dotted") {
z.style.border ="5px dotted";
liczby.push(i);
} else {
y.style.border="8px solid";
}
var x = document.getElementById("zliczenie").innerHTML = liczby.length;
}
// IT GIVES EVERY DIV INITIAL style.border
function esthetic()
{
var x = document.getElementsByClassName("point");
for (i = 0; i < 9; i++)
{
x[i].style.border = "5px dotted";
}
}
Thanks a lot for any hints one more time!
You can store the current bordered div number in a variable, and each time the click function is called, you can check if the same div number triggered this function call.
Here is your modified code that does this:
window.onload = start;
function start() {
var div_value = "";
for (i = 0; i < 9; i++) {
var element = "div_number" + i;
div_value = div_value + '<div class="point" id="' + element + '" onclick="c(' + i + ')"> Klik </div>';
if ((i + 1) % 3 == 0) {
div_value = div_value + '<div style="clear:both;"> </div>';
}
}
document.getElementsByClassName("points")[0].innerHTML = div_value;
esthetic();
random_show();
}
currDiv = 0;
// IT SHOWS 1 RANDOM DIV TO START THE GAME
function random_show() {
var a = Math.floor((Math.random() * 8));
currDiv = a; // assign current bordered div
var x = document.getElementById("div_number" + a).style.border = "10px dotted";
}
var liczby = [];
// IT DROWN LOTS AND COUNT THE SCORE
function c(i) {
if (parseInt(i) == currDiv) { // check if the current div clicked is the bordered div
var a = Math.floor((Math.random() * 8));
this.i = a;
var z = document.getElementById("div_number" + i);
var y = document.getElementById("div_number" + a);
currDiv = a; // change it to the current bordered div
if (y.style.border = "10px dotted") {
z.style.border = "5px dotted";
liczby.push(i);
} else {
y.style.border = "8px solid";
}
var x = document.getElementById("zliczenie").innerHTML = liczby.length;
}
}
// IT GIVES EVERY DIV INITIAL style.border
function esthetic() {
var x = document.getElementsByClassName("point");
for (i = 0; i < 9; i++) {
x[i].style.border = "5px dotted";
}
}
body {
background-color: #ecf0f1;
margin: 2% 2%;
}
.wynik {
border: solid 1px blue;
}
.point {
width: 100px;
height: 100px;
border: solid 1px #000;
border-radius: 100%;
text-align: center;
cursor: pointer;
float: left;
margin: 20px;
}
.point:hover {
color: red;
border-radius: 0%;
}
.points {
width: calc(140px * 3);
margin: 5px auto;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h1> Wyniki </h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-md-8">
<h1> Gra </h1>
<div class="wynik">
<h2> Rezultat </h2>
<p id="zliczenie"></p>
</div>
<div class="points"></div>
</div>
<div class="col-md-2">
<h1> Profil </h1>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
Hope it helps!
It is always good practice to keep the styling in .css file and html tags in .html file and the code in .js file.
Also for checking if a particular style is there on an element, you should just check if the element has a particular class in its classlist. Refer: https://developer.mozilla.org/en/docs/Web/API/Element/classList
Create new classes in your .css as:
.boldCircle {
border: 10px dotted;
}
And in your code just do:
if(y.classlist.contains("boldCircle")) {
// Do what you want
}
Another thing that I would like to point out is the equality in if condition. You should use '==' instead of '='. '=' is assignment operator and evaluates to true always.
if (y.style.border == "10px dotted") {
// Do what you want
}
Building on #DeepakKumar recommendation, I would also think about using a class to flag an element as the active target. Your click event handler can then check for it and increment points/manage your array as needed.
I also simplified the code a bit to better format it for this sandbox.
// =====================
// Initialize the game
// =====================
function start() {
var divTemplate = '<div id="%1%" class="point" data-index="%2%" onclick="c(event)"> Klik </div>';
var clearTemplate = '<div style="clear:both;"> </div>';
var elPoints = document.getElementsByClassName("points")[0];
var div_value = "";
for (i = 0; i < 9; i++) {
div_value += divTemplate
.replace("%1%", "div_number" + i)
.replace("%2%", i);
if ((i + 1) % 3 == 0) { div_value += clearTemplate; }
}
elPoints.innerHTML = div_value;
liczby = [];
random_show();
}
// =====================
// =====================
// Set one div as the target
// =====================
function random_show() {
var a = Math.floor((Math.random() * 8));
var elCurrentTarget = document.querySelector(".point.target");
var elNewTarget = document.getElementById("div_number" + a);
if (elCurrentTarget) { elCurrentTarget.classList.remove("target"); }
elNewTarget.classList.add("target");
}
// =====================
// =====================
// If the target div was clicked increment the score
// reset the board.
// =====================
function c(event) {
var elTarget = event.target;
var elScore = document.getElementById("zliczenie");
if (elTarget.classList.contains("target")) {
liczby.push(elTarget.getAttribute("data-index"));
elScore.innerHTML = liczby.length;
}
random_show();
}
// =====================
var liczby = [];
window.onload = start;
.wynik {
border: solid 1px blue;
}
.points {
width: calc(140px * 3);
margin: 5px auto;
}
.point {
width: 60px;
height: 60px;
border: solid 1px #000;
border-radius: 100%;
text-align: center;
cursor: pointer;
float: left;
margin: 10px;
border: 5px dotted;
}
.point.target {
border: 10px dotted;
}
.point:hover {
color: red;
border-radius: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin="anonymous" />
<div class="container-fluid">
<div class="row">
<div class="wynik">
<span>Rezultat: </span><span id="zliczenie"></span>
</div>
<div class="points"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script>
The following code means "score + 1 if you clicked the thick circle, score - 1 otherwise" :
score += i == winning ? +1 : -1;
See conditional operator for details.
A post about randomness : https://stackoverflow.com/a/32395535/1636522.
var boardEl = document.getElementById("board"),
scoreEl = document.getElementById("score"),
indexOf = Array.prototype.indexOf,
winning = 0,
score = 0;
scoreEl.textContent = "( " + score + " )";
boardEl.innerHTML = new Array(10).join("");
boardEl.childNodes[winning].setAttribute("class", "winning");
boardEl.onclick = function (ev) {
var i, rdm, winningEl;
ev.preventDefault();
if (ev.target.parentNode == boardEl) {
i = indexOf.call(boardEl.childNodes, ev.target);
score += i == winning ? +1 : -1;
winningEl = boardEl.childNodes[winning];
winningEl.setAttribute("class", "");
rdm = Math.floor(Math.random() * 8);
winning = rdm >= winning ? rdm + 1 : rdm;
winningEl = boardEl.childNodes[winning];
winningEl.setAttribute("class", "winning");
scoreEl.textContent = "( " + score + " )";
}
};
#board, #score {
display: inline-block;
vertical-align: middle;
}
#board {
width: 150px;
}
#score {
font: bold 32px Arial;
color: #666;
}
#board a {
vertical-align: top;
display: inline-block;
border: 5px dashed #666;
border-radius: 50%;
height: 30px;
width: 30px;
margin: 5px;
}
#board a.winning {
border-width: 10px;
height: 20px;
width: 20px;
}
#board a:hover {
border-color: black;
}
<div id="board"></div>
<div id="score"></div>

Fadein/Fadeout a text inside a div

I would like to know how could I make my div that contains text fade in from bottom to top when scrolling down the page? i will be grateful for your help. Here is my Code:
var $text = $('.textBlock');
$(window).on('scroll', function(event, element) {
$text.each(function(event, element) {
if ($(this).visible()) {
$(this).children('p').stop().fadeIn();
} else {
$(this).siblings('.textBlock p').stop().fadeOut();
}
});
});
.textBlock {
text-align: center;
width: 100%;
height: 118px;
float: left;
display: block;
}
.textBlock p {
font-size: 24px;
padding: 30px 0;
line-height: 25px;
letter-spacing: 0.1em;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
You need to use a timer function for this. Check this out:
$(function () {
$(".textBlock").hide();
$("#blockOne").show();
$(window).scroll(function () {
numTextBlocks = $(".textBlock").length;
$(".textBlock:visible").fadeOut(400, function () {
console.log(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")");
$(".textBlock:nth-child(" + ($(window).scrollTop() * 10) % numTextBlocks + ")").fadeIn(400);
});
});
});
html, body {
height: 150%;
}
.textBlock {
position: fixed;
text-align: center;
width: 100%;
height: 118px;
}
.textBlock p {
font-size: 24px;
padding: 30px 0;
line-height: 25px;
letter-spacing: 0.1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="blockOne" class="textBlock">
<p>One Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockTwo" class="textBlock">
<p>Two Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
<div id="blockThree" class="textBlock">
<p>Three Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
This is what I used:
$(document).on("mousewheel", function () {
$(".textBlock:not(:visible)").first().fadeIn("slow")
});
Here is the JSFiddle demo
Let me know if this code works with you.
Fiddle
$(window).on("load",function() {
function fade() {
$('.fade').each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
var windowBottom = $(window).scrollTop() + $(window).innerHeight();
/* If the object is completely visible in the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
}
});
}
fade(); //Fade in completely visible elements during page-load
$(window).scroll(function() {fade();}); //Fade in elements during scroll
});

showing a div content after scrolling down

hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.
If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/

Categories

Resources