need help understanding this code in book "jquery in action" - javascript

This code in the book jQuery in action, on page 156.
I don't understand this part:
{opacity:'toggle'}
Can toggle be an opacity value?
$.fn.fadeToggle = function(speed){
return this.animate({opacity:'toggle'},speed);
};

From the documentation:
In addition to numeric values, each
property can take the strings 'show',
'hide', and 'toggle'. These shortcuts
allow for custom hiding and showing
animations that take into account the
display type of the element.
Using toggle will animate the opacity of the element at the speed you specify -- hiding it if it's visible, showing it if it's hidden.

The toggle is a short-cut string that toggles between the show/hide state of the element.
From http://api.jquery.com/animate/
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.

jQuery doc:
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element." Source
So yes, it can be a value.

Toggle, toggles between show and hide. From the same book:
In addition to specific values, we can also specify one of the strings hide, show, or
toggle; jQuery will compute the end value as appropriate to the specification of
the string. Using hide for the opacity property, for example, will result in the
opacity of an element being reduced to 0. Using any of these special strings has
the added effect of automatically revealing or removing the element from the display
(like the hide() and show() commands).
Did you notice when we introduced the core animations that there was no
toggling command for the fade effects? That’s easily solved using animate() and
toggle as follows

To help you maybe get around the English problem, here is a page that has a couple of demos right next to the code. Click once and it fades or slides. Click again and it returns to its original state.

If it's opaque it becomes transparent.
If it's transparent it becomes opaque.

Related

jQuery add inline style on top of previous inline style for filters

I have an element that I want to add multiple inline filter styles on top of at different times.
The code I have now always resets the inline style so that whatever I set last is all that is there.
Here is an example snippet:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px)");
.box{background:blue; width:100px; height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
You can see that i'm setting grayscale first and at that time it turns black. Then I set blur second, but it erases the grayscale filter and turns it back to blue then it blurs.
I want both grayscale and blur to be applied.
The issue is that you're overwriting the previous style since they both use the same property. Try putting them together in the same statement like so:
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
EDIT: If you need to apply them at different times, try this:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
This will set the grayscale first and then preserve it by reapplying it with the blur effect as well
This will take the current css and append the new stuff.
var $div = $("div");
$div.css($div.css() + "-webkit-filter","blur(5px)");
You may want to add both filters in one line, as you can see here:
https://developer.mozilla.org/en/docs/Web/CSS/filter
Jquery wants to overwrite the css if your setting the same property.
This question also addresses a similar problem, doesn't seem like a very clean solution though.
Don't overwrite css properties, but add to them with jQuery

"More" functionality for comments problems

I'm trying to make a "More" functionality for comments.
How I'm trying to make it work:
I split comment in 2 parts - 1st 200 symbols and the rest of the symbols.
The rest of the symbols are placed in a <span class="hidden_comment_container" ></span> which by default gets display:none
Toggle to show the rest is placed if needed (if comment length > 200 symbols).
This is working more or less fine (jsfiddle demo) but there are 2 problems.
Upon slidedown, hidden_comment_container receives display:inline-block and messes up things a bit, since it gets transferred to a new line (check demo to see what I mean)
When sliding down and sliding up, near the end of animation you can notice some twitching.
Can anyone please help me solve these 2 problems?
The first one can be resolved by adding the following to the case when the remaining text is hidden.
$(this).next(".comment_container").children('.hidden_comment_container').slideDown('medium', function() {
$('.hidden_comment_container').css('display', 'inline');
});
Basically you're changing the display attribute of the .hidden_comment_container selector as I believe slideDown is adding a display:inline-block to it which would cause it to jump a line.
Fiddle here
Answer to point 2 can be found in Basic jQuery slideUp and slideDown driving me mad!; basically you need to explicitly add the height of the element before hiding / showing it.
As a side note the css property content can only be used with the pseudo elements :after and :before; I updated my fiddle accordingly.
An alternative solution
Have a look at this script, it does everything you need! I tested it already on another project and it works like a charm: jquery plugin to truncate elements based on height instead of number of characters

Lasso selectables disables CSS :hover state

I have a group of jquery ui selectable things inside a div which expands to full size upon the hover event. The desired effect is that people can select/multi-select/lasso as many of the select-able objects as they would like. When they are done selecting, and the mouse goes to another part of the page, the div returns to its minimized size.
Basically I have it working, but when I lasso-select multiple objects, it seems that the :hover state is canceled or disabled. This leads to the div pre-maturely returning to its original size, and therefore destroying the user experience.
jsfiddle here: http://jsfiddle.net/Ty6RX/2/
The div in question contains the blue "All Customers". If you try lasso-selecting multiple objects you should see the problem. Any help is greatly appreciated!
when mouse is held down the element goes out of :hover and into the :active state w3schools reference. Fortunately, you can apply a CSS class to both states without interupting the user
try this
http://jsfiddle.net/Ty6RX/3/
#customer_picker:hover, #customer_picker:active {
...
height: 300px;
}

