Develop Reference

How to detect the ID of a DIV when I scroll

I have three DIV's wit this ID's (#firstCTA, #secondCTA y #thirdCTA) and I need to detect one by one when the user do SCROLL DOWN to change styles or active an animation. I active an ALERT in this example
HTML5 code
<div class="container-fluid" id="firstCTA">
<div class="row">
<div class="col-12 text-center">
<img src="assets/imgs/clic-aqui.png" class="arrow-size">
<h3 class="cta-here-text"><b>Da clic aquí</b></h3>
<br>
</div>
</div>
</div>
JS Code
$(window).scroll(function(){
if ($('#firstCTA').offset().top >= $(window).scrollTop()){
//do something
alert('hey bbay');
}
else{
//do something else
}
});
Really this code dont works because dont detect the ID. The change of styles in the DIV, only be active, when user do SCROLL DOWN and detect the ID.

I suggest you to use some library like waypoints
Where you could do
var waypoint = new Waypoint({
element: document.getElementById('firstCTA'),
handler: function(direction) {
// do your stuff (you can use "this" to refer to the element)
}
})
Or, with jQuery
$('#firstCTA').waypoint(function(direction) {
// do your stuff
}, options)

Child div affects parent div in css and triggers jquery method

I have parent div with class a "very-big-div" that nests another "container-div" that by its turn also nests another child divs. The very big div's made to act like a button and the div that come right after it is a container that appears when I click the very big div.
<div class="very-big">
<div class="container">
<!-- Some other more nested divs that has anchors and buttons -->
<div class="friend-request">
<div class="button-div">
<button class="accept">Trigger</button>
<button class="refuse">Trigger</button>
</div>
</div>
</div>
</div>
The problem is 2 things first: the css problem has not yet been solved
I assigned a hover pseudo class for the "very-big-div", and whenever I hover the "container-div" the hover properties(background-color) is applied to the "very-big-div". This is not what I intend to make, I want to only hover "very-big" div for the hover to apply.
.very-big{
background-color:green;
}
The second problem is : I have a jquery that deals with the container so it is toggled on/off by the "very-big-div"
$(document).ready(function(){
$("#container-div").hide();
$("#very-big-div").click(function(){
$("#container-div").toggle();
});
});
the container has both anchor and button tags whenever I click the an anchor or a button inside the container it is toggled to close itself, and that is not what I want, what I want is just when I only press the "very-big-div" the toggle is activated.

Same as #Jhecht has given the answer, I have just inherited his to mine.
You can stop propagation of the click of child element that trigger toggle by using target and excluding all the child elements of your .very-big container as:
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
Code Snippet:
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>

This works for me, but I am not sure if it is what you need.
Please add in the minimum HTML, CSS, and Javascript needed to fully recreate the error you are seeing.
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
console.log(e);
var current = $(e.toElement);
if (current.is('.container')) {
e.stopPropagation();
return false;
}
$('.container').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>

How to get DIV ID on click

I am new to javascript and couldnt find answer online (I feel like its out there since this seems pretty simple thing, I might not be using the right search terms though)
I am working with the code in this jfiddle:
http://jsfiddle.net/ApoG/f7qqq6k2/4/
$('.item').click(function(){
if( document.getElementById("one").style.display != "none") {
document.getElementById("one").style.display = "none";
} else {
document.getElementById("one").style.display = "block";}
var $this = $(this),
tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110};
$this.toggleClass('big');
$this.find('.item-content').stop().animate( tileStyle );
$container.isotope( 'reLayout' )
});
When you click a div, it takes the 'item' class and changes its properties.
My goal is to have image or one type of text in a widget when its small and another text or image when its expanded on click. I am going to achieve that by changing div custom properties when its clicked using an if statement in my javascript. (right now testing with changes to display)
My questions is...since 'item' class is selected on click, how can I get the DIV ID on click? (right now I hard coded div id)
Thank you.

With JQuery:
$('div').click(function(){
alert(this.id);
});
JSFiddle Demo, with your full code
With Pure JS:
var div = document.getElementsByTagName("div");
for(var i=0; i<div.length; i++){
div[i].onclick = function(){
alert(this.id);
}
}
JSFiddle Demo

Thank you for the toggle tip. I used that to make my code work and show different things in the box depending on the click of the div.
Here is what I ended up doing:
https://jsfiddle.net/ApoG/z3x6hqLe/
<script>
function toggleText1() {
$('#one_one').toggle();
$('#one_two').toggle();
}
function toggleText2() {
$('#two_one').toggle();
$('#two_two').toggle();
}
</script>
<div id="container">
<div class="item">
<div id=one style=display:"none" class="item-content" onclick="toggleText1()">
<div id=one_one class="text" >Show More</div>
<div id=one_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=two style=display:"none" class="item-content" onclick="toggleText2()">
<div id=two_one class="text" >Show More</div>
<div id=two_two class="text" style="display:none">Show Less</div>
</div>
</div>
<div class="item">
<div id=three style=display:"none" class="item-content"></div>
</div>
</div>
I am definitely sure there is a more optimal way to define all the toggle but as I mentioned earlier I am a complete newb so hopefully with more tinkering I will figure that one out.

Mixing CSS & Javascript Eventhandlers

