I'm using the jQuery slideshow plugin, and my 'slideshow' div naturally contains a handful of images. My objective is to add the ability for a user to rate the image, using either a radio or select widget.
Since I'm not using a sophisticated back end, the widget for each image must be generated on the fly in jQuery.
Each of the child elements of the slideshow div are naturally imgs, so it isn't clear to me how to append a form field to it using jQuery.
Thanks much in advance.
Wouldn't mind some html to give you a better answer:
try:
$('img').after('<input type="radio">'); //with realtion to your image
$('img').parent('div').after('<input type="radio">'); //with relation to the parent div
For starters...you could also try .appendTo, .add, .append...it depends on your container and how you want it displayed....Post some html for an exact answer. maybe even .before, .prepend, etc...again depending on what you really want to do...
I agree with karim, look those tags up to see which is best for you (i.e. do you want it in your div after your div, etc.)
Related
I'm creating a login form on top of the header. But when user is logged in, I want the form to disappear. I will check if user is not logged in, if so then I should add the form. But I want to do it in the javascript.
The simple answer to what you're asking is to use jQuery's append() function.
The problem with this is that you will need to insert it all as text, which is going to become a maintenance problem. Definitely.
The better way is to insert the div and hide it by default using display:none and to programmatically set it to display:block when needed.
If you use something like Angular, you could also include the div by inserting the template when needed. But the use of display for this purpose is very widely accepted as the right way.
Edit:
Since you're using load() already for some parts of the page, you could probably do the same here.
Add a container tag to the HTML:
<div id="loginContainer"></div>
Add the nested content like this:
$("#loginContainer").load("http://some.url.com/path");
Hide it again with html()
$("#loginContainer").html("");
I doing kind of special purpose html editor.
I have an TreeView of html tags hierarchy on the page.
I want to make html elements selection when I change selected node in TreeView.
For example, if I selected div or table or button in TreeView, I want to make that element look like selected on the page shown right near TreeView.
How could I do that? Changing element bgcolor is kinda not good in rare cases, when element do not support it. Would be perfect to show bold rectangle around selected element, but I don't know how.
I know how to invoke JS from WebBrowser, I ask about JS solution. Some ideas for what function like that would do:
function SelectObject(element_id)
{
}
I want smething like that:
If you're happy with background color change, use it. For elements which does not "support" background change, use element-type-specific thing, which you can implement later.
Or, you should use an overlay. There's an article how to find out position of elements http://www.codeproject.com/Articles/35737/Absolute-Position-of-a-DOM-Element
I don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks
For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.
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 building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.