I am a Javascript/jQuery/Prototype newcomer and I have a page that has a Prototype function to get info from a database and put it into some input fields. This was made before I came to work on this site and now I've been asked to add a hide/show div function.
I tried it in jQuery and there were clashes with the two frameworks, (as found in my previous question).
My question now is, how would I go about building a show/hide function in Prototype? I think it will be easier to do it this way than to re-build the info grabber.
The page I want to add this to is here. (the green "ny kunde" button should show the div directly but one below it newCustomer.
I found this resource: Hide show div with Prototype but I have no idea on how to implement it.
Thanks. :)
You can use jQuery by following these instructions to stop from clashing with other libraries.
Prototype provides the Element.hide() and Element.show() methods which means you can hide a div with ID #hello with:
$('hello').hide();
Related
I have a list of elements that need to have a corresponding pop up for each element. This is not a pop up where the background is blacked. This is more like a javascript alert although I need to create my own styled button within the pop up with our own bespoke event assigned to it. I need each pop to position itself appropriately next to the relevant item within the UI.
Whats the best way to do this? Are there any examples please? I only want the pop up to show when the visitor triggers an event.
Many thanks,
I suggest you to use Colorbox for pop-up systems. Fırst of all; it is easy to learn and use.
And most importantly: Colorbox won't create conflicts with your other plugins (sometimes fancybox does that).
Some Features:
Supports photos, grouping, slideshow, ajax, inline, and iframed
content.
Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
Appearance is controlled through CSS so it can be restyled.
You can easily do this without using jQuery Plugins.
I put together a little example.
What about http://jqueryui.com/demos/dialog/#modal-confirmation
or http://jqueryui.com/demos/dialog/#modal-message
when you click on an empty space in Google Calender in order to add an event or when you click in an already placed event you will get a very nice popup having info about the event (please see attached image).
How can I create a similar pop up windows using CSS and Javascript (I prefer jQuery). I am also using Bootstrap if that helps.
Please notice that the popup position depends on where I will click so let's say that I have an html table and depending on which I will click the popup will be generated near to this position and will point to that specific .
Also notice the close behaviour (close button and if I click out of the popup it will close).
If there are more than one good answers I will accept the simplest one that works with jQuery (and jQuery UI) and Bootstrap - I'd grateful if not other frameworks were used.
Thanks !
There is a plugin called jquery tip-tip which might do what you are after. You essentially want to display some HTML above the area you have clicked. Tip-tip can display html as a 'bubble' above the point you have clicked. It's also easy to style. It is mainly used for tooltips but I see no reason why it can't be adapted to do this.
http://code.drewwilson.com/entry/tiptip-jquery-plugin
(p.s. you would need to use the 'content' property to set the content)
"content: string (false by default) - HTML or String to use as the content for TipTip.
Will overwrite content from any HTML attribute."
I assume that you are talking regarding the tooltips here is link which will help you
http://jquerytools.org/demos/tooltip/index.html
http://coding.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
http://craigsworks.com/projects/qtip/
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/
The other answers contained links about tooltips. However, I believe that a dialog component like the jQuery UI dialog would match your requirements better.
Perhaps this did not exist back in March when this question was asked, but current version of Bootstrap has popovers like the one in the question. See:
http://twitter.github.com/bootstrap/javascript.html#popovers
You can use FireBug to analyse the page and check the actual values for CSS properties (ie. what colour is the border, or how much padding is there).
Been working on an App and since it's getting a bit too big I've thinking of ways to improve memory management since the app runs mostly on Javascipt. So every time a navigation item is clicked I would call the jquery empty then show the html via ajax. ex:
//$.ajaxSetup(); called before this
//$this is the attached element
$.ajax({success:function(data){
$this.empty().html(data.output).fadeIn(400);
//more javascript stuff like loading tinymce or jquery ui
}});
is this enough to prevent memory leaks? I'm not entirely sure what empty does but I'm assuming it removes all DOM elements within that div along with any other objects and events? btw. You can find the app here http://webproposalgenerator.com/ and http://webproposalgenerator.com/demo.
any tips on improving the performance/security or any feedback at all would be greatly appreciated.
$.fn.empty should be enough, it deletes all data and events associated to the elements and then deletes the elements. It also calls .widget("destroy") on all jquery-ui widget.js based widgets that are defined on those elements.
It is also important to note that jquery's $.fn.html method calls $.fn.empty() on the given element before appending html, therefore, if you are using $.fn.html, you don't have to call $.fn.empty
actually my guess was that .html implies .empty anyway, also I'm not sure that's true. for the perforamnce part: according to jqfundamentals excelent book it is a recommanded best practice to add content while the element is in .detach() from the DOM. tried to lock at the code for advice but didn't find it. nice site btw
The following zip contains the website html and required files: http://dl.getdropbox.com/u/4281191/login.zip
When you hover the html (html:hover) you see a animation that transforms the container into a loginbox, I want that to happen when I click on "Login" at the "Hello, Guest" menu instead.
Anyway to get this done? I'm new to js...
Additional info:
the css is inside the html,
and the css3 animation gets triggered by:
html:hover id/class {
property: value;
}
Thanks for any help!
And I can't vote at comments since I don't have enough reputation...but I could do some free design work for the person who helps me ^^
I still don't know much about animations, but for what matters here, you could use something like the .classname:active or .classname:focus selectors. But as soon as you click something inside it (e.g. a text box), the style will disappear.
So, for this, it really depends. Do you just want a menu that has links that take the user to another page (for this case, you'll be fine) or do you want a login form (for this case, forget it, use jquery)?
For today and future reference, save this link because it'll be your best friend:
http://www.w3.org/TR/selectors/#selectors
Update
Yes, I hovered but I didn't look at the code. I looked now and, unfortunately, the answer is no. You can't affect some upper level object like that using CSS.
For that use jQuery. The simpler way would be use jQuery to add a class to the element you want to change (like $("#the-object-id").addClass('class-name')). To keep the effect add the duration argument. Read this page about Adding a class using jQuery.
I'm having a problem with the jQuery hide() and show() methods. Below is a snippet from a project I'm currently working on. This code comes from a multi-page form which is loaded in it's entirety, then jQuery is used to show and hide the various pages. I should metion that this technique works in every broswer except IE7.
//Hide all pages of the form
$("#client_form div[id*='client']").hide();
//Show just the first page
$("#client_form div#client1").show();
The issue is not that the hide() fails but that the subsequent show() doesn't bring the desired page back. I've tried using different methods like slideUp() and slideDown(), I've tried doing css("display","none"), various other ways to perform the hide/show.
I've also tried chaining methods, doing callbacks from hide to then show. Nothing seems to work properly in IE7.
Any thoughts oh mighty Stack Overflow hive mind?
Many thanks,
Neil
Have you tried just using the id(s) of the DIVs? Since they are unique to the page, you shouldn't need to make them relative to the form.
$("div[id*='client']").hide().filter('#client1').show();
Note the chaining so it doesn't need to retraverse the DOM, but simply filters the elements that it has already found.
What about just:
$("#client1").show();
Not sure that's it, but give it a shot? IDs should be unique so no need for the hierarchical selectors.
have you tried adding a class to all the divs you are trying to hide, and hiding that class.
Also change your show selector to use $("#client1") instead of that huge selector.
Have you done a simple test to make sure that your second jQuery is returning the correct object(s), if it's returning anything at all? eg:
alert($("#client_form div#client1").length);
or
alert($("#client_form div#client1").get(0).innerHTML);
or
alert($("#client_form div#client1").eq(0).text());
etc?
This would be the first place I would start - you'd then know whether you had a problem with the show() method, or the behaviour of the jQuery selector.
You might also try running your final HTML markup through a validator to see if there are any errors. IE7 is more strict than most other browsers.