I have two links that show and hide different divs. The divs have 3 elements h2, p and img and I would like to animate each element separately but can't seem to figure out how.
I would like to click on a link and make each element have a different animation for entrance and leaving. I am pasting my html and jQuery here hope someone can help.
function showonlyone1(thechosenone) {
$('.uslugetxt').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeTo("slow", 1);
$(this).children().animate({
fontSize: "50"
}, 500)
} else {
$(this).fadeTo("slow", 0);
$(this).children().animate({
fontSize: "0"
}, 500)
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
analitycs
PPC campaigns
</div>
<div class="uslugetxt" id="x1" class="x1">
<h2 class="naslovx">GOOGLE ANALITYCS</h2>
<p>
There is something funny about your data? You double question
</p>
<img src="imgs/analitika.jpg" alt="analitika-slika">
</div>
<div class="uslugetxt" id="x2" class="x2">
<h2 class="naslovx">DISPLAY ADVERTISING</h2>
<p>
Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
</p>
<img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>
try using the :nth() pseudo selector?
showonlyone1 = function showonlyone1(thechosenone) {
$('.uslugetxt').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).fadeTo( "slow", 1 );
$(this).children(":nth(0)").animate({fontSize: "50"}, 500, function(){ $(this).parent().children(":nth(1)").animate({fontSize: "30"}, 500)
})
}
else {
$(this).fadeTo( "slow", 0 );
$(this).children().animate({fontSize: "0"}, 500)
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
analitycs
PPC campaigns
</div>
<div class="uslugetxt" id="x1" class="x1">
<h2 class="naslovx">GOOGLE ANALITYCS</h2>
<p>
There is something funny about your data? You double question
</p>
<img src="imgs/analitika.jpg" alt="analitika-slika">
</div>
<div class="uslugetxt" id="x2" class="x2">
<h2 class="naslovx">DISPLAY ADVERTISING</h2>
<p>
Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
</p>
<img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>
Now for your next question, how to time animations, simply use the complete function of the animation. So when my first animation completes, the second runs -- but bear in mind that, in the context of the completed function, 'this' refers to the animated element! We'll go back to its parent, select the next child, and animate THAT.
Related
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)
I am creating a mobile web app, I have a login/ signup page where users can choose the method they want.
In order to reduce the refresh rate of pages I am hiding and showing objects depending on what the user clicks with jquery.
I have virtual back buttons on each of the 'pages' which hide/show the objects including the back buttons themselves, each time I need to add an extra 'page' I have to add and call the different buttons.
Is there a way I can have one button and use that depending on what elements are hidden/shown?
e.g
html
<div id="go_button"</div>
<div id="next_button"</div
<div id="backbutton1"</div>
<div id="backbutton2"</div>
<div id="page1"
<p> some information here </p>
</div>
<div id="page2"
<p> some more information here </p>
</div>
jQuery
$("#gobutton").click(function(){
$('#backbutton1').fadeIn(250);
$('#page1').fadeIn(250);
$('#next_button').fadeIn(250);
});
$('#next_button').click(function(){
$('#backbutton1').hide();
$('#backbutton2').show();
$('#page1').fadeOut(250);
$('#page2').fadeIn(250);
$('#next_button').fadeOut(250);
$("#backbutton1").click(function(){
$('#backbutton1').fadeOut(250);
$('#page1').fadeOut(250);
$('#next_button').fadeOut(250);
});
etc etc
Would something like this work for you?
I checked the currently visible page, and based on that and what button is clicked, it would go forward or back.
var
$go = $('#go_button'),
$next = $('#next_button'),
$back = $('#backbutton'),
$pages = $('div[id^=page]');
$go.click(function() {
$next.fadeIn(250);
$back.fadeIn(250);
$pages.first().fadeIn(250);
});
$next.click(function() {
var $current = $pages.filter(':visible'); // Get currently visible page
if (!$current.is($pages.last())) { // If this is not the last page, do something
$current
.hide() // hide current page
.next() // get next page
.fadeIn(250); // fade in next page
}
});
// Opposite of the $next.click
$back.click(function() {
var $current = $pages.filter(':visible');
if (!$current.is($pages.first())) {
$current
.hide()
.prev()
.fadeIn(250);
}
});
div[id^=page] {
padding: 5px 10px;
border: 1px solid #ddd;
display: none;
}
#next_button,
#backbutton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go_button">go</button>
<button id="next_button">next</button>
<button id="backbutton">back</button>
<div id="page1">
<p> 1 some information here </p>
</div>
<div id="page2">
<p> 2 some more information here </p>
</div>
<div id="page3">
<p> 3 more information here </p>
</div>
<div id="page4">
<p> 4 more! more! more! more!</p>
</div>
Make a function ..
function operation(name){
if(name == "go_button"){
//operation
}else if(name == "next_button"){
//do this.
}
}
now in html
<div id="go_button" onclick="operation('go_button')" > </div>
<div id="next_button" onclick="operation('next_button')" ></div
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.
I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.
I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/
Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});
I have this jQuery code:
$("#people td, #list td").hover(function() {
$(this).stop().animate({
backgroundColor: "#444"
}, "fast");
$(this).find(".controls").stop().fadeIn("fast");
}, function() {
$(this).stop().animate({
backgroundColor: "#333"
}, "fast");
$(this).find(".controls").stop().fadeOut("fast");
});
$("#list .controls").hide();
.controls is a div, which contains some links to work with entry (there are for example 10 entries on the page). Everything worked until this moment and now it's not working anymore.
When I open the page, .controls hide - that's ok.
But when I hover over the td, css animation runs, but fadeIn does not. Same goes with the fadeOut in the second function (when mouseleave event is triggered).
HTML is as following:
<td>
<div class="icons">
</div>
<div class="profile">
<div class="info">
<div class="name">
</div>
</div>
<div class="controls">
Link
Link
</div>
<div class="clear"></div>
</div>
</td>
That's weird. I removed the .stop() after both .find(".controls") and now it's working.
Little problem is, when you hover in and out couple times the animation then runs a few more times.