Convert IF to TOGGLE [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have code but it works with scroll height, i want to do something different. I want to convert it to Toggle, is it possible? First click add .animated and remove .fix, on second click remove .animated and add .fix.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 20) {
$header.addClass('animated').removeClass('fix');
} else {
$header.removeClass('animated').addClass('fix');
}
});
I'm new on javascript can anyone help me please?
Thanks!

The toggleClass accepts a switch argument, a Boolean value. true adds the className and false removes the className.
var bool = scroll > 20;
$header.toggleClass('animated', bool).toggleClass('fix', !bool);

I've found solution like this, maybe somebody uses it.
$('.header').on('click', function(e) {
$('.header').toggleClass("animated") .removeClass('fix');
e.preventDefault();
});

Related

Assign a value of the pressed div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I wanna create something like pixel art notepad but I can't get background-color from my divs(top left corner) when I am pressing on them and assign this value to the variable, then assign this value to the "current color" div(top right corner).
The screenshot of my app.
My code:
$(document).ready(function() {
createGrid(16);
$('#newGrid').click(function() {
refreshGrid();
});
$('.colorBoxes').click(function() {
var currentObject = event.target;
console.log(currentObject);
//here i'm trying to get the color of my clicked div
//(I'm really have no idea what to do)
variable = window.getComputedStyle(currentObject);
var containerForBackgroundColor = variable.getPropertyValue('background-color');
console.log(containerForBackgroundColor);
});
});
As you are using jQuery, you can access the background-color with the following code:
var containerForBackgroundColor = $(this).css('background-color');

How can i make adaptive block and add there blocks? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
So, i have this html code:
<div class = "form_wrappers">
<div class = "form">Hello
</div>
</div>
<a class = "destiny_add">
And jQuery code:
function addBlock() {
$('.destiny_add').on('click', function (e) {
e.preventDefault();
$('.form_wrappers').append($('form'))
});
}
I want to add a lot of <div class = "form"> in <div class = "form_wrappers>
How can i make it?
Now it tottaly does not work
There are a couple of issues with your code.
Your jquery is inside the function 'addBlock' which is never called.
You're missing the dot in your append $('form')
You need to append the html of the element, not the element itself.
I also included your code in the .ready() to make sure the elements are loaded before jquery tries to run it.
See the code below
$(function() {
$('.destiny_add').on('click', function (e) {
$('.form_wrappers').append('<div class="form">'+$('.form').html()+'</div>');
});
})

jQuery count div, divided into two and add between them [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Tell me how to make a jQuery:
count <div class="one">, divided into two and add between them <div class="two">
/div class="one"/ can be a different number
JsFiddle
You want to add a div after the half of the one divs:
var count = Math.floor($('.one').length / 2);
$('.one').eq(count).after('<div class="two">d</div>');
Demo: https://jsfiddle.net/c8b8tnm3/2/
You can use a class selector to find all the one elements, then use its count(length property) to find its middle and insert the new element
var $ones = $('.one');
$ones.eq(Math.floor(($ones.length-1)/2)).after('<div class="two"></div>')
Demo: Fiddle
Try this, this may help you.
var ones=$('.one');
var indexofOne=$('.one').length/2;
indexofOne=Math.floor(indexofOne);
var insertPosition=$('.one')[indexofOne];
$(insertPosition).after($('<div class="two">'));
JSFiddle

HTML Remove Label for input without ID [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got a label for an input. Defined like:
<label for"idofparentelement">innerHTML</label>
Found nothing where the label for hasn't got an id.
How can i remove it with JavaScript without giving an id.
To remove element with specific attribute Use this function:
function removeElem(tag,atr,vl)
{
var els = document.getElementsByTagName(tag);
vl=vl.toLowercase();
for (var i = 0; i<els.length; i++) {
var elem=els[i];
if(elem.getAttribute(atr)){
if ( elem.getAttribute(atr).toString().toLowercase()==vl){
elem.remove();
return;
}
}
}
}
and First of all
Change your html like:
<label for="idofparentelement">innerHTML</label>
Now for your case Use this as: removeElem('label','for','idofparentelement');
Here is the working:
Fiddle
Hope it'll help you cheers :)!!

Adding an Accordion-Like Setup? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I want to be able to add the whole Accordion Aspect to this code in jsFiddle. To where if you expand one, and then click on another it collapses the previous div and displays the most recently clicked.
Any idea of how I could accomplish this through this jsFiddle?
http://jsfiddle.net/zrbFE/
Thank you all!
http://jsfiddle.net/fAmWx/1/
This might help get you started in the right direction. The idea is to simplify and reuse class names and code.
I made this some time ago, think it will suit your needs: http://jsfiddle.net/aCaEG/2/
I like this library for that functionality:
http://flowplayer.org/tools/demos/tabs/accordion.html
Way lighter than jQuery UI, and works beautifully. Check that page for examples of how to mark it up and call it in your script.
Try this for your jsfiddle:
function toggleMe(me) {
var alreadyOpen = me.is(':visible');
jQuery('div[class^="content-"]').hide('fast');
if (!alreadyOpen) {
me.show('slow');
}
}
jQuery('.expand-one').click(function() {
toggleMe(jQuery('.content-one'));
var img = $(this).find('img'),
src = img.attr("src"),
alt = img.data("altsrc");
img.attr("src", alt).data("altsrc", src);
});
/// SECOND SESSION:
/////////////////////////////////////////////////////////////////////////////////////
jQuery('.expand-two').click(function() {
toggleMe(jQuery('.content-two'));
var img = $(this).find('img'),
src = img.attr("src"),
alt = img.data("altsrc");
img.attr("src", alt).data("altsrc", src);
});
Hope this helps,
Pete

Categories

Resources