I know it's probably jQuery, I just can't figure out how to do it. How do you get the login inputs to appear like that when you select login?
dropbox website
Can someone give me possibly some demo code that they have describing the process? All i can think of is setting a div hidden and than showing it, am I wrong?
you are right. And this is basically the only thing that happens.
I would do it on hover not on click. Its just a wasted click...
and in this case you don't need any jQuery to do this.
Just hide the loginform and show it on hover.
Here is a demo:
http://jsfiddle.net/sXmAe/
if you really want it to happen on click, change all :hover to :active
Related
So basically my goal is to code my own ReCaptcha. To make that possible, I'd like a window to come up once I clicked a button to send a form or something like this. In best case it looks like this, but with my own content inside. Is it possible to do this with just one js-script, or with adding a few divs?
I think you can use jquery modal.
check the following link https://jquerymodal.com/
official docs can be found at
https://jqueryui.com/dialog/
Need help with the "our team" section halfway down this page: http://dev.doubleaevents.com/
When you click an image it opens to reveal more information. I'd like to be able to click another image and have the previously opened image collapse, so that a user can't open more than one image at a time.
Would also like to know if making them slide out to the right (instead of down) would be a simple fix?
I'm a js novice so any explanations are appreciated. Here's the js file for quick reference: http://dev.doubleaevents.com/wp-content/plugins/portfolio-gallery/assets/js/view-toggle-up-down.js
Try adding this:
jQuery('.portelement').each(function(){
if(jQuery(this).hasClass('large')){
jQuery(this).removeClass('large');
jQuery(this).animate({
height:240
},300);
}
});
before:
jQuery(this).parents('.portelement').addClass('large');
In your javascript code.
When you click an item you basically want to search for elements that are already open. Then from there remove the 'large' class name and close that element. From there you continue on to opening the selected element. Thats what this code does.
As far as your other question, it shouldn't be too difficult, just mess around with the animate method and css. But maybe look into the isotope documentation. There may be an option for that.
I am trying to make a bookmarklet to allow me to select all my friends in the dialog to create an event on Facebook. Examining the source with Firebug shows the following:
The div container for each person gets a new class label of
selectedCheckable
when it it is clicked, So I have written this like of JS to try and select all the div's and give them this class:
$(".checkableListItem").addClass("selectedCheckable");
This works in selecting them, however when it comes time to press the "Save and close" button, the changes do not seem to have any effect in selecting all the friends to add to the event. It seems that FB has a different way of marking the friends that have been selected to add to the event. Would anyone be able to point me in the right direction so I can accomplish this? Thanks in advance, RayQuang :)
May I advise instead of making your own couldn't you just use one of these Greasmonkey scripts?
http://userscripts.org/scripts/search?q=facebook+invite&submit=
That's what I was doing and it was working for my events. Let me know if it works for you.
How do show pop up help messages in jquery?
I.e You might want to let the user know about a new feature, or might want to provide the user with help on how to use a feature.
Your best bet to get started would be the jQuery Dialog which is part of jQuery UI. That can give you basic message abilities
You could use a popup lightbox plugin, there are plenty available, but I'd recommend FancyBox because it's flexible, easy to use, and looks quite professional. You can them to display any content, including simple text, buttons, forms, iframes and images.
Have a div element hidden. Position is absolute, z-index to something greater than 0 (css).
Onclick on some button or something, have javascript change the display of this element to block.
I'm interested in alert boxes such as,
http://www.visual-blast.com/javascript/nice-alert-box-with-jquery-impromptu/
and
http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html
but with a different functionality, the user should be able to interact with the page even with the alert box present, so it needs to be movable and not obscure the underlying page, as in this example,
http://www.open-lab.com/mb.ideas/index.html
Alert box should be generated automatically on page view plus the title and message of the alert box should change with each page refresh from expandable library.
Is there anything out there like this?
Thanks
Sounds like the jQuery UI dialog widget might do what you need?
http://jqueryui.com/demos/dialog/
Here is an example with mootools. You easily can extend any element on the page to be draggable. You may use this plugin as a sample of alerts and you'll just need to remove some functionality and add make it draggable.
There are few custom dialogs in moo.rd. One of them is the Custom.Alert:
http://www.moord.it/examples/custom_alert