I'm trying to make a simple Javascript button to toggle a menu on and off the screen. I have a little if-else statement that detects the current position of the <nav> and changes it's left css property to that effect.
JSBin
Now, as you see in my code, this will show the menu once but won't hide it back afterwards:
if (navStyle == '0') { setNav('-500px'); }
else { setNav('0'); }
And this will do the job properly:
if (navStyle == '-500px') { setNav('0'); }
else { setNav('-500px'); }
Weird right? Anyone knows what's going on?
This is because the width will never actually be equal to 0, it will be something like 0px depending upon the units you choose. Your second set of conditions work because they check for the width first (500px) and if it doesn't match chooses the other (0px).
You can handle this in a variety of ways, including extracting just the number value from 0px, however since you already have this working, its just something to be aware of in the future. :)
Related
I have a test page to better explain my problem. I have several items on a list (they're images on the test page); when I click on one of them, a corresponding slideshow, using flexslider, sldes down.
The problem is that, on page load, the slideshow shows all slides at once, at a much smaller size than intended. But then, if I switch the focus from the window (i.e. switch between browser tabs or move to another program and come back), the slideshow is now working and the slides are the proper size. This happens in mobile devices too.
When I check with firebug, there's an element.style rule applying to ul.slides:
transform: translate3d(-89px, 0px, 0px);
Which hides one of the slides. Additionally, there's another rule for the list items inside ul.slides that gives them their initial width, which is not even the same for all sliders so I don't understand where it is coming from.
Can someone take a look and suggest a fix? I've tried overriding the element.style rule but so far unsuccessfully.
I think I've figured it out, in principal at least...
.flexslider{display:none;} seems throw off the re-size function of Flexslider.
You could just remove it, but that makes for some ugly loading.
To avoid said ugly loading I put together a quick, work-around- jsFiddle
$(document).ready(function(){
$(".flexslider").css('display','block').slideUp();
});
There's a still a quick glitch while loading, but hopefully it will at least steer you in the right direction.
Another method I played with a bit was to try and force the re-size function like so-
$(".client").click(function () {
$('.flexslider').resize(); // Problematic but promising
var project = this.id;
var project_id = '#' + project + '-project';
var elem = $(".flexslider:visible").length ? $(".flexslider:visible"): $(".flexslider:first");
elem.slideUp('slow', function () {
$(project_id).slideDown('slow');
});
});
This sort of solved the mini-picture issue, but was spotty at best.
I'm using a script to move certain background elements on a page. It works by moving the "right" position of an element called #tright. This is similar to a parallax effect. All this works great, except I want the #right element to stop moving when it has a right value greater than 0. I tried to put everything in an if statement. So if the value is greater than 0 do nothing. If it's less than zero keep going. I'm obviously not a programer so I'm not even sure if this is the best way to go about this. Can anyone tell me what I'm doing wrong
$(window).bind('scroll',function(e){
moveTriangles();
});
function moveTriangles(){
var scrolled = $(window).scrollTop();
var rightTriPosition = $( 'canvas#tRight.bTri' ).css( "right" );
if (rightTriPosition < 0){
$('#tRight').css('right',(-70+(scrolled*.10))+'%');
}
else{
}
}
css() returns the value with an unit. Now you're comparing something like this ('-100px' < 0). You need to get rid of the unit before comparing the value with a number. For example like this:
var rightTriPosition = parseFloat($( 'canvas#tRight.bTri' ).css( "right" ));
If you don't want to execute anything when the comparison is not passed, you can simply omit the else.
I've got a problem in my code, I can move the red one (square1) by clicking on it,what I want to do is to detect a collision when the red one touch the blue one. I want it to change colour when there is a collision...
Here is my code to be more clear:
http://jsbin.com/iFAlIyIv/4/edit
Your basic approach was right, the problems were things like this:
Instead of square1.left, you want square1.offsetLeft. Elements don't have a left property. Same goes for top, width, and height.
Instead of document.getElementById("square2"), you need to select the element by class name, since there's no element with that ID (only an element with that class).
You're calling changecouleur, but you probably meant to call colorswap. Looks like a bit of unfinished refactoring.
You also don't need any of the additional checks after this:
if (bl > ar || br < al) {
return false;
} //overlap not possible
if (bt > ab || bb < at) {
return false;
} //overlap not possible
If neither of these conditions are true, they must overlap.
http://jsbin.com/iFAlIyIv/13/edit
I've seen a few questions about a similar issue, but I haven't found a solution that makes sense to me yet. The problem is on the JSFiddle here: http://jsfiddle.net/twchapman/EEXjR/2/
Click on Portfolio to see the behavior.
The functions I wrote:
function changeTab(tab) {
active = tab;
$("#" + tab).slideDown(animspeed);
}
function change(tab) {
if (tab == active) return;
$("#" + active).slideUp(animspeed, function () {
changeTab(tab);
});
}
I'm only using Chrome, but I'm pretty sure you'll get this error on any browser: when the page loads, it slides the content div down, and clicking the links (only Portfolio actually works at the moment) will slide the current div up, then the correct one down.
It's working almost completely as intended, but with one minor issue: when the animations begin, the div's height "jumps", and it's momentarily taller while the animation takes place, then "jumps" to the correct size when finished.
The two common solutions I've found have suggested: 1. Add a width to the style of the div, which already exists, and 2. change the height/margin parameters of the slide function when it's called. To me, the second solution seems like it shouldn't be necessary, as I don't provide any options other than an animation length.
I'm hoping this is just me missing something and being silly, not a big problem with the way I'm doing things.
The problem comes from padding which at times can make jQuery animations jittery.
A fast solution for your problem is to leave your Js untouched and use a natural box model for your layout.
In your css just include:
* { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
I really suggest to read this Paul Irish blog post and to include this code in all your projects.
Here's a working demo: http://jsfiddle.net/gleezer/EEXjR/3/
Update your js.
function change(tab) {
if(tab == active) return false;
console.log(tab);
console.log(active);
if($("#" + active).length){ //check element is exists.
$("#" + active).slideUp(animspeed, function() {changeTab(tab)})
}else{
changeTab(tab);
}
}
I'm making a website and have "borders" around my main content. I say "borders" because its not a CSS border, but div's with a background image.
Now I have my left and right div borders (#cont-border-left/right) height set explicitly to 675px, and I have another div (#extend-l/r) just under that which I want to expand down the page when the main content goes past 675px.
I'd like to to this using only CSS if possible, but if not JavaScript/JQuery would be a great solution for me as well.
I was going to paste a bunch of the code here, but it would probably just be easier to view the source, because I think it will make more sense if you can see it all together.
Saw this on a similar question... But I'm not great with jQuery or JavaScript.
$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
$('#rightColumn').height($('#leftColumn').height());
}
else
{
$('#leftColumn').height($('#rightColumn').height());
}
});
And turn it into something like:
$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height = $('#content' - 645px)
^The above line needs help / correcting
}
else
{
$('#extend-l').height = 0
}
});
Any ideas on what I should try out?
EDIT2: Still would like to know if someone has a pure CSS solution!
You might be interested in CSS3 border-images. See various:
css3.info: Border-image: using images for your border
css-tricks.com: Understanding border-image
border-image-generator
border-image
Figured it out. I was close with the edit I made.
Heres the work code should anyone need something similar in the future.
$(document).ready(function()
{
if($('#content').height() > $('#cont-border-left').height())
{
$('#extend-l').height($('#content').height()-675)
}
if($('#content').height() > $('#cont-border-right').height())
{
$('#extend-r').height($('#content').height()-675)
}
});