Custom Google Map v3 Controls Position Issue

I'm having an issue with three custom controls I have created for a map application.
According to the API documentation:
The API places controls at each position by the order of an index property; controls with a lower index are placed first. For example, two custom controls at position BOTTOM_RIGHT will be laid out according to this index order, with lower index values taking precedence. By default, all custom controls are placed after placing any API default controls. You can override this behavior by setting a control's index property to be a negative value. Custom controls cannot be placed to the left of the logo or to the right of the copyrights.
Therefore, I added the three controls to the same position, giving each an index value, and expected them to fit accordingly.
When the controls are first loaded, they are on top of one another, instead of fitting to match their respective index values.
However, when I perform an action such as hovering over another default control (such as the zoom control), the custom controls appear correctly.
Here is what I have tried to fix the problem:
Setting the position of the controls in CSS (does not work since control positioning can only be custom if you wrap the controls)
Delaying the time for each control button to be added
Tried triggering mouseover actions of other controls since this manually shows the controls in the correct position
Any help or insight in appreciated. I know I mentioned wrapping the controls allows for custom position (according to here), but is there any other way I can get this to work without doing so?
My apologies, I tried uploading screenshots but apparently I am not popular enough. Here is a JsFiddle.
The JsFiddle shows how I am adding these controls only when the user has selected a specific input:
$('#toggle').on('click', function(){
if ($(this).is(':checked')){
$(pointSelDiv).css('display', 'block');
$(polySelDiv).css('display', 'block');
$(circSelDiv).css('display', 'block');
}else{
$(pointSelDiv).css('display', 'none');
$(polySelDiv).css('display', 'none');
$(circSelDiv).css('display', 'none');
}
});
Thanks again!
This is happening because Google Maps API needs to know the width and the height of your control elements to know where to position them - when the map is rendered. By initially setting them to display: none, you are hiding it from the actual layout of your page as well - it's as if the element's not there. Use visibility: hidden instead - setting the visibility to hidden will still hide the element on the screen, but it is still present in the layout. For reference: http://www.w3schools.com/css/css_display_visibility.asp
Also, I suggest rather than individually setting these CSS attributes to your custom control elements, add a class (you can do this via jquery's .addClass()) to these elements and toggle just by targeting the class. I've updated your jsfiddle here.

How to stop CSS3 transition

I want to stop a transition that is in progress.
I have found a few references[1][2] scattered around the internet but I can't seem to piece it together.
Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/
Thanks
[1] https://twitter.com/evilhackerdude/status/20466821462
[2] github.com/madrobby/zepto/issues/508
So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/
The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop')); (Probably would want to store all properties in an object in the element with $(this).data(props); and loop through them).
Once you have explicitly set the properties you can run a 0s animation to override the previous animation and effectively halt the element.
There's a much simpler solution. If you want to just stop the transition (and not pause it). Just set the css to current computed style. For example in a custom scrolling solution, where top is transitioned property.
element.style.top=getComputedStyle(element).top;
and that's it.

Categories

Resources