I have a fixed image and I need to animate it based on div/section changes
<div class="fixed">
<img src="some_image.jpg" class="child-fixed">
</div>
<section class="section" id="section-1">
//this is rotating section
</section>
<section class="section" id="section-2">
//this is flip section
</section>
and CSS something looks like this,
.fixed{
position:fixed;
margin:50% auto;
width:50px;
height:50px;
}
.fixed-child{
width:100%;
height:100%;
margin:0;
padding:0;
}
.section{
height:100vh;
width:100vw;
}
.rotate{
//some css totate styles here
}
.flip{
//some css flip styles here
}
and JQuery Code will be like this,
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.fixed-child').addClass( "rotate");
}elseif($(window).scrollTop() > 200){
$('.fixed-child').addClass( "flip");
}
});
});
Now I need to add rotate class when that image on section-1 and remove rotate class and add flip class when on section-2 with jquery,
I searched for that, I found some examples but using those examples I can add/remove class based on jquery scrollTop() method, but I want jquery detect that class and add corresponding classes when I scroll down and scroll up vice-versa.
I didn't write rotate and flip CSS code to reduce lines here. but those flip and rotate works.
Please help me to achieve this style!
From what I can gather from your question / comments you need something like Waypoints
Waypoints is the easiest way to trigger a function when you scroll to
an element.
I would also use waypoints for something like this, but as an alternative you can try doing something like:
$( document ).ready(function() {
var section_1 = $('#section-1'),
section_2 = $('#section-2');
$(window).scroll(function() {
var scroll_lvl = $(document).scrollTop(),
section_1_lvl = section_1.offset().top,
section_2_lvl = section_2.offset().top;
if(scroll_lvl >= section_1_lvl && scroll_lvl < section_2_lvl) {
$('.fixed-child').addClass( "rotate");
$('.fixed-child').removeClass( "flip");
} else if (scroll_lvl > section_1_lvl && scroll_lvl >= section_2_lvl) {
$('.fixed-child').addClass( "flip");
$('.fixed-child').removeClass( "rotate");
}
});
});
Related
$(document).ready(function() {
$('.nb-team .nb-team-grid').click(function() {
$(".nb-team-info")
.css('opacit:1')
});
});
Hey guys, I'm trying to change style when we tap on a div. And it should only happen in mobile resolution. So I tried but its not working, and I have attached my code above. Please go through for more clarification. Thanks :)
If you want to add this style only to the mobile or small screen size you can try this.
<script>
$(document).ready(function() {
$(".nb-team-grid").click(function() {
$(this).next(".nb-team-info").toggleClass("my-class");
});
});
</script>
.my-class{ opacity:0;}
.parent-div{background:#eee; width:50%; float:left; height:auto;}
#media (max-width:420px){
.my-class{
opacity:0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>
<div class="nb-team-info" style="height:100px; width:100px; background:black;"></div>
</div>
<div class="parent-div">
<div class="nb-team-grid" style="height:100px; width:100px; background:red;"></div>
<div class="nb-team-info" style="height:100px; width:100px; background:black;></div>
</div>
We can add styles through javascript like this
$(".nb-team-info")
.css('opacity','1');
You just have small syntax mistake
EDIT 1
To apply styles only when the resolution for mobile we can check for window width and decide whether to apply the styles or not like this
if($(window).width() < 768){
$(".nb-team-info")
.css('opacity','1');
}
or
Without javascript we can do using media-queries
#media (max-width:420px){
.nb-team-info{
opacity : 1
}
}
#media (min-width:421px){
.nb-team-info{
opacity : 0
}
}
Here is the Code
$(document).ready(function() {
$('.nb-team-grid').click(function() {
if ($(window).width() < 767) {
$(".nb-team-info").css('opacity', '.5');
}
});
});
For the HTML/CSS part, depending on what exactly you are dealing with you may be fine making two different <div>'s for mobile and non-mobile resolutions, then just apply the style to the mobile viewport <div>. (similar to how mobile navbars are often created)
You should write like this:
$('.nb-team-info').css('opacity', '1');
or:
$('.nb-team-info').attr('style', 'opacity: 1');
HTML code:
<div class="content">
<textarea> hello.png </textarea>
</div>
<div class="content-btn">
Click me
</div>
Javascript code:
$(".button").click(function() {
if ($(this).parent().previousSibling('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().previousSibling('.content').show();
}else {
$('.content').hide();
}
});
How would I go about only showing the textarea when 'Cick me' is clicked or hovered preferably in css but if not javascript. Thanks guys
https://jsfiddle.net/uway5hhg/8/
As exercise you could do this effect in pure css (using :target pseudoclass and a long delay in a simple transition) if you add a close button just below the textarea
http://codepen.io/anon/pen/JYoMRK
<div class="content" id="text">
<textarea> hello.png </textarea><br />
Close
</div>
<div class="content-btn">
Open
</div>
CSS
#text {
overflow: hidden;
height: 0;
opacity: 0;
transition: opacity 0s 999999s;
}
#text:target {
opacity: 1;
height: auto;
transition-delay: 0s;
}
#text:target ~ div a.button { display: none; }
Anyway if you look for a straight jQuery approach, a simple toggle() is enough (you might have to hide the .content element via css depending on the initial condition of your textarea)
https://jsfiddle.net/uway5hhg/39/
$(".button").click(function() {
var content = $(this).parent().prev('.content');
content.toggle();
});
As far as I know there is no way to catch previous sibling in CSS.
But it works with jQuery, here is your slightly changed code:
$(".button").on('click', function() {
var ele = $(this),
par = ele.parent(),
sbl = par.prev();
if (sbl.css('display') == 'none'){
$('.content').hide();
sbl.show();
}else {
$('.content').hide();
}
});
Working example is here: https://jsfiddle.net/y0ab3n0L/
That should do it's job
JS:
$(".button").click(function() {
var contentBtn = $(this).parent(".content-btn");
var content = $(contentBtn).prev(".content");
var textarea = $(content).find("textarea");
$(textarea).toggle();
});
or event shorter:
$(".button").click(function() {
$(this).parent(".content-btn").prev(".content").find("textarea").toggle();
});
https://jsfiddle.net/uway5hhg/21/
Hope this helps :)
Solution provided by Fabrizio is a good one if you want no javascript.
However you can also modify the DOM to have a similar effect.
<div class="content-wrapper">
<div class="content" id="text">
<textarea>hello.png</textarea>
</div>
Click me
</div>
CSS
.content {
display:none;
}
.content-wrapper:hover .content {
display:block;
}
.content-wrapper:hover .button {
display:none;
}
https://jsfiddle.net/2Lsszgqz/
There is no such CSS pseudo element - a.button:click, so only JS solution will work (without changing your HTML structure). You can also get to close of it using :focus CSS pseudo class. But you will lack to go up one level in CSS and then show the textarea. So, only solution left is using JS.
In your sample JS code you have used .previousSibling('.content') which is native JS, which you are calling on jQuery object, that's why it will not work. jQuery equivalent of this function is .prev('.content')
Correct Syntax would be -
$(".button").click(function() {
if ($(this).parent().prev('.content').css('display') == 'none'){
$('.content').hide();
$(this).parent().prev('.content').show();
}else {
$('.content').hide();
}
});
Working Fiddle
I have a parent div called lyricpadding, and inside I have a lot of <h4>'s with a unique ID. Anyways, what I need to do us, by using preferably Jquery or Javascript or CSS, is to keep the <h4> marked with the class of highlighted in the middle of the parent container, but I don't want it to stretch over the whole thing, I just want the text to be centered by an automatic scroll until it gets to the bottom. So the div with the class highlighted will always be visible, preferably in the center.
Here is a jQuery example. It uses position absolute and then adjusts according to the scroll position and window size. See this fiddle.
HTML:
<div class='lyricpadding'>
<h4 class='highlighted'>Highlighted</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
</div>
CSS:
.lyricpadding
{
height:1000px;
width:100%;
background-color:lightblue;
}
.highlighted
{
display:inline-block;
position:absolute;
}
jQuery:
function positionMiddle()
{
var $highlighted = $('.highlighted');
$highlighted.css({
left: ($(window).width() - $highlighted.outerWidth())/2,
top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
});
}
$(window).resize(function(){
positionMiddle();
});
$(window).scroll(function(){
positionMiddle();
});
// To initially run the function:
positionMiddle();
the code I'm searching for is very simple, simply I have divs and menu and I want that when I arrive to the first div by scrolling, the first ul in menu change its style automatically, then when I scroll to the second div the second url style change to another style, and like that... I got the answer for my question and I have the code but I don't like it because it's very tall and it contain codes for every div I got.
As I know I can find ONE short code that does the job for the WHOLE divs in jQuery.
What I want is exactly as in this code(I'm not able to let it work through http://jsfiddle.net/ if anybody knows how to load jquery there please load it and give me the url)
<html>
<style>
#menu {
background-color:#ccc;
position:fixed;
width:100%;
}
.menutext {
padding:25 40 30 !important;
display:inline-block;
}
.menutext2 {
padding:25 40 0 !important;
display:inline-block;
color:red;
}
.alldivs {
width:300px;
height:200px;
background-color:a9a9a9;
}
</style>
<div id="menu">
<div class="menutext" linkId="DIV1">Change the style of me to .mebutext2 on arriving to DIV1</div>
<div class="menutext" linkId="DIV2">Change the style of me to .mebutext2 on arriving to DIV2</div>
<div class="menutext" linkId="DIV3">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>
<br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV1">DIV1</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV2">DIV2</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV3">DIV3</div></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
var menu=$('#menu'),
menuText=menu.find('.menuText'),
DIV1=$('#DIV1'),
DIV2=$('#DIV2'),
DIV3=$('#DIV3'),
DIV1Top=DIV1.offset().top,
DIV2Top=DIV2.offset().top,
DIV3Top=DIV3.offset().top;
$(window).scroll(function(e) {
var win=$(this),
scrollTop=$(this).scrollTop();
//to make nav menu selected according to scroll
var start=scrollTop;
menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext');
if(start>DIV3Top){
menuText.filter('[linkId="DIV3"]').removeClass('menutext').addClass('menutext2');
}
else if (start>DIV2Top){
menuText.filter('[linkId="DIV2"]').removeClass('menutext').addClass('menutext2');
}
else if(start>DIV1Top){
menuText.filter('[linkId="DIV1"]').removeClass('menutext').addClass('menutext2');
}
});
});
</script>
Something like this :
$(function(){
var offsets = [],
menuText = $('#menu .menuText');
$("div.contentDiv").each( function(i, div) {
offsets.push({ id: div.id, offset: $(div).offset().top });
});
$(window).scroll(function(e) {
var start = $(this).scrollTop();
for ( var div = 0; div < offsets.length; div++ ) {
if ( start > offsets[div].offset ) {
menuText.removeClass('menutext2').addClass('menutext');
menuText.filter('[linkId="'+offsets[div].id+'"]').addClass('menutext2').removeClass('menutext');
}
}
if ( start === 0 ) { menuText.removeClass('menutext2').addClass('menutext'); }
});
});
http://jsbin.com/ijiwom/2/edit
EDIT :
http://jsbin.com/ijiwom/3/edit
EDIT 2 :
http://jsbin.com/ijiwom/4/edit
EDIT 3 :
http://jsbin.com/ijiwom/5/edit
dringchev gave you a working example.
what you are describing is sometimes called a "scroll spy", for example here in bootstrap:
http://twitter.github.io/bootstrap/javascript.html#scrollspy
you could also implement it using jquery waypoints
http://imakewebthings.com/jquery-waypoints/
See https://ux.stackexchange.com/questions/17375/what-is-the-navigation-concept-bootstrap-uses-called for a discussion of this UX pattern
I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.
I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.