At the moment im working on a projects which contains prototype.js + scriptaculous.js and some other things..Im trying to remove these libs. So everything should be done with javascript. But i faced 1 thing which is not clear for me (i was not able to find good explanation or solution).
Maybe someone will be generous enough to help me a little bit.
I have a function where 4 arguments will be passed on click:
function someEffect(element, argTwo, argFive, argSix) {
//code which is done already
//code which is done already
new Effect.toggle(element);
}
So the only thing that i need is to replace last line with a pure js.
In Scriptaculous, Effect.toggle (by default) fades in or out an existing element. There are other transition effects that can be specified in a second argument, but by default, the object fades in or out over 3 seconds. The exact implementation of these effects is documented here: Effect.fade Effect.appear
The toggle bases its decision on which effect to fire on the display property of the element. If it is currently display: none, then the appear effect is played on it. If not, then the fade effect is. The end-state of Effect.fade is to set display to none.
I give you all that background in case there are other parts of this page that still need to interact with the replacement effect you are building. If they do, then you'll need to exactly replace those parts of the effect. If not, you can probably do all of this with CSS, and reduce the overhead of your script to adding or removing a CSS classname on the object.
Related
I was curious about the possibilities of animating features in OpenLayers3.
I'm very aware of the examples presented here
http://openlayers.org/en/v3.0.0/examples/animation.html and here
https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms
However, the official examples for OL3 don't quite fit my needs.
Let's assume that I have a layer (geojson for instance) that has a "time" column with lots and lots of time values.
I'd like to implement something like a slider that adds/removes features (or changes their style) depending on the user's actions.
The thing is that there are some APIs that might be able to do that, but they seem to be outdated (code examples were still working with ol2).
Do you have any suggestions on how to build a simple animation slider with OL3?
EDIT: It doesn't necessarily have to be proper animation. A possibility that came to my mind is changing the style of a layer whenever the slider is moved. Still no clue though on how to realise that.
This image illustrates what I have in mind:
EDIT: My current approach is to have a slider, that triggers code everytime it is moved. I somehow try do change the layer style dynamically, but I still haven't gotten a viable result.
Ok. I've come up with a solution myself. It's not really a full-fledged animation, but it works for me.
Basically what I do is that I load a wfs-layer to my map.
Now, here is the trick:
When I do that, I simply sort the time-values of the features one by one and add every feature with the time value of 1 to one layer, every feature with a time value of 2 to another and so and so forth.
This basically does the trick. The rest is simple.
Next step is that I implement a slider that ranges from 1 (the lowest time value) to whatever the highest time value is. Everytime the slider is moved it triggers an event that finds out to which time value the slider is set to and then adds/removes the corresponding layers.
So, if the slider is set to 5. It will add every layer from 1 to 5 to the map and remove every other layer. Again, this is not really an animation, but it does work in my case.
If anyone comes up with another possible solution, please post it here. I'd appreciate it.
(Btw, this is what my solution looks like in action:)
EDIT: I can now also confirm that it is possible to build "proper" animations with this approach. I simply built a js-function that includes multiple "setTimeout"s to time when a layer is added and added a play button that triggers this function. This amounts to an animation that visualises the growth from t=1 to tmax.
I'm using a plugin to store two thumbnails for each post and I've created two div's for each post thumbnail and hidden the second one with it's css display property set to 'none' inside the loop.
<div class='first'><?php the_post_thumbnail()?></div>
<div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
Using java script when I hover over each post I want to show the second div and hide the first one but the code I've written changes all the display properties wile I hover over any of the thumbnails.
How can I know which post the cursor is hovering over and change the thumbnail display property for that post only?
function() {
console.info('in');
$('.first').css('display','none');
$('.second').css('display','block');
},
function() {
$('.second').css('display','none');
$('.first').css('display','block');
//$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
The JavaScript and JQuery this keyword is what you are looking for.
What is the this keyword? this points to the object that called your function. It sounds confusing at first but looking at a few simple examples clarifies any confusion. For example, in your case, you need to know what div is being hovered over. What your doing now is writing an individual event for each object and it works in some cases, but obviously runs into multiple problems.
The first is what your question is. How can you tell which one is being hovered over? But there is another problem you could run into. What if you had 50 divs that all needed the same event? It would be both time consuming and space consuming to write 50 lines of CSS display changes. What if there was a way to reduce those 50 lines to one single line?
$('div').mouseenter(function() {
$(this).css('property','value');
});
So what does this do? Say your HTML markup looked like this:
<div></div>
<div></div>
<div></div>
<div></div>
And you want to apply a CSS property to any of the divs that are hovered over. The above JQuery says:
"when the mouse enters a div, change the CSS of that particular div"
Or in other words, change this div that is currently being hovered over.
Obviously, this idea (pun intended) can be used in many ways to significantly shorten JavaScript programming. If you want to look more into the documentation of this, there's plenty of good sources out there. Here are a few:
http://www.quirksmode.org/js/this.html
http://learn.jquery.com/javascript-101/this-keyword/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
It took awhile for me to grasp, but definitely improved my JS programming once I did. Also important to note: $(this) only works in JQuery, in JavaScript it is simply this. Obviously, you can use the simpler version, this, in JQuery as well.
One last thing, I made a quick demo for you to see a live implementation of the this keyword.
I hope this answer was helpful for you ;)
If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help
The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.
I imagined this would be super-simple, but it is eluding me so far. I would like to know how I can implement a timer that counts down to a specific date and can be styled with CSS.
Specifically, I have designed a background image/container and want to style the numbers so they are correctly positioned, sized, coloured and in the correct font.
There are a raft of JS and jQuery countdown timers, but none I have found output in a manner which is easy to target with CSS. Modifying the output strings (i.e. including div tags) only seems to break them, although my JS knowledge is not great enough to understand why (a guess, is that the scripts seem to target a certain div class and 'inject' the appropriate code. Perhaps introducing new divs screws this up?)
I guess my question would have to be... 'what is the easiest way to implement a countdown to a specific date, which can be styled with CSS?', although if you know of an existing plug in that does this, I will love you forever!
This is a very useful plugin for countdowns ... everything is written within a div and span's so you can easily style it with CSS - you could use images if you reallu needed to
http://keith-wood.name/countdown.html
I've used this: http://www.littlewebthings.com/projects/countdown/example/
And I can say it's awesome.
Unfortunately it's not in pure CSS, there are images, and the switch is not smooth.
But you can always learn how to make a beautiful countdown like that by studying how it works.
Here you can download the source code: http://www.littlewebthings.com/projects/countdown/downloads/lwtCountdown-php.zip
Hope it helps.
How do I turn off the tips temporarily? I see the ability referenced on the website a couple times, and in this forum as well, but for some reason I can't find the command that turns them off. I just need to disable them for a bit, then re-enable them.
Is there a way to give a tooltip a maximum height? I have a bunch of tooltips, some of which are only one line, some are 100 lines. I'd like to have the one line tooltips pop up very small, and the large ones pop up large, with a scrollbar for the really large ones.
Thanks.
Edit: Sorry, not sure why I assumed everyone would know exactly what I was talking about.
http://plugins.learningjquery.com/cluetip/
Edit 2: I've gotten the maximum height thing working. My problem was trying to implement it using the cluetip interface. All I needed to do was specify some CSS to do the deed. Still having trouble disabling the tips, though. Seems like it should be simple, not sure why I can't figure this out!
Yes you can, take a look here: http://plugins.jquery.com/node/8405#comment-3532
it basically means to insert cluetip call into your source element's 'hover' (or anything else) event handler and evaluate a condition before calling cluetip...
You can set up a fixed height, or an 'auto' height. If you want to have that effect you should modify the plugin code itself.
EDITED AFTER YOUR COMMENT:
Clearer now, Things change a bit:
You have to set a global flag, a boolean that is set to true every time a tip is shown (you can set it in the onActivate callback) then...
You have to use the function which I've linked to, to check whether the flag is set to true, if it's not then you can show your tip, anyway...
Don't forget to set back your flag to false when the tip is closed. The best way to do it is by inserting an 'onClose' callback in the plugin code (line 352, clueTipClose()).
If all this todo stuff seems a pain in the..., well, I think it is. Take a look at SimpleTip http://craigsworks.com/projects/simpletip/ , which has everything you need.