I've been researching this for hours, and I can't get any to work with my coding.
Here is what I have so far: http://brynntweeddale.com/
I want to be able to make ABOUT into a link and click it to replace the image with text, preferably with the image fading out and text fading in.
I want to be able to do this with each link though. I see this on websites all the time, but I just can't figure it out! I'm new to all of this, as well.
Thanks in advance.
It sounds like you need to use jQuery. jQuery is a Javascript library that let's you do things like animations very easily. Using jQuery, you could do something like:
$("#about-link").click(function() { //when "about-link" is clicked, call this function
$(this).fadeOut(500, function() { //fade out for 500ms, then call this function
$("#about-paragraph").fadeIn(500); //fade in the paragraph for 500 ms
});
});
You can find the full jQuery documentation here and a beginner tutorial on javascript here (if you need it).
Related
I am developing a jQuery Mobile application that will run into a Cordova wrapper.
I am struggling to understand the use of each pagecontainerX event and when to use which.
I will post three specific use cases:
1) hook click events:
Say I want to assign a handler to a certain click event on a button.
2) change textual content of the page:
Say I have a page and I want to update some content that might have changed since last time I have shown the page.
3) change graphical content of the page:
Like if I want to draw on some canvas, or in cases where I need to know how things are rendered and their size.
Preliminary answers:
these is what I have found myself, but I would really much appreciate comments:
1) I am using the pagecreate event, as it's only called once. It is also possible to specify what specific page you want to hook the handler to by doing: $(document).on("pagecreate", "#pageid", handler);
2) I am using pagecontainerbeforetransition or pagecontainerbeforehide. Pagecontainerbeforehide has the advantage that is only fired once, while the other is fired twice (dunno why). Other options, like pagecontainershow, will change the content after transition, which is a bit weird to look at.
3) In this case I am employing pagecontainershow, so that things have already been graphically rendered and I can compute heights and widths etc., the drawback is that the user will see the transition, and only after he will see the content of the page being modified.
I'm using color picker from this example:
http://www.7thweb.net/wicket-jquery-ui/slider/ColorPickerPage?2
and I trying force Picker to change color on slide, no on onValueChanged (now it react when sliding end) but I'm fail.
anyone knows hot to do it?
As a general rule, it is a bad practice to send ajax request on mouse move. That's why
AjaxSlider is not designed to handle the 'slide' event; it will send too much ajax requests...
Furthermore, Slider/AjaxSlider are designed to be FormComponent(s). For this to be possible, the Slider component embeds an hidden input and the 'slide' event is - then - used to update the input value as soon as the slider... slides. So you cannot use ColorPicker/AjaxSlider/Slider to achieve this.
You can still do your own (but I am afraid it wont be a FormComponent). If you need to get inspiration, you can have a look on ResizablePanel (& ResizableBehavior). This is one of the simplest component handling ajax requests...
Hope this helps.
I have a jquery UI slider on a webpage I'm working on, but I'm looking to get a tooltip on the slider too. I've been through most of the questions here (searching) and didn't find what I was looking for or I couldn't understand the answer(s).
Here's a sample of what I'm looking for:
Sample UI Slider with tooltip
Here is my slider:
My slider with no tooltip yet
I just created a simple UI slider from the jquery website. Snap to increments. Ideally, whatever dollar amount the slider is on, I'd like the tooltip to display right above it. I'll tackle CSS code later for look n' feel.
and I can't post my actual code, because it has hyperlinks in it, and because I'm a newbie here, this website won't let me make a posting with more than 2 hyperlinks, which I've already used up to show you the sample and my slider.
I believe you are looking for this.
Basically, this tutorial shows how to style the slider and place a tooltip above the slider to get the value of the input.
I'm developing a site where the user will choose a point on an OpenLayers map in a dialog box (displayed using jQuery UI) which will then do something on the rest of the page based on the point chosen on the map. The user can also call up the dialog at any time to pick a new point.
I've got the map dialog and passback of lat/long working just fine, but my question comes to page load optimization. I originally had all of my map code right in my $(document).ready() function with my OpenLayers.js call right in the <head> of the page. To try and improve things a bit, I moved the map code into its own .js file and put the links (<script> tags) to both at the very bottom of the <body> tag. It seems slightly better, though I do notice the navigational elements for the map (zoom controls and such) flash briefly on the screen, I presume before the stylesheet tells them to hide. Is there any way I could force the map to only load when the dialog is about to be displayed, as I feel that a slightly delay there would be more ideal than a delay in the main interface loading (subtle as that might be)? And perhaps more importantly, would it make sense to go down that road? To me, it sounds like it would be a slightly better way of doing things, but I'm open to other opinions there as well.
You could both load OpenLayers.js library and create map in dialog's open event. That way the page will load faster and you'll skip loading OpenLayers.js if user never opens dialog.
var scriptAlreadyLoaded = false;
$("#dialog" ).bind("dialogopen", function(event, ui) {
if(!scriptAlreadyLoaded){
$.getScript("/scripts/OpenLayers.js", function() {
//Instantiate OpenLayers map when script is loaded
//...
});
}
else{
//It's second time user opens dialog so script is already loaded
//and map instantiated.
}
});
I've been meddling with Obj-C for a while now, and even though i have gotten rather familiar with it, I wanted to give PhoneGap a chance since I'm working with a web development team and PhoneGap (if it proves to be strong enough) could liberate me from being the go-to guy when an app gets ordered.
So, my whole day yesterday was studying and examples, I have a pretty good grasp of how it works; Today i am diving a bit deeper though:
1) First of all, i found out that
$.mobile.page.prototype.options.addBackBtn= true;
adds a back button making navigation easier in just one line. Nifty indeed! But, since i have installed the NativeControls plugin, and have an actual UITabBar, with code such as:
var NativeControls = window.plugins.nativeControls;
NativeControls.createTabBar();
NativeControls.createTabBarItem("items","items","tabButton:Items",{"onSelect":
function(){
$.mobile.changePage( "#page1", { transition: "none"} );
}});
NativeControls.createTabBarItem("faq","faq","tabButton:F.A.Q.",{"onSelect":
function(){
$.mobile.changePage( "#page2", { transition: "none"} );
}});
NativeControls.showTabBar();
NativeControls.showTabBarItems("items","faq");
NativeControls.selectTabBarItem("book");
how do I hide the "Back" button when a transition occurs due to the TabBar?
2) Offtopic but it's something I will have to face in the near future, if anyone has any resources of knowledge on how to create divs/#pages dynamically according to the item clicked with a <ul> of <li>s as to mimic the behaviour of a UITableView, I'd be happy if you could share. My model would be something like:
user clicks on category "cell" -> ping server for products or sub-categories or whatever it contains -> construct "on the fly" a new div/#page containing a <ul> of <li>s that are also bound (via their class hopefully) to the same (recurring?) function.
Also, would a "Back" button work in such a model?
Thanks in advance!
First of all, the code you are talking about is JQueryMobile which really has nothing to do with PhoneGap.... I've written multiple PhoneGap applications without ever using JQM!
Either way, I personally don't use the JQM Back button as I've found they can sometimes be confusing (depending of course on your app layout) and not always reliable. I tend to always place an icon with a description for the user of where this button will take them to.
Regarding dynamic pages in JQM, have a look at their documentation where they talk about this.