How to create a Mootools tooltip information while focus on a text feild like http://vadikom.com/demos/poshytip/#form-tooltips
Thanks
You may find this useful:
http://mootools.net/forge/p/floatingtips
It's a plugin I developed some time ago. You can see a demo using it for text fields focus here:
http://jsfiddle.net/X37C9/
It works with Mootools 1.4 and 1.3.
I made very minor adjustments to an old script by Ryan J.Salva corresponding to your request:
http://jsfiddle.net/ghazal/K7uaQ/
PS : changes commented and only for mootools 1.4.2 with compatibility. Hope it'll help.
There are various ways to achieve something like this.
The simplest would be to create a hidden element after the field, once you focus a field, fetch the element with the tooltip, and animate the position and opacity with Fx.Morph. On blur do the opposite.
Another way would be to create a single element at the bottom of the page, then fetch the position of each field with getCoordinates, adjust the position of the tooltip, inject the tooltip text from, say a data-tooltip property of the input, animate it to appear.
Using JsFiddle to prototype a solution would be the easiest.
Related
I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
I'm trying to change the attribute, "scrollamount" to 0 in a javascript function for a Marquee Tag. However, it seems to have no effect on the scrolling animation. My original settings are set to scroll up at a scrollamount of 4.
I've tried to change it in Javascript with:
document.getElementById("ledtxt").scrollamount="0";
and without quotes
document.getElementById("ledtxt").scrollamount=0;
The strange thing this is if I try to change the "direction" attribute it seems to respond.
document.getElementById("ledtxt").direction="down";
If I to change the attribute "behavior" to alternate, the text disappears. I think its there somewhere but is getting pushed, for whatever reason, out of the DIV container
document.getElementById("ledtxt").behavior="alternate";
I'm new to this and I'm trying to understand. I feel like this should work in theory based on the things I have read about changing attributes and it seems to work for one attribute but not the others. Any help would be appreciated.
Here is my codepen:
https://codepen.io/Pacman0006/pen/rNaRZNJ
Marquee cannot change direction while running. You have to stop it, change direction then start again, but it will start from the beginning
This said, marquee is deprecated.DO NOT USE IT.
You can (and should) use CSS animations, like shown here:https://www.quackit.com/css/codes/marquees/.
Once implemented, you can use javascript to change the css animation.
If you are trying to stop the animation change this:
document.getElementById("ledtxt").scrollamount=0;
to
document.getElementById("ledtxt").stop();
You can also restart with:
document.getElementById("ledtxt").start();
I'm aware that for input and textarea tags you can specify autocapitalize as off. Is there a way to do this when you are using a content editable div, as they do not have the autocapitalize attribute?
I have seen similar thinks achieved elsewhere, on the likes of online code editors. The orion editor for example uses an editable div and doesn't suffer this problem.
I have found a workaround to this. I fill the content editable with a zero width space () that the user can't see. Then when they tap and start typing, no auto upper casing!
Add this to the divs style :)
text-transform:lowercase;
I hope this helps!
EDIT
Okay now I understand fully. In an editable div this is not possible to achieve. The variable for this function cannot be controlled by HTML or JS. This is hardcoded into the objective-c of IOS. Nothing can change this unfortuatnly. The only way you could possible achieve what you are trying to do and that is to change the div to an input field, and then use the auto-capitalisation: off.
Apologies its not good news but I hope this helps!
I've searched quite a bit, but all results reference using a custom image. I'm working with fluid layouts/retina displays and I'd like the button to be purely HTML/CSS.
Does anyone know a workaround/method?
Without seeing some code, I'd say hide the image with jQuery, then again use jQuery to create a new element with whatever content you want inside what I presume is the anchor tag used.
If javascript isn't supported, it'll show the image, if not, it'll show your new element (which you can style accordingly)
edit: ok, some clarification... use jquery to hide the existing input type="image"... then use jquery again to create a new input of type submit, do whatever you need it to do
Here's a fiddle to explain: http://jsfiddle.net/erinfreeman/PFZY8/
If there's a better way of doing it, I'm all ears. As below, I don't think jpann can add any additional code else it would simply be a case of hiding the existing input field and adding another.
Hi I was working on a project and the client wanted custom paypal buttons. I found a great site that provided custom code for the button: http://www.daddydesign.com/wordpress/how-to-create-a-custom-paypal-button-without-images/
You simply replace the input type="image" tag with an input type="submit" and style it. Hope this helps.
Please take a look at this nav menu
Currently it looks like below
What I'm trying to achieve, is result shown below (I made this on Photoshop)
Is that possible to get this result with CSS3? If yes please help me. Can't figure out, how to get this result
Here we go
http://jsfiddle.net/DBzSD/11/
I have used CSS pseudo elements to display them you can replace with normal elements if you want but that wont be a very wise choice.
Secondly i have used the data-attribute to show the value of the number , you can dynamically change the number with very minimal amount of javascript and that will automatically change the numbers shown in the box :-)
Hope that helps ..
Sorry i failed to find out your hover effects :-(
I can't find where you specify the border on the hover event, but I would make the green line part of the div, and then use the triangle as an image inside the div.
Have a look at this fiddle http://jsfiddle.net/Neograph734/DBzSD/8/