I'd like to be able to assign the same event handler to a number of different div elements. Each element will have a unique style.
I registered the eventhandler like so:
<script type="text/javascript">
function add_something() {
document.getElementById('manipulate').onclick = do_something;
}
function do_something(e) {
this.style.property = value;
}
window.onLoad = add_something;
</script>
So I can assign an event handler to an element like so:
<div id="manipulate"></div>
The problem is that I want to assign that handler to several elements, each with a unique style, and I want to use CSS to do it. but i'm not sure how to do that.
Eventually, I want something that looks like this:
<style>
#element1{...}
#element1{...}
#element1{...}
</style>
.....
<div id="element1" class="manipulate"></div>
<div id="element2" class="manipulate"></div>
<div id="element3" class="manipulate"></div>
Is this possible? Thanks

Event delegation?
HTML:
<div id="wrap">
<div id="element1" class="manipulate">First element</div>
<div id="element2" class="manipulate">Second element</div>
<div id="element3" class="manipulate">Third element</div>
</div>
JavaScript:
var wrap = document.getElementById('wrap');
wrap.onclick = function (e) {
var elem = e.target;
elem.style.color = 'red';
};
Live demo: http://jsfiddle.net/VLcPw/

You can select elements by class in modern browsers, or just use jQuery and know it works everywhere.
$(document).ready(function(){
$('.manipulate').click(function(){alert('Hello.')});
//or .hover/any other event.
});
jQuery events.
Perhaps a more relevant example?
$('.manipulate').click(function(){
$(this).addClass( 'whateverClass' );
//or
$(this).css('color', 'red');
});

Why are you not giving jquery a try?
With jquery you should just need this to bind the same click event to all corresponding elements:
$("div.manipulate").click(function(e) {
$(this).css(property, value);
});
property has to replaced with a valid css property, value with a correct value, of course.

Move div to top after click

$(document).ready(function() {
$('div.post').click(function() {
// the clicked LI
var clicked = $(this);
// all the LIs above the clicked one
var previousAll = clicked.prevAll();
// only proceed if it's not already on top (no previous siblings)
if(previousAll.length > 0) {
// top LI
var top = $(previousAll[previousAll.length - 1]);
// immediately previous LI
var previous = $(previousAll[0]);
// how far up do we need to move the clicked LI?
var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');
// how far down do we need to move the previous siblings?
var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());
// let's move stuff
clicked.css('position', 'relative');
previousAll.css('position', 'relative');
clicked.animate({'top': -moveUp});
previousAll.animate({'top': moveDown}, {complete: function() {
// rearrange the DOM and restore positioning when we're done moving
clicked.parent().prepend(clicked);
clicked.css({'position': 'static', 'top': 0});
previousAll.css({'position': 'static', 'top': 0});
}});
}
});
});
How can I move a div to the top of a list of divs upon clicking a link.
eg;
<div id=1>Div One <a>Click to update</a><a>a different link</a></div>
<div id=2>Div One <a>Click to update</a><a>a different link</a></div>
<div id=3>Div One <a>Click to update</a><a>a different link</a></div>
<div id=4>Div One <a>Click to update</a><a>a different link</a></div>
<div id=5>Div One <a>Click to update</a><a>a different link</a></div>
and when you click ONLY on the link "CLICK TO UPDATE" for any div, it should move that div to the top of the page!
80% done. Thanx guys for the swift response. Preciate it to the max. Anyways thanx to #valipour I managed to get the div to move ONLY when you click on a specific link by adding a class to the link and changing my first two lines from;
$('div.post').click(function() {
// the clicked LI
var clicked = $(this);
to;
$("a.rep").click(function() {
var clicked = $(this).closest("div.post");
html code is;
<div id="wrapper">
<div class="post"><a class="rep">1 Aasdjfa</a> <a>6 Aasdjfa</a></div>
<div class="post"><a class="rep">2 Aasdjfa</a> <a>7 Aasdjfa</a></div>
<div class="post"><a class="rep">3 Aasdjfa</a> <a>8 Aasdjfa</a></div>
<div class="post"><a class="rep">4 Aasdjfa</a> <a>9 Aasdjfa</a></div>
<div class="post"><a class="rep">5 Aasdjfa</a> <a>10 Aasdjfa</a></div>
</div>
Thanks!
BUT it doesn't work with div's that were dynamically loaded? eg. I have 10 divs showing by default then I have a script that loads more divs when you scroll...this script won't move the divs in the autoload section when you click on any of them...any idea why???

If you put them all inside another wrapper div you could do
(This is now the most upto date version):
$("#wrapper a.rep").live('click', function(){
$(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});
EDITED my answer. This one works. With animation aswell ;).
If you dont like animation, have just $(this).parent().prependTo("#wrapper") **
http://jsfiddle.net/2DjXW/18/
To load Divs that are dynamically added afterwards, you will have to use the 'live'. When document is ready the divs that are not there cannot have events added. But live adds the events when new are dynamically added.
New edit:
http://jsfiddle.net/tVhqz/8/
Should work now well.

give "update" class to those links that you want to do the action and then:
$("a.update").click(function()
{
var myparent = $(this).closest("div");
var parentparent = myparent.parent();
myparent.detach().prependTo(parentparent );
return false;
});
jsFiddle link: http://jsfiddle.net/g56ap/4/
NOTES:
we are keeping parentparent separately because myparent.parent() would be invalid after detach.

Ok so through a combination of #valipour and #pehmolenu scripts I was able to get what I was looking for. I have tested it only on chrome but am sure it should work on other browsers. The complete working code is below.
Javascript;
$("#wrapper a.rep").live('click', function(){
$(this).parents('.post').hide().prependTo("#wrapper").slideDown();
});
html;
<div id="wrapper">
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
<div class="post"><a class="rep">This will Move div</a> <a>This won't</a></div>
</div>
This will also work if you divs are loaded dynamically based on scroll!
Thanx guys! See it in action at repjesus.com! click "rep it" on any item!