How to set up animation to element once it appears? (So that others with same properties remain calm.) I am trying to do like this:
$.each(data, function(i, obj) {
if(obj['Ping'] == "FALSE"){
out = "<li class='red'>"+obj.Vardas+" is down..."+obj.Data+"</li>";
/////animation, once the element gets generated
$(out).prependTo('#database').animate({fontColor:"red", 1000});
out ="";
}else{
out = "<li>"+obj.Vardas+" is up......."+obj.Data+"</li>";
$(out).prependTo('#database');
out ="";
}
});
});
});
</script>
</head>
<body>
<div style="float:right; overflow-y:scroll; height: 400px; width: 50%">
<ul id ='database'></ul>
</div>
jQuery is not able to use color for animation. But for such things you can use jQuery Color plugin ( https://github.com/jquery/jquery-color ).
Here is small working example with opacity blink:
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var t = function(){
for(var i = 0; i < 5; i++){
$("<li>ata" + i + "tata</li>").prependTo($("ul")).animate({opacity: 0.10}, 200).animate({opacity: 1}, 200);
}
}
$(function(){
setInterval(t, 1000);
});
</script>
</head>
<body>
<ul> </ul>
</body>
</html>
Related
here i want to apply some css to those divs are not visible because if its height. So i want to apply some css dynamically which are not showing here(sanjana, giri, santhosh divs)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
If it's inline defined, you can use this:
[style*="overflow:hidden;"],[style*="overflow: hidden;"]
What it does is looking for ANY type of tag,
that has a style attribute set
and that style attribute contains: overflow:hidden; or overflow: hidden;
then applies relevant styles.
var value = 'initial';
var old = 'hidden';
function toggle() {
$('div[style]').css({'overflow':value});
var tmp = value;
value = old;
old = tmp;
}
[style*="overflow:hidden;"],[style*="overflow: hidden;"] {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="toggle()" value="toggle values">
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
Now if you only wish to do something to the NOT visible divs, you need to use javascript, and you can use Bounding boxes to test if something is visible:
Also see How to check if an element is overlapping other elements?
$('[style*="overflow:hidden"],[style*="overflow: hidden;"]').children().each(function(index, element) {
var $el = $(element);
var $parent = $el.parent();
// get the bounding boxes.
var rect1 = $parent.get(0).getBoundingClientRect();
var rect2 = element.getBoundingClientRect();
// check for overlap(if it's visible)
if(!(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)) {
$el.removeClass('hidden');
}
else {
// it's hidden!
console.log('found hidden div '+$el.text());
$el.addClass("hidden");
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
You can check the height from the wrapper via javascript and then add a class to all the elements which are not fully visible inside the wrapper. Added a class wrap to the wrapper to make it more obvious.
var wrap = document.querySelector('.wrap');
var wrapHeight = wrap.offsetHeight; // just in case it's not known and set by CSS
wrap.querySelectorAll('div').forEach(function(element){
var elementBottomPosition = element.offsetTop + element.offsetHeight;
if(elementBottomPosition >= wrapHeight) {
element.classList.add('some-class');
}
});
.wrap {
height:100px;
overflow:hidden;
background:red;
border:2px dashed #000;
}
.some-class {
color: lime;
}
<div class="wrap">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
I've been working on a simple code that would detect how many clicks an item has received and it would put it on the top of the list, the problem is, I can only replace the first item once, if I clicked on it again it's doesn't add up the number of clicks inside of the items. Why is this?
My code: (Ctrl + Shift + I) and inspect the items to see them change
$(function() {
$('.watchMe > .item').attr({
"influence": "0"
});
});
$('.watchMe > .item').mousedown(function() {
$(this).attr({
"influence": parseInt($(this).attr("influence"), 10) + 1
});
});
$(document).on('mouseup', function(e) {
rearrangeEm();
});
function rearrangeEm() {
var tempArray = [];
$('.watchMe > .item').each(function() {
tempArray.push([this, parseInt($(this).attr("influence"), 10)]);
console.log(this);
});
for (var i = 0; i < tempArray.length; i++) {
for (var j = i + 1; j < tempArray.length; j++) {
var temp;
if (tempArray[i][1] < tempArray[j][1]) {
temp = tempArray[i];
tempArray[i] = tempArray[j];
tempArray[j] = temp;
}
}
}
$('.watchMe').empty();
for (i = 0; i < tempArray.length; i++) {
$('.watchMe').append(tempArray[i][0]);
}
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>smartSystem</title>
<style>
.item {
height: 100px;
border: 1px solid #c3c3c3;
}
</style>
</head>
<body>
<div class="watchMe">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</body>
</html>
The issue is because you're removing the original .item elements which have the mousedown event bound to them, so you need to use a delegated event handler. Try this:
$('.watchMe').on('mousedown', '> .item', function() {
$(this).attr({
"influence": parseInt($(this).attr("influence"), 10) + 1
});
});
Note however, that you can both improve and shorten your logic using data() attributes (as opposed to a custom attribute which will make your HTML code invalid) and the sort() method. Try this:
$(function() {
$('.watchMe').on('mousedown', '> .item', function() {
$(this).data('influence', ($(this).data('influence') || 0) + 1);
});
$(document).on('mouseup', function(e) {
rearrangeEm();
});
});
function rearrangeEm() {
$('.watchMe > .item').sort(function(a, b) {
var aInf = $(a).data('influence') || 0, bInf = $(b).data('influence') || 0;
return aInf < bInf ? 1 : aInf > bInf ? -1 : 0;
}).appendTo('.watchMe');
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>smartSystem</title>
<style>
.item {
height: 100px;
border: 1px solid #c3c3c3;
}
</style>
</head>
<body>
<div class="watchMe">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
</div>
</body>
</html>
I am having trouble with this code. I am trying to add an eliminate link at the end but I cant seem to eliminate all of the boxes within the set of 5 that appear when I press the add link. I want to be able to delete all the boxes that are within the set of five and nothing else. What I have tried to do is put this line of code at the end of the var box_html5 but it does not work. This is the function that deletes a box I want it to delete the boxes.
Remove
I have tried to make a loop within the statement but it is not coming out right.
I have also thought about making an if statement where the above piece of code would be inside it and state that if that link is pressed then remove box_html1, box_html2, box_html3... etc. For the set of 5 chosen. I have also tried to echo the code like this:
echo ('Remove');
and it still does not seem to work.
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Movie Night</h1>
<div class="my-form">
<form role="form" method="post">
<p class="text-box">
<label for="box1">Genre<span class="box-number">1</span></label>
<input type="text" name="boxes[]" value="" id="box1" />
<a class="add-box" href="#">Add More</a>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 15 < n ) {
alert('Too many. Not enought Time to watch');
return false;
}
var box_html1 = $('<p class="text-box">Movie<input name="mov1" type="text"></p>');
box_html1.hide();
$('.my-form p.text-box:last').after(box_html1);
box_html1.fadeIn('slow');
var box_html2 = $('<p class="text-box">Movie<input name="mov2" type="text"></p>');
box_html2.hide();
$('.my-form p.text-box:last').after(box_html2);
box_html2.fadeIn('slow');
var box_html3 = $('<p class="text-box">Movie<input name="mov3" type="text"></p>');
box_html3.hide();
$('.my-form p.text-box:last').after(box_html3);
box_html3.fadeIn('slow');
var box_html4 = $('<p class="text-box">Movie<input name="mov4" type="text">Remove</p>');
box_html4.hide();
$('.my-form p.text-box:last').after(box_html4);
box_html4.fadeIn('slow');
var box_html5 = $('<p class="text-box">Movie<input name="mov5" type="text"></p>');
box_html5.hide();
$('.my-form p.text-box:last').after(box_html5);
box_html5.fadeIn('slow');
<!--Remove-->
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
You need to explore index and slice jquery functions.
Remove action handler in this case:
$('.my-form').on('click', '.remove-box', function(event)
{
var index = $(this).parent().index();
$('.text-box').slice( index - 3, index + 2 ).remove();
event.preventDefault();
});
FIDDLE: http://jsfiddle.net/ejcXd/4/
I am attempting to toggle the height of all elements with class name on button click.
Here is what I am currently using. Right now it will work onClick the first time, but wont change back on second click. When I change if statement to something NOT true, the function still fires.
<head>
<script type="text/javascript">
function changeHeight() {
var elems = document.getElementsByClassName('div1');
for(var i = 0; i < elems.length; i++)
{
if (elems[i].style.height = '25px'){
elems[i].style.height = '110px';
}
else {
elems[i].style.height = '25px';
document.getElementById("expand").innerHTML="[+]";
}
</script>
<style type="text/css">
.div1 {
overflow:hidden;
height:25px;
}
</script>
</head>
<body>
<button type="button" id="expand" onClick="changeHeight();">[+]</button>
<div class="div1">
content
</div>
<div class="div1">
content
</div>
</body>
I believe the issue is I can not get my 'else' to fire because my if is not firing properly.
Any ideas?
Thanks
-Trevor
your if condition check is wrong, you need to use equality operator (==) and not assignment operator ( = ) in condition check, so change:
if (elems[i].style.height = '25px'){
..
to
if (elems[i].style.height == '25px'){ //use == not =
..
and yes the closing tag } of for loop is also missing, do:
for(var i = 0; i < elems.length; i++) {
if (elems[i].style.height == '25px'){
elems[i].style.height = '110px';
}
else {
elems[i].style.height = '25px';
document.getElementById("expand").innerHTML="[+]";
}
}
Use descendant selector for this kind of task. It's much easier.
http://jsfiddle.net/h7vGj/2/
<head>
<style type="text/css">
.div1 {
overflow:hidden;
height:25px;
}
.on .div1 {
height: 110px;
}
</style>
<script>
function foo(ele) {
if ( !ele.state ) {
document.body.className = "on";
ele.state = true;
}
else {
document.body.className = "";
ele.state = false;
}
};
</script>
</head>
<body>
<button type="button" id="expand" onclick="foo(this);">[+]</button>
<div class="div1">
content
</div>
<div class="div1">
content
</div>
</body>
PS. Your style tag is closed by script tag.
I'm using Javascript to show documents. First, I hide the content that is loaded. Then, if a user press a button, the text related to that button will become visible while hiding other texts.
Currently, my technique does not change the URL that shows in the address bar.
I would like to update the address bar when a user clicks on one of the content display buttons. For example:
address.com/value_of_button
And if a user enters:
adress.com/a_value
I want to change display of div associated with the value. How is this done?
You can always use a hash url, and set the url like this:
function setHash(var hash) {
window.location.hash = hash;
}
If you want to retrieve the hash in the link to update the page, you can use something like
function getHash() {
return window.location.hash;
}
And to update the page you can just simply use if statements like this:
if(getHash() == "#main") {
document.getElementById('content').innerHtml = "<p>Main content</p>";
}
I had already demonstrated this at some point in the last year with jQuery. It's possible to not use jQuery, of course, but I'll provide you with the demo I created. I'll port an example to regular Javascript as well.
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu a').each(function(){
id = $(this).attr('href');
id = id.substring(id.lastIndexOf('/'));
id = id.substring(0,id.indexOf('.'));
$(this).attr('rel',id);
});
$('#home').show();
$('#menu a').click(function(e){
e.preventDefault();
$('.content').hide();
$('#'+$(this).attr('rel')).show();
location.hash = '#!/'+$(this).attr('rel');
return false;
});
});
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>
EDIT
DOM method as promised:
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var links = document.getElementById('menu').getElementsByTagName('a'),
divs = document.getElementsByTagName('div'),
sections = [],
id = '';
for (var i = 0, size = divs.length; i < size; i++) {
if (divs[i].className.indexOf('content') != -1) {
sections.push(divs[i]);
}
}
for (var i = 0, size = links.length; i < size; i++) {
id = links[i].href;
id = id.substring(id.lastIndexOf('/') + 1);
id = id.substring(0,id.indexOf('.'));
links[i].rel = id;
links[i].onclick = function(e){
e.preventDefault();
for (var p = 0, sections_size = sections.length; p < sections_size; p++) {
sections[p].style.display = 'none';
}
document.getElementById(this.rel).style.display = 'block';
location.hash = '#!/' + this.rel;
return false;
}
}
document.getElementById('home').style.display = 'block';
};
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>