I have a jsfiddle that allows the user to click on a square and the square expands. What I want to do is allow a separate div to appear once a div is clicked. For example, if the first div is clicked, I want the transition to happen and then text to appear over the green.
Here is the javascript I am using:
$('div').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
}
else {
$(this).css('z-index', 400) ;
}
$(this).toggleClass('clicked') ;
});
http://jsfiddle.net/eD56Y/11/
Here's a fiddle: http://jsfiddle.net/UawH4/
You can add a div with append() and remove it when you collapse the box with remove().
$('div').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
$('#addedDiv').remove();
}
else {
$(this).css('z-index', 400) ;
$(this).append('<div id="addedDiv">Here is some text</div>');
}
$(this).toggleClass('clicked') ;
});
If you use this code
$('div').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
$( ".first_box" ).empty();
}
else {
$(this).css('z-index', 400) ;
}
$(this).toggleClass('clicked') ;
$('<p>Text</p>').appendTo('.first_box');
});
The content <p>text></p> will appear in the div .first_box if clicked (and so if it gets bigger)
I am assuming the text is outside the rest of the divs.
You can try this.
fiddle Link
HTML
<section class="overlay-text"><h3>Some Text</h3></section>
<div class="first_box"></div>
<div class="second_box"></div>
<div class="third_box"></div>
<div class="fourth_box"></div>
JS
$('div').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
$('.overlay-text').hide();
}
else {
$(this).css('z-index', 400) ;
setTimeout(function(){$('.overlay-text').show();},1000);
}
$(this).toggleClass('clicked') ;
});
Added CSS
.overlay-text {
position:absolute;
display:none;
text-align:center;
width: 289px !important ;
height: 289px !important ;
margin-top: 0 !important ;
margin-left: 0 !important ;
z-index:500;
pointer-events:none;
}
h3{color:white;}
You can add a "show" class to content div and it will transition in the content with opacity 0 to 1:
$('div').on('click', function (e) {
if ($(this).hasClass('clicked')) {
setTimeout(function (div) {
return function () { div.css('z-index', '') ; } ;
} ($(this)), 1000) ;
}
else {
$(this).css('z-index', 400) ;
}
$(this).toggleClass('clicked') ;
//make sure to show the content in the clicked div.
$(this).find('.content').toggleClass('show');
});
And the CSS changes:
.content {
opacity: 0;
}
.content.show {
opacity: 1;
}
Edit: To keep colors of expanded content: Just add extra css classes to keep the content background color once clicked. See updated fiddle:
.first_box.clicked {
background-color: green;
}
.second_box.clicked {
background-color: blue;
}
.third_box.clicked {
background-color: red;
}
.fourth_box.clicked {
background-color: yellow;
}
Related
I'm trying to make a carousel that after 3 seconds changes image.
I got 3 images as slide1, slide2, slide3
and thanks to the methods change1,change2,change3 changes image.
I would like to automate everything like this:
function time(change1, change2, change3) {
this.change1 = change1;
this.change2 = change2;
this.change3 = change3;
t = setInterval(change1 && change2 && change3, 3000); //obviously it doesn't work.
}
/*
---------------ANOTHER METHOD-----------------
*/
function time() {
t = setInterval(check, 3000);
}
function check() {
if (slide1.style.display = "inline-block") {
change2();
} else if (slide2.style.display = "inline-block") {
change3();
} else {
change1();
}
}
but i don't know how
Any ideas?
well that is an easy job, here is a simple example on how you could do it
I used jq but you will get the idee. if you want only js that let me know will do it to
/// use jq for batter effekt
var sliders = $(".container > div");
var current;
function change() {
if (!current)
current = sliders.first();
else {
current.hide("fast");
current = current.next();
}
if (current.length == 0)
current = sliders.first();
current.show();
}
setInterval(change, 2000);
.container {
display: flex;
border: 1px solid #CCC;
}
.container>div {
width: 100%;
min-height: 100px;
}
.container>div:not(:first-child){
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div style="background:red;"></div>
<div style="background:green"></div>
<div style="background:blue"></div>
</div>
originally I'm using jquery fade in and fade out to do blinking for a fixed number of times like below:
function blink(selector, counter) {
$(selector).fadeOut(500, function() {
$(this).fadeIn(500, function() {
if (counter++ < 10) {
blink(this, counter);
}
});
});
}
Now I want to change it to using jquery to change the background color to do blinking effect. But my coding don't seems to work:
function blink(selector, counter) {
setTimeout(function() {
$(selector).css("background-color", "red");
}, 500);
setTimeout(function() {
$(selector).css("background-color", "black");
}, 500);
if (counter++ < 10) {
blink(this, counter);
}
}
It just blink for once. Anything wrong guys?
I try the below but doesn't work too:
function blink(selector, counter) {
setTimeout(function() {
$(selector).css("background-color", "red", function() {
setTimeout(function() {
$(this).css("background-color", "black", function() {
if (counter++ < 10) {
blink(this, counter);
}
});
}, 1000);
});
}, 1000);
}
Any ideas guys?
You are calling blink recursively but there is no callback for when the timeout finishes so it is adding all of the timeout events at the same time instead of one after the other (well not exactly the same time but you get the idea).
You can try it this way:
function blink(selector, counter) {
setTimeout(function() {
if( $(selector).hasClass('black') ) {
$(selector).removeClass('black').addClass('red');
} else {
$(selector).removeClass('red').addClass('black');
}
if( counter++ < 10 ) { // to get the result you want this number may need to be 20 for 10 blinks
blink(selector, counter);
}
}, 500);
}
I would set the classes black and red to utilize the background color.
UPDATE
Your second example fails because jQuery doesn't accept a callback function as an argument for the css method. So doing the following won't log anything to the console:
$('.my-element').css('background', 'red', function() {
console.log('this will not log anything because jquery does not call this callback function');
});
For background color animation you would probably need jquery-ui library or you could use css animation to do this:
function blink(selector) {
$(selector).addClass('aniBg');
}
blink("div");
.aniBg {
width: 200px;
height: 200px;
background-color: red;
border: solid 1px black;
animation: animeBG 2s 5;
-webkit-animation: colorchange 2s 5;
}
#keyframes animeBG {
0% { background: red; }
100% { background: black; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>color animation</div>
Fiddle.
$(document).ready(function() {
function blink(selector, counter) {
var t = counter * 1000;
setTimeout(function() {
$(selector).css("background-color", "red");
}, t);
setTimeout(function() {
$(selector).css("background-color", "black");
}, t + 500);
if (counter++ < 10) {
blink(selector, counter);
}
}
blink($('div'), 1);
});
div {
width: 50px;
height: 50px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
this may work for your need
I've some trouble with my script, I'm trying to figure out how I can make a mask/filter over the website when the menu is opened. In the HTML is a class called cmask and there is also a class called cmask is-active
It only has to do this when the screen is smaller than 900px. I've been trying to use cmask.addClass("is-active") and removeclass but its not working like that and it keeps crashing(makes the other part of the script not working anymore). Does someone knows what im doing wrong?
//scrolling----------------
//scrolling----------------
//scrolling----------------
var nav = $("#nav_id");
var nav_overflow = $("#nav_overflow");
var page_end_logo_nav = $("#page_end_logo_nav").visible();
var logo_container = $("#logo_container");
var nav_ani_speed = 200 //in ms
var nav_state = 0 // 0 is nav 1 is hamburger visable
var hamburger = $("#hamburgermenu") //hamburger elemnt
var distanceY;
var shrinkOn;
var winkel_mand = $("#winkel_mand")
//set scroll for desktop nav
function nav_desktop_check() {
distanceY = window.pageYOffset || document.documentElement.scrollTop;
shrinkOn = 100;
//run the header script
if (distanceY > shrinkOn) {
if (nav_state === 0) {
nav_hamburger();
}
} else {
if (nav_state === 1 ){
if ($(window).width() >= 900){
nav_normal_desktop();
}
}
}
}
//tablet nav check
function tablet_nav_check() {
if (nav_state === 0){
if ($(window).width() <= 900){
nav_hamburger();
}
}
}
tablet_nav_check()
//hambutton onclikc
hamburger.click(function() {
if (nav_state === 1){
if ($(window).width() >= 900){
nav_normal_desktop();
} else {
nav_normal_mobile();
}
logo_animation();
remove_winkel_icon_check()
} else{
nav_hamburger()
}
});
//nav to hamburger
function nav_hamburger() {
hamburger.removeClass("active")
nav_overflow.animate({
width: 0
}, nav_ani_speed, function() {
hamburger.addClass("active")
});
nav_state = 1;
logo_animation();
}
//hamburger to nav
function nav_normal_desktop() {
hamburger.addClass("active");
hamburger.removeClass("active");
nav_overflow.css("width", "auto");
nav_witdh = nav_overflow.innerWidth();
nav_overflow.css("width", 0);
nav_overflow.animate({
width: nav_witdh
}, nav_ani_speed, function() {
hamburger.removeClass("active")
});
nav_state = 0;
}
function nav_normal_mobile() {
nav_overflow.animate({
width: "100%"
}, nav_ani_speed, function() {
hamburger.removeClass("active")
});
nav_state = 0;
}
First I would add semicolons to all statements where it could fit, just to be sure you are not missing a mandatory one.
I've made a small overlay mask example
Javascript
$('#element').on("click",function() {
if($('#overlay').length == 0) {
$(this).wrap('<div id="overlay"><div>');
} else {
$(this).unwrap();
}
});
CSS
#element {
width:200px;
height:200px;
background-color:#f00;
}
#inner {
width:100px;
height:100px;
background-color:#0ff;
}
#overlay
{
background-color:#000;
opacity:0.3;
width:200px;
height:200px;
}
http://jsfiddle.net/5aw0wsy4/
I'm having a horizontal scrolling page where arrows are indicated to scroll. I'm using the following code which works fine.
HTML:
<div id="container">
<div id="parent">
<div class="contentBlock">1</div>
<div class="contentBlock">2</div>
<div class="contentBlock">3</div>
<div class="contentBlock">4</div>
<div class="contentBlock">5</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>
CSS:
#container{
width:600px;
overflow-x:hidden;
}
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:400px;
width:500px;
margin:10px;
border:1px solid black;
float:left;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
Javascript:
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
You can also view the code in a WordPress-Installation right here: http://ustria-steila.ch/test
The arrows and the scroll works really well - but I have different sites with different amounts of text and images. So some pages need a horizontal scroll and some not. How can I add some kind of if-condition to display the arrows only if there is a horizontal overflow?
Your JavaScript code should go like this:
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
if(checkOverflow()){
$(".panner").show();
}
else
$(".panner").hide();
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
function checkOverflow()
{
var el=document.getElementById('container');
var curOverflow = el.style.overflowX;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflowX = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth;
el.style.overflowX = curOverflow;
return isOverflowing;
}
}());
I want text to bounce of the left and right sides of a div tag (#header). It works fine when it bounces of the right, then goes back and hits the left. The problem is that after it hits the left and starts to go right again it never hits the right side. It just keeps going and the window scrollbar appears. It appears as soon as it hits the left side. It seems that the div tag.
var finishedGoingRight = false;
setInterval(function() {
slideText();
}, 10);
function slideText(){
if(!finishedGoingRight){
$('#header h1').css("right","-=1");
}else{
$('#header h1').css("left","-=1");
}
if($('#header h1').css("right") == "20px"){
finishedGoingRight = true;
}
if($('#header h1').css("left") == "485px"){
finishedGoingRight = false;
}
}
Hope I explained it clearly :)
Debugging your code revealed that $('#header h1').css("right") always equals "auto", unless you've set it explicitly somewhere.
This works:
http://jsfiddle.net/7z3a3/1/
var finishedGoingRight = false;
setInterval(function() { slideText(); }, 10);
function slideText() {
if (!finishedGoingRight) {
$('#header h1').css("left", "+=1");
} else {
$('#header h1').css("left", "-=1");
}
if ($('#header h1').position().left >= $('#header').width()-$('#header h1').width()) {
finishedGoingRight = true;
} else if ($('#header h1').position().left <= 0) {
finishedGoingRight = false;
}
}
Here's my solution using animate:
JS:
var inner = $('#inner'), widthInner = inner.width(), outer = $('#outer'), widthOuter = outer.width();
function animateRight() {
inner.animate({ left: widthOuter - widthInner }, 1000, function() {
animateLeft();
});
}
function animateLeft() {
inner.animate({ left: 0 }, 1000, function() {
animateRight();
});
}
animateRight();
HTML
<div id="outer"><h2 id="inner">Inner</h2></div>
CSS
div, h2 { border: 1px solid black; }
#outer { width: 300px; height: 200px; }
#inner { margin-top: 75px; width: 50px; position: relative; }
http://jsfiddle.net/rHEQA/2/