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
Related
Basically how do sites like picfont work? Or those cake design sites where you have a template and you insert your picture into the frame and add & stylise text to the textbox?
I have an invite ad for a programme, where people put their picture and name and send out a personal invite. So the graphics guy has done the template. Rather than having 1000 people send him their photos and names, I know it's possible to put the template on a web page and have people upload their pictures, do some custom edit and stylise their names.
HOW do I do this, please? I would like some pointers or code I can implement, please. Thank you.
As mentioned, you will need the <Canvas> element for this, but this needs some custom development as well.
I took the liberty of creating a good starting point: https://jsfiddle.net/Zomry/f8to2fyq/11/
This demo loads a background image, can insert a custom image (assumed to be square here) and allows the location of custom text.
You can change this example to whatever you like. You will need to change the background, the positions of the text and the background and whatever you like to change with it.
Good luck with your project.
I'm creating a 1 page dashboard that will run fullscreen on a monitor on which I want to display some graphs. I made the graphs already all I need now is a proper template for the page. I was thinking something like this
I really dig the look but I'm clueless on how to make something like this using presumably css/js. Especially the lines in the background and a titlebox.
First of all, you have to code all of the man div-containers including your graphs and data-visuals. For that, a css-framework could help you managing the different views for all devices (http://getbootstrap.com/).
Later on, you could add inner divs for the title box and the background. Also get yourself some inspiration. For example: this is the admin-theme I am using for my actual project: http://admindesigns.com/framework/dashboard.html
After digging into that, you may ask some deeper questions about styling your Dashboard, so it's easier for us to respond to an actual problem ;)
Cheers,
Chris
I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!
i was wondering if anybody knows (and if there is such a thing) a javascript plugin that can do to following:
on the website http://www.worldofmerix.com/ click on any of the menu buttons on top for eg. "about us"; then you see a line appear in the middle and expand so that you can see the entire div...
I need a similar animation effect, flash is out of the question, so i have to use javascript...
i have some ideas on making it with some "smooth div fade in/out" js plugins, but i was wondering if there is a plugin SPECIFIC to the thing i need?
thanks very much in advance for the anwsers!
Ok, since you didn't state any jQuery "dont-wanting" I'd recommend you to check out jQuery. It is a set of JavaScript libraries that help you manage your HTML and CSS with some light code.
You can see HERE, HERE and HERE how it can animate divs and other elements (I see that it is what you need).
You can check out the official web site and there you can find all kinds of examples and documentation that you will ever need. I recommend you to see THIS (click RUN).
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.