I have the following code which works to create the div on click, but I would like the div to slide down slowly and not appear immediately:
function hideshow(which) {
if (!document.getElementById) return
if (which.style.display == "none") which.style.display = "block"
else which.style.display = "none"
I've found some code that appears to do what I'm after, but I'm having difficulty integrating it into my existing code (above):
$(document).ready(function() {
$("#button").toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('show');
}).click(function(){
$("#hidden_content").slideToggle("slow");
});
I've stuck it on js fiddle if that helps (with supporting css):
http://jsfiddle.net/dRpWv/479/ and
http://jsfiddle.net/dRpWv/447/
Use jquery property "slideDown"
My Codepen
function hideshow() {
var i = 1;
if (document.getElementById('effet').style.display == "none") {
$('#effet').slideDown("normal");
document.getElementById('effet').style.display = "block";
i = 2;
} else {
if (i == 1) {
$('#effet').slideUp("normal", function () {
document.getElementById('effet').style.display = "none";
});
}
}
}
Related
I have created a simple accordion for some footer content that I only want to trigger when the window width is less than 600px. I've tried using window.resize but when resizing the window above 600px the function is still initialising and I can't understand why.
If anyone would mind sharing some advice on this I'd really appreciate it. I keep going round in circles.
jsFiddle
JS:
function initializeAccordion() {
var mainToggle = $('.footer-accordion > .footer-column > p');
$('.footer-accordion > .footer-column > .menu').css('display', 'none');
mainToggle.click(function() {
var that = $(this);
var secondLevel = $(this).siblings('.menu');
var allSeconds = $('.footer-accordion > .footer-column > .menu');
if (that.hasClass('is-active')) {
secondLevel.slideUp();
that.removeClass('is-active');
mainToggle.removeClass('is-active');
allSeconds.removeClass('is-active');
allSeconds.slideUp();
} else {
mainToggle.removeClass('is-active');
allSeconds.removeClass('is-active');
allSeconds.slideUp();
secondLevel.slideDown();
that.addClass('is-active');
secondLevel.addClass('is-active');
}
});
};
if ($(window).width() < 600) {
initializeAccordion();
}
$(window).on('resize', function() {
if ($(window).width() < 600) {
initializeAccordion();
}
});
A pure JS cross-browser solution:
window.onresize = function() {
checkWidth();
}
checkWidth();
function checkWidth() {
var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
if (vw < 600) {
//callFunction();
}
}
I have 3 different charts inside 3 different div tags that appear and hide when specified. However, two of the charts randomly resize and i know why.
How do i fix this?
I have wordpress and using visualizer plugin for my charts. have the code in the header.php file and in the text portion of the page specific code.
Code below:
Header.php snippet -
<script>
var divs = ["Daily", "Weekly", "Monthly"];
var visibleDivId = null;
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
</script>
HTML page snippet -
<div class="inner_div">
<div id="Daily">[visualizer id="431"]</div>
<div id="Weekly" style="display: none;">[visualizer id="430"]</div>
<div id="Monthly" style="display: none;">[visualizer id="429"]</div>
</div>
<div class="main_div">
<div class="buttons">
Daily | Weekly | Monthly
</div>
A quick fix is to include call visualizer.render(); at the end of your toggleVisibility function:
function toggleVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
visualizer.render();
}
The problem is caused by invalid calculation of available area for divs that aren't visible at the time. Calling this method forces a re-calulcation of the svgs and ensures the right size.
I have a button called add to profile, all I need to know is how do I make it so its only on the last jQuery div, after the last next.
Like question 1, then next, question 2 back and next, question 3, back and add button.
So if you can really help me out here quick I'd really appreciate it.
Here's my code:
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$("#2").hide();
$("#3").hide();
$("#4").hide();
$('#back').hide();
$("#forward").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("#1").hide();
$("#2").hide();
$("#3").hide();
$("#4").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>
...
if (counter === maxThings) {
$('#forward').hide();
$("#AddToProfile").show();
} else {
$("#AddToProfile").hide();
}
...
And I really don't like youre coding :) You'll have to change code every time you'll add new div.
I would do something like that:
- Every div would have class question
- Every div's START visibility attribute would be defined in html (every div except first would have in style something like visibility:hidden)
<script>
$(document).ready(function () {
var oldOption;
var counter = 1;
var maxThings = 4;
var minThings = 1;
$('#back').hide();
$("#forward").click(function () {
$("div.question").hide();
if (!(counter >= maxThings)) {
counter++;
}
$("#" + counter).show();
$('#back').show();
if (counter === maxThings) {
$('#forward').hide();
}
});
$("#back").click(function () {
$("div.question").hide();
if (!(counter <= 1)) {
counter--;
}
$("#" + counter).show();
$('#forward').show();
if (counter === minThings) {
$('#back').hide();
}
});
});
</script>
I have a dashboard at work and I want people to be able to change the text on the tabs in order to create categories which fit them best.
I wanted single line text which would disregard changes on Esc or commit the changes on Enter or Blur.
I found the answer but figured I would post in order to help others.
Here is the HTML markup:
<span contenteditable="false"></span>
Here is the jQuery/javascript:
$(document).ready(function() {
$('[contenteditable]').dblclick(function() {
$(this).attr('contenteditable', 'true');
clearSelection();
$(this).trigger('focus');
});
$('[contenteditable]').live('focus', function() {
before = $(this).text();
if($(this).attr('contenteditable') == "true") { $(this).css('border', '1px solid #ffd646'); }
//}).live('blur paste', function() {
}).live('blur', function() {
$(this).attr('contenteditable', 'false');
$(this).css('border', '1px solid #fafafa');
$(this).text($(this).text().replace(/(\r\n|\n|\r)/gm,""));
if (before != $(this).text()) { $(this).trigger('change'); }
}).live('keyup', function(event) {
// ESC=27, Enter=13
if (event.which == 27) {
$(this).text(before);
$(this).trigger('blur');
} else if (event.which == 13) {
$(this).trigger('blur');
}
});
$('[contenteditable]').live('change', function() {
var $thisText = $(this).text();
//Do something with the new value.
});
});
function clearSelection() {
if ( document.selection ) {
document.selection.empty();
} else if ( window.getSelection ) {
window.getSelection().removeAllRanges();
}
}
Hope this helps someone!!!
I'm really a beginner in ajax/jquery. I need to open a link in a new window like "target=_blank" but my code only makes the link to open in the same window. I have tried different things like inserting target _blank inside the jquery but it didn't work at all. I really appreciate any help [:)
function initHeroSwitch() {
var heroCnt = $('#hero ul li').size();
if ($('#hero').length > 0) {
$('#hero').append('<div id="hero-btns"></div>');
$('#hero ul li').each(function (index) {
$('#hero-btns').append(''); });
$('#hero ul li').each(function () {
getRel = $(this).attr('rel');
winHeight = $(window).height();
if (winHeight > 750) {
var bkgImg = getRel.split('.');
bkgImg = bkgImg[0];
bkgImg = bkgImg.substr(0, bkgImg.length - 3);
bkgImg = bkgImg + "-lg.jpg";
$('#hero ul li').each(function () { preload(bkgImg); });
} else {
preload(getRel);
}
});
startHeroRotate();
rotateHero(rotateSpeed);
} else { autoRotate = window.setInterval(function () { startNewsRotation(); }, rotateSpeed); }
}
Hvae you tried this:
$('#hero-btns').append('');