I would like to have a link on my site that when you click it a site segment that hovers above the content appears and displays some information until it is closed in some way, and I would like to be able to insert anything I want to in there- text, images, CSS formatting, etc.
What language should I use for this? Do you know any sites that do this? Also a link to relevant libraries would be appreciated.
javascript is used for such client side tasks such as this. The library jquery will be imensensly helpful. Basically what happens is when you hover your mouse over an image (or whatever you like) a div gets its display property switched and is positioned at the appropriate coordinates. Since this is a div, you can insert into it anything you would have in a webpage, images, CSS, flash, or whatever you like.
If I understand well the requirements, you need to use JavaScript, <div>s and the CSS property "display".
Check out Prototype Window Xilinus. They have exactly you're looking for.
Related
Probably not the best title, also, that why I ask here, describing this to a human may help me, describing it on google won't. I tried searching but I couldn't find.
How can I display some info about the destination of a link when hovering over it? For example if the link is towards a forum post I want to display a summary of the contents of the post, or if it is towards a site, display the site logo, title, a summary of the page? etc.
That has nothing to do with Laravel... well, Laravel could provide you with that info but the interaction that you're describing should be achieved with JavaScript/CSS on hovering an element.
Mock up those elements with HTML/CSS first, how they would look, and then use JS (or a JS library) to make it dynamic on certain actions (i.e: hover).
Just use an html tooltip attribute. Should be all you need.
https://www.w3schools.com/css/css_tooltip.asp
Or if you need more complex elements just write js / jquery code for the class Onhover action
I'm looking at this book pages turning script:
www.turnjs.com/#samples/magazine1
There are many options for customization, however it seems there isn't an option for what I want to do.
The way it is now, in order to turn a page, you have to hover somewhere near the corners.
Only then the page corner turns and you somehow guess that by clicking you can go to the next page.
What I want is to make all the area clickable; wherever the mouse hovers, inside the book, one corner or another should bend.
I know I may have to edit the code directly somewhere, but I couldn't find the place although I tried.
It seems all CSS for page turning is inside turn.js file
If somebody can find the code line to be edited, please let me know.
Thanks
The jquery hover will give you the answer for this. Try include this code in your document ready function.
$(".turn-page").hover(function() {
$(this).css({"transform": "rotate(-45deg) translate3d(262px, -263px, 0px)"});
$(this).parent().css({"transform": "translate3d(-633px, 68px, 0px) rotate(45deg)"});
});
Note: This is for testing purpose only. Remove the lines in hover function and add your codes.
I'm searching for Javascript (JQuery if possible) plugin that can generate an image representing the inner content of a DIV.
Example : This link shows an image containing 3 x 3 box display.
What I would like is that these boxes could contain an automatically-generated picture showing what a specific DIV's content look like.
Is there such a thing?
If you don't have too much content on the screen, this seems like a simple option
html2canvas
It is well documented
Well tested
But it will not work for all elements
It will not work with all atributes
But this is the solution if you want to take the screenshot of your page only(where you know the possible attributes and elements)
I don't think that Javascript can create an image from the scratch, but for sure is possible to make that on the server and use JS to make an AJAX call to it.
Hope this helps.
You could use "webkit to image" wkhtmltoimage: https://code.google.com/p/wkhtmltopdf/ I've used it to generate images from javascript graphs and tables etc. Any html will work. Its not purely javascript, but you could send the html div (and relevant css) to the wkhtmltoimage and get the image back via ajax.
i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?
You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.
You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.
Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.
i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...
This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.
I've been googling and trying this for a good while now, but comes nowhere. So here goes:
What I want to do is to drop text on a DIV tag and handle that with JavaScript. Something along these lines:
<script type="text/javascript">
function handleDrop(sender, args)
{
$('#theDiv').html(args.textfromdrop);
}
</script>
<div id="theDiv" ondrop="handleDrop()" />
<br/>
<p>
This is some simple text. Draggable?
</p>
So, on this page I want to be able to drag contents from the paragraph for example to the div and it would handle the drop and change it's appearance accordingly (Or maybe just display that text, as long as it would handle it!). I've been trying with jQuery, but it seems to be a whole other model, and I can't set all my potential draggables as such because they should be able to come from everywhere. Is this even possible?
EDIT: Please correct me if I'm wrong, but these droppables all require a draggable to be dropped at it, right? What I would want is that you can drop text, pure text, from a page that you don't have any control of. This might sound weird, but it's for a firefox extension where you can drag content from a page to another page that resides in the side bar.
I would recommend using an established Javascript Library such as jQuery or YUI.
Have you considered creating a hidden textarea (ie with css style visibility:hidden) overlapping the div in question? Then check for drops with the onchange JavaScript event, or if that doesn't work, periodically the textarea's value for non-empty strings. I'm guessing your mileage will vary depending on the browser and operating system.
Or if you prefer Prototype like I do: http://wiki.github.com/madrobby/scriptaculous/droppables
EDIT: Based on your revised question: No, there's no way to allow a user to drop text from one page to another page. Not unless you do decide to build a FireFox extension like you were saying. Even if you could find a way around the security issue where you cannot script a page that's not under the same domain, you can only drag and drop DOM elements within the window/iFrame they're in.
I have done this before and it CAN be done without any library with some effort.
I've built the following methods:
Method that tracks your mouse movements.
Method to read and pass the content when you drop.
Used onmousemove and onclick events for the drag and drop methods.
OnMouseOver for the div area where you'd like to drop the text - to detect whether the pointer is over the container (div) or not.
Finally after dropping the text I deleted the original content (if needed) using innerHTML so it looks like it has been moved.
You can pretty much achieve a Windows like drag and drop functionality with this. I used it for drag and drop images, icons, etc.
If you need help with the coding I can give you some guidance, but most of it you will find if you Google around a little, then all you need to do is make them work together.