I've got a problem with creating a transition for a collapsing text-jquery plugin I've found. Unfortunatley I've go almost no understanding to javascript. At the bottom I added "&&(this).show('fast');" but it didn't work. Hopefully you can help.
$(document).ready(function () {
var maxheight=16;
var showText="Weiterlesen";
var hideText="Zusammenklappen";
$('.expand').each(function () {
var text = $(this);
if (text.height() > maxheight){
text.css({ 'overflow':'hidden','height': maxheight + 'px' });
var link = $('<p class="weiter" id="noselect"><a>' + showText + '</a></p>');
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
link.click(function (event) {
event.preventDefault();
if (text.height() > maxheight) {
$(this).html('<a>' + showText + '</p>');
text.css('height', maxheight + 'px')
&&(this).show('fast');
} else {
$(this).html('<a>' + hideText + '</p>');
text.css('height', 'auto')
&&(this).show('fast');
}
});
}
});
});
Try Changing it to this
$(this).html('<a>' + hideText + '</p>');
text.css('height', 'auto');
$(this).show('fast');
This is using the correct JQuery syntax, wether it works or not depends on what "this" is.
(this).show();
wont work. this is an HTML Element , and it has no show property. You want the jquerys object property.
jQuery(this)//get the jquery object of that html el
.show();//call the function on that
$ is just a shortform of jQuery. So:
$(this).show();
Note this is the link, but you want to show the text (wich is already a jquery object):
text.show();
Concerning the && ( the AND operator):
false && alert("nope");
true && alert("yes");
a() && b(); //b is just called if a() is truthy => can create bugs in your case
Ita not neccessary / useful to use this operator here. However, you could use the Comma operator, but its common to simply use two statements...
However, if ive got you right, its not neccessary to show but rather to add a transition. That can be done with css:
.expand{
transition:all 2s ease;
}
Note this doesnt work for height, but for max-height, so one may set height:auto and change max height from 0px to 500%...
Related
I want to change the color from white to black and/or black to white of my navbar-toggle.
But the problem is when it reach a sepecific div with a specific class like 'white' or 'black' the color changes when the scroll begins.
var stickyOffset = $(".navbar-toggle").offset();
var $contentDivs = $("section");
$(document).scroll(function() {
$contentDivs.each(function(k) {
var _thisOffset = $(this).offset();
var _actPosition = _thisOffset.top - $(window).scrollTop();
if (_actPosition < (stickyOffset.top + $('.navbar-toggle').height()/2) && _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) {
$(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "white" : "black");
}
});
});
Now my jsfiddle but it changes very fast and I don't know what i'm doing wrong.
http://jsfiddle.net/xarlyblack/8mn4bucw/
Thank you in advance!
Best,
Carl
I dont know if I understand correctly your problem, but it seems to me that you have a logic error with your color label assignment, I think it should be like this:
...
if (_actPosition < (stickyOffset.top + $('.navbar-toggle').height()/2) &&
_actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) {
$(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black")
.addClass($(this).hasClass("white") ? "black" : "white");
}
...
And here is an updated jsfiddle in which I think it is properly working
As others have already pointed out, in your jsfiddle the two classes should be switched, but if i understand you correctly, on initial page load the classes also do not match if you, for example already scrolled down and make a page reload/refresh or you come from a anchor link.
To fix this i would suggest you also run the class-switch after document load like this:
var stickyOffset = $(".navbar-toggle").offset();
var $contentDivs = $("section");
$(document).scroll(function() {
checkcolor();
});
$(document).ready(function() {
checkcolor();
});
function checkcolor()
{
$contentDivs.each(function(k) {
var _thisOffset = $(this).offset();
var _actPosition = _thisOffset.top - $(window).scrollTop();
if (_actPosition < (30 + $('.navbar-toggle').height()/2) && _actPosition + $(this).height() - $('.navbar-toggle').height()/2 > 0) {
$(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "black" : "white");
}
});
}
I added a function call on document ready, and removed your stickyOffset Variable, because on page reload/refresh you are positioned in the middle of the site, the offset is way of. Your stickyOffset needs to be a fixed value. I just added the default number of 30 in.
See a fiddle here:
http://jsfiddle.net/5gcemfz0/3/
Seems like the problem is in
$(".bar1, .bar2, .bar3, .navbar-span").removeClass("white black").addClass($(this).hasClass("white") ? "white" : "black");
that place. It says that 'if $(this) has class 'white' add 'white' else add 'black'. Should change places. Hope it helps!
I have a bit of code that needs to detect scrollbars on resize and load. This is straightforward enough, the issue arises when I run the append() function, it appends the elements over and over again.
Below is the jQuery I am using (the demo is here)
$.fn.hasScrollBar = function() {
return this.get(0).scrollWidth > this.width();
}
$(window).on("resize", function () {
var tableWidth = $("table").width();
var wrapper = "<div class='top-scroll'><div class='inner'></div></div>";
var instruction = "<span class='instructions'>Scroll left to see more information</span>";
// This sets the overflow message and a placeholder width to match the table
if( $('.no-overflow').hasScrollBar()){
$('.no-overflow').before(wrapper);
$('.top-scroll').before(instruction);
$('.top-scroll').children().attr("style", "width:" + tableWidth + "px;");
}
// This synchronises the scrollbars
$(".top-scroll").scroll(function(){
$(".no-overflow")
.scrollLeft($(".top-scroll").scrollLeft());
});
$(".no-overflow").scroll(function(){
$(".top-scroll")
.scrollLeft($(".no-overflow").scrollLeft());
});
}).resize();
I'd like the append to only happen once and also remove when there are no scrollbars present.
To check for scrollbars:
if ($(document).height() > $(window).height()) {
//There is a vertical scrollbar
} else {
//There is no vertical scrollbar
}
To only create one .top-scroll:
if( $('.no-overflow').hasScrollBar() && $('.top-scroll').length < 1) { // Check .top-scroll doesn't exists currently
$('.no-overflow').before(wrapper);
$('.top-scroll').before(instruction);
$('.top-scroll').children().attr("style", "width:" + tableWidth + "px;");
}
I would also put your 3 variable declarations within your if statement so they will only be set if the statement is true. Unless of course you are using them elsewhere.
I'm creating a table and i want to highlight a specific row.
I did this using:
$this.css('background-color', 'green');
$this.delay(3000).animate({ backgroundColor: $color }, 3000);
$this = the row in question.
$color = the previous row color.
But i want it to work with the a css class, so something like this
$this.addClass('highlight');
The class .highlight will only have a background-color.
The problems is that, after i add the class, i can't the background-color.
If i use:
$this.delay(3000).animate({ backgroundColor: $color }, 3000);
it doesn't seem to work because it doesn't overrides the background-color property of the class .highlight itself.
And i don't see a way to animate a removeClass method or even a switchClass from .highlight to ''.
Is there any solution i'm not thinking off to do this.
Thanks in advance.
Use CSS transitions instead. Better performance and simpler.
Fiddle example
transition:background-color 0.3s linear;
though this doesn't provide as much browser support for the animation, obviously.
You could use jQuery UI's .switchClass which animates all the style changes: .switchClass
Once completed highlighting, use the callback to switch it back.
$('div').click(function() {
$(this).switchClass( "normal", "color", 1000, "easeInOutQuad", function(){
$(this).delay(3000).switchClass( "color", "normal", 1000, "easeInOutQuad" );
});
});
Fiddle me here!
the .animate() function works with "numeric" properties like: height, width, left, etc.. but not with background-color.
You can try this:
$(document).ready( function() {
$('tr.normal').on('click', function() {
$(this)
.hide()
.delay(3000)
.fadeIn('slow')
.toggleClass('highlight');
});
});
You could use jQuery's addClass and removeClass, consider:
if($(document).scrollTop() > 250)
{
$('#div').addClass("show");
}
else
{
$('#div').removeClass("show");
}
});
What this is doing is replacing the original class, such as "hide" with the div class "show", this particular snippet of code displays a banner when the user scrolls 250px down the page.
Remember if you're using this code that it's still better (and smoother) to use CSS3 transitions UNLESS you're considering users who's browsers don't support this, such as IE8-.
EDIT: I just realized the reason you're doing it this way is because you're considering IE7 users. Perfect. I have literally just solved this issue myself.
The workaround I used was to have a css3 transition set up, and a detector with an if statement to use jQuery where transition isn't supported, see below:
var Detect = (function() {
var
//Add CSS properties to test for
props = "transition".split(","),
//Browser prefixes
CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
d = document.createElement("detect"),
test = [],
p, pty;
// test prefixed code
function TestPrefixes(prop) {
var
Uprop = prop.charAt(0).toUpperCase() + prop.substr(1),
All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' ');
for (var n = 0, np = All.length; n < np; n++) {
if (d.style[All[n]] === "") return true;
}
return false;
}
for (p in props) {
pty = props[p];
test[pty] = TestPrefixes(pty);
}
return test;
}());
if (Detect.transition) {
$(function(){
$(window).scroll(function() {
//your code here
//remember to use an if else
I am trying to do very simple thing, setting the height of div depends on what the height is.
So when the site load the height is 45px, after clicking in button height is 100px. After the next click I want my height back to 45px. I am using jQuery, the code is below:
http://codepen.io/zlyfenek/pen/pAcaw
Thanks for any help, as I am new to jQuery.
You can use .toggleClass() function of jQuery.
$(function(){
$('.yourButton').click(function(){
$('.yourDiv').toggleClass('big');
});
});
demo: http://jsfiddle.net/FYyU6/
Note:
Your big css class should come after your small class Order Matters.
change $("button").one to $("button").on
You should just have a class that sets the height to 100px, and then toggle it when you click on the button:
.opened { height: 100px; }
$("button").on("click", function() {
$(".con_b").toggleClass("opened");
})
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
// use .on instead of .one, .one will online listen for a click one time,
// so your second click will not be seen
$("button").on('click', function () {
if ($(".con_b").height() == 45)
{
$(".con_b").height(100);
}
else
{
// show height and change height should be two different actions
$('.con_b').height(45);
showHeight(".con_b",$(".con_b").height());
}
});
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("button").on('click', function () {
if ($(".con_b").height() == 45)
{
$(".con_b").height(100);
}
else
{
$(".con_b").height(45);
}
its $("button").on not $("button").one
Hello im trying to make my background animate up and down using the .animate() and .hover() method in jQuery. In my DOM i have a div with id="#menu" that contains an UL list with each having a background at different x positions but the same y position. My dilema is for some reason my variable is not working. its coming back as error "cannot read property '1' of null value. Which means it doesnt exist?
Here is my code:
$("#menu li").hover(
function () {
var xPos = $(this).css('background-position-x')
$(this).animate({backgroundPosition: "("+ xPos + "0px)"}, 500);
}
,
function () {
var xPos = $(this).css('background-position-x')
$(this).stop().animate({backgroundPosition: xPos + "35px"}, 500);
}
);
I found out the problem is with the variable, when i check alert(typeof xPos) it returns as undefined. I need to convert this answer to an integer value only.
You can try this might be help you.
Actually Default value: 0% 0% In Css Background Property.
$("#menu li").hover(
function () {
var xPos = $(this).css('background-position')
$(this).animate({backgroundPosition: "("+ xPos + "0px)"}, 500);
}
,
function () {
var xPos = $(this).css('background-position')
$(this).stop().animate({backgroundPosition: xPos + "35px"}, 500);
}
);