Best way to rotate content within a DIV using JavaScript? - javascript

For example, see the MySQL website. It's only going to be used to rotate through about 3-5 "ads" to noteworthy areas of the site. I'd like to have some kind of link control to backtrack to the other content (again, like the MySQL site). Google gives me a bunch of very easy to implement stuff for the rotation itself, it's the link control that is difficult.

I found the cycle plug-in for jQuery to be very versatile. It can rotate elements in several ways and can add a next / prev control menu.

Related

How to create a moving mask showing hidden website features with vanilla html, css, js?

We have a simple website; readable, professional colour-scheme etc.
We are trying to make it have an easter egg, so essentially:
1. (Upon clicking a button or something similar) the cursor becomes a circle
2. Through this circle, you can see a 'hidden' website (the same website as the normal one bit with a different colour scheme, little drawings and animations scattered around and within website components, different fonts etc)
The possible strategies we have come up with, and problems with each are:
1. Strategy: Using 'mask-position' to create a moving mask (the cursor)
Problems: Neither the top nor bottom layer would simply be an image. The top layer would be the basic website, and the bottom layer would be the same website but with a new colour scheme, little animations and illustrations hidden in and around the website components. Potentially the top layer could be an image of the website as it was at the time of clicking over to the new cursor, because the only bit that needs to be interacted with is whatever is inside the circle (the hidden website), but the problem with this is that the simple website still has some small things that move, which a simple image would not capture. Could potentially remove these but if there is a solution which avoids this, it is preferable, as the 'image as a top layer' solution seems clumsy and problematic anyway.
2. Strategy: Use an iframe to show the hidden website within the normal website.
Problems: However, we are unsure how to make the iframe a circle, and how to make it move (based on the cursor position).
We have not tried much as we are struggling to figure out what to try to begin with. Ie I am not sure how to make a mask-frame not using images, and I am not sure how to make a moving iframe which is also a circle.
Any advice, strategies/tricks, or even examples of what I am describing which I can use to explain/confirm the concept to others trying to work on it too would be much appreciated.
Thank you!! :)

Multiple p5.js Canvases in the same page [duplicate]

This question already has answers here:
Can I create multiple canvas elements on same page using p5js
(2 answers)
Closed 2 months ago.
although I have some experience with processing, I am new to p5.js. For an academic work, I want to create a website with multiple interactive experiences. I want this website to be one single page, no links no nothing, just one single scroll.
For this, I would want to have multiple canvases along the long scroll. I would also want that these interactive experiences just start when the user is in the correct position of the scroll. I can think of multiple solutions for my problem, but i am not sure how to implement them, neither what is the best one.
Is it possible to do that with one single page? Is it possible to put the canvas into divs and then display it in order with css?
One other solution that came to my mind is to create multiple pages, but simulate that is just one using some sort of animation to simulate the scroll, this one would guarantee that the user is always viewing the canvas in full screen, but I'm not sure he could control it with the normal scroll bar.
Is there any simple solution? Thanks in advance.
It sounds like you're looking for instance mode.
Instance mode lets you do exactly what you're describing: you can create multiple sketches and add them all to the page.
You can also use the parent() function to put your canvas in a specific div. Shameless self-promotion: here is a tutorial that includes placing a canvas in a specific div.
I would start with getting those pieces working before you worry about the scroll. But once you're ready, I would look into setting up a scroll listener in JavaScript and triggering your instance mode sketches at certain values.
Good luck!

HTML drag and drop dashboard with resizable elements

I'm trying to develop a control where one must be able to add elements, move and resize them. The idea is to draw small diagrams by dragging some elements to the dashboard. Here is what I'm trying to accomplish:
The dashboard must have fixed boundaries (left/right/bottom/top). Elements should collide with them and not go beyond.
Elements can be added with a button or dragged from a repository
Elements must be resizable
Elements should collide
Elements must be movable - freestyle, NOT adjust at the top like gridster or gridstack. I need to be able to put an element at the bottom or at the middle of the dashboard and have empty spaces.
I must be able to get all the necessary data from the elements in order to store and recreate the dashboard (save & load).
I started by creating this small test project using the drag & drop features, but soon got the feeling I was trying to reinvent the wheel and maybe doing it in an unnecssary old fashioned way.
But after a few searches, I still didn't find one plugin/control that behaves the way I need or is easy enough for me to change.
Gridster and gridstack make the elements go at the top.
TinyDraggable looks nice, but is not resizable. I did try to make the div elements .resizable() (adding the jQueryUI) but I wasn't able to make it work. This plugin does not have (I think) collisions, which would be OK if I managed to get everything else needed. I do like the freedom of movement of the draggable items compared to my tiny project where they go from slot to slot.
So, the question is: do you know if there is any suitable plugin (jQuery) for me? Ready to use or easy to configure/change?
Many thanks
Try https://github.com/troolee/gridstack.js with float mode. In this mode widgets do not go to the top of container.
The library is in active developing. So I can implement missing reasonable features.

Google maps loading images like

I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.
I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.
Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that are new in active area.
see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg
PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)
Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for
DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax

How to create a flip book/page?

I need to create a flip book/page application. I have seen flash created flip page, can it be done in any other languages, e.g. jquery or javascript? And also, what are some concepts that I am required to have in mind/knowledge on for creating a flip book?
Thanks.
Not quite sure what you mean by "flip book", can you elaborate on this?
If you mean just a digital book, that you can turn the pages of, then I would surgest looking into this AS3 page-flip engine. And here is a list of good (mostly commercial) examples
EDIT* - Not to sure why you would want to create this from scratch, as there are a ton of well made Page-flip libraries out there that are really nicely build, and are either free, or really cheep. Most of the time they are customizable too.
That said, I think they are probably all using a combination of the following:
Preloaded pages - movieclip with either an image or
other graphics preloaded into it
Gradients - to give the illusion of a 3d page that is "turning"
Trigonometry - for dragging effect. To angle the page towards mouse
Masks - to get the page folding effect, when the user start to drag the page, the next page is loaded over the top. Both these page have been masked off based on the users mouse position.
Also the Page-flip engine I linked to above (MegaZine), is open-source. So if you where really keen, then you could dive into there source code and take a look for yourself.
Hope that helps somewhat.
If you need something simple, and don't want to delve into codes, try out pressmo: http://pressmo.com/example3/1
It works faster on slower computers than most of other similar services and what's important you keep your flipbook on your own computer/web server (as online flash or offline executable).
To create a flip page you have to upload your content as a PDF file (which can be easily obtained from Word or Open Office).
Usually a good solution for flipbooks is to keep the number of your pages even, otherside the user will not have the possibility to turn the last site. All pages should be similar size also.
You can use Flex Application
Like this right: Sample Book
Code is here: Source Code

Categories