I want to change the appearance of the web page according to an input is focused or not, If it is not focused, it will display something and if it is focused, replace something with another things simultaneously.How can i do that that?Can it be done with PHP?
Thanks
You will definitely have to use JavaScript for this if your making changes beyond changing styling of the checkbox. If its imperative to get information from the server on focus you could make an ajax request to a php file to have data returned. The link below is an example using JavaScript and onfocus to change a div elsewhere on the page.
Live Demo
Simple snippet.
var check = document.getElementById("YourIdOrWhatHaveYou"),
check.onfocus= function(){
// DO your thang!
}
no, you'll need css, see the
:focus selector
(php is serverside code only, which means it cannot see if the user has put focus on anything, javascript could do it but css would be best in this case.)
PHP cannot do this for you as it is a server side language and doesnt know about focus.
If you want to change the the appearance of something based on focus, #red-X already mentioned the :focus selector in css.
If you want modify the content of the object or others in the DOM based on if something has focus, you'll need to use javascript, the jquery library allows you to use the same :focus selector to detect if an object has focus or when it gets/losses focus.
Related
I have a multi-part form that will use PHP for the server side database insertion. The form needs to be validated, and I intend to use JQuery Validate to display one icon if the section validates, and another if the section does not.
I'm aware of the use of collapsible panels or DIVs. However, I need to use this same collapsible effect inside my form. How can this be achieved either via JQuery or another client side library?
Thanks much!!
Since you're at the point to decide what framework to use you may check the collapsible forms by ExtJS framework, it may give you some initial idea.
EDIT
#SidC: OK, if you're going with JQuery, you'll better not to mess up with Ext. Don't see much pain to implement if from zero using JQuery::Accordion plugin plus the JQuery::DIALOG. And check this feed
JQuery Accordion: how to embedded it into a dialog box?
You can hide inside a form just as easily as outside.
object.style.display = "none"
is the JS.
Wrap what you're showing and hiding in a div and go to it.
Scott is correct, and not only because we share the same name.
Wrap your HTML form in a div, and then use this:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
It's animated too ;)
I hope someone can help!
My website: http://www.richardmilne.net
I have a wordpress site set up to use the iinclude plugin to display individual pages all on the front page. This works great but I don't want users to access individual pages, ie "site.com/page". If a user visits "site.com/page" (eg from a search result), I want them to be redirected to "site.com/#location", have the window scroll to the correct location, and trigger the jquery slider. (see link above)
I was planning on using .htaccess to redirect the page. After that from what I've gathered I need to use a bit of javascript trickery to trigger the desired div to slide open. In my case this is simply a case of changing it's class to "toggle_initial", which the jquery script animates after an 800ms delay on page load. (again, see the link above, which already uses this to load the "recent posts" section when you first visit. Just so you know this is a jquery-UI plugin).
It's the bit in the middle I can't get my head round. What I've read so far tells me I can't do this with php which was my first approach, as "PHP_SELF" ignores the "#location" bit of the URL. This leaves javascript up to the task of changing the div's class, I've found these links which I'm sure contain some hints for me, but as a javascript novice I can't make head nor tail of how to apply them to my site:
Adding a class to an a element with a particular href using hash
doing substring in window.location.hash
Any tips would be greatly appreciated, cheers!
You'll probably want to use JQuery window.location.hash to get any values after the hash tag.
See a few tutorials below:
http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
http://www.using-jquery.com/2011/01/ajax-navigation-window-location-hash/
Step 1. Get the anchor element from the url using javascript. window.location.href
Step 2. Change the class of your target h2 using jQuery. Code assumes that div id and anchor are identical.
$(document).ready( function() {
var anchor = yourCodeToFindAnchor;
$('#' + anchor).addClass('active');
});
I recommend http://benalman.com/projects/jquery-bbq-plugin/
It easily allows you to hook up all kind of jQuery actions to the hash object.
This should get you started: http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
I have a search page on my site. The search pulls from a couple (eventually a few) API from external sources. Sometimes a search can take up to 5 seconds.
Because of this, I would like to load my search page at least with a loading gif, and let AJAX begin to pull the data, showing a bit at a time. (similar to http://gamespot.com although this is a bad example since the search doesn't work with JS disabled)
Of course I have to consider the users who have turned Javascript off, so for them I'd just let PHP do the search and they'll have to bear with the wait.
What is the best way to implement this? If I use <noscript>, then all users still have to wait for the 5 second PHP portion to load anyways.
Would I just have the search form send the user to different pages depending on their JS status?
Perhaps have the noscript part define an iframe that loads the results from the long-duration PHP query?
Would I just have the search form send the user to different pages depending on their JS status?
If you have the users coming to your page, and then sending the form, that's absolutely the best way to go. E.g.:
HTML:
<form id='theForm' action='long_search.php'>
....
JavaScript:
hookEvent(document.getElementById('theForm'), 'submit', function(event) {
event.preventDefault();
loadAjaxSearchResults();
return false;
});
...where hookEvent is a function that uses addEventListener or attachEvent (on IE).
Off-topic: The hookEvent thing, like a lot of this stuff, is easier if you use a library like jQuery, Prototype, YUI, Closure, or any of several others. For instance, with jQuery:
$("#theForm").submit(function() {
$("#resultsTarget").load("ajaxsearch.php", $(this).serialize());
return false;
});
Without JavaScript, you will need to post the data to the server and perform a full postback (refresh) on the page. Just like the good ol' days. ;)
no you apply your js code (autocomplete if i understoof right?) up to an input field. Think of Javascript like an extender. If js is disabled, no autocomplete is extended on the input field. You may put some text, where you say, dude, turn on js otherwise this will be a long search. And if js is on, hide the text
Progressive enhancement:
Build it so the PHP version works, first and foremost. This is accessible to all. Then, add javascript so that, if available, it performs ajax requests behind the scenes to grab the content and update the current page.
See this book as a simple, great read on the subject:
Bullet Proof Ajax
I want to change right click values which clicking on a particular item on a WebPage and make right click values to functioning. I am a PHP developer..
Kindly see the image below
http://2.bp.blogspot.com/_EzIJxJICfGw/TOuRqAkAn6I/AAAAAAAAAHo/cHERiyuPo90/s1600/right_click.jpg
If you use jQuery, you can try http://plugins.jquery.com/plugin-tags/right-click-menu.
You need to look at javascript as this is largely clientside behaviour
Maybe somethign like this jquery plugin
Then you can call php via ajax
You cannot change the default rightclick menu that the browser draws for you. You can, however, prevent the default behavior of the rightclick-event and draw your own menu (made up of HTML and CSS) at the cursor position. This requires some JavaScript knowlege, though.
So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.
So let's say I have an option (all) and an option (only this)
The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.
For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.
((Sorry if is not clear but the facebook example should be clear enough))
Whatyou are looking for a is AJAX/PHP approach.
Clicking on the tab
The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
The server sends back the code. This can be HTML, JSON, XML or similar.
You script recieves the answer, may "do" something with it (like some parsing or similar)
The content will be placed on the page (again, this is possible due to an unique "id"
This is basically the way it is done.
Check out the different JavaScript frameworks. They all come with nice AJAX support:
jQuery
MooTools
dojo
Prototype
And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php
What you're talking about is ajax.
I would suggest a javascript library to help leverage this, like jquery.
It can be as cool as
$.post('serverScript.php',
function(data) {
$('#idOfDivToUpdate').html(data); //shove script data into div
},'html' );
tutorial.